編輯導(dǎo)語：前幾篇文章中，我們已經(jīng)了解到了許多關(guān)于界面設(shè)計(jì)的相關(guān)知識。今天這篇文章讓我們回歸一下界面設(shè)計(jì)本身，談一談其設(shè)計(jì)原則與標(biāo)準(zhǔn)，希望對你有幫助。

前面介紹了5種基本的界面形式，如果從構(gòu)成界面的要素（構(gòu)件）層面看，實(shí)際上所有的界面都是一樣的，因?yàn)樗鼈兌际怯赏瑯拥目丶?gòu)成的，只是控件的位置不同而已。

因此就有必要對界面的布置進(jìn)行統(tǒng)一的標(biāo)準(zhǔn)化，建立了界面布置的標(biāo)準(zhǔn)后設(shè)計(jì)效率會(huì)提升、同時(shí)也為界面設(shè)計(jì)資料的復(fù)用奠定了基礎(chǔ)。

界面設(shè)計(jì)的標(biāo)準(zhǔn)化非常重要，因?yàn)榻缑媸怯脩粽J(rèn)知系統(tǒng)的窗口，這個(gè)標(biāo)準(zhǔn)實(shí)際上是構(gòu)建“人-機(jī)-人”工作環(huán)境的標(biāo)準(zhǔn)之一，標(biāo)準(zhǔn)化的界面形式也可以減少用戶的認(rèn)知負(fù)擔(dān)和培訓(xùn)成本。

這里給出一些界面設(shè)計(jì)上的基本原則和標(biāo)準(zhǔn)供作參考，按照從整體到局部的順序，重點(diǎn)提出以下的幾個(gè)界面設(shè)計(jì)時(shí)的原則與標(biāo)準(zhǔn)（不限于此）：

• 界面布局對原則
• 子窗體設(shè)置的原則
• 字段控件的標(biāo)準(zhǔn)
• 美工設(shè)計(jì)的原則

這些原則/標(biāo)準(zhǔn)根據(jù)界面的使用場景不同、設(shè)計(jì)師的設(shè)計(jì)理念的不同等都會(huì)有所不同，需要根據(jù)具體情況具體分析設(shè)計(jì)，這些原則和標(biāo)準(zhǔn)僅供參考。

一、界面布局的原則

1. 整體布局

界面的布局是用戶理解業(yè)務(wù)功能的重要手段，布局一定要以“業(yè)務(wù)導(dǎo)向”，布局的規(guī)范化、規(guī)律化可以培養(yǎng)用戶逐漸地走向“無師自通”的方向，如：

1. 同類界面的布局要統(tǒng)一，卡式、主細(xì)表、樹形等同樣格式要風(fēng)格一致；
2. 重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。關(guān)于界面重要信息的擺放位置請參看前面的博文；
3. 界面上近似內(nèi)容要放在相近處，如：加框以示區(qū)別、或拉大與其它內(nèi)容區(qū)域的距離；
4. 重視用戶界面友好性，易于操作、易于查看，比如：常用按鈕在鼠標(biāo)移動(dòng)最短的地方配置。工具欄的左端配置界面操作開始的功能按鈕、右端配置界面操作結(jié)束功能按鈕等；
5. 界面橫向一次的顯示信息量（標(biāo)題個(gè)數(shù)）多少，要以完成一次操作不用或是少用橫向滾動(dòng)條為標(biāo)準(zhǔn)（縱向滾動(dòng)條不限），因?yàn)轭l繁使用橫向滾動(dòng)條會(huì)使得用戶看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現(xiàn)象。

圖1 布局原則

如圖1所示，細(xì)表區(qū)的標(biāo)題設(shè)置過多（A～J），致使大約有40%的信息在處在窗口外，用戶不使用橫向滾動(dòng)條就看不到。

如果這是一個(gè)頻繁操作的動(dòng)作，那么工作效率就會(huì)低下，這就是所謂的應(yīng)用體驗(yàn)設(shè)計(jì)的不好，這種設(shè)計(jì)會(huì)極大地造成用戶滿意度的下降。解決的方法可以考慮采用分頁表達(dá)的形式。

注：對具有自適應(yīng)功能的界面也存在同樣的原則，由于列數(shù)過多界面自適應(yīng)后的字體太小看不清楚，為了看清楚必須要放大字體，結(jié)果還是要頻繁地使用橫向滾動(dòng)條，所以適當(dāng)減少列數(shù)是最有效的解決方法。

2. 局部尺寸

要約定好界面上基本的控件距離、尺寸，參見圖2，比如：

• 窗口與控件之間的距離；
• 控件之間的間距，包括縱向的行間距、橫向的字段框間距等；
• 控件的高度；
• 使用文字的字號大小等。

圖2 界面設(shè)計(jì)標(biāo)準(zhǔn)的制定

二、子窗體設(shè)置原則

以組件的主界面為第一層界面，子窗體的層數(shù)最好控制在3層以內(nèi)，也就是連續(xù)打開三個(gè)界面為限，參見圖3：

• 從菜單第一次打開的為主界面（父）
• 從主界面打開的第二層為子界面（子）
• 從子界面打開的第三層為子界面的子界面（孫）等

圖3 子窗體的層數(shù)示意圖

如果內(nèi)容實(shí)在是比較多，最終彈出的子窗體要超過3層時(shí)，可以考慮另外再設(shè)置一個(gè)組件來分擔(dān)處理的內(nèi)容，不然子界面彈出過多，就會(huì)造成界面的混亂，會(huì)降低用戶的操作效率。

三、字段控件的標(biāo)準(zhǔn)

字段控件的表達(dá)格式根據(jù)內(nèi)容不同而不同，字段控件由兩個(gè)部分構(gòu)成：標(biāo)題欄和輸入框，參見圖4：

圖4 字段控件的長度與數(shù)據(jù)位置

1. 標(biāo)題欄的長度

標(biāo)題的字?jǐn)?shù)不要太多，因?yàn)闃?biāo)題長到如同一句話時(shí)就不容易記憶了，最佳字?jǐn)?shù)在2～6個(gè)字之間（易于記憶與稱呼的長度）；另外標(biāo)題中的文字位置可以參考：有背景框時(shí)居中，沒有時(shí)居左或居右，圖4中的標(biāo)題欄有背景色，所以采用了文字居中的形式。

注：這里的”標(biāo)題欄名稱“指的是”字段名稱“，不是4個(gè)業(yè)務(wù)功能中的”表單名稱“，后者可以按照實(shí)際的名稱寫，多少字都可以，不必要設(shè)置字?jǐn)?shù)。

2. 輸入框的長度

