推薦閱讀

一個優秀的設計師總是在細節處下功夫，今天我們一起看看設計中有哪些潤物細無聲的細節吧！

“在高級藝術和純粹的科學中，細節就是一切”。這是大文豪納博科夫的觀點。他曾寫過《文學講稿》，從細節入手，分析名著為何成為名著，無論在哪個行業中，細節能讓我們所從事的工作會變的更好，也會獲得別人的信賴。

在 UI 設計的工作中，往往細節的偏差只有 0 和無數個，因為 UI 設計師所設計的界面最終是要交給程序員去落地去實現的，如果平時在設計的時候不注意細節上的問題，例如同一個黑色的色值不一樣，元素沒有對其規則，圓角按鈕的大小不一樣，這些都是比較基礎的問題，偶爾一個界面上有這個問題，可能對開發的工作影響不是很大，但是當基礎的問題累計到一定的量的時候，開發的工作會比較麻煩，也會給人這個設計師不靠譜的感覺，有什么大的任務也不太放心交給你。

在企業工作相處中，信任是比較重要的。比如，我們在出去吃飯的時候，在一家店鋪品嘗后覺得味道很差，我們下次肯定不會再帶朋友去吃，反之，要是味道比較好，我們在有聚會肯定會提前的考慮這家店鋪。

所以，我們在平時的設計工作中，把自己設計的做的比較好的時候，細節上也處理的比較恰當，當別人在質疑你設計稿有問題的時候，你可以挺直腰板的說出自己的想法，才足以讓人信服。

一、用戶閱讀效率

在用戶使用 APP 的第一直觀感受，便是我們所設計的 UI界面，所以界面的信息閱讀的舒適感、顏色配色是否合理都是在第一時間直接的傳遞給用戶，我們在界面這塊需要注意的設計細節：用戶的閱讀效率；視覺舒適度；產品品質感。

1. 用戶閱讀效率

在界面設計中，界面能否準確的將信息傳達給用戶,讓用戶在使用產品的過程中對信息的接受比較快速，所以界面的信息呈現的清晰度是設計師必備的能力，也是基礎能力，我們通過細節處的把控，讓設計助力用戶對界面信息的理解，也許我們下的心思用戶可能不會注意，但是它確確實實起到了作用，關于提升用戶的閱讀效率，我們可以從以下幾方面去入手：視覺降噪；視覺聚焦；容器整合。

①視覺降噪

要讓用戶能清晰的理解我們的產品的第一步是需要整理界面中信息，把干擾用戶的信息都要進行處理，關于視覺降噪我們可以入手的細節有：弱化小面積色彩 ；減少次要對比；整合半透明；弱化分隔 ；元素圖形化。

1）弱化小面積色彩

小面積的色彩我們在視覺上會將他看作為點，當點在界面中比較多的時候，會將用戶的視線分散，給用戶閱讀上造成不好體驗，所以我們在設計界面中的標簽或者有圖標的顏色的區分的時候，我們盡量要控制顏色的種類，不宜太多，另外如果帶顏色的小標簽也會給用戶一種是按鈕的心理暗示，所以，我們在設計中需要考慮到用戶的使用場景和表意。

2）減少次要信息對比

在 APP 中會有很多復用的版塊以及功能相似的版塊，我們盡量需要讓他們去保持統一，比如像 feed 流這樣通用的樣式，只要有差不多的 feed 列表出現，我們需要在通用組件里去調用這個 feed 列表，其次是我們在每個列表和卡片中有不同種類的信息字段，并不是每次出現新的信息我們都要在樣式上作出區分，我們需要盡量的衡量表意和層次，盡量讓字段文字能保持統一，從而提升閱讀的舒適感。

3）整合半透明

一般的半透明浮層都是為了區分頁面的層級，例如在支付時候，彈窗的半透明的選項卡，這些在視覺的 Z 軸的層級都是最高的，有點是可以強化浮層與底部的關聯性，缺點是會使得視覺上不夠整齊，所以當功能層面關聯性不強的時候，我們盡量不要去使用半透明的設計形式，所以半透明的浮層通常會給用戶一些輔助的流程和體量比較好的任務型頁面，這樣的會讓交互效率和層級都是比較清晰。

