一個(gè)優(yōu)秀的設(shè)計(jì)師總是在細(xì)節(jié)處下功夫，今天我們一起看看設(shè)計(jì)中有哪些潤物細(xì)無聲的細(xì)節(jié)吧！

"在高級藝術(shù)和純粹的科學(xué)中，細(xì)節(jié)就是一切"。這是大文豪納博科夫的觀點(diǎn)。他曾寫過《文學(xué)講稿》，從細(xì)節(jié)入手，分析名著為何成為名著，無論在哪個(gè)行業(yè)中，細(xì)節(jié)能讓我們所從事的工作會(huì)變的更好，也會(huì)獲得別人的信賴。

在 UI 設(shè)計(jì)的工作中，往往細(xì)節(jié)的偏差只有 0 和無數(shù)個(gè)，因?yàn)?UI 設(shè)計(jì)師所設(shè)計(jì)的界面最終是要交給程序員去落地去實(shí)現(xiàn)的，如果平時(shí)在設(shè)計(jì)的時(shí)候不注意細(xì)節(jié)上的問題，例如同一個(gè)黑色的色值不一樣，元素沒有對其規(guī)則，圓角按鈕的大小不一樣，這些都是比較基礎(chǔ)的問題，偶爾一個(gè)界面上有這個(gè)問題，可能對開發(fā)的工作影響不是很大，但是當(dāng)基礎(chǔ)的問題累計(jì)到一定的量的時(shí)候，開發(fā)的工作會(huì)比較麻煩，也會(huì)給人這個(gè)設(shè)計(jì)師不靠譜的感覺，有什么大的任務(wù)也不太放心交給你。

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

所以，我們在平時(shí)的設(shè)計(jì)工作中，把自己設(shè)計(jì)的做的比較好的時(shí)候，細(xì)節(jié)上也處理的比較恰當(dāng)，當(dāng)別人在質(zhì)疑你設(shè)計(jì)稿有問題的時(shí)候，你可以挺直腰板的說出自己的想法，才足以讓人信服。

一、用戶閱讀效率

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

1. 用戶閱讀效率

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

①視覺降噪

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

1）弱化小面積色彩

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

2）減少次要信息對比

在 APP 中會(huì)有很多復(fù)用的版塊以及功能相似的版塊，我們盡量需要讓他們?nèi)ケ３纸y(tǒng)一，比如像 feed 流這樣通用的樣式，只要有差不多的 feed 列表出現(xiàn)，我們需要在通用組件里去調(diào)用這個(gè) feed 列表，其次是我們在每個(gè)列表和卡片中有不同種類的信息字段，并不是每次出現(xiàn)新的信息我們都要在樣式上作出區(qū)分，我們需要盡量的衡量表意和層次，盡量讓字段文字能保持統(tǒng)一，從而提升閱讀的舒適感。

3）整合半透明

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

4）弱化分隔

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

點(diǎn)線面的合理運(yùn)用

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

隨著 APP 的普及開來，我們用戶對信息分割處理的認(rèn)知已經(jīng)升級，現(xiàn)在的分割也是越來越弱，而當(dāng)一個(gè)列表有文字和頭像一起出現(xiàn)的時(shí)候，分割線往往也都在文字部分出現(xiàn)，因?yàn)轭^像是圖片，是一個(gè)面，文字是點(diǎn)，面是不需要線去分割的，而文字卻需要分割線去分割。

狀態(tài)提升線需點(diǎn)到為止

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

5）元素形狀化

我們在 APP 中看到一個(gè)陌生的形狀的時(shí)候，這個(gè)會(huì)在界面中形成視覺噪音，"人們在觀察熟悉的視覺形象時(shí)，會(huì)把不完整的局部形象作一個(gè)整體的形象來感知，這種知覺上的結(jié)束，稱之為閉合。如果局部形象過于陌生或者簡略，則不會(huì)產(chǎn)生整體閉合聯(lián)想，這時(shí)大腦會(huì)產(chǎn)生負(fù)面體驗(yàn)".