輸入框的字段長度是不一定的，建議輸入框的長度與字?jǐn)?shù)相匹配不必統(tǒng)一，如圖4（a）的式樣，因?yàn)槿绻y(tǒng)一長度就一定會(huì)以字?jǐn)?shù)最多的字段為準(zhǔn)，那么字?jǐn)?shù)少的字段也用長輸入框就不容易讀取，而且輸入框的長度一樣時(shí)字段之間的辨識度就會(huì)降低，尋找某個(gè)字段的時(shí)間會(huì)增加。

比如：圖4（b）樣式的“工程月數(shù)”字段只有2個(gè)單位的長度，如果采用和具有30個(gè)單位長度的“項(xiàng)目名稱”一樣長的輸入框時(shí)，則“工程月數(shù)”就會(huì)因?yàn)闃?biāo)題與數(shù)據(jù)的距離太遠(yuǎn)而不容易讀取（看不準(zhǔn)）。

相比較而言，圖4（a）樣式中的“座機(jī)號碼”、“郵政編號”、”工程月數(shù)“的輸入框長度比較短，就比較容易尋找和識別。

3. 數(shù)據(jù)的位置

輸入框內(nèi)數(shù)據(jù)的位置，根據(jù)內(nèi)容不同而不同，參見圖4（a）：

• ①文字型數(shù)據(jù)：靠框的左端布置，如：名稱、說明文；
• ②③數(shù)值型數(shù)據(jù)（長度固定）：居中布置，由于編號類數(shù)據(jù)長度是一定的，所以居中容易讀取，如：電話號碼，郵政編號、材料編號，這樣做也容易與“文字類”和“數(shù)值類”數(shù)據(jù)進(jìn)行區(qū)分；
• ④⑤數(shù)值型數(shù)據(jù)（長度非標(biāo)）：靠框的右端布置，如：金額、數(shù)量、長度。

四、顏色與裝飾的原則

這里介紹的界面設(shè)計(jì)中雖然不涉及到美工的內(nèi)容，但是也希望作為設(shè)計(jì)師具有一些美學(xué)的意識，因?yàn)樽罱K用戶的滿意度是個(gè)綜合的指標(biāo)，這個(gè)指標(biāo)至少包括了下述內(nèi)容：

• 業(yè)務(wù)正確：來自于業(yè)務(wù)設(shè)計(jì)（需求分析、架構(gòu)、功能、數(shù)據(jù)等）的成果，信息的分區(qū)等；
• 易操作性：來自于功能應(yīng)用設(shè)計(jì)的成果（界面、控件），推送機(jī)制等；
• 性能良好：來自于技術(shù)開發(fā)測試等的成果；
• 美觀易讀：來自于UI、美工設(shè)計(jì)等。