4）弱化分隔

界面的設計都是以版塊去區分每個功能層級模塊的不一樣，所以合理的設計分隔的樣式對于設計師也是一種細節處的考慮。我們在分割的重要層級也是有區分的，分割層級最高的是卡片分割，其次是分割條，其次就是分割線，而分割線也有幾種，一種是通欄的分割線，另外一種是不通欄的分割線，所以分割線的層級區分是通欄的高于不通欄的分割線，還有一種情況是通過間距（留白）來區分層級，一般是通過留白沒辦法去區分頁面層級的時候，我們才會考慮用分割線來區分。

點線面的合理運用

在 APP 界面中，也會有點線面的區別，一般文字我們會將它看為點，分割線是線，圖片我們會把它看為面，所以一般情況下，如果當我們設計界面的時候，當點太多的時候，我們需要用線來進行整合，所以界面中點和點（文字和文字之間）直接是需要用線來分隔的，而圖片和圖片直接，我們通常用間距來表示，所以圖片和圖片直接一般不會使用分割線。

隨著 APP 的普及開來，我們用戶對信息分割處理的認知已經升級，現在的分割也是越來越弱，而當一個列表有文字和頭像一起出現的時候，分割線往往也都在文字部分出現，因為頭像是圖片，是一個面，文字是點，面是不需要線去分割的，而文字卻需要分割線去分割。

狀態提升線需點到為止

我們現在的 APP 主要目的是傳達內容本身，所以為了讓用戶更專注于內容的閱讀，所以一般界面中的狀態的提升線的意義是為了讓用戶去了解當前所處界面的層級和狀態。以前在做設計的時候，會習慣將提升線做得比較長，但是隨著設計趨勢的發展，人們習慣了短而精致的提升線，所以，過長或者過粗的提示線在當前的設計審美下會成為影響界面美感的因素了。

5）元素形狀化

我們在 APP 中看到一個陌生的形狀的時候，這個會在界面中形成視覺噪音，“人們在觀察熟悉的視覺形象時，會把不完整的局部形象作一個整體的形象來感知，這種知覺上的結束，稱之為閉合。如果局部形象過于陌生或者簡略，則不會產生整體閉合聯想，這時大腦會產生負面體驗”.

所以我們在界面中的元素擺放通常會將它們擺放成人們生活中比較常見的形狀，便于用戶去聯想，來提升用戶的閱讀效率。

2. 視覺聚焦

在用戶打開 APP 去瀏覽的時候，在沒有干擾的時候，用戶是根據自己的喜好去瀏覽頁面，用戶對版塊內容的偏好便決定用戶注意力的所在之處，更多的時候，我們想要用戶根據我們設定的瀏覽路徑去瀏覽，我們就需要在設計的時候給用戶埋下“陷阱”。關于設計聚焦，我們可以從以下三個角度上入手：焦點放大 ，瀏覽形式的選擇 ，? 對齊基線。

①焦點放大

在提升用戶閱讀效率的設計中，比較重要的就是主次要分明，將需要讓用戶了解到重要信息需要放大，讓用戶的視覺動線有落地點，所以關于設計焦點放大我們可以從以下三個角度上入手：①視覺中的“席克海曼定律”、②增加視覺上的對比。

1）視覺中的“席克海曼定律”

我們都知道席克定律吧！給予用戶的選擇越多，用戶做出決定的時間就越長。在 APP 設計和頁面設計的時候也是一樣的，當用戶進入頁面后，我們的視覺動線的排列也可以基于席克定律，放大想要讓用戶關注的信息點，其他輔助信息可以稍微小點，讓用戶可以直觀的區分去主次的層級，讓用戶帶有預期性的閱讀，可以提升用戶的瀏覽效率。

自從 iOS11 之后，大字重的風格就大行其道了，越來越多的產品開始采用大字重的對比風格，目的也是為了讓用戶明確自己瀏覽的頁面，然后帶著目標在繼續往下去看。那為什么大字重的風格會流行呢？

增加視覺上的對比