所以我們在界面中的元素?cái)[放通常會(huì)將它們擺放成人們生活中比較常見的形狀，便于用戶去聯(lián)想，來提升用戶的閱讀效率。

2. 視覺聚焦

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

①焦點(diǎn)放大

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

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

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

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

增加視覺上的對比

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

增加字號(hào)的選擇范圍

以前頁面導(dǎo)航文字較小時(shí)，版塊標(biāo)題以及列表標(biāo)題也都相對較小，假如導(dǎo)航文字大小為 18pt,那么如果頁面內(nèi)的版塊標(biāo)題為 20pt,就會(huì)顯得比較突兀，因?yàn)橐曈X上會(huì)感覺壓不住，層級較為混亂。現(xiàn)在由于最大的字號(hào)變大了，我們可以選用的字號(hào)就變多了，方便了視覺層級上的對比。

2）瀏覽形式的選擇

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

F 型瀏覽模式

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

F 模式就是指，用戶通常會(huì)沿著左側(cè)垂直瀏覽而下，先去尋找 文章中每個(gè)段落開頭的興趣點(diǎn)，這時(shí)，如果用戶發(fā)現(xiàn)了他喜歡的，他就會(huì)從這里開始水平線方向的閱讀。

Z 型瀏覽模式

Z 型瀏覽模式相似，因?yàn)樗裱脩舻难劬淖蟮接胰缓笤傧蛳碌囊苿?dòng)，但是當(dāng)使用較少的內(nèi)容時(shí)，路徑會(huì)簡化為鋸齒形。下面的示例演示了大型設(shè)計(jì)元素（而不是文本塊）如何將用戶從左上方的徽標(biāo)引導(dǎo)到右上方的 CTA，然后向下引導(dǎo)至下一個(gè)主要設(shè)計(jì)元素。

Z 模式的瀏覽模式在于用戶首先關(guān)注的頁頭水平方向上的內(nèi) 容。當(dāng)視線抵達(dá)底部時(shí)，又遵循著從左到右的習(xí)慣模式，重復(fù)再水平掃視頁尾的最底部的內(nèi)容。

3）文字的對齊基線

通常我們在設(shè)計(jì)界面的時(shí)候，在文本需要文本對齊的是很好，不需要強(qiáng)制性的與列表最邊緣對齊，并且當(dāng)文字出現(xiàn)兩列時(shí)，需要設(shè)計(jì)師主動(dòng)控制第二列視覺起點(diǎn)，保證符合視覺對齊基線。而在有輸入的表單的標(biāo)題的長短不一致的時(shí)候，我們也是歸檔一端的對其基線，來穩(wěn)定基本的視覺舒服感。

3. 容器收納

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

①接近性原則歸納法

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

②卡片既是容器

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

③同屬性版塊整合

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

二、視覺舒適度

視覺的舒適度是用戶對于產(chǎn)品比較直觀的感覺，它在于我們設(shè)計(jì)對產(chǎn)品顏色的把控、圖標(biāo)的細(xì)節(jié)以及其他細(xì)節(jié)方面的處理。關(guān)于視覺舒適度我們可以通過以下設(shè)計(jì)策略進(jìn)行：色彩的協(xié)調(diào)感，圖形體現(xiàn)細(xì)節(jié)。

1. 色彩的協(xié)調(diào)感

我們產(chǎn)品中一般所包含的顏色的種類會(huì)比較多，而協(xié)調(diào)感是人類生理上和心理安全感的需求，也是受眾時(shí)間持久閱讀的色彩保障。關(guān)于色彩的協(xié)調(diào)感我們可以通過以下設(shè)計(jì)策略進(jìn)行：品牌色的延續(xù)，讓配色有規(guī)律，紋理解決配色的極端場景。

①品牌色的延展

我們生活比較常見的黑色，除了將眼睛閉上，一般不會(huì)有純黑的顏色，純黑色會(huì)給人一種比較悶的感受，比喻黑色的夜空不會(huì)是純黑色的，黑色的電腦顯示器也不是純黑色的，顯示器上我們?nèi)g覽的字體，也不會(huì)給我們純黑色的。

所以我們在產(chǎn)品中對黑色的文字的處理也不應(yīng)該去選用純黑的，純黑的色彩的選用會(huì)給我們用戶的視覺來一次斷層的處理，感覺這個(gè)顏色會(huì)比較突兀，所以，我們較早之前為了避免純黑色文字的出現(xiàn)會(huì)采用"高級灰"的文字色彩，即在純黑色上偏灰色的色相，隨著用戶體驗(yàn)設(shè)計(jì)的水漲船高，我們現(xiàn)在為了避免文字出現(xiàn)比較純的黑色一般會(huì)在黑色上往自己產(chǎn)品的主色調(diào)去偏移，提升對品牌的感知度。