因?yàn)槠髽I(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺，界面風(fēng)格要具有以下的特點(diǎn)（僅供參考）：

• 界面的整體要做到簡潔、明了，界面上的各種要素（控件）的擺放位置、顏色、是否使用3D形式都要思考，輔助的功能不要喧賓奪主；
• 使用淡雅的色彩作為基調(diào)原色，不要大面積地使用原色，容易造成眼睛的疲勞；
• 要給用戶以安靜的感受，不要用有炫酷和跳躍感的要素去分散用戶的注意力（電商平臺的界面希望不斷地帶給用戶新的發(fā)現(xiàn)、驚喜）。

五、小結(jié)

隨著計(jì)算機(jī)技術(shù)的發(fā)展，計(jì)算機(jī)的使用領(lǐng)域和用途越來越廣泛，界面風(fēng)格也隨之更加多樣化。

比如：互聯(lián)網(wǎng)風(fēng)格頁面、物聯(lián)網(wǎng)的界面，硬件技術(shù)的進(jìn)步也影響界面風(fēng)格的變化；比如：智能手機(jī)端、平板電腦端等，它們的設(shè)計(jì)內(nèi)容、風(fēng)格都有所不同，但是上述的基本理念、原則等還是適用的。

本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

蘭亭妙微(www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

在當(dāng)今設(shè)計(jì)行業(yè)，設(shè)計(jì)師不僅需要具備專業(yè)技能，更要與業(yè)務(wù)目標(biāo)緊密結(jié)合，以提升設(shè)計(jì)的實(shí)際效用。本文探討了如何通過設(shè)計(jì)洞見來識別客戶需求，進(jìn)而優(yōu)化設(shè)計(jì)過程。

好的設(shè)計(jì)師不僅僅要有專業(yè)能力，更重要的是與產(chǎn)品達(dá)到同頻，最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。

目前設(shè)計(jì)行業(yè)的現(xiàn)狀，大部分設(shè)計(jì)師還停留在設(shè)計(jì)思維的角度，存在一些和業(yè)務(wù)格格不入的情況，只關(guān)注好不好看，做一個(gè)交互原型的美化者…

自己做了很多，但是與實(shí)際脫節(jié)。出了很多個(gè)方案，產(chǎn)品（或運(yùn)營/商務(wù)伙伴）覺得沒什么變化；打磨了很多細(xì)節(jié)和創(chuàng)新點(diǎn)，產(chǎn)品卻只想快速上線……

設(shè)計(jì)師自己的工作被各種“非專業(yè)”的指導(dǎo)意見干擾；而其他職崗伙伴眼里，我們的付出，卻變成了一種“設(shè)計(jì)師的自High”。

究其原因，還是把以用戶思維去進(jìn)行設(shè)計(jì)。

想要改變這樣的狀態(tài)，最核心的是思維轉(zhuǎn)變，從技能導(dǎo)向的思考方式變?yōu)閮r(jià)值導(dǎo)向的思考方式。

本文主要從講述，如何通過方法，在項(xiàng)目進(jìn)入期獲得有效設(shè)計(jì)洞見，提高設(shè)計(jì)效用，帶來客戶價(jià)值（用戶價(jià)值）。

一、什么是設(shè)計(jì)洞見？

先舉一個(gè)例子：如何做一個(gè)新款剃須刀產(chǎn)品？

飛利浦這些大公司，給出的答案是 更好的刀頭，更貼合面部，更安全和更容易清洗，一個(gè)黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實(shí)誕生了。

但是有一個(gè)很有意思的公司，給出了另一份答案：極簡造型、合金材質(zhì)、超 mini 尺寸和豐富配色，最重要的是：

于是 2019 年，這個(gè)疫情開始的時(shí)間，這家剃須刀橫空出世。

這款產(chǎn)品獲得成功的原因，本質(zhì)上就是產(chǎn)品的設(shè)計(jì)者帶著更高、更廣的視角，洞見了“剃須刀不僅是一個(gè)工具，它更可以成為一種禮物”這個(gè)更深層次的客戶需求，打破現(xiàn)有市場概念，獲得成功。

 

——如果說，設(shè)計(jì)洞察是發(fā)現(xiàn)和理解問題的能力，是設(shè)計(jì)師在研究和解決問題時(shí)所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計(jì)洞見可以幫助設(shè)計(jì)師更好地識別問題、提出創(chuàng)新解決方案，并為設(shè)計(jì)師提供思考問題和做出決策的指導(dǎo)。

Brown.Tim在《設(shè)計(jì)思考改造世界》中說：”未來的設(shè)計(jì)師將扮演科技的詮釋者（洞見能力）,人性的引領(lǐng)者（觀察能力）,感性的創(chuàng)造者與品位的營造者（同理心）的角色”。

通過設(shè)計(jì)洞見，可以讓我們看更高、想更全， 與業(yè)務(wù)貼合更緊密，讓設(shè)計(jì)得到認(rèn)可，產(chǎn)生業(yè)務(wù)共鳴，賦予用戶/客戶價(jià)值，才能讓設(shè)計(jì)變的更有價(jià)值。

二、如何獲得設(shè)計(jì)洞見？

接下來我們將通過一一探索獲得洞見的三個(gè)階段。

第一階段：設(shè)計(jì)洞察

洞察階段的核心，是獲得現(xiàn)象背后的動(dòng)因。是一個(gè)獲得信息與問題的階段

產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過程，在設(shè)計(jì)和迭代的過程中，會(huì)經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計(jì)洞見有效過去在更前置的節(jié)點(diǎn)，才能產(chǎn)生更有效的價(jià)值。

所以我們首先做的是：“提升設(shè)計(jì)的主動(dòng)性”，在項(xiàng)目的進(jìn)入期最大化實(shí)現(xiàn)設(shè)計(jì)洞見的價(jià)值。

項(xiàng)目進(jìn)入期通常會(huì)有一個(gè)通病，即問題泛化，無法具象。在一個(gè)比較“泛”的問題下，挖掘目的/目標(biāo)，找到問題最簡單的辦法就是“調(diào)查分析”：了解行業(yè)生態(tài)與業(yè)務(wù)背景，確定或推測自身產(chǎn)品的發(fā)展方向，分析定位與關(guān)注指向-Pointer（即當(dāng)下會(huì)產(chǎn)生哪些具有指向性的任務(wù)方向）。

這個(gè)階段，我們的主要目的是通過最初始的源頭數(shù)據(jù)，正確的了解業(yè)務(wù)或者項(xiàng)目的背景，避免因信息傳遞所產(chǎn)生的認(rèn)知誤差，以免發(fā)生“指向”偏差。而要做到這一點(diǎn)，洞察就不能僅僅停留在表面的觀察，詢問，記錄和數(shù)據(jù)分析，而要隨時(shí)通過聯(lián)想和反思來回歸本質(zhì)——客戶（用戶）和場景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。

1）知識準(zhǔn)備

了解各種市場調(diào)研的方法與過程，對調(diào)研方法進(jìn)行分類。

如下圖所示，（戴力農(nóng)《設(shè)計(jì)調(diào)研》）橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的（人們的行為）還是主觀的（人們的目標(biāo)和觀點(diǎn)），縱軸區(qū)分了該方法的類型是定性的還是定量的。

2）選擇正確的調(diào)研辦法

不同的產(chǎn)品生命周期，對應(yīng)不同的調(diào)研方法，根據(jù)產(chǎn)品的不同時(shí)期選擇合適屬性的調(diào)研辦法。

互聯(lián)網(wǎng)設(shè)計(jì)師的常規(guī)調(diào)研手法，受困于資源，多是在桌面進(jìn)行。我們通過二手資料研究、競品和線上走查獲得問題，進(jìn)行虛擬對象的研究，極易發(fā)生偏差。

拓新場景和成長初期，通常資源緊張且缺乏具象客戶，很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對于設(shè)計(jì)師來說，在了解業(yè)務(wù)信息，對稱業(yè)務(wù)方向時(shí)可以依賴其他職崗提供的資料進(jìn)行研究；但是對于設(shè)計(jì)息息相關(guān)的關(guān)鍵點(diǎn)，建議還是通過自己實(shí)地考察、焦點(diǎn)實(shí)驗(yàn)去獲取真實(shí)的體驗(yàn)信息。

成長后期與成熟期，關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量，縮短與頭部產(chǎn)品之間的差距，實(shí)現(xiàn)產(chǎn)品的高增長 。大樣本的用戶與競品調(diào)研可以幫助我們更可觀的看到真實(shí)的客戶需求。再輸入到我們的日常桌面研究中去。

3）掌握信息收集、數(shù)據(jù)統(tǒng)計(jì)分析方面的知識

4）了解調(diào)研的流程

確定調(diào)研目標(biāo) → 制定調(diào)研計(jì)劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請調(diào)研對象&執(zhí)行調(diào)研過程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。

調(diào)研的實(shí)際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了，也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。

得到大量信息，進(jìn)行吸收、理解和處理后，我們將收獲大量的問題。接下來就是如何解決問題。

第二階段：定位價(jià)值

定位價(jià)值是洞見的關(guān)鍵階段，是能給業(yè)務(wù)帶來價(jià)值的核心，是可以改變客戶（用戶）習(xí)慣和行為的關(guān)鍵博弈。

那么如何定位價(jià)值呢？

1）問題整合，提煉與確認(rèn)指向

將調(diào)研獲得的問題進(jìn)行歸納與整理，如簡單的 Card Sorting ，確認(rèn)所有問題的核心指向（Pointer）。

接下來就需要不停的切換指向，并深入每個(gè)關(guān)鍵 key 下進(jìn)一步拆解，確定你收獲的是否是一個(gè)真正且重要的 Pointer。

EG海底撈▽

餐廳高峰期經(jīng)常人滿為患，排隊(duì)體驗(yàn)差。常規(guī)餐廳的做法：約束更快的出餐、收臺，拆分更多的餐位，引導(dǎo)拼桌服務(wù)等等等等..短期可能會(huì)帶來改變，但是達(dá)到一個(gè)極限點(diǎn)以后，就很難再提升了。

類似的場景還有曾經(jīng)的外賣小哥：30 分鐘以內(nèi)還能更快嗎？答案是：很難。

那怎么讓客人愿意多等待一點(diǎn)，或者不覺得“等待完全是無價(jià)值無意義的”？

海底撈選擇在你排隊(duì)等待的時(shí)候，提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù)，讓客人等待的過程中不至于無事可做。獲得了認(rèn)可，贏得了口碑。