對比是設計美感的來源。我們在以前做 UI 設計的時候，最小的字號大多數都還是 11pt,最大的字重是 20pt 左右，而現在我們再看看，由于蘋果 iOS 大字重風格的影響，標題的引入大字重風格后，最大的字號提升至 32pt，有的設置到了 34pt，由于最大的字號上限提升了。我們在 12-34pt 之間可以選擇的字號就比較多了，很明顯這種強烈而又低頻率的對比從視覺上就更具層次了。

增加字號的選擇范圍

以前頁面導航文字較小時，版塊標題以及列表標題也都相對較小，假如導航文字大小為 18pt,那么如果頁面內的版塊標題為 20pt,就會顯得比較突兀，因為視覺上會感覺壓不住，層級較為混亂。現在由于最大的字號變大了，我們可以選用的字號就變多了，方便了視覺層級上的對比。

2）瀏覽形式的選擇

UI 界面的排版往往需要考慮到不同字段的重要層級而去采用不同的設計樣式。由于我們很多 APP 的品類的不同，每個產品都很難遵循常規頁面布局來設計。盡管沒有一種布局方法適合所有目的，但回到設計的基礎上并理解諸如“ F”和“ Z”之類的視覺模式可以幫助簡化產品布局，并使產品能夠更有效地與用戶進行交流。

F 型瀏覽模式

F 模式是一種簡單的布局，旨在根據根深蒂固的人類行為引導用戶的眼睛查看您希望他們看到的信息。在這種情況下，F 模式植根于我們的閱讀方式“從左至右”。

F 模式就是指，用戶通常會沿著左側垂直瀏覽而下，先去尋找 文章中每個段落開頭的興趣點，這時，如果用戶發現了他喜歡的，他就會從這里開始水平線方向的閱讀。

Z 型瀏覽模式

Z 型瀏覽模式相似，因為它遵循用戶的眼睛從左到右然后再向下的移動，但是當使用較少的內容時，路徑會簡化為鋸齒形。下面的示例演示了大型設計元素（而不是文本塊）如何將用戶從左上方的徽標引導到右上方的 CTA，然后向下引導至下一個主要設計元素。

Z 模式的瀏覽模式在于用戶首先關注的頁頭水平方向上的內 容。當視線抵達底部時，又遵循著從左到右的習慣模式，重復再水平掃視頁尾的最底部的內容。

3）文字的對齊基線

通常我們在設計界面的時候，在文本需要文本對齊的是很好，不需要強制性的與列表最邊緣對齊，并且當文字出現兩列時，需要設計師主動控制第二列視覺起點，保證符合視覺對齊基線。而在有輸入的表單的標題的長短不一致的時候，我們也是歸檔一端的對其基線，來穩定基本的視覺舒服感。

3. 容器收納

我們每個 APP 都會承載大量文字、圖片、視頻的各種操作控件，UI 設計師的職責便是將他們按照美的形式來排版設計和歸類，其中歸類信息承擔的責任便是用戶對信息的理解和吸收，所以，這是我們不可忽視的一步。關于容器收納我們可以通過以下設計策略進行：接近性原則歸納法，卡片既是容器，同屬性版塊整合。

①接近性原則歸納法

單個視覺元素之間無限接近，視覺上會形成一個較大的整體。距離近的單個視覺元素會融為一個整體，而單個視覺元素的個性會減弱。如果相關的元素不夠緊湊，用戶瀏覽時就需要根據內容進行主觀上的判斷，降低閱讀效率，所以在設計的時候，我們盡量要將相關聯的元素靠的比較近，不相關的元素隔的比較遠。

②卡片既是容器

當產品中的圖標字段和文字和字段比較多的時候，我們想要將他們有序的區別開，且不會很凌亂，這個時候我們可以考慮用卡片的來分隔頁面，這樣版塊與版塊直接會更加清晰明朗，而且列表中的信息比較多的時候，通常是采用卡片的形式進行劃分，讓界面看起來更為整潔。

③同屬性版塊整合

我們用戶在同一個版塊看到的相關的元素和列表的時候，我們潛意識會將他們認為他們是有關聯的，所以，為了避免用戶出現認知斷層，我們盡量要將界面中不相關的元素不要放在一起，不然會影響用戶在使用過程中對自己信息的判斷。

二、視覺舒適度

