整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
有沒有打開網站，或拿起小冊子或傳單尋找一些信息，卻感覺不可能找到你要找的東西？
你可能會看到一個混亂無序的信息混亂，你甚至不知道從哪里開始 ，因為你的眼睛沒有看到設計的路徑。
作為設計的消費者，我們都可能在某個時候體驗過這種情況。但作為設計師，確保我們的設計布局不能出現這種情況，否則讀者急于在瀏覽器中點擊后退按鈕，或者沮喪地丟棄傳單。
那么好的設計的關鍵是什么？好的版面設計要從強大的構圖和良好的流程開始。
構圖：設計師的定義
構圖指的是：你設計的所有元素被安排創建一個有凝聚力的整體。您可能添加到設計中的實際元素，如排版、照片或圖形，但是也會考慮“布局的整體視覺效果”（如白色或空白空間，對齊和邊距）的“不可見”元素，或者您可能用來安排設計的任何框架（如網格，黃金比例或三分法則）。良好的構圖應該以一種有意義的方式，在視覺上引導觀者的思考。
作為流程的一個簡單的例子，這張名片有一個明顯的向下移動（箭頭形狀的幫助，從字面上指出），其信息從上到下按重要性排列。
這種構思，關于如何將布局拼湊在一起的思考和有意識的行為，是一種適用于許多不同類型的視覺藝術的技巧，像繪畫、攝影。
現在讓我們看看傳統上用來創建有效的，視覺上吸引人的作品的一些工具和技術。
可視重量和平衡：創建一個清晰的層次結構
一個好的作品，不僅僅是一個整齊排列的形狀、顏色和文本的結合體。每一個設計都有其目的，并向讀者傳遞信息，而且一個精心策劃的組合可以考慮設計中最重要的信息，并以一種合理的方式強化信息。通過其重要性來安排信息的過程通常被稱為建立層次結構。沒有層次結構（或不適當的層次）導致了一個混亂的設計，沒有視覺流動，我們不想看到這樣的作品。我們來看看兩個關鍵要素：明確的層級，焦點和平衡的組織：
01.選擇一個焦點
一個聯絡點將人們吸引到您的設計中，并讓他們有機會開始審視您的作品。如果觀眾只有幾秒鐘的時間瀏覽一下你的設計，你留下一個印象或者記住一些信息，那會是什么？這個重要元素應該是你的主要焦點，為了確保它是人們首先看到的東西，你需要找到一種方法來強調這件作品，并使其成為布局中最明顯的部分。
該怎么做呢？通過視覺上的焦點來增加重量感。當設計元素具有視覺上的重量時，乍一看是最突出的。它在視覺上是“沉重的”，使得它在整個布局中體現出來了——你可以立刻知道它是重要的，它通過與外觀相關的東西吸引你的注意力，通常與其余的設計形成對比。有哪些技術手段使設計版面上能體現視覺焦點重量感？有很多可供選擇，包括但不限于：
? 尺寸
? 形狀
? 顏色
? 質地
? 位置
我們來看一些例子：
把圖片文字放大尺寸。版面設計上中最大的圖片或者文字，可能是人們看到的第一件事。但是，有時僅靠大小還不足以使您的焦點可見; 確保你知道它是如何與設計的其余部分相互作用的。與下面的海報一樣，在你的焦點周圍作留白處理，這樣常常有助于引導讀者的眼睛。
吸引注意與不尋常的形狀。以下廣告在多個層面上是一個有趣的作品。它首先用一種不尋常的形狀捕捉到你的眼睛，這就是吉他的輪廓。這種形狀引導你的眼睛到吉他的“頸部”，“頸部”是由廣告的正文形成的。所有這些設計選擇 ——吉他的形狀，士兵的照片，文本所講述的故事 ——以一種視覺引人入勝的方式支撐整個版面設計的構成。
選擇突出明亮的顏色。下面的網站設計將鮮明的霓虹綠色應用于號召性用語（“下載應用程序”按鈕）。即使按鈕不是頁面上最大的對象，但是由于使用這種明亮顏色的緣故，它首先吸引了你的注意力。
添加紋理。下面的廣告提供了復古外觀的紋理，增加了額外的視覺效果，但也轉移了設計的某些部分的注意力。請注意，“印刷店”的顏色深淺如何幫助這個詞語脫穎而出。“免運費”中的“免費”字母并非完全平穩穩定，也引起了人們的關注。
重要視覺元素的位置。為您的焦點選擇正確的位置，將確保其用于將讀者吸引到您的設計中。作品的左上角和中心部分都是常用的選擇，但最有效的地方將取決于每個項目的具體情況和要求。
02.平衡和組織其余部分的設計
當焦點進入到讀者視線后，需要按照他們可以輕松瀏覽其余布局的方式進行組織。這是層級真正起作用的地方，在讀者看到你的設計時，好有一個清晰的途徑。他們的眼睛是否應該向下移動？跨越？從一個部分到另一個？
設計中的非焦點部分，如何從焦點流向其他層級的途徑，將是成功構圖的關鍵。您可以使用我們已經討論過的一些技巧，通過布局指導讀者，但是大多數設計都將受益于整體結構或組織原則。而不是隨意地將元素投射到您的設計中，并希望它變成好的，對于構建您的構圖而言，考慮周到和有意為您的讀者創造一個更有用和更具視覺吸引力的體驗。讓我們看看一些常見的技術：
使用網格。將您的設計與某種網格對齊是一種簡單而有效的方法，使事情整潔有序，基于網格的布局的可能性是相當無窮的。
下面的網站設計將網格應用到網站的整體結構以及該結構中，以組織和分離信息（注意每個圖像下面的可見網格線）。其結果是一個干凈，有序的組合，建立一個清晰的方式來探索網站，并找到你需要的信息。
嘗試“三分法則”。三分法則是視覺藝術中的經典構圖技巧，但您可能會聽到攝影師特別贊嘆。為什么？這項技術的支持者指出，當主題（或焦點）完全處于合成的中間時，是常規的和可預測的方法。為了創造一個更有活力和視覺上有趣的作品，你把焦點轉移到了一邊。三分法網格（見下面）是創建平衡但動態組合的捷徑。它將圖像或布局劃分為相等的三分之一，包括垂直和水平六行。這些線條，或理想情況下這些線條相交的四個點是放置焦點的好地方。
這個廣告將焦點（廣告品牌的標志和名稱）直接放在作品的上半部分。還要注意折疊的錢包如何巧妙地暗示著英國國旗的形狀（這個廣告是為一家倫敦的皮具公司制作的），并指出了這個品牌的名字......這是一種被稱為“領導線”的組合技術。
考慮對稱性。對稱性是平衡設計的最大貢獻者之一。在對稱設計中，中心軸的兩側均勻平衡，無論是垂直、水平還是徑向（從中心點輻射，通常為圓形）。即使是不對稱的對稱，也能改善布局的視覺平衡。下面的設計既有垂直對稱，又有水平對稱，所以即使它的裝飾風格有很大的輻射面和變化，它看起來仍然很平衡。
這個活動的海報具有徑向對稱的形式。焦點是指事件名稱的一系列圖像，文字信息從那里輻射出來，平衡了圖像的視覺重量。
留下一些空白空間。設計中的白色或空白區域不是浪費空間，而是平衡構圖的基本要素。留出足夠的空白空間，可以讓您的版面布局不至于過于混亂，并給您的設計元素留下一些喘息的空間。它還提供了讀者看設計時的眼睛路徑，以及在看布局之間休息的地方?——這對保持內容繁重的作品不受壓倒性讀者的影響，尤其重要。
例如，這個網頁內容之間和周圍的空白，讓你的眼睛從一個部分轉到另一個部分，創造一個很好的流動感，它又是一個干凈的、清爽的風格作品。
領導力量：創造運動路徑，引領眼球
主要的線條是文字或暗示的線條，引導讀者的眼睛，你希望他們看到——通常是你的設計的焦點，但有時只是從布局的一個部分或元素到另一個部分。主要的線路路徑可以采取多種不同的形式，包括：
01.對角線
對角線可通過橫跨設計，通常從上到下，從左到右來實現，就像閱讀一本書時眼睛的視線移動方向。創造動感或暗示方向。另一種常見的技術是使用來自相反方向的兩條對角線，將用戶的注意力集中在一個點上。如果你上學的時候，曾經上過一個藝術課，一個常見的做法是畫一條延伸到遠處的道路或通道：兩條對角線從相反的方向出發，開始寬而窄，直到它們相遇被稱為“消失點”的視界，這是行動中的對角線，是構圖中創造深度和視角的最基本的方法之一。
以下網站設計使用此概念來組織其產品圖庫。注意背景中黃色形狀所產生的對角線（以及選擇性模糊）如何在設計中產生深度感。
在下面的例子中，請注意書封面上的主要插圖如何創建一個對著標題的對角線。那么你的目光可以回落到字幕和作者的路徑。這是一個聰明而有效的構圖設計方法，但它也是一個多用途的解決方案，它在視覺上確立了本書的主題。
另一方面，這里的對角線移動不是由實際的線條引導的，而是由設計元素的放置和重疊所暗示的。結果是一個比傳統的基于網格的設計更具視覺吸引力的構圖。
02. Z形狀和S曲線
像對角線一樣，這些形狀為眼睛提供了穿越設計的途徑。Z形符合英文/西文閱讀模式（從左到右，從上到下），是許多版面設計布局的常規做法。
雖然它們在相反的方向上運行，但是S曲線通常在自然界中出現，并且可以給作品帶來流暢的運動感。
下面的網站設計的布局可能是非傳統的，但是它的彎曲構圖引導你的眼睛從一個部分到另一個部分，并且是視覺上感興趣的重要部分。
03.重復線條和圖案
重復可以引導你的目光朝某個方向看去。它可以采用重復的線條，形狀或其他方式排列的方式。重復也可以是強化視覺主題并為您的設計增添節奏感的絕佳方式。即使是重復的文本內容，如項目符號或編號列表，也可以幫助組織設計并賦予其流動感。
以下雜志設計布局通過兩種方式重復對角線和三角形的視覺主題：在單個頁面或點差（引導讀者瀏覽內容）和整個問題（通過整個出版物創造一致性和節奏感）。
04.人眼的凝視
當一個人的面孔出現在版面設計中，特別是使用人物面部攝影作品時，讀者一定會注意到?——我們的大腦喜歡尋找臉部。創建細微領導線的一個有效方法是讓照片中的主題朝向設計的焦點。讀者也會跟著走，看著那里。
在這本雜志封面上，照片中的人似乎正在審視描述問題內容的文字。但是閱讀文本會引導你回到照片。這種循環交互使您的注意力集中在封面上 ——這是一種很好的技巧。
對你而言
學習設計作品的一些有效技巧，可以幫助您在設計美學和功能方面水平得到提升。
本文由海空設計翻譯整理，轉載請注明：【海空設計】版面設計構圖的原則
【原文地址：http://www.haiko.com.cn/html/zhuanzhu/zazhi/2017/1228/730.html】
德經第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導致自身的混亂。結合我親身經歷，更容易理解這句話的意思。
有一段時間，我們天都學習10個小時，這種情況一直持續了大半個月。可是效果卻幾乎等于沒有，這段時間內每天都會有大量的信息涌入你的腦袋，在學的那一刻，你感覺你已經完全會了。但是過個一兩天，你卻完全不記得你到底學過些什么，像失憶了似的。
艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個緩慢的過程，想要對某一知識記憶深刻，就需要不斷地重復練習。直到隨時隨地拿來就用的地步，你就再也不會忘記了。
為什么說少則得，多則惑呢？每天只學一點，練習好幾遍，把這個知識點刻到腦子里面去，這樣日積月累你會發現你已經學會了很多。每天學習很多知識點，很少時間去練習，過段時間你會發現你什么都沒有記住，到用的時候根本想不起來，還得返回頭再去學習一遍。徒增學習成本，也就是多則惑的道理。
好了言歸正傳，今天我們來學習html中的表格和表單，這兩個可不是一個東西哦。
表格：excel表格知道吧，橫行豎起列的那種表格。看圖：
上面是一個9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標簽來實現一個5行3列的表格。
上圖中table標簽表示這是一個表格，tr表示一行，圖中我寫了五行，都用紅圈標注了出來，每個tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。
在瀏覽器中的效果：
和我們想象中的樣子好像有點不一樣，沒有格子，這是因為我們沒有設置的緣故，table標簽允許你通過border屬性來設置邊框（也就是格子），那我們來給它設置一個邊框吧。
通過給table標簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：
還是有點別扭，我腦海里面的表格應該是和艾賓浩斯記憶曲線的那張表格一樣才對啊，現在的這個表格有點鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關羽”、“男”之前有距離，如何把這個距離去掉呢？我們可以通過table標簽的cellspacing屬性把距離去掉，試一下：
加了cellspacing="0" 屬性后，瀏覽器中的效果如下：
當然了， table標簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們設置成20試一下：
瀏覽器中的效果：
cellspacing屬性的值應該取多少，按照你的需求來設置就好了。
現在還有一個問題，我覺得每個單元格的太小了，也就是“關羽”這個格子的邊框和“關羽”這兩個字貼得太緊了，一點都不好看，我們可以讓他稍微有點距離，那樣看起來應該比較美觀一點。這個需求可以通過table標簽的cellpadding屬性來設置，其實也就是設置內邊距，關于內邊距的概念我們在《踏上編程之路的必經之路之html篇三》中講解過，如果忘記的同學可以返回去看一下。
我們將cellpadding設置為10，在瀏覽器中的效果如下：
現在整個表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標簽允許你調整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標簽的width屬性來調整表格的寬度：
調整表格的寬度為600，瀏覽器中的效果如下：
表格中的文字現在是左對齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對齊（右對齊），文字的對齊方式可以通過tr標簽的align屬性來控制：
注意文字對齊方式，是給tr標簽（也就是table的行標簽）設置了align屬性，不是給table，不要寫錯地方了。align="center"就是讓文字居中，align="right"就是讓文字右對齊，如果不寫，默認是左對齊。
設置了文字對齊方式后，瀏覽器中的效果如下：
最我們整體調整一下，我需要有邊框（border="1"，設置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設置成其它值就是有距離），內邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統一都是居中對齊（table標簽的tr標簽上面設置align="center"）,整體設置后的代碼如下：
瀏覽器中的效果如下：
其實table標簽也有一個align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊，有興趣的同學可以自己嘗試一下。
最后提醒一句，代碼中的各種標簽和標簽的屬性還有單雙引號，都必須是英文的，如果你寫成中文的，是不正確的。
舉個例子：
良好的行動力，是成功的一半，動手練起來。
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
作為程序員的我們，書寫代碼也需要大量的技巧。一份良好的代碼能讓人耳目一新，讓人容易理解，同時也讓自己成就感滿滿。因此，在這里簡單的整理一些CSS開發技巧，希望能讓你寫出耳目一新、容易理解、舒服自然的代碼。
CSS實用技巧第一講：文字處理
本小結主要是圍繞css對文字處理的技巧，有興趣的小伙伴可以收藏一下。
CSS最常用的對齊方式，居中對齊、左對齊（默認）、右對齊，而且實現起來也是非常的簡單。
如下：
p{
text-align: center;
text-align: left;
text-align: right;
}
但是兩端對齊你有用過嗎？
只需要添加text-align-last:justify樣式即可。請看示例：
<div class="justify-text"> <div class="li">賬號</div> <div class="li">密碼</div> <div class="li">電子郵件</div> </div>
scss樣式
.justify-text {
.li {
padding: 0 20px;
margin-top: 10px;
width: 100px;
background-color: #f13f84;
line-height: 40px;
text-align-last: justify;
color: #fff;
list-style: none;
&:first-child {
margin-top: 0;
}
}
}
CSS實用技巧第一講：文字處理
現代書本上的文字都是從左到右的順序排列，但是古時候不同，文字都是從右至左排列的，現在在很多古籍、牌坊、石碑等上面依舊可以看到從右至左的文字。
css也可以調整文本排版方向，是通過什么屬性控制的呢？
writing-mode 屬性定義了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
下面看具體示例：
<div class="bruce flex-ct-x"> <div class="vertical-text"> <h3>詩經</h3> <p> 死生契闊，<br> 與子成說。<br> 執子之手，<br> 與子偕老。 </p> </div> </div>
scss樣式
.vertical-text {
writing-mode: vertical-rl; // 文字排版方向
h3 {
padding-left: 10px;
font-weight: bold;
font-size: 18px;
color: #d60f5c;
}
p {
line-height: 30px; // 行間距
letter-spacing: 7px; // 文字間距
color: #ee1166;
}
}
CSS實用技巧第一講：文字處理
文本從右至左排列
<div class="reverse-text"> 紅豆生南國<br/> 春來發幾枝<br/> 愿君多采擷<br/> 此物最相思 </div>
scss樣式
.reverse-text {
font-weight: bold;
font-size: 30px;
color: #f13f84;
width: 200px;
letter-spacing: -70px; // letter-spacing最少是font-size的2倍
}
CSS實用技巧第一講：文字處理
文本溢出處理不管是PC或者是H5，都是非常常見的，非詳情頁面都會經常用到。
文本溢出處理分為：單行文字溢出 和 多行文字溢出。下面看看具體示例：
單行文字溢出
<div class="ellipsis">昨夜雨疏風驟，濃睡不消殘酒。試問卷簾人，卻道海棠依舊。知否，知否，應是綠肥紅瘦。</div>
scss樣式
.ellipsis {
width: 200px;
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出修飾 ellipsis省略號
white-space: nowrap; // 文本不會換行
}
CSS實用技巧第一講：文字處理
多行文字溢出
<div class="ellipsis">尋尋覓覓，冷冷清清，凄凄慘慘戚戚。乍暖還寒時候，最難將息。三杯兩盞淡酒，怎敵他、晚來風急！雁過也，正傷心，卻是舊時相識。 滿地黃花堆積，憔悴損，如今有誰堪摘？守著窗兒，獨自怎生得黑！梧桐更兼細雨，到黃昏、點點滴滴。這次第，怎一個愁字了得！</div>
scss樣式
.ellipsis {
width: 400px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
CSS實用技巧第一講：文字處理
注意
使用文本溢出處理時，容器一定要定義寬度。
多行文字溢出，scss樣式添加注釋autoprefixer: off并不是為了說明什么，而是，在webpack打包編譯時，如果沒有這個注釋，-webkit-box-orient: vertical會被忽略掉。
在瀏覽器中，當你選擇文本想要copy時，是不是會發現選擇文本會有背景色和文字顏色呢？其實它是可以通過css定義的。
使用::selection自定義文本選擇顏色
<div class="select-color"> <p>紅豆生南國，</p> <p class="special">春來發幾枝。</p> <p>愿君多采擷，</p> <p class="special">此物最相思。</p> </div>
scss樣式
// 全局文本選擇樣式
::selection {
background-color: #f13f84;
color: #fff;
}
.select-color {
line-height: 30px;
font-weight: bold;
font-size: 30px;
color: #d60f5c;
}
// 具體某個選擇器下 文本選擇樣式
.special::selection {
background-color: #00b7a3;
}
CSS實用技巧第一講：文字處理
有空把CSS3及其選擇器和偽元素偽類等知識點復習一遍，溫故而知新。多使用Chrome的DevTools來調試CSS，提示式的填值能發現很多有趣的屬性。多嘗試不同的方式實現相同功能，多實踐。項目中多試用CSS的新特性，不要總是被低版本瀏覽器束縛著，這樣也一直難以進步。在使用JS完成一個簡單的效果前先想想能不能用純CSS來完成。這樣你的CSS技能就能得到穩步提升。
最后謝謝大家的支持。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