如果你留心觀察，你會(huì)發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個(gè)打招呼的氣泡Hi，來強(qiáng)調(diào)服務(wù)為先的品牌定位，解決的是情感需求中的「過程體驗(yàn)」。

2）PDS（問題-檢測-研究）調(diào)查分析

PSD 調(diào)查分析的核心思想，是調(diào)查客戶（用戶）與預(yù)期（行為/認(rèn)知）的偏差，或不滿與問題來發(fā)現(xiàn)洞見。

EG BBDO反煙推廣 ▽

BBDO 的英國公司層接到過這樣一個(gè)推廣任務(wù)：是讓年輕人，特別是十幾歲的小女孩兒戒煙。

其實(shí)這個(gè)問題特別棘手。一方面，吸煙是一個(gè)生理上癮的事情，要戒掉很困難；另一方面，吸煙最大的問題是有害健康，但是對于年輕人來說在這個(gè)角度的感觸不深，很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案，但是借助洞見以后就不一樣了。

通過了解更多事實(shí)，看目標(biāo)群體關(guān)注什么，哪些問題對我們要實(shí)現(xiàn)的目標(biāo)有影響。在這個(gè)案例里，BBDO的做法是派了一個(gè)年輕的女助理在購物區(qū)找了一家咖啡館，連著5天坐在那里聽那里的女孩兒在聊些什么。

結(jié)果這5天內(nèi)她就發(fā)現(xiàn)，這些十幾歲的女生大部分聊的是買衣服、做頭發(fā)、選什么樣的指甲油和減肥藥，怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時(shí)候，洞見就自己呼之欲出了：原來對于這些無所事事，十幾歲的年輕女孩而言，沒有什么比她們看起來漂亮更重要了。

因此，你不需要告訴她吸煙可能縮短壽命，你只要告訴她一件事情：“吸煙會(huì)讓你變得難看”，就足夠讓她戒煙了。

所以，想要獲得洞見，就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過調(diào)研發(fā)現(xiàn)真正的問題時(shí)，洞見往往就會(huì)產(chǎn)生。

3）規(guī)避技能導(dǎo)向

設(shè)計(jì)的職崗角色是單薄的。我們一定要帶著指針與方案，多職崗評估價(jià)值與可執(zhí)行度，這是一個(gè)設(shè)計(jì)前期任務(wù)的過程。它的輸出可能為設(shè)計(jì)Demo、簡單的筆記、方案的列表，或者是一個(gè)說明效果的故事版……不一定具備完整的落地性，但是可以讓伙伴更好的理解你的觀點(diǎn)。

第三階段：系統(tǒng)輸出

設(shè)計(jì)的解決方案要從起心動(dòng)念、貫穿至產(chǎn)、研、運(yùn)營甚至上市宣傳的全路徑方案。

在分析階段我們通過“3步走”的視角思維，明確了任務(wù)重點(diǎn)同時(shí)幫助我們明確不同指針的優(yōu)先級。

設(shè)計(jì)師要考慮的維度不僅僅在用戶體驗(yàn)層面，更應(yīng)在執(zhí)行時(shí)候要考慮業(yè)務(wù)的實(shí)際需求，考慮上下游不同職能的工作內(nèi)容，始終保持全局與系統(tǒng)的思維，要從客戶價(jià)值出發(fā)，回落到企業(yè)成本中去。

通過設(shè)計(jì)洞見，從更本質(zhì)的層面去洞悉問題，重新定義和設(shè)計(jì)任務(wù)。

與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計(jì)。

讓你的設(shè)計(jì)方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù)，提升設(shè)計(jì)的效用。讓“提升體驗(yàn)”這件事真正落地。

改變我們看世界的方式，亦改變世界看待我們的方式。

如何讓您的產(chǎn)品詳情頁脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設(shè)計(jì)師都必須面對的重要挑戰(zhàn)。本文深入探討了詳情頁提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。

最近半年有策劃不少詳情頁，然后就想總結(jié)一些詳情頁相關(guān)的內(nèi)容。

其實(shí)產(chǎn)品詳情頁的設(shè)計(jì)原則只有一個(gè)，那就是迎合目標(biāo)消費(fèi)者的需求。那么一個(gè)好的產(chǎn)品詳情頁都應(yīng)該包含什么內(nèi)容呢？

一、首屏，吸引主視覺

核心目標(biāo)：用視覺+文案快速傳遞產(chǎn)品核心價(jià)值。3秒內(nèi)讓消費(fèi)者“一見鐘情”。

是的，請務(wù)必在5秒內(nèi)讓消費(fèi)者“一見鐘情”，若無法在5秒內(nèi)抓住眼球，客戶可能會(huì)關(guān)閉這個(gè)頁面。

內(nèi)容方向：

1.產(chǎn)品核心賣點(diǎn)（加上產(chǎn)品外觀，科技感）

2.使用場景化展示（如模特穿戴、產(chǎn)品使用動(dòng)態(tài)）

3.品牌 LOGO / 標(biāo)語（弱化但可識別）

設(shè)計(jì)公式：

1.主標(biāo)題=1. 一句話展示出產(chǎn)品的核心賣點(diǎn)/核心宣傳點(diǎn)；2.或者產(chǎn)品名稱，3.或者情緒價(jià)值（如減壓、陪伴）+功能關(guān)鍵詞（如“AI監(jiān)測”）；

 

2.副標(biāo)題=1. 產(chǎn)品名稱+使用場景；2. 或者核心賣點(diǎn)/核心宣傳點(diǎn)

3.ICON(非必選，有則添加)=信任背書（如“FDA認(rèn)證”）；或產(chǎn)品特色；或核心成分（總之就是消費(fèi)最關(guān)心的點(diǎn)）。

布局要點(diǎn)：

產(chǎn)品圖占據(jù)版面1/2以上，文字占據(jù)版面1/8左右，以圖吸睛，輔以少量文字說明，版面適當(dāng)留白，保證畫面簡潔明了。

優(yōu)秀案例參考：

Dreametech 品牌新品發(fā)布的產(chǎn)品第一張Banner：

產(chǎn)品名字+產(chǎn)品核心宣傳點(diǎn)“Rise up, clean beneath” +多個(gè)獎(jiǎng)項(xiàng)背書效果的Icon。

整個(gè)設(shè)計(jì)非常簡潔和科技感，沒有多余的元素，使得產(chǎn)品成為視覺焦點(diǎn)。

圖片來源：dreametech 僅供學(xué)習(xí)用

Anker品牌產(chǎn)品名字+產(chǎn)品核心賣點(diǎn)+應(yīng)用場景。

圖片來源：Anker 僅供學(xué)習(xí)用