視覺的舒適度是用戶對于產品比較直觀的感覺，它在于我們設計對產品顏色的把控、圖標的細節以及其他細節方面的處理。關于視覺舒適度我們可以通過以下設計策略進行：色彩的協調感，圖形體現細節。

1. 色彩的協調感

我們產品中一般所包含的顏色的種類會比較多，而協調感是人類生理上和心理安全感的需求，也是受眾時間持久閱讀的色彩保障。關于色彩的協調感我們可以通過以下設計策略進行：品牌色的延續，讓配色有規律，紋理解決配色的極端場景。

①品牌色的延展

我們生活比較常見的黑色，除了將眼睛閉上，一般不會有純黑的顏色，純黑色會給人一種比較悶的感受，比喻黑色的夜空不會是純黑色的，黑色的電腦顯示器也不是純黑色的，顯示器上我們去瀏覽的字體，也不會給我們純黑色的。

所以我們在產品中對黑色的文字的處理也不應該去選用純黑的，純黑的色彩的選用會給我們用戶的視覺來一次斷層的處理，感覺這個顏色會比較突兀，所以，我們較早之前為了避免純黑色文字的出現會采用“高級灰”的文字色彩，即在純黑色上偏灰色的色相，隨著用戶體驗設計的水漲船高，我們現在為了避免文字出現比較純的黑色一般會在黑色上往自己產品的主色調去偏移，提升對品牌的感知度。

②讓配色有規律

一般在我們 APP 產品的配色中，讓人感覺配色不協調因素主要有兩個，一個是色彩選用的過多和過雜，會讓人感覺顏色的突然出現會比較突兀，第二個是頁面中的色彩缺少關聯性，讓用戶看起來哪個顏色都是新出現的，使用起來比較容易在當前的產品跳出，感覺進入了一個全新的產品。

所以我們在產品中是色彩的選用，盡量定好一組常用的色彩，然后便可以在界面中的圖標、插畫中去復用，提升色彩在產品中的規律，讓色彩在頁面中能有呼應。

③紋理解決配色的極端場景

我們在日常的設計工作的交接過程中，經常會聽到領導這樣的說，“這個背景配色太單薄了，不夠豐滿”這樣的言語，這個時候我們可以采用點綴的紋理來裝飾，通過使用同類色來增加點綴的元素從而讓視覺上更加協調，來增加產品的通透感，使得我們產品的搭配呈現上會更加的立體。

2. 圖形體現細節

圖形體現細節不是說我這個圖形在畫的時間有多長，而是你的思考點需要深，有些地方是別人想不到的，圖形體現細節我們思考的點是將圖標的設計流程化，標準化。

①圖標設計的流程化

圖標在我們在界面中占有舉足輕重的地位，它花費的時間是僅次于我們運營插畫的設計，所以我們需要花心思做思考，去設計，圖標的風格也會帶領界面的風格的走向，所以，圖標的設計也是 UI 設計師的基本功。

1）圖標設計有科學的流程

每一次產品中圖標的迭代改變圖標都是經過千錘百煉的，在設計圖標的過程中，有一套科學的流程，我們在提案講訴的過程中，會更加讓人信服。

窮舉關鍵詞

我們在設計圖標的過程中，一個圖標可以代表很多意思，我們怎么可以找出最合適當前產品表意的關鍵詞呢？這個時候我們就需要用到窮舉關鍵詞，將能想到的關鍵詞都列出來，例如我們需要去設計一款租房類的 APP，里面有一個“意見反饋”的圖標，這個圖標比較常見，能傳遞這種意思的圖標也有很多，我們需要用窮舉關鍵詞將他們都列出來。

圖標設計

當窮舉完圖標表意后，需要列出最佳的詞語，我們需要根據用戶在生活中比較常見的圖片或者類似的圖標進行造型提取，然后就是完善顏色和細節，再其次就是要保證其他圖標在設計中也需要有相同的元素，保證圖標的一致性。

用戶測試

用戶測試是需要確定在我們設計的圖標中去選擇一個最能傳遞當前表意的圖標，可以是自己公司其他部門的人，，例如程序員或者銷售部，也可以邀請用戶來參加，需要說出選擇當前圖標的理由。

規范制定