②讓配色有規(guī)律

一般在我們 APP 產(chǎn)品的配色中，讓人感覺配色不協(xié)調(diào)因素主要有兩個(gè)，一個(gè)是色彩選用的過多和過雜，會(huì)讓人感覺顏色的突然出現(xiàn)會(huì)比較突兀，第二個(gè)是頁面中的色彩缺少關(guān)聯(lián)性，讓用戶看起來哪個(gè)顏色都是新出現(xiàn)的，使用起來比較容易在當(dāng)前的產(chǎn)品跳出，感覺進(jìn)入了一個(gè)全新的產(chǎn)品。

所以我們在產(chǎn)品中是色彩的選用，盡量定好一組常用的色彩，然后便可以在界面中的圖標(biāo)、插畫中去復(fù)用，提升色彩在產(chǎn)品中的規(guī)律，讓色彩在頁面中能有呼應(yīng)。

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

我們在日常的設(shè)計(jì)工作的交接過程中，經(jīng)常會(huì)聽到領(lǐng)導(dǎo)這樣的說，"這個(gè)背景配色太單薄了，不夠豐滿"這樣的言語，這個(gè)時(shí)候我們可以采用點(diǎn)綴的紋理來裝飾，通過使用同類色來增加點(diǎn)綴的元素從而讓視覺上更加協(xié)調(diào)，來增加產(chǎn)品的通透感，使得我們產(chǎn)品的搭配呈現(xiàn)上會(huì)更加的立體。

2. 圖形體現(xiàn)細(xì)節(jié)

圖形體現(xiàn)細(xì)節(jié)不是說我這個(gè)圖形在畫的時(shí)間有多長，而是你的思考點(diǎn)需要深，有些地方是別人想不到的，圖形體現(xiàn)細(xì)節(jié)我們思考的點(diǎn)是將圖標(biāo)的設(shè)計(jì)流程化，標(biāo)準(zhǔn)化。

①圖標(biāo)設(shè)計(jì)的流程化

圖標(biāo)在我們在界面中占有舉足輕重的地位，它花費(fèi)的時(shí)間是僅次于我們運(yùn)營插畫的設(shè)計(jì)，所以我們需要花心思做思考，去設(shè)計(jì)，圖標(biāo)的風(fēng)格也會(huì)帶領(lǐng)界面的風(fēng)格的走向，所以，圖標(biāo)的設(shè)計(jì)也是 UI 設(shè)計(jì)師的基本功。

1）圖標(biāo)設(shè)計(jì)有科學(xué)的流程

每一次產(chǎn)品中圖標(biāo)的迭代改變圖標(biāo)都是經(jīng)過千錘百煉的，在設(shè)計(jì)圖標(biāo)的過程中，有一套科學(xué)的流程，我們在提案講訴的過程中，會(huì)更加讓人信服。

窮舉關(guān)鍵詞

我們在設(shè)計(jì)圖標(biāo)的過程中，一個(gè)圖標(biāo)可以代表很多意思，我們怎么可以找出最合適當(dāng)前產(chǎn)品表意的關(guān)鍵詞呢？這個(gè)時(shí)候我們就需要用到窮舉關(guān)鍵詞，將能想到的關(guān)鍵詞都列出來，例如我們需要去設(shè)計(jì)一款租房類的 APP，里面有一個(gè)"意見反饋"的圖標(biāo)，這個(gè)圖標(biāo)比較常見，能傳遞這種意思的圖標(biāo)也有很多，我們需要用窮舉關(guān)鍵詞將他們都列出來。

圖標(biāo)設(shè)計(jì)

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

用戶測試

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

規(guī)范制定

當(dāng)圖標(biāo)確定后，我們應(yīng)該對圖標(biāo)的細(xì)節(jié)部分進(jìn)行復(fù)盤，保證以后新增或者迭代過程中，有一個(gè)可以衡量的標(biāo)尺，方便團(tuán)隊(duì)協(xié)助和復(fù)盤設(shè)計(jì)過程。