二、痛點(diǎn)展示

核心目標(biāo)：制造“痛感共鳴”，讓消費(fèi)者驚呼“這就是我！并激發(fā)“我需要解決它”的欲望。

人性本懶惰，大多數(shù)人不愿改變，除非感到足夠“痛”。

想讓顧客為你付費(fèi)，關(guān)鍵在于讓潛在客戶真切感受到他們面臨的問題有多嚴(yán)重，若不解決，后果將不堪設(shè)想。

一旦激發(fā)他們的情感反應(yīng)，改變的念頭便油然而生。

因此，第二張Banner要精準(zhǔn)擊中用戶痛點(diǎn)，羅列消費(fèi)者常遇的問題及根源，呈現(xiàn)能引發(fā)共鳴的畫面。

布局要點(diǎn)：

通過圖文結(jié)合的方式，描述消費(fèi)者的痛點(diǎn)，如展示消費(fèi)者在生活中遇到的各種問題。

三類痛點(diǎn)挖掘法：

1. 環(huán)境痛點(diǎn)（如“冬季取暖成本高”→塔式取暖器）
2. 行為痛點(diǎn)（如“化妝易脫妝”→定妝散粉）
3. 產(chǎn)品痛點(diǎn)（如“傳統(tǒng)菜刀收納架易積水”→透氣設(shè)計(jì)收納架）

優(yōu)秀案例參考：

Petlibro品牌在Smart Fountain(給貓智能喂水相關(guān)的產(chǎn)品)產(chǎn)品詳情頁的痛點(diǎn)描述海報(bào)中，突出了貓咪因缺水而面臨的健康風(fēng)險(xiǎn)，通過具體數(shù)據(jù)強(qiáng)調(diào)了脫水對貓咪的危害。

如“9百萬+貓患有貓下泌尿道疾病”和“1百萬+貓患有慢性腎病”，這些龐大的數(shù)字能夠直觀地展示問題的嚴(yán)重性，讓養(yǎng)貓人士意識到這些健康問題并不是個(gè)別現(xiàn)象，而是普遍存在的問題。

輔助貓?jiān)谕纯嘀械恼掌軌蚣ぐl(fā)養(yǎng)貓人士的情感共鳴。養(yǎng)貓人士可能會(huì)更加注意自己寵物的水分?jǐn)z入，從而想要主動(dòng)采取預(yù)防措施。就會(huì)繼續(xù)網(wǎng)下瀏覽網(wǎng)頁試圖尋找解決方案。

圖片來源：furbo 僅供學(xué)習(xí)用

三、產(chǎn)品差異化優(yōu)勢

核心目標(biāo)：突出差異化，用“人無我有”建立競爭壁壘，讓消費(fèi)者覺得“非你不可”。(這個(gè)部分可以用1-3 張圖）

上面的一張海報(bào)提到核心痛點(diǎn)，當(dāng)一個(gè)人意識到了問題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。

因此從第三張海報(bào)開始接下來的幾張海報(bào)都可以呈現(xiàn)如何幫助他們解決問題或?qū)崿F(xiàn)需求。

并且關(guān)于如何解決問題，實(shí)現(xiàn)起來還無比容易，再加上眾多保障，讓你可以0風(fēng)險(xiǎn)購買使用。

這樣用戶就會(huì)想要躍躍一試，成交的意愿就會(huì)很強(qiáng)。

因此大家有沒有注意到，截至目前，沒有一張海報(bào)是多余的，每一張都有它的用處，并且前后是有邏輯性的。

那么在這個(gè)板塊的海報(bào)中，用什么打動(dòng)客戶？

前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢，也就是在同類目產(chǎn)品中的優(yōu)勢，“人無我有，人有我優(yōu)，同時(shí)能解決用戶問題”的點(diǎn)。

比如用戶關(guān)注續(xù)航，競品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽能可以無限續(xù)航。比如全球第一款XXXX產(chǎn)品等。

優(yōu)秀案例參考：

Reolink攝像頭搭載Wi-Fi 6技術(shù)，實(shí)現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個(gè)新的水平。

圖片來源：reolink 僅供學(xué)習(xí)用

dreametech品牌20,000Pa優(yōu)勢并告訴用戶這款掃地機(jī)器人能夠產(chǎn)生強(qiáng)大的吸力，幾乎可以吸入任何類型的污垢和灰塵，無論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。

圖片來源：dreametech 僅供學(xué)習(xí)用

四、功能拆解

核心目標(biāo)：回答用戶“這對我有什么好處？”從“功能”到“利益”的轉(zhuǎn)化。（建議 3-5 個(gè)核心功能）

也就是因?yàn)槟惝a(chǎn)品的優(yōu)點(diǎn)給消費(fèi)者帶來的好處或者利益。可以是產(chǎn)品成分的優(yōu)勢或者功效的優(yōu)勢。

消費(fèi)者更愿為“解決問題”買單，而非單純的功能。我們可以將功能轉(zhuǎn)換成用戶能夠理解并幫助消費(fèi)者解決需求的點(diǎn)，幫助用戶更好地理解產(chǎn)品，并產(chǎn)生購買的可能。

內(nèi)容方向：

技術(shù)參數(shù)（如材質(zhì)、尺寸、續(xù)航）

創(chuàng)新設(shè)計(jì)（如隱藏式按鍵、防水結(jié)構(gòu)）

用戶利益點(diǎn)（如 “輕便易攜帶”“安全防摔”）

優(yōu)秀案例參考：

Dreametech 將功能清晰轉(zhuǎn)化為利益點(diǎn)”Charge Faster, Clean Longer”。

“5500mAh 大電池” 對應(yīng) “單次清潔時(shí)間長達(dá) 220 分鐘”，讓用戶明白確實(shí)續(xù)航更長、清潔范圍更大，減少頻繁充電。

“吸力高達(dá) 2000Pa” 轉(zhuǎn)化為清潔力強(qiáng)，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時(shí)間。用簡潔語言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶帶來的便利。

圖片來源：dreametech 僅供學(xué)習(xí)用

也可以用其中一張圖整合所有想傳達(dá)的核心功能，比如下面dreametech和Anker的海報(bào)。

圖片來源：dreametech和anker 僅供學(xué)習(xí)用

五、產(chǎn)品細(xì)節(jié)圖

核心目標(biāo)：細(xì)節(jié)決定轉(zhuǎn)化率，用細(xì)節(jié)增強(qiáng)真實(shí)感，降低決策成本。

這個(gè)板塊可以放大產(chǎn)品細(xì)節(jié)，展示產(chǎn)品的材質(zhì)、做工等屬性信息，用視覺+文案雙重沖擊的方式，有效傳遞產(chǎn)品賣點(diǎn)。