當圖標確定后，我們應該對圖標的細節部分進行復盤，保證以后新增或者迭代過程中，有一個可以衡量的標尺，方便團隊協助和復盤設計過程。

三、產品品質感

在設計中，如何可以做到產品品質感高級呢？這是我們經常會遇到的問題，其實高級感可以理解為一種可以傳遞感染力的設計，所以，我們，那么哪些界面中設計元素會影響人呢？例如我們的色彩等，另一種高級感就是 Dieter Rams(迪特?拉姆斯)在“設計十戒”中提到的“好的設計是盡可能是無設計”，我們可以理解為，在設計中我們需要克制，讓產品統一且簡潔。所以我們產品的品質感可以從以下兩個策略入手：界面中的相同與區分 ，品牌融入。

1. 界面中的相同與區分

①區分相似和相同

我們在生活中，有些品牌花費了很長時間和精力去做的品牌在人們心智中早已建立了，例如，茅臺的包裝早已經深入人心，但是最近有一個奶茶品牌山寨了茅臺的包裝，就會讓人感覺很廉價，像是山寨的。

在我們的產品設計中，如果兩個功能不一樣，但是意思相近，那我們所需要用到的圖標要絕對的不一樣，避免用戶誤解功能，用戶在心理上可能會把它們歸類為一個功能，如果我們要區分開，要很明確的區分，不會有 18 和 17 字號的對比。

②定義產品的角色性格

一般工作時間比較長的同學，都會有這樣的困惑，每天就是原型美化工，找不到自己的價值，特別是原型和競品的差不多的時候，那我們怎么去創新呢？我們可以思考這樣的一個問題，我們日常生活中的桌子，店內顯示器或者汽車，也都是有固定的樣式，沒人會把汽車的輪子做成方的，方向盤做成三角形的，所以，我們做的 APP 都是用戶日常生活中的工具，是沒必要做顛覆性的創新的 ，在某些細節做創新，例如寶馬的車燈，凱迪拉克的鉆石切割工藝。

所以，我們 UI 設計的創新，絕對也不是在功能上做出差異化，也是需要在細節處體現我們的品牌，怎么設計讓我們的產品在打開后看起來和別人不一樣，但是又不會影響使用，這個時候，我們要把產品都可以看作是一個有意識的生命，我們將產品想象成服務者，為我們的用戶去服務，產品有自己獨立的性格，行為動作，我們將這些代入到產品的每一個細節中。

例如我們常用的美團外賣，我們想要去定義它的設計風格，首先要用性格孵化模型去定義產品的性格，我們要通過我們用戶的主要目標用戶群去定義產品的性格，將它想象成一個具體的角色，然后具體落地成一個可以代表產品的 ip 形象，我們產品的設計、文案都應符合它的定義。

2. 品牌的延展

除了產品的性格外，我們的產品基本都會有自己的產品線形象或者產品的 LOGO，我們設計師可以做的點便是放大產品 LOGO 的記憶點，然后在產品的每個角落中去體驗，這樣也極大的可以提升產品的品質感。

比如，我們的京東的機械狗隨著產品的迭代，慢慢的變胖了，我們可以發現，除了京東的吉祥物發生了變化之外，京東的圖標也是慢慢的變得比較圓潤且通透，仿佛也是在呼應著產品的變化，京東吉祥物狗的微笑也是被提煉到產品的每一個細節中，這種仿佛產品陪伴著用戶在成長的變化，也是一種潤物細無聲的品質感。

3. 口語化文案

我們可以將我們產品中的提示文案可以想象成產品的 ip 形象在對用戶講話，在融入產品形象的性格因素，賦予了產品的生命力，同時，體驗層也可以極大提升品質感。

總結

隨著移動互聯網慢慢進入下半場，我們頭部同品類的產品的布局也是越來越相似，所以，很多細節處的地方就是我們設計所能發力的點，無論是產品視覺中還是產品交互中的細節，都是不可忽視的設計細節，它能提升產品的品質和用戶體驗。

其次，我們常說魔鬼在細節，但為什么不說天使在細節？因為細節做得好，也許不能讓我們上天堂，但是細節做不好，足以讓我們下地獄。所以打磨細節是我們作為設計從業者不可繞過的一個環節。