CSS Star Ratings With Radio Buttons
CSS Imageless Star Rating Readonly
CSS Star Rating System With SVG
CSS & Radio Button Star Rating
Apple Appstore Styled Star Rating In Pure Html/css
Standalone SVG CSS-only Star Rating Component
Five Star Rating Field With Animated Hover Effect
一、柵格系統(tǒng)的必要性
二、柵格系統(tǒng)的基本概念
三、柵格系統(tǒng)的分類及計算公式
四、柵格系統(tǒng)在響應式布局中的應用
五、網頁柵格系統(tǒng)的使用步驟
一、網頁柵格系統(tǒng)的必要性
更專業(yè)
使設計有跡可循，具有邏輯性，同時也更規(guī)范，減少設計中的尺寸計算和無效嘗試，設計師可以將更多的精力放在設計本身。
更高效
統(tǒng)一設計規(guī)范，減少決策時間，使溝通更高效。
布局更方便
特別是對響應式布局，能夠使不同設備上呈現的界面更具統(tǒng)一性。
二、柵格系統(tǒng)的基本概念
基本組成:
- 柵格總寬度（W）
- 列（a）
- 水槽（i）
- 外邊距（M）
柵格總寬度(W)
柵格總寬度就是設計內容的寬度，一般來說網頁的頂部和側邊導航、背景裝飾元素、通欄banner和底欄（footer）可以不受柵格總寬度限制。
列(a)
柵格的單位，它們構成了內容寬度。最常用的12列、24列。列的寬度一般會計算得出，或直接自定義，首先要確定的是列的數目。
水槽(i)
水槽是列與列之間的間隔，水槽寬度越小內容越緊湊；越大留白越多，頁面更有呼吸感，但水槽寬度不能比列寬大，否則不利于內容的展示。水槽內不可以放內容，不然的話使用柵格還有什么意義。
外邊距(M)
是內容寬度之外的留白部分，會隨著設備的寬度不同而變化。外邊距一般有個安全距離，可以按照水槽寬度的（常用0.5、1.0、1.5、2.0）倍數來計算。
三、柵格系統(tǒng)的分類和計算公式
a、有邊距的柵格：適合已知要設計的內容寬度（即W已知）
b、無邊距的柵格：適合已知要適配的網頁尺寸，使用最接近網頁內容尺寸的柵格系統(tǒng)。
c、直接等分的網格：已知要設計的內容寬度和列寬及列的數目
四、柵格系統(tǒng)在響應式布局中的應用
柵格系統(tǒng)應用于響應式布局，有三種類型：
- 固定網格布局；
- 流動網格布局；
- 混合網格
在此之前有個斷點的概念，需要了解一下
斷點：是具有特定布局要求的預定屏幕尺寸的范圍。在給定的斷點范圍內，布局會根據屏幕大小和方向進行調整。超出范圍則相當于達到某個臨界點，界面布局會發(fā)生變化。
a、固定網格布局
固定網格，列寬和水槽寬不會改變，只是改變列的數目，當窗口縮放時，排版布局不會發(fā)生任何改變，只有當達到一個臨界值（開發(fā)那邊設置好的固定的值），界面才會發(fā)生改變。在此之前界面排版都是不變的，就像一部分被切掉了。
b、流動網格布局
內容寬度會隨著窗口的縮放而發(fā)生改變，例如圖片會縮小，文本會換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。
c、混合網格
即固定網格和流動網格組合的形式，常用于后臺系統(tǒng)設計、工具型界面設計等。
例如上面的后臺管理系統(tǒng)（dashboard）側邊欄是固定網格，右側內容是流動網格。水槽寬度保持不變。
五、柵格系統(tǒng)的使用步驟
- 確定內容的總寬度W（常用的1180px、1190px、1200px、1400px）
- 確定柵格數目n（如果你的網頁結構相對簡單，則n=12即可，如果網頁結構比較復雜或者具有排版的不確定性，則用n=24。）
- 確定水槽的寬度i（水槽寬度常用的6、8、10、15、20px）
- 在sketch/ps里設置上面的參數即可得到一套柵格系統(tǒng)
Sketch非常方便，在「視圖」-「畫布」-「布局設置」即可得到如下界面設置柵格系統(tǒng)（中文和英文對照）
Ps中「視圖」-「新建參考線版面」，雖然沒有Sketch那么方便，但依然能夠很方便設置出柵格系統(tǒng)，如圖。
本文總結
- 柵格系統(tǒng)組成：總寬度（W）、列（a）、水槽（i）、外邊距（M）
- 計算公式：有邊距網格：W=（a+i）*n；無邊距網格：W=（a+i）*n-i；確定總寬度，確定列寬和數目直接等分
- 響應式布局三種類型：固定網格布局；流動網格布局；混合網格
- 柵格使用三步驟：第一步確定總寬度（W），第二步確定柵格的數目（n），③第三步確定水槽寬度（i）
其他的一些小技巧：
- 網頁中常用100px柵格，也就是列寬與水槽的常見組合（90+10、80+20、70+30、85+15）px
- 網頁中圖片推薦使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）
- 柵格不是固定死的，可以自定義符合當前項目的柵格系統(tǒng)。
推薦一個智能生成柵格系統(tǒng)的網站：http://grid.guide/
有了這個省去了很多計算的過程，可以直接下載下來png格式，放到軟件里面直接拉參考線，就有了一套網格系統(tǒng)，是不是很方便。
原文地址：UI設計進階（公眾號）
作者：阿倩
1 使用光柵來更好的設計圖標
UI界面的圖標通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發(fā)現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。
根據圖標形狀，將它們放在相應的框架中。你就會發(fā)現，方形圖標比三角形或細長圖標更緊湊。
圖標越緊湊，所需空間就越小。圖標的邊緣越銳利，細節(jié)越多，它們占據的畫板空間就越多。
請注意，不要過分的依賴于網格來設計圖標。它們是用來幫你而不是限制你的。如果一個圖標的某些元素伸展出來更好看，那就順其自然讓它們伸出來。
2注意像素網格的重要性
在非視網膜屏幕上設計圖形的時候，要特別遵循使用像素網格，并優(yōu)先選用2像素的邊框作為圖標的線條。因為它可以讓圖標在這些顯示屏上更加清晰。
如果為圖標設置1像素的邊框，這個時候，這些邊框應該使用外部或內部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區(qū)別。
居中描邊的一像素邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊掉。所以，慎用~下面兩張圖是圖標在居中描邊的時候所產生的效果：
根據像素的網格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時候，清晰度會比一些不常見的角度效果會更好，比如13.7°，81°等等。所以，盡量避免用這樣的數值。
3保持一定的圖標細節(jié)
從一套圖標中最復雜的那個開始來設計通常是最有效的，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。
當圖標具有不同的細節(jié)層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。
4控制最小的間隙尺寸
圖標的相鄰元素之間空間在整個圖標集中不應太小或不一致。在任何情況下，都要定義最小間隙，以避免輪廓“粘滯”。比如下方的圖標，太小的間隙，所產生的粘滯感要特別注意：
下面這個則是調整后的效果，是不是好多了？
對于線性圖標來說，圖標線段的最小間隙應該等于線的粗度。另外，線條應該明確的分開或者準確的閉合連接。下圖是從錯誤的例子：
下面這個則是修改后的效果，是不是好多了？
5去除重復部分
在一套圖標集中，你很可能會重復一些細節(jié)，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數學中的分數簡化一樣。您看到的圖形噪聲越少，用戶的理解就越清晰。
比如下方這個郵件收發(fā)主題的圖標，當用戶已經非常熟知自己的具體操作，比如收郵件，發(fā)郵件，回復等等。那就不要在設計圖標的時候反復強調“信封”這個圖形了。將它們簡化，效果反而更好。
此規(guī)則還涉及圖標周圍的各種裝飾，框架，背景。如果它們沒有幫助幫助更好的閱讀圖標，就讓它們更加簡化一點比較好。
6保持圖標風格統(tǒng)一
下面的兩幅圖可以很好的展示正確的和錯誤的例子，比如一套家具的圖標，如果一個圖標的繪制角度是斜45°，那么其他的圖標也盡量保持這樣的角度。而不能一個是正視，一個是斜視。看看下面兩幅圖，哪幅圖是正確的呢？
相同的原理適用于線性圖標和填充圖標。 如果你把它們混為一談，人們可能會認為它們具有不同的重要性或地位。 當然，除非你刻意想要那個。 例如，填充圖標用于鍵命令，線圖標用于其他命令。
當然，我們可以用填充圖標表示當前態(tài)，線性圖標代表非選中狀態(tài)，這樣也是不錯的選擇。
7基于二倍數的度量系統(tǒng)來設計
與基于十進制的大小調整相比，8像素網格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標區(qū)域已成為標準。 如果需要更大的尺寸，可以縮放這些圖標。是時候補習下數學啦！
8保持輪廓的干凈和準確
對于完美主義，設計師不能鉆牛角尖，因為沒有完美的事物。但是在你的最終設計稿里邊，正確的，不扭曲的圖標設計還是非常重要的。特別要注意，確保相鄰的節(jié)點和相鄰的元素是完全對齊或者沒有間隙的。
一定要避免 “8.999 px”或“100.001 px”這樣的尺寸。如果節(jié)點定位準確，圖標邊緣看起來很清晰。這個非常必要，保持整數吧！
9清理SVG圖標中的垃圾代碼
我們都知道SVG圖標最終是一串代碼。在Sketch中生成的SVG圖標通常會包含很多不必要的冗余代碼，比如組，顏色圖層還有遮罩。下面的這個圖標在Sketch中看起來很棒，但是…….
我們把Sketch生成的SVG圖標在AI中打開的時候，你會發(fā)現它的圖層非?；靵y。這些混亂的圖層都可以會讓前端開發(fā)工程師在轉換代碼的時候出現問題。
我們可以把這些不必要的圖層刪除掉，這樣看起來簡潔多了：
10不要把本文當公式
當然，以上我們討論的建議只是建議，他們不是刻板的公式。如果你知道自己在做什么，則可以僅僅把它們當作參考，而不一定要完全遵從它們。設計是靈活多變的，只要符合用戶體驗的規(guī)律，都可以被我們所用。
作者：Slava Shestopalov
原文：https://medium.muz.li/icon-set-3b4fc87dc6b5
翻譯：靜電
]]>表單的目的、內容、大小長度等雖然各不相同，但基本元素比較固定；合理組織這些元素有助于用戶輕松完成表單填寫。
Amazon創(chuàng)建賬戶表單解析
i. 標題：這個元素幫助用戶引導完成表單填寫的整個過程，當你把信息分成很多組來讓用戶填寫的時候，標題就特別有用。例如：個人資料、職業(yè)詳情、財務明細。
ii. 標簽：標簽告訴用戶在任何特定的輸入區(qū)域期望他們填寫什么內容。
iii. 占位符 ：占位符是對標簽進行額外的信息描述。
iv. 錯誤信息提示：錯誤信息提示給予用戶錯誤反饋，提醒用戶為什么填錯了。
v. 動作按鈕：動作按鈕是在表單的結尾，有個確認提交的動作控件。
表單狀態(tài)
基本上，表單在用戶的交互過程中需要經歷三個階段。
i. 默認狀態(tài)：用戶在未進行任何操作前表單的狀態(tài)。
ii. 聚焦狀態(tài)：這個狀態(tài)強調用戶正在填寫的區(qū)域，幫助用戶聚焦和減少反復掃描屏幕的時間。
ii. 反饋狀態(tài)：反饋狀態(tài)是指用戶收到的反饋時的頁面狀態(tài)(大多數是指錯誤信息反饋)。有時候，有時候對于上一個輸入信息的反饋在用戶聚焦到下一個填寫區(qū)域時就會顯示。然而，如果數據不能得到立即驗證的話，就要等到用戶點擊提交按鈕后再給予反饋提示。
Amazon創(chuàng)建賬戶表單的“默認、聚焦、反饋”頁面狀態(tài)
最佳實踐
1. 保持簡潔
讓你的表單保持簡短精煉，只保留最有必要的數據，避免以驗證的名義讓用戶重復輸入，例如不要重復密碼字段，取而代之的是要讓用戶直接看到他們輸入的密碼。
2. 使用及時驗證
當給予用戶輸入進行報錯時，最好將反饋定位到具體位置。
Facebook和Amazon采用了兩種不同的驗證反饋方式
3. 將相近的字段打組
將相關信息進行分組并按照常見規(guī)則排序很重要。這樣的話可以幫助用戶減少認知負荷和注意力消耗。
付款頁面相近的功能區(qū)域被適當地分組
4. 將標簽左對齊
要將標簽放置到輸入框上面（像上面所解析的Amazon的表單一樣）。不要把占位符文字作為輸入框的標簽，那樣的話用戶輸入完成后將看不到標簽，用戶將很難對已輸入的內容做最終的核對，會讓他們思考很多。
始終將標簽放置在輸入框上面并左對齊，有一個很全面的研究報告來說明這是高效率的做法。（詳見鏈接https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php）
5. 輸入區(qū)域與內容類型或尺寸相匹配
簡單地說，要保證輸入字段的長度與預期的輸入類型相匹配，例如：地址就要比郵政編碼長。
Flutterwave’s Rave的登錄頁面，輸入區(qū)域的尺寸與預期的輸入字段的長度比例一致
payporte的輸入區(qū)域與預期的輸入字段的長度比例不匹配
6. CTA（call to action）按鈕
在表單的末尾通常會有個確認按鈕或者下一步按鈕，在有些場景下，必須有一個以上的按鈕。要強調主要的按鈕，弱化次要按鈕。
Amazon的主要次要按鈕處理的很好
當運用模態(tài)彈窗進行信息收集時（表單在模態(tài)彈窗上），那么次要按鈕有時候就是關閉按鈕，另一種弱化它的方法就是使用X icon代替關閉按鈕，如下所示。
Medium的登錄模態(tài)彈窗使用X icon 來代表關閉按鈕
7. 搜索區(qū)域
不要隱藏你的搜索框，特別是你的網站內有大量內容時，搜索或許是最好的選擇。
Amazon的搜索框特別的顯眼
當用戶執(zhí)行了搜索操作后并顯示了搜索結果，不要立即清除搜索框內的內容，以便讓可以用戶很容易地去回顧他起初所搜索的內容。
Medium沒有清除搜索后的輸入內容
8. 清晰
給用戶傳達清楚的信息，給予他們所預期的，不要模棱兩可。沒有人喜歡填寫表單，沒有人愿意填寫兩遍。
Cowrywise的標簽內容非常的清晰，甚至按鈕的文字都描述得很好
本文所有的案例既不是廣告，也沒有貶義，僅用于學習。
原文地址：blog.prototypr
譯文地址：點融設計中心DDC
原文作者：Momoh Silm
譯文作者：孫夢超
]]>雖然表單類型多樣，有不同目的的、收集不同內容的、不同尺寸的，但是卻有一些共同的基本的元素可以幫你的用戶快速且順利地填寫它。
【亞馬遜創(chuàng)建賬戶的表單】
- 1. 類別或者條目（Category or Section）：它可以幫助用戶快速理解表單的作用，同時，當你要收集的數據多于一個類別時，比如：個人信息、職業(yè)信息、財務信息等……對數據歸類整理具有很大的幫助作用。
- 2. 標簽（Label）：它的作用主要是告訴用戶，在這一欄需要填寫什么。
- 3. 占位符（Placeholder）：對于標簽下需要填寫內容的額外注釋。
- 4. 出錯信息（Error Message）：當用戶填寫的信息無法被錄入時給予反饋。
- 5. 提交操作的主按鈕（Primary CTA button）：放置于表單底部，用戶用來提交填寫好的表單的按鈕。
表單狀態(tài)
基本上來講，
你的表單在用戶使用過程中存在三種狀態(tài)：
- 1. 默認狀態(tài)：就是用戶在填寫前表單的狀態(tài)。
- 2. 焦點狀態(tài)：在用戶正在填寫的欄目上做著重提醒，這樣可以幫助用戶聚焦正在填寫的欄目，哪怕他的注意力離開了屏幕一會兒，回來后也能馬上找到剛剛正在填寫的欄目。
- 3. 反饋狀態(tài)：這種狀態(tài)一般是給用戶一些反饋信息（大多數是出錯信息）。一般情況下，這種狀態(tài)會出現在用戶移至下一個填寫區(qū)域的時候。另外，當用戶提交表單時，如果系統(tǒng)無法馬上驗證信息，也會出現這種狀態(tài)。
【表單的默認狀態(tài)，焦點狀態(tài)，反饋狀態(tài)】
好的案例
1.表單要盡量簡單
盡量讓你的表單短且簡單。收集必要的數據，避免重復的輸入。比如，把“再次輸入你的密碼”這一欄去掉，而是在“輸入密碼”區(qū)域增加一個“密碼可視”的按鈕，讓用戶可以選擇看到自己輸入的密碼內容。
【Jumia和亞馬遜不同的用戶密碼驗證方式】
2.使用框內提醒
向用戶反饋“輸入錯誤”提示時，最好把錯誤提醒放在對應的輸入框內。
【Facebook和亞馬遜不同的“錯誤提醒”方式】
3.將相關信息分組
這一點很重要，把相關的信息分組，并將這些組按序列排列。這樣可以幫助用戶減少認知負荷，并能更加專注地填寫當下的信息。
【hotels.ng結賬頁面截圖，一個很好的將信息分組的例子】
4.正確使用標簽，并將其左對齊
標簽要放在填寫框的上方，最好不要把標簽替換掉。如果沒有標簽，用戶在提交表單之前很會反復確認他們填寫的內容是否正確，這個過程會非常艱難，最直接的結果是就用戶需要思考很多，導致提交率下降。而使用標簽時，我們習慣于將標簽放在填寫欄的左上方，具體原因可以參看下面這篇論文，里面綜合講述了為什么這種方式對用戶提交信息轉化更有效?！禠abel Placement in Forms》
5.輸入框的大小要與輸入內容的長度和尺寸相匹配
簡單來講，要確保輸入框的區(qū)域能夠完美匹配輸入內容的長度，比方說輸入地址的區(qū)域長于輸入郵政編碼的長度。
【Flutterwave 登錄表單的填寫區(qū)域長度剛剛好】
【Payporte的登錄表單填寫區(qū)域長度就不太合適了】
6.CTA（提交操作） 按鈕
所有的表單在最后都應該有一個“提交表單“的按鈕，或者一個“下一步”按鈕。如果一個頁面里不止一個按鈕，那么需要把重點放在主要的提交按鈕上，另一個按鈕需要稍微削弱一些存在感。
【亞馬遜將主要提交按鈕突出得很好】
如果使用彈窗狀態(tài)來收集數據，那么次重點按鈕通常是關閉彈窗的按鈕。我們一般會在彈窗右上角使用“X”按鈕來關閉彈窗，而不是專門設計一個“關閉表單”的按鈕。
【Medium的登錄頁面使用“X”而不是使用一個“關閉按鈕” 來關閉窗口】
7.搜索區(qū)域
不要隱藏你的搜索框，尤其當你的網頁的內容非常多的時候，搜索會是用戶的有限選擇操作。
【亞馬遜的搜索框十分明顯】
另外，當一個用戶提交一個搜索任務后，不要清除搜索框的內容，這樣方便用戶能很快且清晰地看到自己最初的搜索詞是什么。
【Medium在搜索結果出來后不會清除搜索框里的內容】
8.清晰
將信息清晰地傳達給用戶，盡可能清晰地告訴用戶什么內容是被需要的，不要給出讓用戶誤解的信息。沒人喜歡填寫表單，所以避免讓用戶填寫第二次。
【Cowrywise的標簽短小精煉、信息清晰，甚至按鈕上的文本表達也很到位】
小小聲明一下：
以上的所有案例在這里沒有任何褒義和貶低的含義，僅僅是為了舉例教學。希望此篇文章能給你帶來幫助，謝謝觀看。
原文鏈接：《Creating User-friendly forms》
譯文地址：藍湖產品設計協(xié)作 (公眾號)
原文作者：Momoh Silm
譯者：藍湖產品設計協(xié)作
]]>但創(chuàng)意是一種對話。
自從我們第一次學會用木炭在洞穴壁上的赭石記錄世界的片段以來，這種對話就一直在進行。我們還學會了把僅僅是用棍子刻在粘土上的抽象符號，變成了承載著充分含義的載體——語言。
趨勢僅僅只是龐雜而混亂的多方談話中的主音，無論是否應用趨勢，我們的創(chuàng)造都與這些趨勢并存。
趨勢為我們提供了大背景，畢竟如果沒有規(guī)范，又何從定義創(chuàng)新？如果沒有去年的熱點潮流，又從哪里尋找規(guī)范？
所以和去年一樣，我和webflow優(yōu)秀的設計團隊一起，預測了2018年的設計趨勢。
以下來自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。
1.破碎的網格布局
設計師總是無盡地去追求更具創(chuàng)意、更引人入勝的布局，但在這個過程中網格布局一直廣受運用，網格布局能帶來和諧和規(guī)范的感覺，但網格本身就存在約束。
有時候我們自己都想逃離網格的規(guī)范性，對吧！
但這并不意味著破碎的網格布局完全忽略了網格的概念，相反，破碎格局允許圖像和文本元素更自由地出現，而在更規(guī)范的布局中，元素的排布往往需要按部就班。在這里，圖像和文字的位置開始重疊和匯合，位圖和字體的并置往往都會出現美麗的意外。
有時候很難說這些效果是故意的，還是只是一個美麗的錯誤…
2.將插圖放在中心位置
我在數字產品營銷領域所看到的一個比較有趣的挑戰(zhàn)就是選擇合適的圖像。我看到過整個設計團隊針對這一議題進行討論，并且通常結束于兩點之一：
- 產品UI（用戶界面）截圖及動圖
- 設計過的或是生活化的攝影
前者強調產品本身的體驗、特征及功能，而后者則試圖強調產品的人性層面：它對生活的影響。
進入2018年后，我們可以看到并將繼續(xù)看到，在產品的設計和營銷方面，插畫師的工作越來越受重視。
我對這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們在時尚界所看到周期性相同，畢竟插畫在整個60年代后期一直占據著廣告界的主導地位。
或者，Dropbox的設計團隊可以通過解釋他們的新插畫風格來解決問題：
我們用鉛筆構建草圖，然后用豐富多彩、抽象的形狀來填充，將創(chuàng)意變?yōu)楝F實。我們的風格的靈感來源于你第一次有想法的瞬間，這種風格也在提醒我們，除非你有所行動，否則畫布上只有空白。
我想，這就是說，他們必須重新設計一些東西，對吧？
在Shopify的Polaris網站中可以看到，插圖可以將很多抽象的概念具體化于生活中。僅僅只是一張畫作，Shopify就闡述了Polaris的概念—就像北極星一樣，為團隊中的每一位成員指明方向。
最后，值得注意的是，插圖也可以巧妙地解決攝影帶來的一些具有代表性的問題。
我們?yōu)榇蟊娞峁底之a品，但當我們將一張真人攝影作品放在網站上的顯著位置時，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒有被定義的用戶。
相比之下，Shopify Polaris的插畫主角形象僅僅只是個人類，并不能確定諸如種族、性別、國際等屬性，這使得我們更容易地將自己代入這樣的場景中，就像我們自己就是一個獨立地思考者，思考這北極星所照亮的創(chuàng)造的可能性。
3.野蠻主義達到主流地位
2017年初，我們發(fā)表了一篇文章，談及野蠻主義的興起，并試圖回答出現新興風格的原因：
野蠻主義……正在開啟一個設計師想做什么就可以做的空間，這甚至超出了應該做什么的范疇。野蠻主義的作品往往避開了所有的最佳建議和最好實踐列表上的東西，以支持震撼的外觀和效果，有時甚至帶有一些攻擊性。
所以你可以想象，當這兩個電子商務網站都坐上這股粗獷潮流的列車時，我們有多驚訝。
Balenciaga
Gucci
4.更多有機和傾斜的形狀
大自然厭惡直線。——William Kent
近幾年來，無論是網頁端還是移動端的設計都是由卡片式的用戶界面占據主導地位。直到現在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎的幾何形狀，使得大家去關注網頁設計的基礎材料。
這在2017年有了很大的改變，現在，從谷歌到推特再到臉書，幾乎每一個應用的卡片都應用了圓角，比如輸入框、頭像框等。
如果這些框都是圓角的，他們就會是橢圓形的。
但這并不是有機形狀的主要組成元素?，F在的背景設計往往有很多顏色各異的變形斑點，略夸張的對角線，即使是我們平時所用的破折號也會被卡通化。
但在無盡的探索中，設計師總不能僅僅只是運用靈活的曲線，很多人都會把卡片旋轉一些角度，運用角度來進行設計，就像Stripe的主頁一樣。
但這并不意味著直角將會在設計中消失。在下圖中，我們可以看到直線和直角的運用，不過是把它們與更多的曲線、球形有機地結合在了一起。
在許多網站，我們都能看到閃爍或是振動的顏色。雖然這些顏色的組合能夠讓人留下深刻的印象—包括在眼睛中留下殘影—不過值得注意的是，在可訪問性的層面上，顏色組合的使用可能會出現一些問題。
通常我們都將可訪問性作為為殘障人士所做的用戶友好行為，但不要忘記，即使是不存在色覺障礙的人也可能會遇到令人眼花繚亂的色彩組合。
不開玩笑，當這些形狀滾動起來，你就會看到你的屏幕上全是這些東西了。
根據LinkedIn的無障礙工程經理Jennison Asuncion的說法，可訪問性可以定義為：
設計和開發(fā)包括殘疾人在內的每個人都可以獨立使用和互動的用戶界面。
5.更普遍的交互和動畫
媒介就是信息。–Marshall McLuhan
網頁并不是一個靜態(tài)媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實性，但網頁上還可以有更多靈活的東西。媒介就是信息，McLuhan的這句名言，至少意味著有一些網頁信息在于網頁的變化和交互：網頁不能只是簡單地向我們提供信息，而應該是讓信息生動起來，更重要的是，讓我們與這些信息進行交互并對之產生影響。
有的信息都在移動，但這并不影響集中注意力。
漸漸地，當你滾動網頁滑塊時，一塊一塊的信息并不僅僅只是被你接受了，還會影響你的認知，并且企圖得到你更多的關注。
顯然，我們也不能濫用這種生動，會使得網頁看起來像動畫一樣，要小心這會影響你的用戶體驗，尤其是那些有認知障礙或對運動敏感的人。
但不能否認，恰當的小動畫能夠在恰當的時間引導用戶注意正確的內容，從而使得他們不會錯過重要的信息，或是訪問其他頁面。
以Black Sheep的Heco Partners為例，向下滾動時，標黑的當前行幫助用戶集中注意力，然后一系列突出大膽的工具開始爭奪用戶的注意，呼吁停止閱讀并點擊下一頁。這是創(chuàng)建一個內聯導航系統(tǒng)的創(chuàng)造性方案，但這也可能給用戶帶來了不必要的緊張感。
我們也可以看到很多工具可以簡化復雜動畫和交互的創(chuàng)建—這是數字設計是工具包中的一個缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來。
具體而言，我們期待兩種特定的動畫模式的出現：不尋常的滑動速率和頁面轉換。
意外的滑動率
現在視差可能有些過時了，但這并不意味著設計師們不會以有趣的方式來設計滑動。
例如網站Anna Eshwood，網站上的每一張照片一開始都是正常的展示，直到用戶下拉滑塊滑過后，照片都會快速上升，比滑塊滑動速度快，營造出一種有趣的飄渺感，可以很好地展現簡樸的黑白照片和嚴肅的模型。
隨著交互和動畫在在線體驗中更為突出，我們也期望看到更多的設計師設計出更具突破性的作品。
頁面轉換
在一個充滿好看動畫的網站中，我們能感知到，網頁上正在發(fā)生一些變化，但如果是從一個頁面轉換到另一個頁面，就會比較唐突了，無論是在哪個網站上。
轉換動畫可能會有所用處，它能將用戶從一個頁面送走，再在另一個新頁面上迎接。不過要謹慎運動轉換動畫，也沒有必要鏈接它們。這個過渡本身就是每一個頁面之間的轉換：頁面突然變?yōu)橐黄瞻?，然后再有新的頁面加載。
但我們發(fā)現在這一點上，很多網站都搞了一些事情。以網站3drops為例：
在這里，頁面轉換時依舊保證了用戶的體驗，體現了品牌的存在。當用戶想要訪問是視圖庫中的另一視圖時，髕骨是被導航到了新的頁面。這對于以設計為中心的品牌展示來說，是一個不錯的點子。
6.至多主義的出現
好的設計盡可能少設計。–Dieter Rams
多年來，設計師最想聽到的最振奮人心的設計反饋，恐怕就是：“他很干凈。”
那是一個極簡主義的時代。深受Dieter Rams的設計原則，以及雜志《The Crystal Goblet》的影響，視覺設計師一直追求提供盡可能少的選擇和視覺干擾。
對于當今生活在數字中的世界來說，極簡主義是一個全新且難得的經歷，這個選擇很有意義。我們需要足夠放松以進入這個陌生的新世界。
但是今天，我們也有類似于以下的網站：
Pin-Up Magazine
H. Lorenzo
Razzle Dazzle Torino
所有的這些都力圖在你看到的那一刻就把所有東西都放入你的世界里。
你可以稱之為一種野蠻主義，我也的確在Brutalist網站上發(fā)現了所有上述網站。但我們認為我們期待更多至多主義的網站的出現，而在這之前你可能并不覺得這個網站會變成這樣。隨著數字技術的發(fā)展，一些網站會很自然的對用戶有更高的期待。
7.襯線字體能表現得更好
在技術落后，字體并不多的糟糕過去，在網頁界面中使用無襯線字體是個很好的方法。但隨著屏幕和字體渲染技術得進步，我們可以看到越來越多精致得字體占據舞臺中心，或者至少成為了更重要的角色。
以Kickstarter最新的設計為例，他運用了柔和的襯線：
或者是大膽的標題：
在特定的日子里，Typewolf都會展示一些襯線的運用：
襯線能提供一種優(yōu)雅、精致的文學修飾效果，作為襯線的長期愛好者，我歡迎大家多多使用襯線。
8.浮動的導航菜單
固定的導航已經成為以轉化為中心或具有龐大菜單的網站的主流，因為核心導航可在滑動時與用戶保持一致。不過浮動的導航使得用戶在滑動瀏覽時也能輕松使用，直接優(yōu)化了網站體驗。
最近，我們注意到有些設計師將導航從其他設計中分離出來，并將其移動到瀏覽器的下方，進一步確定了用戶可以隨時接觸到導航。這增強了導航是網站的廣泛對象的感覺，不一定是某一頁的一個部分，而是放在一個觸手可及的地方，使人安心。
最直觀的方法就是在導航欄中添加陰影，并將其移動到網頁的最頂端，以Reseau為例。但在平面的設計中也是可行的，以Anchor & Orbit為例。
與離線型設計類似，浮動的導航允許設計師在設計中自然地或帶有目的性地運用巧妙的并置，這又給設計帶來了更多的空間。
9.視頻元素
當你想用可視格式傳達復雜的信息時，靜態(tài)圖像往往都難以達到效果。畢竟，復雜性需要時間來表現，而一個用戶界面上的靜態(tài)圖像只會告訴你圖片上的內容，而不是如何使用。
以下是幾點重要的原因：
- 視頻元素可以無縫地切入設計中，無需嵌入Youtube或是Vimeo插件。
- 即使有很多顏色，漸變和細節(jié)，視頻地質量依然很高，但如果GIF動圖不按大小以指數倍數放大，則很難做到。
- 視頻可以循環(huán)以確保副本的細節(jié)和圖像的細節(jié)保持一致，并為有需要的人重復播放。
所以從我們自己的網站到Stripe Sigma，當視頻元素風靡整個網絡時，我們并不感到奇怪。
10.更多身臨其境的“多媒體”長格式
當我們想要發(fā)布長格式的內容時，只需在頁面上放置一個長文本字段，特別是當我們的長格式內容有CMS支持時。其中，單個布局的內容長度大概為200字到一篇較為詳細的短教程的長度。
但現在一些設計師和作家并不采用這種方法，他們將布局和量身定制的副本結合起來，通過視頻、聲音、圖表和圖形、地圖等豐富的載體，娓娓道來故事的內容。
說實話，這并不是一個“新”趨勢，我更傾向于把它稱為網絡產生長期對話的基石。但現在所有的網絡出版工具都出現了，包括我們在內，2018年似乎都是最佳時機。
以CNN講述全球變暖對格陵蘭島和全世界其他地區(qū)的影響為例。
這個故事盡可能地做到引人入勝，這對于很多還較為抽象的問題來說至關重要。它巧妙地將一個復雜的話題變成一系列便于理解的段落。你永遠都不會覺得內容過于冗雜，相反你總是不知不覺就接受了，你發(fā)現自己閱讀每一個字，都很容易理解。
請注意，我并不是批評CMS，事實上，我們可以利用CMS來提供這種體驗。這里只需要一點小技巧：利用背景圖片和視頻來傳遞所有的視覺效果，在編寫、設計時仔細檢查每一個故事的一致性。這就和“博客”的格式不大一樣了。
如果你正在尋找更有吸引力的長形，我不會推薦紐約時報上由Tuam拍攝的“失落的兒童”。
值得一提的是，這樣更為多樣化的長格式可以用破碎網格或者標準布局進行組合，正如上面的紐約時報片段所示。
11.可變的字體！
在今天看來，我們很難相信就在幾年前，我們還不得不依靠稀少的字體來呈現我們所有的文本內容。
今天，網絡上到處都是各種各樣華麗的字體，從而引發(fā)了人們對字體印刷、字體設計和選用、消費字體的興趣。
可變字體出現后，這一趨勢愈演愈烈?？萍己陀∷⒓夹g的巨頭——蘋果、谷歌、微軟和Adobe之間有一個可變字體聯合項目，這使得可變字體實現了一種全新的字體設計形式，正式增加了opentype格式，這意味著，允許設計師插入一個字體的整個詞庫或者有多達64000axe（磅值、字號等）的單個字形，并在設計空間中將特定位置定義為命名實體（粗體、濃縮等）。
說實話上面這段文字有些難懂了，那么請直接看John Hudson的解釋，他認為可變字體是：
一個字體文件的行為像多個字體一樣。
但是在討論字體設計等視覺藝術時，最好還是堅持從視覺方面入手。
簡而言之，這就是一個可變的字體，一個單一的字體文件，能夠變黑，而不需要調用其它字體。
12.內容中心–或稱webook？盡量酷起來！
（注意：內容一直很酷）
作為一個內容為王的極客，我很高興看到在2017年產生了如此之多的有見解、極有幫助的內容。我相信2018年我們會見到更多，畢竟2017年已經打下了很好的基礎。
我們也可以看到，有很多領先品牌將pdf格式用于電子書領域并充分發(fā)掘網絡出版長內容的潛力，我喜歡稱之為“webooks”，這很具有吸引力。
具體而言，我指的是：
Stripe Atlas Guides
AirtableUniverse
DesignBetter.co
Intercom Books
我們自己的電子書網站
我想不需多言了吧！
13.CSS網格
Robin Rendle的CSS網格演示，來自CSS-Tricks。
正如Robin Rendle極具有表現力地將它放在了CSS-Tricks上：
那么，CSS網格是第一個真正地網頁布局系統(tǒng)，它旨在將內容組織成列和行，并最終為給予開發(fā)人員最高的權限。
此處應有得逞了的笑聲。
注：Webflow 將支持CSS網格，但尚未提供官方日期。
14.追求完美的數字設計工具
2017年是一個重要的年份，尤其是對于深入討論設計工具的性質及其 對我們工作的適用程度。
Spectrum的Bryn Jackson分享了自己的看法：
設計成品和設計工具之間的中間格式，可以為產品團隊和設計人員提供更高效、更強大的工具。
在一篇名為“接口”的文章中，他繼續(xù)假設：“今天所有的每一種流行的設計工具都是為了優(yōu)化插圖。”
（需要注意，Bryn Jackson對于插圖的定義是導致圖像、圖標、插圖、字體、廣告、印刷媒體或其他沒有本地交互性的可視通信媒介的任何設計工作，但這是一個有爭議的定義，其中沒有提到閱讀和交互形勢。）
除了插圖和交互性的定義以外，不難看出，Bryn Jackson的觀點：在最基礎的地方，大多數現代設計工具都注重圖像的制作而不是接口。
設計師兼工程師Adam Michela在“I’m a Designer at Facebook, and This Is What’s Missing in Design Tools Today.”中提出了一些相同的觀點。他認為大多數設計師花費大部分時間來創(chuàng)建實際價值并不大的少量工件。而這些工件僅代表最終產品—數字接口，這與上述的情況背道而馳。
在文章的最后，他積極地認為，有機會創(chuàng)建融合（而不是橋接）設計和實現的工具。
這正是我們試圖在webflow上構建的。像Michela，我們希望一個設計交付的不是網站的示意圖，而是網站本身，不是接口的文檔，而是接口本身。在這個過程中，網站能不斷地修改、完善，還可以保存時間線上的不同版本，可以檢查，甚至點擊一個鍵就可以恢復。
15.多樣性和包容性使得設計更具挑戰(zhàn)
Webflow是一個公平的機會雇主，我們致力于建立一個團隊，這個團隊不僅在觀念和身份上具有多樣性，并且受到鼓勵。– Our job listings
在Webflow所在的美國，日益激烈的政治環(huán)境正在推動對多樣性和包容性在設計中的作用的強烈關注。
我們不得不承認，設計的選擇，小到性別的下拉列表中包含了哪些選項，都能影響我們同胞中的一些人。我們可以清楚地看到，錯誤的消息、措辭地影響有多嚴重，數據驗證機制在人機交互地動態(tài)機制中有多強大。我們意識到，讓種族成為廣告的過濾器會產生徹頭徹尾的種族主義效果，從而維護我們許多人希望看到被顛覆的現有權利體系。
我們也清楚地意識到，如果我們地團隊沒有多元化和包容性，我們也沒有辦法提出設計方案。
最起碼，我們中的一些人不能。
另一方面，我們也看到了性別歧視在明顯的自相矛盾和邊緣化之后抬起了丑惡的頭顱，甚至會化身在看似道德的日常對話中。性別歧視就是雙重標準的明顯例子。
最終，作為用戶體驗專業(yè)人員，我們的工作是為每個人提供可用且理想愉快的體驗，而不論他們的種族、國籍、信仰等個人情況。
換句話說，我們的工作就是包容，讓我們一起在2018年，包容更多，獲得更多。
16.視頻的廣泛應用
盡管我們幾乎沒有人大肆鼓吹視頻將會成為網絡發(fā)布媒體，但發(fā)行商仍然非?？春棉D播。
視頻早已到處可見：從一開始就堅持使用視頻而不是短故事的新聞網站，到Snapchat，再到Instagram，最后到Facebook。無疑，Excel很快也會趕上潮流！
但就像科技領域的大多數事情一樣，這并不是一個平穩(wěn)的發(fā)展，成千上萬的記者在文本和動圖之間丟掉了工作。
對于轉播的網站來說，前景也可能不是很好。根據哥倫比亞新聞評論：
轉播的發(fā)行商們僅花了一年的時間，就用無差別的、平淡的快餐式視頻，驅散了大多數來之不易的本土觀眾。
獨立新聞業(yè)至今遭受創(chuàng)傷，這要歸功于特朗普，而視頻的宣傳也沒有幫到他們。
值得一提的是：根據Digiday的說法：“展示一千次視頻的費用遠高于展覽一千次的費用。”在理想的世界里，報紙可以在打更少的廣告。
當然，這不會發(fā)生。
面對這一切，請記住文字作為創(chuàng)意和信息媒介的優(yōu)勢：
- 生產速度相對較快
- 便宜
- 仍是網絡上大多數通信的主要形式
最后一點可能也會讓人費解，但我希望你能去各個社交網站看看。除非你點開的是Instagram，Pinterest或Snapchat，否則你仍會看到大量的文字。即使在這些視覺效果站第一的平臺上，文字仍然扮演者重要的支撐角色。
因為一張圖片可能在捕捉場景時值得多說幾句，但圖片很難捕捉到具體的內容，人物、時間、地點、原因和方式。
這使得我們很自然地談及下一點：
17.用戶體驗寫手的持續(xù)興起
任何影響設計的人都是設計師，這包括開發(fā)人員、CFO甚至公司法律。所有的這些都可以是設計師。–Jared Spool
我在去年的設計趨勢中談到了這一點，但我今天想將注意力更多地放在被稱為用戶體驗寫手地原因上。
簡而言之，UX寫手們專注于用戶界面中的內容，這些內容主要用于大型數字產品和web應用程序?，F在，我說我是為Webflow產出內容，過去是為了Linkedln，人們都會問：“這是啥？”
但請放心，用戶界面都有寫手地痕跡。并且這些內容往往在你的理解過程中起到關鍵作用：
- 你可以在用戶界面中做什么
- 如何做這些事情
- 你可能會遇到什么限制和困難
但UX寫手能做的不僅僅是這些。用戶界面中的詞匯也是塑造好的用戶界面背后的品牌認知的強大工具。試想一下，如果你看到的所有推文，所有應用中，都有一系列的搞笑文章，或者是在404頁的展示中都有亮點，這些都是為了在最不理想的時候敦促你的行動。
這在被稱為Chatbot的UI格式中顯得尤其明顯。一般來說，這些用戶界面只包含單詞，單詞構成了整個用戶界面。Chatbot的個性、品牌都只能通過語言表達，不過也有一些精心挑選的表情符號來調味。
作為一名經驗豐富的UX寫手，我很高興看到這個關鍵角色得到了它應有的更多認可。
我們也是設計師，不過我們是在音節(jié)和字母表中工作，我們迫不及待想要和你合作。
18.系統(tǒng)化
現在，設計已經贏得了重要的位置。設計的對話已經從價值主張轉移到更成熟的分析，即如何使設計作品的成功更加系統(tǒng)化，更加具有擴展性且在品牌的許多產出和不同環(huán)境中具有凝聚力。
設計系統(tǒng)專注于將品牌美學和功能方法轉化為模塊化的組件，這些模塊化組件可以混合搭配以滿足任何UI的獨特需求（理想情況下）。當設計語言被系統(tǒng)化時，就簡化了設計決策，縮短了開發(fā)時間，并且能讓設計人員在尚未建立設計模式的項目上更好地工作。
通常情況下，品牌正處于這一趨勢之上。UXPin推出了Systems，這是一款用于創(chuàng)建和維護設計系統(tǒng)的工具。Shopify推出了Polaris，憑借其獨特的內容、設計和開發(fā)指導方案而獲得高度贊譽。UX Power Tools推出了一個想要使Sketch稱為可行的設計系統(tǒng)工具的庫（我們即將會看到?。?/p>
我想2018年會有更多這樣的消息。
19.原則—設計的第一要務
設計界一直糾結于雞還是蛋的問題：內容至上還是設計至上。
我過去一直都是支持內容至上，這并不僅僅是因為我是一個內容的極客。對于我來說，在確定怎么包裝之前，確定所包裝的信息是最符合邏輯的。
但最近，由于我已經由特定交付品的內容設計專項更系統(tǒng)化的工作，品牌內容策略，我對我們的工作是否遵從內容還是設計變得柔和了起來。
它應該從原則開始。
不論其他一切如何工作，我們都應該明確原則，并依賴于這些原則。
當Shopify的高級UX主管Amy Thibodeau，在她的文章“Locating Polaris”中提到：
如果系統(tǒng)是為了實現真正的工作而創(chuàng)建的，它應該反映一個組織的行事準則及其價值。這也是說，一個不包含任何原則或價值取向的設計系統(tǒng)沒法考慮日常實踐中的這些問題。
原則為其他所有決策提供了一個框架，從主要內容要多長到內容的背景是什么都有所限制。畢竟，品牌是建立在其原則至上：品牌的使命、愿景和目標。這些名詞都需要一個進出的信念來作為支撐，使之成立而不倒。
換句話說，原則回答了為什么。
例如，在Webflow上，我們的使命是鼓勵設計師，企業(yè)家和創(chuàng)意者將他們的想法帶到網絡上。這一使命融入了我所做的一切，從Ryan為我們創(chuàng)造的美學到我設計的語音和音調標準。
這些標準知道我們創(chuàng)建草圖，溝通我們的意見，并希望每篇文章、電子郵件和廣告頁面能更豐富。到目前為止，這是一個溫暖的搖籃。
你認為2018的數字設計將會如何？
每當我將這些點列在一起時，我的腦海里會涌滿很多與之相關的想法，時間的流逝也使得我不得不優(yōu)先考慮一些。
這是為什么我放棄了一些顯而易見的熱點但迄今為止對網絡的影響有限，比如去年提到的AR和VR?？紤]到這一點，你會在這個列表中添加什么？
感謝閱讀!
原文地址：webflow
譯文地址：玩皮兔設計（公眾號）
作者：JOHN MOORE WILLIAMS
]]>
更高的屏幕
正如下圖所示，高出來的145 pt可能意味著增加了一行內容，或者增加了一個我們曾經認為太過狹窄的菜單。盡管分辨率不一樣，但是這部分多出來的空間同樣適用于iPhone 8 and 8 Plus，因為它們擁有相同的比例。
更多的內容空間
如果與最初的iphone相比，iPhone X增加了332 pt的高度，這相當于7個導航條的高度。未來在新款iPhone上呈現的內容將會看起來更棒，同時漢堡包菜單也被弱化。
當把不同時代的兩款iPhone放在一起時，我們可以注意到內容的空間幾乎翻了一番。普遍來說，這意味著目前的應用程序需要包含這些欄目：狀態(tài)欄、導航欄、選項卡和用于訪問主屏幕的指示器（home indicator）。省去這些欄目不僅會使用戶體驗變差，而且還會讓你的應用程序與iOS的原生程序不一致。
“齊劉海”
也許新設計中最有爭議的前10%是“齊劉海”。原深感攝像頭系統(tǒng)，也被成為凹槽（國內形象的稱為“齊劉海”），它作為一個分割元素使得iPhone X的屏幕真正實現了“從屏幕邊緣到手機邊緣”。從技術上來看，由于集成了Face ID、攝像頭和聽筒，去掉凹槽是不可能的，從設計上來看，這是蘋果近年來最大的妥協(xié)之一。但是，看看其他手機制造商是如何解決這個問題的時候，不管是“高額頭”還是“低下巴”，抑或是兩者的結合，很難說他們沒有妥協(xié)。
蘋果建議不要使用黑色狀態(tài)欄來隱藏這個凹槽。他們的理由是，盡管這個地方很令人頭疼，但是其仍然為狀態(tài)欄和額外的內容提供了寶貴的空間。它使得上下文內容產生連貫性，同時給人一種屏幕更大的感覺。諸如壁紙、地圖和色彩等背景元素在被圓角和凹槽稍微修剪時不會受到太大影響。通過隱藏該空間，你的app將會感覺更小，同時與其它應用程序不一致。
大標題
在iOS 11中，屏幕的標題大小一般為34pt（點），并且是粗黑字體。有趣的是，當你向上滑動屏幕時，標題會自動轉換到導航欄的位置上，把寶貴的空間還給我們。在橫屏的狀態(tài)下只留給導航欄很小的一部分區(qū)域，這就給設計師們提出了一個非常明確的信息，首先，你應該更合理的利用這些額外的空間；其次，你需要使你的設計具有自動適配性，因為很可能在豎屏的時候擁有的額外空間，橫屏的模式下這些空間就不存在了。
更大的狀態(tài)欄
狀態(tài)欄的高度相較之前增加了一倍多，從20pt增加到44pt。現在通知欄可以通過左狀態(tài)欄下滑來喚醒，而控制中心則是由右導航欄的下滑操作來喚醒的。當快速完成操作后，用戶只需要輕掃一下屏幕的底部邊緣就能輕松返回到主屏幕。但是，如果想要看到導航欄，就必須中斷輕掃這個動作。
安全區(qū)域布局指南
當我們在為iPhone X進行設計時，我們應當時刻注意并且盡量去避免設計的內容被圓角和凹槽裁剪掉的情況。怎樣才能更好的避免這樣的情況呢？安全區(qū)域的使用可以很好的幫助你，確保內容不被裁剪掉。一般來說，背景的使用上可以不受安全區(qū)域的限制，而文本，圖像和按鈕這些都需要在安全區(qū)域內進行設計。
橫屏狀態(tài)下的iPhone X
在橫屏的模式中，狀態(tài)欄是隱藏的，目的是為了將內容的空間最大化。iOS 11 的導航欄減小到了32pt，標簽欄是30pt，虛擬home鍵的尺寸為23pt。雖然大多數情況下用戶不會在iPhone X上切換到橫向模式，但還會有一些比較重要的使用場景會用到橫屏的模式。例如，我們在翻看橫向的照片，全屏視頻或者閱讀文字較大的文章時，都會采用橫屏的模式。當用戶完成使用后，會直覺性的切換回豎屏模式，那么，我們就必須要保證切換后的內容也可以正常展示給用戶，特別是當設備在橫屏時停留在一個比較舒適的位置的時候。
如果你的app已經可以適配到iPad上了，那為什么不能也很好的在iPhone 上進行橫屏適配呢？大多數的app都已經開始采用響應式布局的設計理念，從而以最小的成本來獲得最大的收益。
iPhon X橫屏狀態(tài)下的網頁
如果你是一名產品設計師，你可能會在網頁上進行工作。在橫屏的iPhone X上，你的網頁在左右兩側會存在一個較大的空白區(qū)域。這是因為安全區(qū)自動切割超出安全區(qū)域的內容部分所帶來的糟糕結果。為了避免這種尷尬，蘋果出臺了一套規(guī)范以此指導你的網頁在橫屏時適配iPhone X。這樣基本可以使網頁在橫屏狀態(tài)橫向拓展背景以填充屏幕的同時，確保安全區(qū)域內網頁內容的完整顯示。
圓角
內容的剪輯也會發(fā)生在iPhoneX屏幕的四角。除非你隱藏了狀態(tài)欄及底部的觸碰區(qū)，否則不會面對這樣的問題，因為他們覆蓋了屏幕的四角。但是，對于大多數全屏使用的應用程序，比如相機確保四角中有足夠的空白是非常重要的。建議你的按鈕半徑設置為16pt，以完美的遵循圓角的規(guī)則。
在iOS模擬器上預覽你的應用程序
發(fā)布之后iPhone X可能會迅速售空，因此，我們大多數人無法立即使用。 手頭沒有設備，唯一的方法就是通過iOS模擬器。您可以通過安裝Xcode來預覽您的應用程序和網站。
漢堡菜單之死
十年來，設計師們爭先恐后地在原先的iPhone小屏幕上適配著內容，有很多設計師因為標簽欄占用了太多的屏幕空間而徹底省去它。還有一些人的做法相對有創(chuàng)意一些，他們會放一個能從左面滑出的按鈕來替代。這也就是最初的漢堡菜單。雖然起初很新鮮有趣，但最終卻發(fā)現它是可用性的一個噩夢。因為在使用時，用戶需要更多的點擊操作。這也就意味著二級標簽會更少使用。而且人們常常會忘記還隱藏了更多的內容。
隨著屏幕的變大，單手操作也開始受到了影響。蘋果公司甚至設計了雙擊home鍵就可以下滑整個用戶界面的手勢操作，這樣以便手指可以夠到導航欄。而漢堡菜單通常又是放在屏幕的左上角，用戶就需要一個額外的雙擊才能到達這個菜單了。這也就導致了用戶更難對這個菜單進行操作。隨著屏幕的加長，設計師也不再需要那么糾結內容占了多少屏幕空間了。所以現在設計時都會選擇用標簽欄來取代漢堡菜單。iPhone X更是如此，也就是說，如果你的應用程序有超過兩部分的內容，那我們就強烈建議你使用標簽欄，而且iOS11的標簽欄占用的屏幕空間也更小。
漢堡菜單在網頁設計上是很常見的，也可以說是移動網頁在手機上的設計體驗比不上基于手機的設計體驗更好的原因之一。雖然目前一些適配手機的網頁采用了原生的控件，這對于網頁設計來說是一個很棒的方法，但是，在iOS系統(tǒng)中尤其是iPhone X的設計中，你依然應該使用標簽欄來代替漢堡菜單。
自適應布局和多任務處理
隨著越來越多的屏幕分辨率需要適配，讓你的頁面布局具有適配性越加重要。使用像Sketch的Constraints和Xcode的Auto Layout這樣的工具，你需要在設計的時候要考慮到屏幕尺寸是靈活的，在需要的時候可以展開多余的菜單。
STACK VIEWS
在Xcode里，你還會發(fā)現Stack Views, 這是一個神奇的工具用來幫助你的布局實現更靈活的變化。一些元素和組可以動態(tài)的堆積在一起，你需要做的僅僅是編輯是元素間的間距以及框內的內容填充。然后你可以使用Auto Layout來完成剩下的工作。蘋果的建議是先使用Stack Views再使用Auto Layout。
點（pt）和像素（px）
開發(fā)人員使用點值，因此了解點值與像素的區(qū)別非常重要。當iPhone第一次推出時，這兩個單位是一樣的：1pt等于1px。然后，當視網膜的屏幕出現時，1pt變成了2px。所以，把pt看做首代iPhone中一個物理區(qū)域的標準大小，px就是存在于這個物理區(qū)域內的實際像素的密度（iPhone 4，5，6，7，8 = @ 2x，iPhone 8 Plus，iPhone X = @ 3x）。
iPhone的解決方案
iPhone主要有5個分辨率：320×480 pt（iPhone 4），320×568 pt（iPhone 5），375×667 pt（iPhone 8），414×736 pt（iPhone 8 Plus）和375×812 pt（iPhone X）。布局不縮放，但可基于屏幕的分辨率進行擴展。例如，導航欄只調整寬度，但保持相同的高度，里面的元素大小也保持不變。
iPhone 8 Plus是唯一在橫向模式下更像iPad的iPhone。換句話說，此時可能會出現一個左側導航來替代標簽欄。
百度地圖服務生態(tài)UE團隊 ——百度UXC翻譯
原文來自：Design+Code
彈窗、對話框，隨你怎么稱呼，這些小窗口出現在屏幕上從來都不是理所當然。雖然它們是你應用中一些相對較“小”的元素，卻扮演著影響用戶體驗的重要角色。
一方面，它們可以幫助用戶度過應用內的旅程。另一方面，處理不當時，它們也會使用戶感到挫敗。
有幸的是，彈窗比較成熟，容易實現。用適當的手段和規(guī)范可以輕易改善它們。我們這篇文章要討論的就是這個。
由于并非所有彈窗形式都相同，我們把它分解為5種常見類型，并且總結了每一種的優(yōu)化“準則”。遵循這些指南，你一定可以使你的彈窗更好地達成目標。
“推薦給朋友”和“為應用打分”彈窗
你當然希望用戶量增長、提升好評率、增加病毒式傳播的可能。誰不想呢？但是你要了解，多數用戶不會向朋友推薦你的應用，或者給它打分，除非他們覺得這么做會得到有價值的回報。
Uber的獎勵彈窗
“但是，推薦給朋友是如此簡單輕松的任務??！為什么用戶不會大發(fā)慈悲，幫助一款小軟件成長呢？”很不幸，現實沒有這么簡單。
注意我們剛才用的詞是“任務”。這就是多數用戶看待“推薦給朋友”和“為應用打分”的方式——看成任務。互換原則就在此時發(fā)揮作用。大概來說，就是你得給予用戶某些東西，然后才能向他們索取?？梢允峭ㄇ趹弥械拿赓M出行，或者是某種總體價值和樂趣。最好對這些彈窗使用A/B測試，讓它們以不同時機出現在用戶旅程的不同位置。這能讓你更好地獲得重要的統(tǒng)計數據，了解最終應該在何時何地放置彈窗。
同時也一定要確保，從你的應用中轉到App store、社交媒體頻道、或消息平臺的過程盡可能流暢。獲得一個推薦鏈接對于用戶真的是“簡單”的事情嗎？在Wi-Fi和移動網絡環(huán)境下，整個流程的運轉有何差別？有許多重要因素需要考慮。花時間分析和優(yōu)化這兩種彈窗，你肯定能收獲更高滿意度、活躍度和更多新用戶。
記住，“[聰明地]索取，你才會有回報。”
“推送通知”彈窗
推送通知是一個超有價值的手段，能使用戶保持投入、反復使用。對許多用戶來說，推送通知已經成為了他操作一款應用的主要媒介。不必再打開應用，用戶通過推送通知滿足他們大部分需求。于是，獲取和保持向用戶發(fā)送通知的權利，應該是用戶粘性與留存策略中的一個重要方面。
在Android系統(tǒng)中，方式很直接：推送權限請求會作為AndroidManifest.xml的一部分，用戶在安裝前會看到所有需要獲取的權限。
在iOS上就是另一回事了。iOS的權限彈窗必須由應用內的代碼觸發(fā)，會向你的用戶展示一個這樣的彈窗：
圖片來源：Xtremepush.com
如果用戶點按了“不允許”選項，對你來說就相當于玩完兒了。除非用戶手動進入權限設置，否則拒絕權限是不可逆轉的。所以讓你的用戶按下“允許”權限至關重要。
我們推薦兩種方式，來盡可能保有最多的通知推送許可：
- 嘗試創(chuàng)造一個你自己的、應用自帶的權限彈窗，讓你評估用戶接受推送通通知的意愿。這會讓你更加理解用戶的行為和偏好，把權限獲取留到某個用戶真的愿意點“允許”的時機。
- 僅僅在在你認為最相關和最有說服力的時候請求權限。在此時此地，真的有需要獲取通知權限嗎？在權限請求提示中，借助當前環(huán)境清晰地向用戶作出解釋。
數據權限彈窗
推送通知權限和數據獲取對話框一脈相承。同樣，對于這些特殊彈窗的用戶體驗，我們都是在討論iOS應用。數據權限彈窗包含對位置、日歷、聯系人信息、提醒事項和相冊的請求。移動開發(fā)者必須小心翼翼，因為請求數據權限不是一系列勾選框那么簡單。
蘋果在他們的權限請求指南中提到：“雖然人們贊賞移動應用獲取個人信息所帶來的便捷，但他們也希望能掌控自己的私密數據。例如，人們喜歡自動給照片標記上地理位置，或者找到附近的朋友，但他們也想要一個能關閉此功能的選項。”
要使這類彈窗保持相關、顯而易見。別設計一個請求用戶地理位置的計算器——別這么做。
使用蘋果在彈窗中提供的文字位置，描述你的應用為何需要這些信息，即使你自己認為原因顯而易見。在某些特定的、相關的用戶操作之后，再請求適合的權限，也是一個好方法。比如說，用戶使用你的應用創(chuàng)建了一段視頻，并且想要分享給朋友。只要用戶點了“在Facebook上分享視頻”按鈕，這就是彈窗請求用戶社交媒體賬號權限的絕佳時機。用戶更容易接受權限，因為它提供了清楚的解釋，“要想達成A，必須先完成B”。
想要深入研究，請看我們的一篇文章，討論如何使數據權限不那么令用戶望而生畏。
“錯誤”彈窗
除了向用戶索取權限，彈窗也是開發(fā)者向用戶表達信息的一種重要手段。尤其是關系到應用內的錯誤。
世事無常，總有錯誤出現。錯誤中的錯誤是最不該發(fā)生的。這么說是什么意思？就是說你的彈窗不能讓用戶感到迷惑，使得已經發(fā)生錯誤雪上加霜。
我們來舉個例子，比如用戶的收貨地址寫得不合邏輯，所以當他們在支付時就會發(fā)生“錯誤”。如果你的彈窗里寫著：“發(fā)生了錯誤：支付無法完成”，用戶就不得不試圖猜測錯誤的原因。相反，你應當利用這個時刻告訴用戶為什么錯誤會發(fā)生，收貨地址中具體哪一項需要更正。必須要了解，用戶任何的猜測和挫敗，可能被一個彈窗放大，最終影響潛在的轉化。
而且，對于那些需要用戶操作的錯誤，我們不僅僅告訴用戶錯誤發(fā)生、該做什么，還需要引導他們前往相關的操作界面。堅持使用清晰的措辭來準確表明操作（抹掉、撤銷、前往的我個人信息界面），而不是使用模糊的文案，例如“是”或“否”。
如果應用中發(fā)生了技術性錯誤，你可以利用彈窗來觸達用戶，告訴他們你正在努力解決問題。這給你的應用增加了一絲人性，同時向用戶表明你在乎他們的個人體驗。
想了解“反饋”類彈窗的更多秘訣，我們建議你讀Nick Babich的這篇文章，討論對話框設計的5條重要原則。
揮灑你的才華
我們不是要粉飾任何事情。最終有些用戶仍然會看到這樣的彈窗：
圖片來源：OSXdaily.com
但也并非人人如此。你有能力輕松改善彈窗，讓使用與轉化增長。首先，要確保你擁有一個移動應用數據分析平臺，例如這個，Appsee，能使你監(jiān)控它們的表現和用戶體驗效果。這些洞見可以讓你自信滿滿地迭代、測試和驗證。彈窗可能名聲不怎么樣，但利用深思熟慮的策略，它們會給你的移動應用帶來重大轉機。
作者信息：Hannah Levenson
]]>作為企業(yè)產品的設計師，我們要如何設計好看又好賣的產品官網，有沒有一些套路可循？
企業(yè)產品官網的作用是傳達信息和促進轉化。傳達信息是告訴訪客這款產品是什么/能為你公司做什么/為什么值得我購買，再配合一些增強說服力的手段來促進轉化——將盡量多的訪客（潛在客戶）轉化為注冊用戶并最終完成購買。按照用戶瀏覽網站的順序，有以下5大設計要點：
一、善用首屏大圖吸引視線
二、銷售主張明確傳達產品價值
三、合理的導航方便訪客獲取信息
四、無處不在的CTA推動轉化
五、客戶案例增強信任感
一、善用首屏大圖吸引視線
首屏大圖占據了官網最寶貴的第一屏，它決定了訪客對官網的第一印象。首屏大圖可以輔助產品Slogan來有效傳達產品價值，同時還會影響到官網整體的氣質。常見的首屏大圖有以下5種表現形式：
1.實景照片營造場景氛圍
在實景照片這個形式上，企業(yè)級產品的表現力遠不及消費級產品（對比一下Salesforce和Apple的官網就知道了），因為企業(yè)的商務屬性決定了他們不能像消費級產品那樣大膽地彰顯個性。企業(yè)產品官網一般會用客戶使用產品的場景照來說明產品給他們工作帶來的益處，或用一些開闊的風景照來表現公司的價值觀和愿景。
這種傳統(tǒng)的照片形式常見于一些大公司，例如微軟的CRM產品Microsoft Dynamics 365：
客服應用HelpCrunch則用來表現公司未來的愿景：
2.概念圖用隱喻表達產品價值
經過設計處理之后的概念圖，比真實照片的表現空間更大，可以通過一些隱喻的手法來傳達產品價值。
Zendesk用形象的概念圖來輔助傳達產品的價值主張——We can lend a hand。
3.插畫最適合講故事
近年來一些企業(yè)重塑品牌向更年輕更有活力的方向發(fā)展。插畫的形式有利于塑造輕松時尚的品牌氣質，同時也是最適合用來講故事的表達形式。
Intercom用生動的手繪風插畫描繪了一副工作中遭遇的混亂場景，引出了使用Intercom可以結束這一切混亂的概念：
Atlassian用配色明快的圖形插畫描繪了齊心協(xié)力的工作場景，烘托出“Team up”的產品價值主張：
4.產品界面圖簡單直觀
簡單直觀的運用產品界面圖作為首屏大圖，讓用戶對產品使用過程有一種直觀的體驗，也是一種對于自己產品的設計很有自信的表現。
云存儲應用Box用產品界面和照片混搭的形式來表現“Work as One”的產品理念：
5.客戶照片更具說服力
使用真實客戶的肖像作為首屏大圖，兼具客戶案例的作用，使產品更有說服力。
自助建站應用Squarespace用高清的客戶肖像圖配合產品界面，來表現他們的應用可以為不同人群定制專屬網站的理念：
6.視頻是流行趨勢
用視頻代替靜態(tài)圖出現在首屏成為近年來流行的一大趨勢，比起靜態(tài)圖，動態(tài)視頻更容易吸引目光。視頻的內容可以是產品功能解說/客戶案例講述/企業(yè)文化傳播等，視頻的觸發(fā)方式有自動播放/預加載/點擊播放等。
自助建站應用Weebly的首頁視頻融合了各類用戶的生活狀態(tài)和使用場景，來表現“DO WHAT YOU LOVE”的產品理念：
Tips：
1.首屏大圖和銷售主張是官網的重中之重，既是營銷的核心，同時也是頁面布局和表現的核心。
2.首屏大圖是傳達產品品牌的絕佳機會。
3.不同子產品頁可以用不同的首屏大圖，但是要注意尺寸和風格保持一致。
二、銷售主張明確傳達產品價值
當用戶被首屏大圖吸引住目光之后，想要進一步留住客戶，就必須立即向他們傳達產品的核心價值，讓他明白購買你們的產品可以獲得什么好處。在營銷領域，這被稱為USP（Unique Selling Proposition），意為“獨特的銷售主張”。
1.銷售主張需要多次強調
在企業(yè)產品官網中，銷售主張會多次出現，完整的銷售主張通常會由以下三個基本部分組成：首屏標題、強化闡述和最后重申。
a.首屏標題
首屏大標題是USP的核心，簡短明確的slogan是一個強有力的開場白。通常位于官網首屏最顯眼的位置，用大字體突出，同時可以用小字在旁邊進行輔助說明。
MailChimp的首屏標題簡短有力：
b.強化闡述
用來強化和豐富USP，讓它看起來更有說服力。可以從正面出發(fā)列舉產品功能、強調產品優(yōu)勢，也可以從側面來印證，比如成功案例、資質證書等。
MailChimp用與首屏標題同樣風格的文案，配合界面圖來強化USP：
c.最后重申
當訪客瀏覽了長篇的強化闡述，瀏覽到頁面底部時，最后再重申一下USP，首尾呼應。
MailChimp在頁面底部最后重申，號召轉化行動：
2.文案風格會影響銷售主張的表現力
根據不同的產品功能和品牌調性，銷售主張的文案風格也各不相同，主要有以下幾種類型：
a.清晰直白的功能陳述
清晰直白的功能陳述可能會有點無趣，但卻是最直觀、最易于理解的。用一句話講清楚你的產品是做什么的，比含糊其辭的描述更容易讓訪客產生好感。
Xero是一款為小型企業(yè)提供會計服務的應用，他們用一句話清晰傳達了Xero的功能價值與目標用戶：
b.令人印象深刻的號召型言語
使用一些強有力、干脆利落的slogan，去號召用戶行動。使用這類USP的公司一般都已建立了一定的用戶基礎和品牌形象。
光看Asana的大標題是不是很難猜到這個公司是提供什么服務？即便如此，這幾句簡短大氣的標語還是能給人留下深刻印象：
c.抓住用戶痛點，喚起情感共鳴
這種類型的slogan一般會從反面切入描述痛點，例如“工作不用那么麻煩，用xxx你可以…”，然后引出產品可以解決這些痛點。這是一種逆向思維，通過描述產品可以“規(guī)避負面結果”來突出其解決問題的能力，這是與“獲得正面結果”相反的一種思路。
Basecamp整個官網的措辭風格都是如此：
d.動態(tài)多合一
在尋找案例的過程中，還發(fā)現了一種動態(tài)的多合一文案表現形式。它的做法是保持核心文案固定不變，其余的則不斷切換。動態(tài)的表現形式更吸睛，也賦予了USP更全面的展現。
Atlassian旗下的Confluence品牌的核心價值是“make better by working together”，因此在動態(tài)slogan中保持核心文案不變，切換開頭的主語來突出產品的適用范圍：
Tips：
1.規(guī)劃USP時要站在客戶角度，強調你的產品能為他們帶來什么好處。
2.不要怕首屏標題太短講不清功能，旁邊小字的作用就是補充說明，同時豐富排版。
3.沒人會喜歡空洞的營銷口號和行話，客戶喜歡能解答疑惑、簡單直白的USP。
三、合理的導航方便訪客獲取信息
當訪客被你的首屏大圖和價值主張吸引之后，接下來他可能想要在你的官網上四處看看了解更多信息。合理清晰的導航可以帶領訪客快速找到想要的信息。導航是網站的路標，也是網站組織架構的體現。如果訪客的瀏覽體驗不順暢，他們會對你的產品和公司失去信心。
1.不是所有網站都需要導航
導航是網站組織架構的體現。在規(guī)劃網站架構前，首先明確一個問題：我們是否需要導航？當你的目的是引導訪客按照預設路徑進行瀏覽，不希望他們跳出當前頁面，這個時候可以沒有導航。這樣的網站組織方式也叫線性結構：
對于功能簡單的產品，使用線性結構能有效帶動訪客參與性，推動轉化行為。企業(yè)產品官網的路徑通常為頭圖-產品展示-注冊試用。
例如辦公協(xié)作應用Trelllo的官網頂部沒有導航，只保留了登陸和注冊入口。頁面的信息組織按照“頭圖-功能總覽-功能細節(jié)-客戶展示-注冊試用”的順序由淺入深、從宏觀到微觀的順序引導訪客完成瀏覽和轉化。到頁面底部才會出現一排弱弱的鏈接：
線性結構的劣勢在于訪客不能按照自己的想法瀏覽網站，比如當他們找不到急切想了解的關鍵信息比如價格頁時，可能會覺得沮喪。
2.越扁平越有效
使用扁平結構可以減小網頁深度，讓訪客用較少的點擊就能到達目標頁面，同時有利于搜索引擎抓取效率。在尋找企業(yè)產品官網案例的過程中我發(fā)現，對于功能相對簡單的產品大多使用一級導航，而對于規(guī)模龐大的產品，他們的導航層級最多也只到二級?？梢姳馄浇Y構的導航是網站導航的主流。
例如企業(yè)郵件應用Mailchimp和Slack就是扁平結構的典型代表，它們的導航都只有一級，把所有頁面入口都放在外面，最重要的功能、定價位于前兩個位置，其余的根據重要性遞減排列，最右邊一般會放注冊或登陸入口：
對于一些規(guī)模龐大的企業(yè)產品，首先要盡量精簡選項，舍棄不必要的信息、隱藏次要信息，再考慮在有限的空間里把信息入口展現完整。
以Intercom為例，它是一款大型CRM應用，公司旗下有三大子產品。官網首頁設置了5個一級導航，其中前兩個是折疊導航。最重要的Products導航的下拉菜單中按照產品和解決方案兩個維度展示了對應的信息。配合icon和簡介，有序又直觀：
在Resource下拉菜單中則收攏了客戶案例、幫助中心、產品演示等資源入口，用清晰的組織方式把這些信息集中在一起，讓想要了解更多信息的人自己去探索：
使用類似結構的還有Atlassian等大型公司：
3.確保訪客清楚自己所處的位置
網站是一個虛擬空間，訪客在頁面之間的跳轉是無法預料的，如果沒有清晰的導航在時刻提醒他們所在的頁面，他們早就已經迷路了。要讓訪客時刻知道自己所處的位置，就要在不同頁面上保持導航的一致性，并在滾動頁面時保持常駐。
繼續(xù)以Intercom為例，首頁導航在滾動時保持常駐。當點擊首頁導航到達子產品頁面后，導航保持一致，只是在原先的主LOGO旁多了一個子產品LOGO來表明當前所在頁面，點擊主LOGO可以返回首頁：
子頁面開始向下滾動時導航暫且消失，當滾動到首屏以下時導航出現并常駐，注意到此時的導航樣式已經悄然發(fā)生了變化——簡化了主LOGO，右邊部分變成了3個針對當前子產品頁面的導航。整個變化過程過渡地十分自然：
再看看Atlassian的設計。到達子產品頁后會保留主導航，隨著頁面滾動，子產品導航會把主導航推出，繼而代替主導航的位置：
Tips：
1.規(guī)劃訪客的瀏覽歷程，保持順暢自然的體驗。
2.保持導航結構的一致性，確保用戶始終知道自己所處的位置。
3.保持導航的使用簡單性，刪除不必要項目。
4.簡單很好，但是要確保提供了訪客想要獲得的信息入口。
四、無處不在的CTA推動轉化
CTA（Call to Action，用戶行為召喚）是指希望訪客在瀏覽官網時完成的指定行為，通常有：注冊、申請試用、郵件訂閱、軟件下載等等。CTA是促進官網完成轉化的主要手段，對于企業(yè)產品官網，醒目的CTA按鈕是標配。
1.視覺樣式必須醒目
既然官網的目標是完成轉化，那么CTA按鈕一定是整個頁面中最醒目、最聚焦視線的。很多研究證明綠色按鈕的點擊率最高，藍色其次，但我認為這并不絕對。按鈕顏色取決于官網的整體配色和品牌調性，在這個前提下，拉大對比度，讓按鈕從背景中突出即可。樣式上突出核心CTA，次級CTA可以相對弱化。
Invision的按鈕使用了品牌色：紅色。
2.文案需要引發(fā)點擊欲望
CTA按鈕文案應該是一目了然的動詞短語，使用含有緊迫感的文字例如“立即/馬上”，或者利益導向的文字例如“免費”，可以有效引發(fā)用戶的點擊欲望。常用的文案有：免費/立即試用、免費/立即注冊、觀看演示、了解更多等等。
CTA按鈕會在網頁中出現多次，因此在文案上最好保持一致性，進階方法是根據用戶瀏覽的上下文使用更針對性的文案。
3.保持一直可見，反復強調
CTA按鈕一般與銷售主張同時出現，主要分布在官網的三個位置：頂部導航、首屏大圖、頁面底部。頂部導航的位置可以保證按鈕一直可見，首屏大圖上的按鈕是視覺核心，頁面底部的位置則作為終極呼喚。三個位置互相呼應，缺一不可。
4.次級CTA也不容忽視
原則上來說CTA按鈕應該只有一個，但近年來越來越多的企業(yè)產品官網會在主要CTA按鈕旁邊放一個次級CTA按鈕，為訪客提供第二選擇，這樣做可以讓訪客在不想點擊主按鈕的情況下退而求其次。對于企業(yè)產品的用戶來說，在注冊之前提供產品試用或視頻演示能大大增進對產品的了解。
5.嵌入簡易表單，降低注冊門檻
在CTA按鈕旁放置一個簡易的內嵌表單，相當于簡化了后續(xù)的轉化流程。例如，當用戶點擊注冊按鈕之后一般會被要求填寫用戶名、郵箱、密碼等信息，如果表單項很復雜，用戶很可能會放棄填寫。如果一開始只要求填寫郵箱，這就大大降低了注冊門檻。另外一方面，即使用戶在后續(xù)的注冊流程中放棄了填寫，那企業(yè)至少已經get到客戶的郵箱信息了。
類似Shopify這樣的郵箱表單是最常見的：
Webflow則直接把需要填寫的注冊項全列出來，這適用于注冊項在三個以內的情況：
五、客戶案例增強信任感
企業(yè)級（to B）產品不像消費級（to C）產品那么普遍和易獲取，企業(yè)客戶在選擇產品的時候更為慎重，官網要幫助消除他們的疑慮，建立對產品的信任感，最好的方式就是把已購買產品的客戶成功案例展示出來。你的客戶就是你產品天生的代言人，他們比你的產品本身更有說服力。
1.用真實的客戶頭像提升可信度
比起單純的文字展示，真實的客戶頭像可以大大提升客戶評論的可信度。對比下面兩張圖感受一下。
Webflow的客戶評論：
Intercom的客戶評論：
2.講故事，更容易打動用戶
比起一句話評論，用戶顯然更容易接受并記住一個真實場景下的故事。有的企業(yè)官網會花一整個版面的篇幅來講這個故事，從痛點到使用過程再到最后的獲益，有理有據令人信服。
Intercom在客戶故事這方面下足了功夫，每個重點客戶都有內容豐富的專題頁，里面有客戶公司簡介，描述了用Intercom的哪些產品解決了哪些問題，有從他們產品角度出發(fā)的第三人稱描述，也有客戶的第一人稱陳述：
越來越多的公司已經不滿足于靜態(tài)講故事，例如Invision，他們開始使用更專業(yè)、更有說服力的采訪短片來作為客戶成功案例：
3.精確的數字更有說服力
比起描述程度文案類似：這款產品幫助我們“大大提升了效率”、“獲得了更多用戶咨詢量”，人們更喜歡看到這樣的描述：這款產品幫助我們“減少了18%的操作時間”、“提升了25%的用戶咨詢量”。精確的數字比模糊的范圍來的更有根據、更有說服力。
Intercom的每個客戶案例中都有精確的數據支撐：
4.大公司的案例會強化信心
大公司的口碑效應還用說么。如果你有大客戶，那毫不猶豫地把他們的LOGO展示出來吧。
看看Invision的大客戶logo墻：
寫在最后
除了上面提到的5大要點之外，還有一些提升網站體驗的方法，例如：A/B Test、響應式設計、優(yōu)化加載時間等。
最后補充一點：對于消費級（to C）產品，例如我們熟悉的Evernote、Dropbox，他們的使用者與他們官網的訪客基本是同一個人。而對于企業(yè)級（to B）產品來說，產品使用者和購買者往往不是同一個人，也就是說產品使用者可能是客服人員，而官網的訪客卻可能是主管或采購之類負責買單的人。因此，企業(yè)產品官網的設計要兼顧使用者和購買者的不同角色，洞察目標客戶所在行業(yè)特征，最大化展示產品在提升企業(yè)效率或收益上的優(yōu)勢。
要設計出好看又好賣的企業(yè)產品官網，可以參考以上的5大要（tao）點（lu），也希望大家在設計過程中少一點套路，多一點freestyle~
]]>今天為大家談談APP UI界面中的一些版式排版設計理論，學習這些理論知識，對你日后做移動端界面設計也會起到一定的幫助。
1.信息的排布
對任何信息進行排布的時候，首先必須要掌握的是對齊/重復/親密/對比，貫穿設計的四大原則。
對齊除了能建立一種清晰精巧的外觀，還能方便開發(fā)的實現?；趶淖笊现劣蚁碌拈喿x習慣，移動端界面中內容的排布通常使用左對齊和居中對齊，表單填寫的輸入項使用右對齊。
設計和做其他事情一樣，也要有輕重緩急之分，不要讓用戶去找重點/需要注意的地方，應該讓用戶流暢地接收到我們想要傳達的重要的信息。重復和對比是一套組合拳，讓設計中的視覺元素在整個設計中重復出現既能增加條理性也可以加強統(tǒng)一性，降低用戶認知的難度。那么在需要突出重點的時候就可以使用對比的手法，例如圖片大小的不同或者顏色的不同表示強調，讓用戶直觀地感受到最重要的信息。
在排布復雜信息的時候，如果沒有規(guī)則地排布那么文本的可讀性就會降低。組織信息可以根據親密性的原則，把彼此相關的信息靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于減少混亂，為讀者提供清晰的結構。
在設計表達的時候，一定要考慮內容的易讀性。適當使用圖形可以增加易讀性和設計感，而且圖形的理解比文字更高效。那些用文字方式表現時顯得冗長的說明，一旦換成可視化的表現方式也會變得簡明清晰，可視化的圖形可以將說明/標題/數值這種比較生硬的內容，以比較柔和的方式呈現出來。
2.圖片的使用
app的頁面結構和文本確定之后，就要開始安排圖標/按鈕/圖片的安排了，這時頁面也就從單純文本的“閱讀”型結構調整為“觀看”型結構，對于頁面的易讀性以及頁面整體的效果會產生巨大的影響。頁面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會給人一種寧靜典雅、高級的感覺。提升圖版率會有充滿活力，使畫面有富有感染力的效果。
實際中也跟選取圖片的元素/色調/表達出來的情感有關系，合適的圖片也能散發(fā)出整個應用的氣質，直接傳達給人“高級”，“平民化”，“友好”等不同的感覺。
在內容比較少但是又想提高版面率的話可以采用一些色塊，或者抽象化模擬現實存在的物件，例如電影票，書本紙張，優(yōu)惠券，便簽等的效果，使界面更友好也降低空洞的感覺。通過這種方式也可以改變頁面所呈現出的視覺感受，只是這種方法最多改變頁面的色調/質感，并不能改改變“閱讀”內容的比例，這點是需要注意的。
3.顏色的使用
不同的顏色可以帶給用戶不同的感覺，這點應該是常識。在移動端界面中通常需要選取主色，標準色，點晴色。移動端與網頁端稍微不同，主色雖然是決定了畫面風格的色彩但是往往不會被大面積的使用。通常在導航欄/部分按鈕/icon/特殊頁面等地方出現，會有點晴，定調的作用。統(tǒng)一的主色調也能讓用戶找到品牌感的歸屬，例如網易紅/騰訊藍/京東紅/阿里橙等等。標準色指的是整套移動界面的色彩規(guī)范，確定文本/線段/圖標/背景等等的顏色。點晴色通常會用在標題文本/按鈕/icon等地方，通常起強調和引導閱讀的作用。
主色在選擇上可能不止一個，點睛色通常也由兩三個顏色組成，標準色更是一套從強到弱的標準群，那么在點晴色與主色，主色與主色之間的選擇上便有不同的方法。第一種是鄰近色配色(色相環(huán)上鄰近的顏色)，這種方法比較常用因為色相柔和過渡也非常自然。
第二種是同色系配色(色相一致，飽和度不同)，主色和點晴色都在統(tǒng)一的色相上，給用戶一種一致化的感受。
第三種是點亮色配色，主色用相對沉穩(wěn)的顏色，點晴色采用一個高亮的顏色，起帶動頁面氣氛，強調重點的作用。
第四種是中性色配色，用一些中性的色彩為基調搭配，弱化干擾。這種方法在移動端是最常見的方法。
還有一些漸變，明暗調對比，多色搭配等方法在這里不一一說明，你感受一下。
4.留白的藝術
不單單是文字和圖片需要設計，留白也是構成頁面排版必不可少的因素。所有的白都是“有目的的留白”，帶有明確的目的來控制頁面的空間構成。
常見的手法有幾種，第一通過留白來減輕頁面帶給用戶的負擔。首屏對一個應用來說十分重要，因此一些比較復雜的應用首評都堆積了大量的入口。如果無節(jié)制的添加，頁面中包含的內容太多時，會給人一種頁面狹窄的感覺，給用戶帶來強烈的壓迫感，所以元素太多有時候反而不是好事。留白能使頁面的空間感更強，視線更開闊，通過留白來減輕頁面的壓迫感，使用戶進入一種輕松的氛圍。
第二通過留白區(qū)分元素的存在，弱化元素與元素之間的阻隔。表單項與表單項之間，按鈕與按鈕之間，段落與段落之間這種有聯系但又需要區(qū)分的元素用留白的方式可以輕易造成一種視覺上的識別，同時也能給用戶一種干凈整潔的感覺。
第三通過留白有目的的突出表達的重點。“設計包含著對差異的控制。不斷重復相同的工作使我懂得，重要的是要限制那些差異，只保留那些最關鍵的。”這句話出自原拓哉的“白”一書中，通過留白去限制頁面中的差異使內容突出是最簡單自然的表達方式。減少頁面的元素以及雜亂的色彩，讓用戶可以快速聚焦到產品本身，這種方法在電商類的應用上被大量的使用。
第四留白賦予頁面構成產生不同的變化。版式設計中要有節(jié)奏感，這也是我一直強調了。傳統(tǒng)雜志在每一頁翻開都會有不同的視覺感受，我認為在app內很多板塊之間的也是可以局部去突出個性或特點的。留白可以賦予頁面輕重緩急的變化，也可以營造出不同的視覺氛圍，通過留白去改變版式再配合四大原則可以產生出不同的效果。
值得注意的是，留白不是一定要用白色去填充界面，而是營造出一種空間與距離的感覺，自然與舒適境界。
5.視覺心理的靈活運用
在觀看事物時，往往會產生一些不同的視覺心理，例如兩個等寬的正方形和圓形放在一起，你一定會覺得正方形更寬。在版式設計中同樣大量運用這些科學視覺方法對用戶進行視覺上的引導，也能讓設計師快速找到一些排版布局的方法。
(via 版式設計原理)
首先最常見方法是的是靈活運用黃金分割比，文本與線段的間隔，圖片的長寬比等地方都可以通過黃金分割比快速的設定。比如通欄高度的設定等等。
在界面排布中，往往圓角和圓形比直角更容易讓人接受，更加親切。直角通常用在需要更全面展示的地方，例如用戶的照片，唱片封面，藝術作品，商品展示等地方。在個人類的feed或者頭像，板塊的樣式等使用圓角會有更好的效果。
在全局頁面的排版中也要避免單調，增加節(jié)奏感。在上文我也提到過排版要有輕重緩急之分，這樣讓用戶在觀看的過程中不會感到冗長，無趣。
圖片也是有不同的色調的，通過蒙版的方法可以控制這種色調。如果選擇比較明亮的色調可以減輕這種對用戶的壓迫感，選擇比較暗的色調可以讓整個畫面更沉穩(wěn)，內容顯示更為清晰。
6.沒有設計的設計
最后這段不是版式設計原理，更像是一種設計的心境。古人在寫詩的時候有一種手法叫白描，原拓哉也曾強調“最美的設計是虛無”，在界面設計中同樣追求一種“讓用戶感受不到設計”的境界。每一條線/每一行文字/每一個按鈕的存在都是都有它存在的理由。它不加無意義的修飾、不須陪村和烘托，讓用戶更關注內容的主體，弱化對視覺的認知。甚至于用戶在滑動時看到一個按鈕或一行文字也感覺這是理所當然的存在。“菩提本無樹，明鏡亦非臺”，做設計和做人一樣，一切有為法皆如夢幻泡影，不要注重形式才能明心見性。
圖中的例子在某些地方處理得也不是那么自然，但是我認為以上的例子是有向“讓用戶感知不到設計”的方向上走的，沒有完美的設計，只有努力變的更好的設計。最后，做好設計非一朝一夕，理解設計也非一朝一夕，希望各位善于發(fā)現美，也善于理解美。
來源：知乎 作者：justinlam
]]>