優(yōu)秀案例參考：

依舊是dreametech 品牌的掃地機(jī)。文案 “Double the Brushes, Double the Results” 采用押韻的手法，朗朗上口，不僅點(diǎn)明雙刷設(shè)計(jì)，還暗示清潔效果加倍，極具吸引力。

畫面選取掃地機(jī)工作時(shí)的特寫鏡頭，著重展示雙刷旋轉(zhuǎn)卷起灰塵垃圾的細(xì)節(jié)，真實(shí)還原清掃場景。讓消費(fèi)者能直觀感受到產(chǎn)品的強(qiáng)大清潔力。

還可以用跟競品對比的細(xì)節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細(xì)節(jié)展示。有對比才更突出優(yōu)勢和產(chǎn)品效果。

圖片來源：dreametech 僅供學(xué)習(xí)用

六、用戶證言，信任背書

核心目標(biāo)：用權(quán)威和真實(shí)擊破最后一道防線，消除懷疑，讓消費(fèi)者覺得“選擇你零風(fēng)險(xiǎn)”從而激發(fā)購買欲望。

內(nèi)容方向:

• 消費(fèi)者實(shí)測/證言（如“1000名志愿者實(shí)測效果對比”。這里有一個(gè)數(shù)據(jù)可以分享一下，平均而言，顧客在購買東西之前大約會(huì)閱讀10條客戶評論，當(dāng)然，低成本不需要太多理性思考的產(chǎn)品除外）
• 實(shí)驗(yàn)室數(shù)據(jù)（如“SGS認(rèn)證無毒材質(zhì)”）
• 檢測報(bào)告
• 對比測試
• 明星、權(quán)威專家背書
• 媒體背書如（如“《Forbes》推薦最佳庭院產(chǎn)品”）
• 獎(jiǎng)項(xiàng)&專利

圖片來源：dreametech 僅供學(xué)習(xí)用

圖片來源：luffy-wear 僅供學(xué)習(xí)用

七、使用指南/場景拓展

核心目標(biāo)：越瑣碎，越真實(shí)，預(yù)判所有可能的疑問，減少客服壓力。

尤其是美國消費(fèi)者習(xí)慣自助購物，詳盡的信息能降低退貨率。因此此部分的設(shè)計(jì)需清晰的展示產(chǎn)品的基本信息。

內(nèi)容方向：

• 包裝清單（如“內(nèi)含主機(jī)+充電線+保修卡”）
• 使用說明&使用禁忌（如“步驟分解圖”“多場景應(yīng)用圖”“孕婦慎用”“FAQ” “產(chǎn)品規(guī)格參數(shù)” ）
• 售后政策（如“90天無理由退換”）。

圖片來源：furbo 僅供學(xué)習(xí)用

圖片來源：dreametech 僅供學(xué)習(xí)用

八、品牌介紹

核心目標(biāo)：給產(chǎn)品一個(gè)“靈魂溢價(jià)”，從“賣貨”到“賣價(jià)值觀”，綁定長期用戶。

我們可以將品牌理念傳達(dá)給消費(fèi)者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價(jià)值，帶動(dòng)消費(fèi)者購買。

Sprout Social數(shù)據(jù)調(diào)研顯示：美國Z世代用戶中，62%的消費(fèi)者愿意為具有社會(huì)責(zé)任的品牌支付溢價(jià)。那么為什么不展示這個(gè)板塊讓你的消費(fèi)者看到企業(yè)有愛心的一面？

內(nèi)容方向：

• 創(chuàng)始人IP（如“創(chuàng)業(yè)初心”）；
• 社會(huì)使命（如“每筆訂單捐贈(zèng)1美元給流浪動(dòng)物”）；

優(yōu)秀案例參考：

furbo品牌產(chǎn)品詳情頁最后一張海報(bào)提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關(guān)心動(dòng)物福利，強(qiáng)調(diào)品牌的社會(huì)責(zé)任感。

每購買一臺Furbo，消費(fèi)者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動(dòng)物，激勵(lì)更多人做出購買決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價(jià)值，提升品牌忠誠度。

同時(shí)，F(xiàn)urbo展示透明度和責(zé)任感，增強(qiáng)消費(fèi)者的信任。通過這樣的方式，F(xiàn)urbo有效促進(jìn)品牌與消費(fèi)者之間的聯(lián)系，推動(dòng)銷售增長。

圖片來源：furbo 僅供學(xué)習(xí)用

在 UI 界面當(dāng)中使用動(dòng)效已經(jīng)成為這幾年一直被討論的熱門話題了。動(dòng)效要怎么用，什么樣的動(dòng)效更優(yōu)秀等等，這樣的探討層出不窮。在 UI 所涉及到的各種動(dòng)畫和動(dòng)效當(dāng)中，概念動(dòng)效是被討論的最多的話題。充滿實(shí)驗(yàn)性的概念動(dòng)效是動(dòng)效設(shè)計(jì)最前沿的領(lǐng)域，是開發(fā)和實(shí)現(xiàn)上最具有挑戰(zhàn)性的部分，也是新產(chǎn)品上線之后，用戶最容易注意到，也討論得最多的東西。

在 Tubik Studio 的博客上，我們已經(jīng)分享過很多關(guān)于 UI 動(dòng)效的文章和內(nèi)容了。關(guān)于概念動(dòng)效/動(dòng)畫對于 UI 設(shè)計(jì)與開發(fā)的影響，我想 Tubik 的動(dòng)畫設(shè)計(jì)師 Kirill Yerokhin 是最有發(fā)言權(quán)的。

概念動(dòng)效是什么？

概念動(dòng)效應(yīng)該算是概念設(shè)計(jì)領(lǐng)域的一個(gè)分支。總的來說，概念動(dòng)效還是在做動(dòng)效和動(dòng)畫的設(shè)計(jì)，不過它是為了在真實(shí)的產(chǎn)品上線之前，基于特定的想法、構(gòu)思而進(jìn)行創(chuàng)建的東西。在進(jìn)行用戶界面設(shè)計(jì)的時(shí)候，動(dòng)效可以存在于交互、轉(zhuǎn)場和具體的控件操作上，動(dòng)效作為一種狀態(tài)轉(zhuǎn)變、交互反饋和視覺引導(dǎo)的工具而存在。動(dòng)效設(shè)計(jì)師會(huì)使用各種各樣的工具來進(jìn)行動(dòng)效的設(shè)計(jì)，我們常常提到的工具包括 Adobe After Effects，Principle，F(xiàn)igma 和 InVision。

為什么UI設(shè)計(jì)需要概念動(dòng)效