三、產(chǎn)品品質(zhì)感

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

1. 界面中的相同與區(qū)分

①區(qū)分相似和相同

我們在生活中，有些品牌花費(fèi)了很長時(shí)間和精力去做的品牌在人們心智中早已建立了，例如，茅臺(tái)的包裝早已經(jīng)深入人心，但是最近有一個(gè)奶茶品牌山寨了茅臺(tái)的包裝，就會(huì)讓人感覺很廉價(jià)，像是山寨的。

在我們的產(chǎn)品設(shè)計(jì)中，如果兩個(gè)功能不一樣，但是意思相近，那我們所需要用到的圖標(biāo)要絕對的不一樣，避免用戶誤解功能，用戶在心理上可能會(huì)把它們歸類為一個(gè)功能，如果我們要區(qū)分開，要很明確的區(qū)分，不會(huì)有 18 和 17 字號(hào)的對比。

②定義產(chǎn)品的角色性格

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

所以，我們 UI 設(shè)計(jì)的創(chuàng)新，絕對也不是在功能上做出差異化，也是需要在細(xì)節(jié)處體現(xiàn)我們的品牌，怎么設(shè)計(jì)讓我們的產(chǎn)品在打開后看起來和別人不一樣，但是又不會(huì)影響使用，這個(gè)時(shí)候，我們要把產(chǎn)品都可以看作是一個(gè)有意識(shí)的生命，我們將產(chǎn)品想象成服務(wù)者，為我們的用戶去服務(wù)，產(chǎn)品有自己獨(dú)立的性格，行為動(dòng)作，我們將這些代入到產(chǎn)品的每一個(gè)細(xì)節(jié)中。

例如我們常用的美團(tuán)外賣，我們想要去定義它的設(shè)計(jì)風(fēng)格，首先要用性格孵化模型去定義產(chǎn)品的性格，我們要通過我們用戶的主要目標(biāo)用戶群去定義產(chǎn)品的性格，將它想象成一個(gè)具體的角色，然后具體落地成一個(gè)可以代表產(chǎn)品的 ip 形象，我們產(chǎn)品的設(shè)計(jì)、文案都應(yīng)符合它的定義。

2. 品牌的延展

除了產(chǎn)品的性格外，我們的產(chǎn)品基本都會(huì)有自己的產(chǎn)品線形象或者產(chǎn)品的 LOGO，我們設(shè)計(jì)師可以做的點(diǎn)便是放大產(chǎn)品 LOGO 的記憶點(diǎn)，然后在產(chǎn)品的每個(gè)角落中去體驗(yàn)，這樣也極大的可以提升產(chǎn)品的品質(zhì)感。

比如，我們的京東的機(jī)械狗隨著產(chǎn)品的迭代，慢慢的變胖了，我們可以發(fā)現(xiàn)，除了京東的吉祥物發(fā)生了變化之外，京東的圖標(biāo)也是慢慢的變得比較圓潤且通透，仿佛也是在呼應(yīng)著產(chǎn)品的變化，京東吉祥物狗的微笑也是被提煉到產(chǎn)品的每一個(gè)細(xì)節(jié)中，這種仿佛產(chǎn)品陪伴著用戶在成長的變化，也是一種潤物細(xì)無聲的品質(zhì)感。

3. 口語化文案

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

總結(jié)

隨著移動(dòng)互聯(lián)網(wǎng)慢慢進(jìn)入下半場，我們頭部同品類的產(chǎn)品的布局也是越來越相似，所以，很多細(xì)節(jié)處的地方就是我們設(shè)計(jì)所能發(fā)力的點(diǎn)，無論是產(chǎn)品視覺中還是產(chǎn)品交互中的細(xì)節(jié)，都是不可忽視的設(shè)計(jì)細(xì)節(jié)，它能提升產(chǎn)品的品質(zhì)和用戶體驗(yàn)。

其次，我們常說魔鬼在細(xì)節(jié)，但為什么不說天使在細(xì)節(jié)？因?yàn)榧?xì)節(jié)做得好，也許不能讓我們上天堂，但是細(xì)節(jié)做不好，足以讓我們下地獄。所以打磨細(xì)節(jié)是我們作為設(shè)計(jì)從業(yè)者不可繞過的一個(gè)環(huán)節(jié)。

張鼎