這其實(shí)是目前最富有爭議的話題。很多概念動(dòng)效和現(xiàn)有的、成型的動(dòng)效/動(dòng)畫解決方案，在步驟、效果、執(zhí)行和開發(fā)上都不盡相同，超出了通常的限制和常見的規(guī)則。這種動(dòng)效技術(shù)在剛剛開始接觸的時(shí)候，會(huì)覺得不夠真實(shí)，沒有必要，甚至有人會(huì)認(rèn)為無法實(shí)現(xiàn)。

重點(diǎn)在于，UI 動(dòng)效其實(shí)和我們常見的靜態(tài)元素（字體、圖標(biāo)、控件、色彩和形狀）同樣能夠讓產(chǎn)品從激烈的競爭當(dāng)中脫穎而出。

所有開發(fā)者討厭概念動(dòng)效且不想去實(shí)現(xiàn)的說法其實(shí)是不夠準(zhǔn)確的。實(shí)際上，這樣的事情要依情況來看。在很多創(chuàng)意設(shè)計(jì)領(lǐng)域當(dāng)中，經(jīng)常有人說某種創(chuàng)新或者創(chuàng)意是不可能實(shí)現(xiàn)的，然而實(shí)際上，總會(huì)有人竭盡所能發(fā)現(xiàn)新的解決方案，找到新的方法。

需求決定供應(yīng)。如果「市場」看到了一個(gè)全新的設(shè)計(jì)理念，尤其是在動(dòng)畫和動(dòng)效領(lǐng)域，就會(huì)有人想辦法在實(shí)際的產(chǎn)品當(dāng)中將它實(shí)現(xiàn)出來。而這個(gè)時(shí)候，設(shè)計(jì)師的構(gòu)思就不再停留在概念上。在 Tubik Studio，我們在很多時(shí)候會(huì)提出新的概念動(dòng)效，這些概念動(dòng)效甚至可能會(huì)極其復(fù)雜，但是需求一旦確定，總會(huì)有第三方的開發(fā)接手并且將他們實(shí)現(xiàn)出來。

實(shí)踐表明，在技術(shù)上，概念動(dòng)效的實(shí)現(xiàn)幾乎僅僅就是時(shí)間和花銷上的問題，解決和實(shí)現(xiàn)的可能性其實(shí)非常之高。

UI 概念動(dòng)效設(shè)計(jì)實(shí)例

列表滾動(dòng)

第一個(gè)案例展示了和列表交互的動(dòng)畫，左邊的列表只是單純的滾動(dòng)，而右邊的則明顯的加入了漸進(jìn)的動(dòng)效，模擬現(xiàn)實(shí)中拉動(dòng)卡片的微妙動(dòng)作。右邊的變體看起來更加生動(dòng)活潑，為滾動(dòng)交互體驗(yàn)增加了樂趣。更有趣的地方在于，右邊的變體在運(yùn)動(dòng)的過程中產(chǎn)生了卡片之間有更多空間的視覺幻象，這讓整個(gè)界面充滿了呼吸感和動(dòng)感。

列表和詳情頁之間的過渡

上面的案例當(dāng)中，左邊只是簡單的左右切換過渡，而右邊則帶有放大和轉(zhuǎn)變的過渡，不僅讓動(dòng)效的指向性更為明顯，而且更加富有動(dòng)態(tài)。

側(cè)邊欄菜單

概念動(dòng)效往往會(huì)力圖讓最常規(guī)的交互效果更加生動(dòng)，比如側(cè)邊欄展開這樣常見的操作。

概念動(dòng)效在 UI 中實(shí)現(xiàn)的實(shí)例

概念動(dòng)效是 UI 設(shè)計(jì)階段最具有創(chuàng)造性的階段之一，動(dòng)效設(shè)計(jì)師會(huì)提供不同的方案和選項(xiàng)來同開發(fā)者和客戶進(jìn)行討論。下面的案例都是 Kinill 和 UI 設(shè)計(jì)師一同實(shí)現(xiàn)的一些實(shí)例。

這是一個(gè)財(cái)務(wù)管理類應(yīng)用動(dòng)效，采用不同色彩來實(shí)現(xiàn)餅狀圖來進(jìn)行數(shù)據(jù)展示，整個(gè)效果時(shí)髦值很高。

這是音樂新聞應(yīng)用中的過渡動(dòng)效。

這是為家庭預(yù)算 APP 設(shè)計(jì)的菜單打開概念動(dòng)效。

這是商務(wù)名片 APP 的 UI 概念動(dòng)效。

這個(gè)日歷 APP 的概念動(dòng)效想必大家都見過很多次了，多彩的設(shè)計(jì)和流暢的動(dòng)效至今令人難忘。

這個(gè)充滿流動(dòng)性側(cè)邊欄動(dòng)效非常有意思。

概念動(dòng)效的主要優(yōu)點(diǎn)

事實(shí)上，從最基本的構(gòu)思和概念開始創(chuàng)新和創(chuàng)造幾乎是每個(gè)行業(yè)都遵循的流程。包括汽車行業(yè)和建筑設(shè)計(jì)，大多都是從基本的概念設(shè)計(jì)著手，才有之后的實(shí)現(xiàn)和發(fā)展。概念設(shè)計(jì)最初常常以「這只是和現(xiàn)實(shí)無關(guān)的幻想」的樣子出現(xiàn)，但是最終實(shí)現(xiàn)出來并且走入日常生活的案例，比比皆是。不管怎樣，無論好壞，它們都在推動(dòng)我們的生活逐步前進(jìn)。

在 UI 設(shè)計(jì)領(lǐng)域，概念動(dòng)效的優(yōu)勢和意義也是一樣的。前不久有不少人認(rèn)為我們所設(shè)計(jì)的動(dòng)效是不真實(shí)的、過于花俏的，但是實(shí)現(xiàn)出來，上手之后，往往和預(yù)期不盡相同。在平面設(shè)計(jì)的年代，靜態(tài)的設(shè)計(jì)追求的是持久的價(jià)值，簡約和清爽讓這種價(jià)值得以維系。但是在這個(gè)用戶注意力資源極其有限的今天，多樣的需求和緊張的競爭使得動(dòng)效設(shè)計(jì)師需要竭盡全力抓住用戶的每一點(diǎn)注意力，至少，越來越腦洞大開的動(dòng)效正在證明它們在這件事上無可替代的價(jià)值。

原文作者 : Tubik Studio

譯者／編輯 : 陳子木

譯文地址：https://www.uisdc.com/conceptual-animation-making-ui

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖由作者提供

蘭亭妙微(www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

編輯導(dǎo)語：產(chǎn)品的設(shè)計(jì)應(yīng)當(dāng)讓用戶始終清楚事項(xiàng)的發(fā)生，重要的元素也應(yīng)當(dāng)置于用戶一目了然的位置，直觀且清晰的設(shè)計(jì)往往能提升用戶的使用體驗(yàn)。本篇文章里，作者繼續(xù)總結(jié)了提升產(chǎn)品設(shè)計(jì)效果的幾個(gè)小技巧，一起來看一下。

重要的位置，要留給重要的元素。

編者按：用戶對產(chǎn)品的體驗(yàn)來自直觀感受。所以UI/UX往往對產(chǎn)品的成敗有著直接的影響，糟糕的UI/UX體驗(yàn)會(huì)讓強(qiáng)大的功能失去效力。

但怎么才能提高UI/UX設(shè)計(jì)的效果呢？不一定需要你掌握豐富全面的設(shè)計(jì)知識，有時(shí)候一點(diǎn)點(diǎn)的小改變就能令設(shè)計(jì)大為改觀。

Marc Andrew總結(jié)了36個(gè)改進(jìn)UI/UX設(shè)計(jì)的小技巧，分成6篇系列文章刊出，此為第五篇，希望能夠幫助到你。原文發(fā)表在Medium上，標(biāo)題是：UI & UX micro-tips: Volume five。

2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。

在創(chuàng)作實(shí)用、易于理解且華麗的 UI 時(shí)，只需要做一點(diǎn)點(diǎn)的調(diào)整馬上就可以改進(jìn)設(shè)計(jì)。

在這篇系列文章的第5篇中，我會(huì)給大家再帶來6個(gè)容易實(shí)踐的 UI 和 UX 小技巧。

相關(guān)閱讀：

• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全 （一）
• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全 （二）
• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全 （三）
• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全 （四）

我們開始吧……

一、如果用的是Type Scales和Grids的話，變通一下也是可以的

2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。

設(shè)計(jì)要講規(guī)矩，我是遵守規(guī)則的忠實(shí)粉絲，比方說Type Scale或者一直都很出色的8pt Grid系統(tǒng)我是遵守的。

但有時(shí)候最好不要太過教條主義，不要Scale 或 Grid告訴你該怎么做就怎么做，重要的是看怎么做更好看。

請記住，規(guī)則是可以變通的，有時(shí)候偶爾也是可以打破的。

做一個(gè)打破規(guī)則的叛逆者。

二、讓表單上的錯(cuò)誤消息有幫助且易于理解

2 個(gè)表單字段樣例。一個(gè)顯示的是帶有基本錯(cuò)誤消息的字段，另一個(gè)顯示了更詳細(xì)的錯(cuò)誤消息。

使用表單的時(shí)候，要盡量確保錯(cuò)誤消息說清楚出了什么問題，以及如何補(bǔ)救。

始終要讓用戶了解到具體情況。

要讓這些錯(cuò)誤消息對用戶有幫助，不要讓用戶蒙在鼓里。

三、在APP加載的時(shí)候，應(yīng)該盡量告訴用戶正在發(fā)生了什么事情

APP的 2 個(gè)加載屏幕樣例。一個(gè)空空如也，沒有加載提示，另一個(gè)展示了更詳細(xì)的加載指示器。

展示APP元素的框架可以幫助你快速地向用戶溝通應(yīng)用的布局，并讓用戶放寬心，知道有什么事情正在發(fā)生，而不是死機(jī)。

系統(tǒng)狀態(tài)可見性是需要遵循的重要原則，這讓用戶能夠了解正在發(fā)生的事情。

不要讓用戶玩猜謎游戲。要從一開始就讓他們了解情況。

四、通知用戶如果他們應(yīng)用某個(gè)動(dòng)作將會(huì)發(fā)生什么

APP的 2 個(gè)通知樣例。一個(gè)提供的信息非常基本，另一個(gè)在模態(tài)內(nèi)部提供了更詳細(xì)的描述。

在進(jìn)行應(yīng)用可能會(huì)產(chǎn)生后果的特定操作之前，始終都要先詳細(xì)告知用戶。

這尤其適用于某些會(huì)產(chǎn)生不可逆轉(zhuǎn)后果的操作，比方說永久性刪除某些內(nèi)容。

讓用戶知道將會(huì)發(fā)生什么，并要求他們在按下那個(gè)寫著“刪除互聯(lián)網(wǎng)”的紅色大按鈕之前再三確認(rèn)自己要這么做。

五、確保最重要的屏幕在標(biāo)簽欄有優(yōu)先位置

2 個(gè)標(biāo)簽欄樣例。上面這個(gè)展示的是不太重要的圖標(biāo)，下面這個(gè)展示的是更重要的圖標(biāo)。

APP的標(biāo)簽欄可是屏幕這塊房地產(chǎn)的黃金地段，所以請明智使用。

要把你的標(biāo)簽欄保留給最常用的屏幕，并把次要的屏幕隱藏在“更多”圖標(biāo)里面。

小小的標(biāo)簽欄只能留給重要的東西。

六、不要把重要操作隱藏在下拉菜單里面。重要操作得放在前面，核心的位置！

2個(gè)桌面導(dǎo)航的樣例。一個(gè)是注冊和登錄按鈕隱藏在下拉菜單里面，另一個(gè)在菜單以外放置了 2 個(gè)按鈕，而且就放在頂部導(dǎo)航欄旁邊。

是的，我時(shí)不時(shí)還會(huì)在桌面視圖里面看到這種情況發(fā)生。

用戶需要采取的基本操作（也就是注冊或登錄）完全隱藏在他們甚至可能都瀏覽不到的下拉菜單里面。

把這些重要操作放在訪問便利的位置，并應(yīng)該放在用戶預(yù)期最應(yīng)該出現(xiàn)的地方。

作者：Marc Andrew，譯者：boxi

來源：https://www.36kr.com/p/1302313074821767

本文由 @神譯局 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。

蘭亭妙微(www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

關(guān)鍵字：電商 詳情頁設(shè)計(jì) 視覺營銷

網(wǎng)絡(luò)時(shí)代，電商平臺作為主流消費(fèi)渠道，在消費(fèi)者心中已占有大部分比例，越來越多的消費(fèi)者更愿意選擇在線上購物消費(fèi)，如何讓消費(fèi)者能夠更快速了解商品，產(chǎn)生購買欲？電商詳情頁起到關(guān)鍵性作用，電商詳情頁作為產(chǎn)品說明書，不僅是成交轉(zhuǎn)化入口，更是品牌傳播的重要途徑。如何設(shè)計(jì)一款適合產(chǎn)品的詳情頁？主要從兩個(gè)方面入手：