如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時(shí)，還能讓界面看起來(lái)柔和、更富有親和力？一個(gè)產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力，但一個(gè)小小的細(xì)節(jié)卻能夠阻止用戶的流失，成為內(nèi)容轉(zhuǎn)化的最后一道防線，讓人眼前一亮，值得借鑒。

076.「百度地圖」出行前的“極端”天氣預(yù)報(bào)

077.「搜狗輸入法」“跨界”復(fù)制/粘貼

078.「支付寶」螞蟻森林/莊園-模擬現(xiàn)實(shí)世界的自然規(guī)律

079.「躺平」趣味化的“擊掌”點(diǎn)贊

080.「QQ音樂(lè)」導(dǎo)入外部歌單-不同的設(shè)備/賬號(hào)歌單無(wú)縫對(duì)接

081.「微信」簡(jiǎn)便且高效的圖片翻譯功能

082.「橙」不一樣的的登錄方式

083.「高德地圖」桌面一鍵導(dǎo)航-出行更高效

084.「愛奇藝閱讀」性別選擇-更明確的指引和提示

085.「餓了么」合適的時(shí)間、合適的提醒

086.「搜狗輸入法」教你少打字、多開掛

087.「美團(tuán)」垃圾分類-解決餐后垃圾分類之憂

088.「優(yōu)酷」個(gè)性化彈幕設(shè)置-看劇調(diào)侃兩不誤

089.「隨便走」AR導(dǎo)航-“傻瓜”式操作，老少皆宜

090.「微信讀書」模擬現(xiàn)實(shí)的行為動(dòng)作

076.「百度地圖」出行前的“極端”天氣預(yù)報(bào)

產(chǎn)品體驗(yàn)：

使用百度地圖，導(dǎo)航路線規(guī)劃后，會(huì)出現(xiàn)當(dāng)日的天氣提醒，點(diǎn)擊進(jìn)入即可查看每個(gè)時(shí)段的天氣預(yù)報(bào)。

設(shè)計(jì)思考：

“賭博看運(yùn)氣，出行看天氣”，任何時(shí)候，大家如果優(yōu)先知道天氣情況就可以提前做好準(zhǔn)備，這對(duì)人們的生活方便起到很大的作用。尤其是出行，天氣的變化是影響我們是否攜帶雨傘、交通工具選擇、保暖問(wèn)題的重要因素，所以提前預(yù)知天氣的重要性可想而知。

使用百度地圖APP，導(dǎo)航路線規(guī)劃后，出行方式的下方會(huì)提示最近可能影響到出行問(wèn)題的天氣變化，便于用戶選擇更合理的出行方式及交通工具，避免受到惡劣天氣變化的影響。還可以通過(guò)點(diǎn)擊進(jìn)入，查看每個(gè)小時(shí)的天氣詳情，對(duì)于時(shí)間不是很敏感的用戶來(lái)說(shuō)，為了錯(cuò)開惡劣的天氣，提前或延遲出行也是一種不錯(cuò)的選擇。

077.「搜狗輸入法」“跨界”復(fù)制/粘貼

產(chǎn)品體驗(yàn)：

電腦和移動(dòng)端都使用搜狗輸入法，且在同一個(gè)賬號(hào)登錄的情況下，電腦端出現(xiàn)文字復(fù)制的操作后，可在移動(dòng)端設(shè)備任何位置的輸入框內(nèi)直接粘貼，非常便捷。

設(shè)計(jì)思考：

輸入法給大部分用戶的第一感覺就是用來(lái)輸入文字的，哪個(gè)好用用哪個(gè)，一旦習(xí)慣了使用某個(gè)輸入法，基本就成了忠實(shí)用戶，不會(huì)隨意去改變。不過(guò)有時(shí)候輸入法只是輔助作用，并不需要直接使用，比如：我們?cè)陔娔X網(wǎng)頁(yè)看到自己喜歡的文案語(yǔ)錄時(shí)，想發(fā)個(gè)朋友圈，就需要先復(fù)制，再用電腦端微信發(fā)到手機(jī)微信，最后從手機(jī)微信復(fù)制再到朋友圈粘貼，雖然很麻煩，用戶還是可以接受的，不然通過(guò)自己碼字就會(huì)浪費(fèi)大量的時(shí)間。

搜狗輸入法的黑科技一直都很多，比如圖片英文翻譯、智能助手、文字掃描提取等，都是非常實(shí)用的功能。最近發(fā)現(xiàn)了一個(gè)新的設(shè)計(jì)細(xì)節(jié)，讓人驚呼。當(dāng)電腦和手機(jī)端都使用搜狗輸入法且登錄同一個(gè)賬號(hào)時(shí)，在電腦端復(fù)制文字后，打開手機(jī)端任何輸入窗口，即可看到在電腦上復(fù)制的文字，直接粘貼即可，由被動(dòng)輔助變?yōu)橹鲃?dòng)攝取，再也不用通過(guò)聊天工具發(fā)送到手機(jī)端進(jìn)行二次復(fù)制的繁瑣操作了，實(shí)現(xiàn)“跨界”復(fù)制/粘貼，非常方便?？梢钥闯鰣F(tuán)隊(duì)站在用戶體驗(yàn)的角度上，對(duì)于輸入法使用場(chǎng)景的串聯(lián)考慮是非常貼心的，不僅能再次俘獲一大批新用戶的芳心，也能提升老用戶的使用忠誠(chéng)度。

078.「支付寶」螞蟻森林/莊園-模擬現(xiàn)實(shí)世界的自然規(guī)律

產(chǎn)品體驗(yàn)：

在支付寶螞蟻森林/莊園里，白天和夜晚分別使用了不同的場(chǎng)景，模擬現(xiàn)實(shí)世界中的自然規(guī)律，白天晴空萬(wàn)里、且有陽(yáng)光照射，夜晚滿天繁星、且有流星劃過(guò)，頗具真實(shí)感。

設(shè)計(jì)思考：

幾年前QQ牧場(chǎng)養(yǎng)殖、農(nóng)場(chǎng)偷菜，如今演變卻變成了支付寶的螞蟻莊園養(yǎng)小雞、森林偷能量，將以前的純游戲思維轉(zhuǎn)變成了如今的游戲+公益的形式，不僅滿足了用戶小游戲的需求，還能促進(jìn)公益事業(yè)的發(fā)展，同時(shí)用戶也會(huì)得到心理上的滿足和成就感。螞蟻森林/莊園小游戲?qū)τ脩舢a(chǎn)生的粘性除了其模式的新穎，也離不開產(chǎn)品團(tuán)隊(duì)日夜刻苦鉆研所提升的用戶體驗(yàn)。

螞蟻森林/莊園的視覺場(chǎng)景跟隨著白天、夜晚的環(huán)境變化，產(chǎn)品遵循現(xiàn)實(shí)世界慣例來(lái)呈現(xiàn)信息，更具真實(shí)感，便于用戶在使用中將現(xiàn)實(shí)中的體驗(yàn)不經(jīng)意間帶入到游戲場(chǎng)景，可使其更加投入，通過(guò)用戶的現(xiàn)有認(rèn)知，以促成情感化的體驗(yàn)，使產(chǎn)品更具親和力。

079.「躺平」趣味化的“擊掌”點(diǎn)贊

產(chǎn)品體驗(yàn)：

在躺平APP對(duì)其他用戶的發(fā)表的動(dòng)態(tài)推薦時(shí)，使用了擊掌圖標(biāo)，且有光彩線條圍繞著掌心向四周擴(kuò)散的動(dòng)效樣式，趣味性十足。

設(shè)計(jì)思考：

推薦是對(duì)其事件/事務(wù)認(rèn)可的一種表達(dá)行為，最早可追溯到上古時(shí)代的堯舜禹時(shí)期，那時(shí)候如果對(duì)某件事或人，高度認(rèn)可時(shí)就使用鼓掌（慢速且有節(jié)奏）的方式來(lái)表達(dá)；到后面慢慢演變成了簡(jiǎn)單的一個(gè)字“彩”；再到如今皆可用鼓掌、豎大拇指或直接言語(yǔ)...表達(dá)?；诨ヂ?lián)網(wǎng)的發(fā)達(dá)，為了讓更多人發(fā)現(xiàn)其內(nèi)容資源的優(yōu)質(zhì)性，80%以上直接沿用了豎大拇指樣式來(lái)表達(dá)對(duì)內(nèi)容的認(rèn)可及贊許，即使有區(qū)別于其他產(chǎn)品，也是在局部或動(dòng)效樣式上做出一點(diǎn)改變。

躺平APP的點(diǎn)贊樣式較為新穎，使用了擊掌的圖標(biāo)，并且使用了光彩線條圍繞掌心向四周擴(kuò)散的動(dòng)效樣式，相比豎起大拇指則更加強(qiáng)烈，意味著喝彩，表達(dá)了對(duì)內(nèi)容的高度認(rèn)可，相較于同質(zhì)化嚴(yán)重的情況下作出了創(chuàng)新， 在過(guò)渡的時(shí)間差中，進(jìn)行了趣味化的表達(dá)，更具視覺沖擊力。

（“擊掌”的點(diǎn)贊方式適合用于類似躺平、動(dòng)漫、B站等二次元或個(gè)性化的產(chǎn)品中，如果用于工具、新聞、電商等類型產(chǎn)品，可能會(huì)對(duì)用戶產(chǎn)生干擾，慎用）

080.「QQ音樂(lè)」導(dǎo)入外部歌單-不同的設(shè)備/賬號(hào)歌單無(wú)縫對(duì)接

產(chǎn)品體驗(yàn)：

在QQ音樂(lè)我的頁(yè)面，使用“導(dǎo)入外部歌單”功能，根據(jù)提示，即可把其他音樂(lè)應(yīng)用里歌曲添加到QQ音樂(lè)歌單。

設(shè)計(jì)思考：

現(xiàn)在聽歌早已不像以前，一張內(nèi)存卡或一根數(shù)據(jù)線就可以把手機(jī)里的歌曲轉(zhuǎn)移它處?；谌藗兩钏降奶岣?，數(shù)據(jù)流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更傾向于在線聽歌，無(wú)需下載（除非深山老林或地洞沒(méi)有信號(hào)）占用手機(jī)內(nèi)存，創(chuàng)建一個(gè)歌單，把自己喜歡的收藏起來(lái)，即時(shí)聽歌，非常方便，如果沒(méi)有特別的情況，成為了一款音樂(lè)應(yīng)用的忠實(shí)用戶后，基本不會(huì)頻繁轉(zhuǎn)移。

QQ音樂(lè)的導(dǎo)入外部歌單功能，可將其他音樂(lè)APP的歌單添加到QQ音樂(lè)自己的歌單里。對(duì)于導(dǎo)入外部歌曲，很多用戶沒(méi)有什么概念，感覺自己用不上，別忘了蝦米音樂(lè)“尸骨未寒”，很多事情不是沒(méi)有可能發(fā)生，當(dāng)一旦需要時(shí)，這個(gè)功能就是“救命稻草”，可以想象，如果通過(guò)手動(dòng)把以前的幾百首歌曲一首一首的添加到歌單，不知道會(huì)不會(huì)“抽筋”。除此之外，還可以將歌單在朋友之間相互分享添加，這也是一種不錯(cuò)的音樂(lè)交友方式，實(shí)現(xiàn)不同設(shè)備、賬號(hào)的音樂(lè)歌單無(wú)縫對(duì)接。    

081.「微信」簡(jiǎn)便且高效的圖片翻譯功能

產(chǎn)品體驗(yàn)：

在微信的聊天對(duì)話框中打開英文圖片，點(diǎn)擊下方的翻譯功能按鈕，即可翻譯圖片上的外文，并以中文顯示。

設(shè)計(jì)思考：

在我們的生活中，有時(shí)候多多少會(huì)遇到一些英文，比如進(jìn)口食品包裝、藥物說(shuō)明、護(hù)膚品等，其中就有一部分是純英文說(shuō)明，無(wú)論自己多么博學(xué)多才，但不見得都能理解英文。記得之前有一次，我自己的電腦藍(lán)屏，出現(xiàn)的全是英文，雖然自己也是一直提倡用互聯(lián)網(wǎng)解決問(wèn)題，且也有一些拍譯軟件，但一想著需要下載注冊(cè)，沒(méi)準(zhǔn)兒還要先看廣告或收費(fèi)，且天生對(duì)英文有一種與生俱來(lái)陌生感，還未開始便放棄了，于是成了伸手黨，去請(qǐng)求別人幫助。

微信的圖片翻譯功能就是專為解決這一問(wèn)題而生。通過(guò)在對(duì)話框中點(diǎn)擊圖片直接翻譯，看到一道綠色的光由上而下掃過(guò)之后，圖片中的英文就變成了中文，著實(shí)方便，比起以前通過(guò)第三方或先提取圖片中的文字來(lái)翻譯，操作簡(jiǎn)單且效率還提升了很多，可以說(shuō)是一個(gè)非常實(shí)用的小功能。

082.「橙」不一樣的的登錄方式

產(chǎn)品體驗(yàn)：

在橙APP的登錄頁(yè)面，區(qū)別了常見的登錄界面樣式，使用對(duì)話聊天的方式按流程提示用戶完成登錄，界面流程方式新穎，濃厚的社交行業(yè)屬性。

設(shè)計(jì)思考：

在任何應(yīng)用中，要想有自己的“私密”領(lǐng)地，都繞不開登錄/注冊(cè)的流程，但凡手持智能手機(jī)又想玩的開的用戶，對(duì)登錄的流程是非常熟悉的，比如手機(jī)號(hào)+驗(yàn)證碼、一鍵登錄、第三方登錄，無(wú)外乎這幾種常規(guī)的登錄方式，如果想來(lái)點(diǎn)“刺激”的，無(wú)非就是加個(gè)logo、貼個(gè)插圖、來(lái)點(diǎn)動(dòng)效等，見怪不怪了。

橙APP的登錄方式雖然同樣是手機(jī)號(hào)+驗(yàn)證碼登錄，但在流程樣式上卻非常新穎。鑒于應(yīng)用本身屬于社交行業(yè)，通過(guò)對(duì)話詢問(wèn)的方式讓用戶按照流程輸入了手機(jī)號(hào)和驗(yàn)證碼，給用戶造成這不是對(duì)使用該APP設(shè)置門檻的錯(cuò)覺，降低用戶的防備心理（很多產(chǎn)品用戶量的增長(zhǎng)都被擋在了登錄之門外），讓用戶不知不覺在聊天過(guò)程中完成了登錄流程操作，其方式非常友好且登錄的過(guò)程是愉快的，同時(shí)還兼帶了濃濃的社交行業(yè)屬性，通過(guò)更直觀的登錄場(chǎng)景感受，拉近用戶跟產(chǎn)品之間的距離，使用戶的印象更加深刻。

083.「高德地圖」桌面一鍵導(dǎo)航-出行更高效

產(chǎn)品體驗(yàn)：

通過(guò)高德地圖的收藏夾，點(diǎn)擊收藏地址右側(cè)的功能菜單，在彈窗中將該地址“添加快捷導(dǎo)航到桌面”，后續(xù)就不用每次輸入常用的目的地了，直接通過(guò)桌面的圖標(biāo)入口即可一鍵導(dǎo)航。

設(shè)計(jì)思考：

對(duì)于在外的工作人員，導(dǎo)航算是手機(jī)必備的軟件，以前只是純粹的導(dǎo)航認(rèn)路，而隨著汽車量的增長(zhǎng)，各地交通逐漸開始變得緊張，那么不管我們是否知道路線，駕駛之前都會(huì)習(xí)慣性打開地圖導(dǎo)航，隨時(shí)觀察路線擁堵情況來(lái)思考是否有更換更優(yōu)路線的需求，于是就按照慣例打開導(dǎo)航、錄入目的地、選擇路線......等一系列的常規(guī)操作，日復(fù)一日，似乎沒(méi)有覺得什么不妥。

高德地圖的桌面一鍵導(dǎo)航功能，為長(zhǎng)期有駕駛需求的用戶提供了更為便捷的操作，將經(jīng)常使用的目的地添加的收藏夾，再添加到桌面以生成目的地導(dǎo)航便捷入口，有需要時(shí)桌面點(diǎn)擊即可，系統(tǒng)將自動(dòng)規(guī)劃最優(yōu)路線，通過(guò)最便捷的方式一鍵導(dǎo)航，再也不用日復(fù)一日的重復(fù)之前的操作了。站在設(shè)計(jì)師的角度，在解決用戶需求時(shí)，操作越復(fù)雜、步驟越多，用戶的選擇條件、視覺負(fù)擔(dān)及時(shí)間成本就越多，出錯(cuò)的情況也越多，故而用戶流失的可能性就越大。高德地圖通過(guò)一鍵導(dǎo)航簡(jiǎn)化操作流程，通過(guò)合理的操作路徑，降低用戶時(shí)間成本，有效提升了使用頻率及粘性。

084.「愛奇藝閱讀」性別選擇-更明確的指引和提示

產(chǎn)品體驗(yàn)：

首次進(jìn)入愛奇藝閱讀APP，在性別選擇頁(yè)面中，男生和女生的頭像通過(guò)動(dòng)畫的形式反復(fù)左右替換，用強(qiáng)視覺提醒的方式推動(dòng)用戶進(jìn)行選擇操作，以便于提供更匹配的內(nèi)容資源。

設(shè)計(jì)思考：

大部分新聞或閱讀類型的APP，在用戶首次進(jìn)入應(yīng)用時(shí)，都有類似性別、行業(yè)、愛好之類的選擇，其主要目的是確定用戶的屬性，并提供更加匹配該屬性的內(nèi)容資源來(lái)提升用戶的滿意度。其流程也是千篇一律，以建議性的提醒用戶去做選擇，如無(wú)需要直接跳過(guò)即可。

愛奇藝閱讀首次即進(jìn)入APP時(shí)，以動(dòng)態(tài)的性別頭像插圖反復(fù)左右切換的動(dòng)效方式來(lái)提示有用戶選擇性別，相比常見的靜態(tài)按鈕直接顯示在那里會(huì)更加友好，不會(huì)過(guò)于生硬、冷冰冰，其動(dòng)畫視覺樣式給予明確的指引和提示，更能引起用戶的注意，通過(guò)強(qiáng)烈的視覺提醒促使用戶更高效的完成當(dāng)前任務(wù)。

類似這種選擇且非強(qiáng)制性的前置頁(yè)面，很多設(shè)計(jì)師只是按部就班當(dāng)做一個(gè)流程，其實(shí)要想做好并非僅僅如此，可以通過(guò)趣味化、情感化、動(dòng)效等方式增強(qiáng)用戶去選擇的欲望，以提高操作幾率，用戶一旦選擇，進(jìn)入應(yīng)用之后所看的內(nèi)容定然更符合自身的需求，也能提高用戶的滿意度，其滿意度的高低能決定用戶的去留及轉(zhuǎn)化，所以應(yīng)用中，用戶的前置選擇對(duì)產(chǎn)品的重要性可想而知。

085.「餓了么」合適的時(shí)間、合適的提醒

產(chǎn)品體驗(yàn)：

如果在餓了么有正在進(jìn)行中的訂單，再次進(jìn)入應(yīng)用時(shí)，右下角會(huì)提供一個(gè)查看的快捷入口，點(diǎn)擊可快速進(jìn)入該訂單查看進(jìn)度或騎手配送狀態(tài)。

設(shè)計(jì)思考：

隨著外賣行業(yè)的普及，給我們的生活帶來(lái)了很大的便利，尤其是一日三餐，我們只需花幾分鐘的時(shí)間在外賣平臺(tái)上下單，其他的事情交給商家和外賣小哥，很大程度上縮短了我們?nèi)サ晖局泻偷昀锏牡却龝r(shí)間，特別是對(duì)上班族來(lái)說(shuō)，真的是太便利了。不過(guò)外賣平臺(tái)不像京東淘寶-人們可以無(wú)憂無(wú)慮的逛上幾個(gè)小時(shí)，通常都是目標(biāo)明確的用戶，在短時(shí)間內(nèi)完成自己的需求，要么下單、要么查看配送進(jìn)度。

如果在餓了么有訂單存在，再次進(jìn)入首頁(yè)，右下角會(huì)提示配送信息，點(diǎn)擊直接進(jìn)入查看詳情。從表面上看，右下角的入口雖然提供了快捷通道，但似乎不太友好，總是會(huì)遮擋部分內(nèi)容。其實(shí)并非如此，是因產(chǎn)品根據(jù)用戶的使用場(chǎng)景進(jìn)行行為預(yù)判而設(shè)計(jì)的快捷入口，在正常情況下，從下單到完結(jié)一般在30分鐘左右，如果用戶存在未完結(jié)訂單且在短時(shí)間內(nèi)再次進(jìn)入平臺(tái)，80%以上的用戶此時(shí)需求為查詢配送進(jìn)度，因此，右下角的進(jìn)度提示正是在合適的時(shí)間給予用戶合適的提醒，根據(jù)用戶的場(chǎng)景需求提供了最為便捷的解決方案，由此可見、利大于弊。

086.「搜狗輸入法」教你少打字、多開掛

產(chǎn)品體驗(yàn)：

進(jìn)入搜狗輸入法的設(shè)置中，可開啟開掛模式，里面的三連發(fā)、回聲、重要的事情說(shuō)三遍分別對(duì)應(yīng)不同的效果。

設(shè)計(jì)思考：

搜狗輸入法在業(yè)界雖不敢說(shuō)是最牛，但一定是數(shù)一數(shù)二的存在，發(fā)展至今，不僅僅是在滿足用戶的基本需求，還提供了讓用戶感到驚喜的功能，而現(xiàn)在更是研發(fā)了很多“黑科技”。

從搜狗輸入法左側(cè)的logo中進(jìn)入工具選項(xiàng)，在設(shè)置中即可選擇開掛模式（真實(shí)效果見上圖）。正如字面的意思，搜狗輸入法通過(guò)智能幫助用戶自動(dòng)完成一些列的復(fù)制粘貼工作，瞬間讓打字刷屏的手速快到逆天，且操作簡(jiǎn)單、輕松完成，方便用戶在開懟、賣萌、刷屏過(guò)程中直接碾壓對(duì)方的打字速度。開掛功能可謂是實(shí)用性與趣味性兼?zhèn)?，讓我們?cè)谌粘Ｖ校鎸?duì)不同的社交需求時(shí)帶來(lái)貼心的改變。

（凡事有一個(gè)度，刷屏如果沒(méi)有用對(duì)場(chǎng)景，可能會(huì)遭到對(duì)方的反感，事在人為。就像之前的“拍一拍”功能面世，卻有人在上班時(shí)間拿去拍領(lǐng)導(dǎo)、拍老板，后果就不說(shuō)了，刀可切菜亦可傷人）

087.「美團(tuán)」垃圾分類-解決餐后垃圾分類之憂

產(chǎn)品體驗(yàn)：

美團(tuán)我的頁(yè)面，推薦工具的“垃圾分類”功能，能幫助我們進(jìn)行識(shí)別因外賣產(chǎn)出的垃圾類型，便于跟線下對(duì)應(yīng)的垃圾桶“對(duì)號(hào)入座”，減少不必要的垃圾混合而增加清潔工人的工作量。

設(shè)計(jì)思考：

外賣平臺(tái)的興起，給我們的生活帶來(lái)了很大的便利，同時(shí)也產(chǎn)生了一些危害，首當(dāng)其沖就是環(huán)境的污染。比如包裝盒、包裝袋、餐具等大量生活垃圾的產(chǎn)出，確實(shí)在外賣行業(yè)普及后，亂扔垃圾的情況跟隨著瘋速增長(zhǎng)，雖然這些屬于個(gè)人情況，但也有部分用戶因不知垃圾如何分類，而將所有垃圾聚集在一起，然后就成清潔工的事情，最終無(wú)端增加垃圾分類的工作難度。

美團(tuán)的“垃圾分類”功能對(duì)衛(wèi)生環(huán)保方面增添了一份力量，當(dāng)用戶不知道自己產(chǎn)出的生活垃圾是何種類型時(shí)，可通過(guò)查看常見垃圾類型提示或搜索來(lái)確定類型，方便用戶按類型將垃圾丟入對(duì)應(yīng)的垃圾桶，解決餐后垃圾分類之憂，幫助養(yǎng)成良好的垃圾分類習(xí)慣，助力垃圾分類落地。還能消除用戶對(duì)“外賣垃圾分類麻煩”的顧慮，利用線上垃圾類型的普及，為綠色發(fā)展及環(huán)境保護(hù)貢獻(xiàn)自己的一份力量。

088.「優(yōu)酷」個(gè)性化彈幕設(shè)置-看劇互動(dòng)兩不誤

產(chǎn)品體驗(yàn)：

在優(yōu)酷APP開著彈幕看片時(shí)，可通過(guò)彈幕設(shè)置調(diào)整字體的不透明度、行數(shù)、大小及速度來(lái)設(shè)定最適合自己樣式。

設(shè)計(jì)思考：

彈幕，用戶非常熟悉的一個(gè)詞，很多時(shí)候在看影片時(shí)，彈幕里面的內(nèi)容遠(yuǎn)遠(yuǎn)要比影片帶來(lái)的樂(lè)趣多很多，除了能從中獲得群眾的陪伴增加愉悅感外，還可以帶動(dòng)視頻的觀看氛圍，讓活躍的用戶有了表達(dá)自我的動(dòng)力和熱情。但對(duì)于“鍵盤俠”來(lái)說(shuō)，僅僅在上方顯示的幾行彈幕根本無(wú)法滿足自己看影片互動(dòng)及調(diào)侃的需求。

優(yōu)酷的彈幕設(shè)置中，可以根據(jù)自己的實(shí)際需求對(duì)彈幕字體大小、透明度、區(qū)域等參數(shù)進(jìn)行設(shè)置，針對(duì)喜好調(diào)侃互動(dòng)的用戶來(lái)說(shuō)，使用滿屏半透明度字體樣式的彈幕無(wú)疑是最好的選擇，互動(dòng)看片兩不誤。

089.「隨便走」AR導(dǎo)航-“傻瓜”式操作，老少皆宜

產(chǎn)品體驗(yàn)：

使用隨便走導(dǎo)航，全程利用AR實(shí)景，通過(guò)3D立體形式的方向引導(dǎo)，幫助我們找到周邊的任何一個(gè)地方。

設(shè)計(jì)思考：

導(dǎo)航是我們出行必備的工具，目前高德和百度在該領(lǐng)域各自獨(dú)霸一方，看似很牛叉，但并不是萬(wàn)能的。比如老人操作起來(lái)有一定的難度，經(jīng)常各種功能找不到還說(shuō)不好用；又比如我們?cè)谀吧闹貞c市，可能你從這南面1樓進(jìn)去，北面就在20樓，毫不夸張，如果通過(guò)常規(guī)的地圖導(dǎo)航去找人，我建議你最好吃個(gè)早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。

隨便走APP是一款便捷式輕量導(dǎo)航工具，主打“讓生活樂(lè)趣一目了然”。利用“AR全息實(shí)景”的展現(xiàn)方式，改變了必須要有地圖的模式，對(duì)于我們找周邊的美食、酒店、公交、廁所、景點(diǎn)等需求，進(jìn)行穿透式3D立體指引，操作簡(jiǎn)單，不管前、后、左、右、上、下都有非常明顯的視覺引導(dǎo)，只有你想不到，沒(méi)有它找不到，對(duì)于長(zhǎng)期生活在大城市的用戶，交通復(fù)雜、道巷縱橫，很可能我就在你“隔壁”，你卻找不到我“老王”。此外，隨便走APP操作簡(jiǎn)單，學(xué)習(xí)成本基本為零，對(duì)家中老人而言，也是一款不錯(cuò)的導(dǎo)航工具。

090.「微信讀書」模擬現(xiàn)實(shí)的行為動(dòng)作

產(chǎn)品體驗(yàn)：

在微信讀書的書架頁(yè)面，點(diǎn)擊書籍以及書本翻頁(yè)，都使模擬了現(xiàn)實(shí)生活中較為自然且真實(shí)的從書架拿書、及各個(gè)角度翻頁(yè)的效果。

設(shè)計(jì)思考：

看書APP雖然眾多，但真正能堅(jiān)持下去、養(yǎng)成習(xí)慣的沒(méi)有幾個(gè)人能做到，站在平臺(tái)的角度思考，畢竟書本的內(nèi)容是平臺(tái)無(wú)法修改的，除了提供優(yōu)質(zhì)的資源并給予方向指引外，其他便是通過(guò)設(shè)計(jì)體驗(yàn)來(lái)提升用戶的好感度了，

微信讀書APP從書架的拿書動(dòng)作到書本的翻頁(yè)，都模擬了現(xiàn)實(shí)生活中用戶看書的行為動(dòng)作，大家都知道，真正喜歡閱讀的人，是不會(huì)在意這些所謂的橫豎及交互效果的，但前面都說(shuō)了，這種人畢竟在于少數(shù)。因?yàn)槭鼙姷牟顒e，模擬現(xiàn)實(shí)其最主要的作用就是為了吸引眼球，模擬用戶的實(shí)際行為，將其代入真實(shí)的情境中，使用戶對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感，則看著更加舒心，待用戶提升忠誠(chéng)且養(yǎng)成看書習(xí)慣之后，這些作用就會(huì)慢慢變得微不足道。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：大漠飛鷹CYSJ    來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

首先要說(shuō)明一點(diǎn)：模態(tài)modals和模式modes盡管都有個(gè)“模”字，但在界面設(shè)計(jì)上指的是不一樣的東西。前者是我們一般說(shuō)的“帶黑色遮罩的彈窗或者頁(yè)面”，后者則指“同一個(gè)操作在不同的情況下，帶來(lái)不同的效果”，比如Photoshop提供的各種工具就是模式切換的隱喻式說(shuō)法。

在photoshop中，用戶點(diǎn)擊一下“套索工具”然后按住鼠標(biāo)左鍵，就可以在畫布上勾選一個(gè)范圍，點(diǎn)擊鼠標(biāo)右鍵則可以對(duì)這個(gè)范圍進(jìn)行操作。而點(diǎn)擊一下“畫筆工具”，盡管同樣是在畫布上按住鼠標(biāo)左鍵，效果則變成了使用筆刷在畫布上畫出痕跡，這就是“共用同一個(gè)操作但效果不同”的模式切換。

此外，界面設(shè)計(jì)中還有一個(gè)和“模式”有點(diǎn)像的概念“視圖”view。通常來(lái)說(shuō)，同一個(gè)界面與操作產(chǎn)生不同效果的稱為模式；同一套數(shù)據(jù)展示方式有差異的稱為視圖。這個(gè)就下次再聊了。

盡管在圖形化用戶界面的發(fā)展中，模式這個(gè)概念曾經(jīng)被各路交互/界面設(shè)計(jì)師充分討論過(guò)，但實(shí)際上它并不是一個(gè)人機(jī)交互原生的概念，我個(gè)人推測(cè)“模式”的產(chǎn)生恰巧與非界面的產(chǎn)品設(shè)計(jì)有脫不開的關(guān)系。許多生活中的產(chǎn)品出于安全性、效率或者成本的考量會(huì)把屏幕設(shè)計(jì)的很小或者干脆沒(méi)有屏幕，人和機(jī)器進(jìn)行交互的方式也很簡(jiǎn)單（一般是通過(guò)按鈕），這就導(dǎo)致這些產(chǎn)品能夠展示的信息很有限。那么為了能夠區(qū)隔用戶的不同任務(wù)/意圖，用有限的按鈕實(shí)現(xiàn)不同功能，就采用了“模式”這種設(shè)計(jì)方式。

比如很多多功能的手表既可以展示當(dāng)前時(shí)間也可以拿來(lái)當(dāng)鬧鐘或者計(jì)時(shí)器，那么為了能在這么小一點(diǎn)的屏幕上實(shí)現(xiàn)這么多的功能，就需要一個(gè)“模式”按鈕來(lái)進(jìn)行功能切換。切換模式后點(diǎn)擊調(diào)整時(shí)間按鈕，則可以達(dá)到選擇鬧鐘時(shí)間/調(diào)整計(jì)時(shí)時(shí)長(zhǎng)/調(diào)整當(dāng)前時(shí)間等不同的效果。

除了上述手表的例子以外，“模式”還廣泛存在在各種簡(jiǎn)單或復(fù)雜的民用/商用產(chǎn)品中，比如汽車的速度控制，就是一種速度與檔位協(xié)同完成的模式；而飛機(jī)的駕駛艙里也有一個(gè)“模式操縱面板”，能讓飛機(jī)駕駛員在高度保持/垂直導(dǎo)航等模式中切換，對(duì)飛機(jī)的飛行高度/速度等作出調(diào)整?？傊诋a(chǎn)品設(shè)計(jì)的世界中“模式”的應(yīng)用案例又多又復(fù)雜，相比之下界面交互中的“模式”就非常精簡(jiǎn)好理解了。

02模式在界面設(shè)計(jì)的興衰

在圖形化界面發(fā)展之初“模式”這個(gè)概念就被帶入了界面設(shè)計(jì)領(lǐng)域。也許是沒(méi)有跳脫產(chǎn)品設(shè)計(jì)的影響，此時(shí)的“模式”傾向于用硬件按鈕來(lái)解決問(wèn)題，而沒(méi)有完全轉(zhuǎn)向界面操作。比如我們上次講過(guò)的Xerox Star就設(shè)計(jì)了一個(gè)奇怪的“移動(dòng)模式”，假如用戶想要移動(dòng)一個(gè)文件到另一個(gè)文件夾，那么他需要做以下幾步：

• 先通過(guò)鼠標(biāo)選中這個(gè)文件
• 然后按一下鍵盤上的“移動(dòng)”按鈕，讓計(jì)算機(jī)進(jìn)入“移動(dòng)模式”，此時(shí)屏幕上會(huì)出現(xiàn)“移動(dòng)模式”的字樣，用戶不可以做任何與移動(dòng)無(wú)關(guān)的操作，除非退出該模式
• 此時(shí)他再用鼠標(biāo)點(diǎn)擊一下目標(biāo)文件夾，移動(dòng)命令就會(huì)被執(zhí)行

現(xiàn)在來(lái)看這個(gè)“模式”設(shè)計(jì)真是既反直覺效率又低下，因當(dāng)時(shí)此很多設(shè)計(jì)師也在思考界面設(shè)計(jì)是否真的需要“模式”這個(gè)東西。和屏幕有限、交互方式有限的產(chǎn)品設(shè)計(jì)不同，電腦有鼠標(biāo)有大屏幕，一方面用戶在同一個(gè)場(chǎng)景下可做的事情大大增多，另一方面設(shè)計(jì)師也可以通過(guò)拆分界面、增加功能入口的方式來(lái)讓用戶聚焦當(dāng)前任務(wù)而沒(méi)必要采用模式。因此蘋果在1992年發(fā)布的Macintosh人機(jī)界面指南中開始將“無(wú)模式”modelessness作為蘋果產(chǎn)品的一大賣點(diǎn)。用戶能在任何情況下完成任何行為，而不必要進(jìn)入某個(gè)特殊的“模式”。比如我們上面提到的“移動(dòng)”操作，在Mac中就變成了我們熟悉的按下拖動(dòng)，簡(jiǎn)單快捷。

然而“模式”是不是完全過(guò)時(shí)了、完全不適合界面設(shè)計(jì)？也不盡然。首先，在一些和實(shí)物產(chǎn)品相關(guān)的地方，模式還是留下了它的痕跡。比如我們現(xiàn)在電腦鍵盤上的大小寫鎖定按鈕也是個(gè)“模式”設(shè)計(jì)。當(dāng)用戶按下這個(gè)鍵的時(shí)候，電腦進(jìn)入大寫模式，鍵盤打出來(lái)的字都是大寫的；再次按下這個(gè)按鈕則退出此模式。另外在界面設(shè)計(jì)領(lǐng)域也有設(shè)計(jì)師對(duì)模式持不同態(tài)度，比如寫可用性十原則的那個(gè)尼爾森，就在1996年寫了一篇文章談到他對(duì)“模式”這個(gè)東西不一樣的觀點(diǎn)。在他看來(lái)，“模式”這個(gè)東西的本意是“聚焦用戶的注意力、減少用戶可以做的操作，以便于用戶能更快捷地找到在當(dāng)下具體場(chǎng)景中所需的操作與信息”，并且模式思維其實(shí)天然存在在人的日常生活中，比如一個(gè)人在廚房里做的事肯定和在游泳池里做的事不一樣。

這篇文章有興趣可見：https://www.nngroup.com/articles/anti-mac-interface/

盡管如此，尼爾森也承認(rèn)當(dāng)時(shí)的“模式”具有一個(gè)很討人厭的問(wèn)題：模式的切換很麻煩，用戶也總是忘記自己身處某個(gè)模式下，因此可能會(huì)做出此模式無(wú)效的錯(cuò)誤操作。所以為了解決這個(gè)問(wèn)題，尼爾森覺得采用彈簧模式（ spring-loaded modes ）作為普通模式的替代品更好。這種模式最廣泛的應(yīng)用就是鍵盤上的shift鍵：按下shift時(shí)多選模式生效，此時(shí)可以點(diǎn)選多個(gè)文件，一旦松開shift則馬上退出多選模式，這樣一來(lái)用戶就不會(huì)忘記自己身處某個(gè)模式下了。

03作為模式的批量操作

盡管模式在界面設(shè)計(jì)中存在感越來(lái)越弱，但除了PS“工具”之外，仍然有兩個(gè)非常廣泛存在的模式設(shè)計(jì)：查看/編輯模式、批量操作模式。今天咱們會(huì)主要聊批量操作模式。嚴(yán)格來(lái)講“批量操作”即同時(shí)對(duì)多個(gè)對(duì)象進(jìn)行操作，它可用多種方式實(shí)現(xiàn)而并不局限于“模式”，但是現(xiàn)在市面上比較通行的處理辦法或多或少還是采用了模式的思路，因此我把這兩個(gè)東西放在一起說(shuō)。

我這里舉個(gè)例子：比如說(shuō)你是一個(gè)賣海鮮的小店主，為了讓自己店里的海鮮賣的好點(diǎn)，你決定上抖音給你的海鮮打廣告。但打廣告這個(gè)東西得多試，哪條廣告語(yǔ)、哪個(gè)產(chǎn)品能火很難說(shuō)，所以你在抖音的廣告系統(tǒng)上新建了60條廣告，每條用的廣告視頻和標(biāo)題都有些差異，這樣最后哪條廣告火你就繼續(xù)投哪條，不火的就下掉不燒錢了。

但是這么多的廣告管理起來(lái)很不方便。比如經(jīng)過(guò)你的一番研究，發(fā)現(xiàn)抖音的受眾好像都比較喜歡大蝦的廣告，對(duì)螃蟹圖片不怎么感冒，轉(zhuǎn)化數(shù)據(jù)很難看。所以你打算把所有帶了螃蟹圖片的20條廣告都關(guān)閉投放。那我們能怎么做呢？

1.隱式模式

按照傳統(tǒng)的模式思維，我們可以像Xerox Star一樣，通過(guò)某種辦法讓用戶進(jìn)入多選模式，在這個(gè)模式下用戶可以進(jìn)行一些特定的操作，比如批量刪除。然后在批量模式打開的狀態(tài)下，出現(xiàn)多選模式需要用到的組件：多選框與多選操作欄。此時(shí)其他和多選模式無(wú)關(guān)的操作，比如“新建廣告”則被置灰，除非用戶退出模式，否則不可點(diǎn)擊。

這樣設(shè)計(jì)相信很多同學(xué)能馬上看出問(wèn)題：操作效率太低了。打開模式按鈕以后，還需要進(jìn)行多選操作，然后選擇對(duì)應(yīng)批量操作。其實(shí)假如用戶選擇了多個(gè)項(xiàng)，我們就可以預(yù)判這個(gè)用戶是想要對(duì)這多個(gè)項(xiàng)進(jìn)行操作，沒(méi)必要要求用戶先打開一個(gè)批量模式開關(guān)

因此，為了解決這個(gè)問(wèn)題，在保持表格復(fù)雜性可以容忍的條件下，大多數(shù)平臺(tái)會(huì)將模式的進(jìn)入方式設(shè)計(jì)得比較含蓄：只要用戶選中了多選框，就進(jìn)入多選模式——我把這種設(shè)計(jì)叫做隱式模式。比如最近比較火的產(chǎn)品cubox，就采用了這樣的模式設(shè)計(jì)。除去進(jìn)入模式的方式不同，其他的設(shè)計(jì)點(diǎn)和60年前的Xerox Star差異不大。

同樣的隱式模式，google mail就做得更加精簡(jiǎn)一些。用戶仍然通過(guò)點(diǎn)擊多選框進(jìn)入多選模式，但是只禁用了“刷新”這個(gè)會(huì)清除所有多選狀態(tài)的操作，其他的大部分操作仍然可用。同時(shí)也不再提供退出模式的選擇。

那是不是隱式模式相比起來(lái)就更好，模式按鈕就不能再用了呢？也不是。咱們之前提過(guò)，“批量操作模式”之所以可以做成隱式的，是因?yàn)楫?dāng)用戶選擇多個(gè)項(xiàng)時(shí)，其意圖就已經(jīng)很明確了。但某些時(shí)候，我們無(wú)法清晰捕捉到用戶的意圖，所以還得用戶自己手動(dòng)把模式打開。比如假如這個(gè)廣告投放的列表是有優(yōu)先級(jí)排序的，在頁(yè)面中排序越高的廣告就能得到越多的用戶預(yù)算（這句話我瞎說(shuō)的，知道什么意思就行）。但之前的廣告表格已經(jīng)非常復(fù)雜了，再插入一套排序組件會(huì)讓整個(gè)頁(yè)面的復(fù)雜程度再上一個(gè)臺(tái)階，那此時(shí)應(yīng)該怎么辦？

此時(shí)我們的“排序功能”仍然是用模式實(shí)現(xiàn)的，但要求用戶先點(diǎn)擊一下排序觸發(fā)模式。這樣做雖然操作效率上不如隱式模式，但有效降低了頁(yè)面復(fù)雜度，并且也能讓新用戶意識(shí)到這個(gè)功能的存在，保證功能的可見性。

2.彈簧模式

我們上面介紹過(guò)了，電腦的設(shè)計(jì)本身自帶了一個(gè)彈簧模式設(shè)計(jì)：shift鍵。按下shift鍵之后用戶可以選中列表中的一個(gè)范圍，而不需要一個(gè)個(gè)地去點(diǎn)選。因此我們?cè)谧霰砀衽坎僮鞯臅r(shí)候也可以考慮支持這個(gè)鍵控，方便有批量操作訴求的用戶批量進(jìn)行選中。

3.不使用模式

雖然我們?nèi)荚谥v模式，但實(shí)際上批量操作不用模式也能做。不用模式的時(shí)候一般有兩種情況：第一，盡管使用模式區(qū)隔使用場(chǎng)景、隱藏一部分功能的設(shè)計(jì)方式保證了頁(yè)面的簡(jiǎn)潔，但也帶來(lái)了另一個(gè)問(wèn)題：可見性低。在沒(méi)有進(jìn)入批量操作模式之前，用戶不清楚自己能做什么多選操作。在咱們抖音投廣告的案例中只有“刪除”、“下線”兩個(gè)操作，所以這個(gè)問(wèn)題體現(xiàn)的不太明顯。但有些場(chǎng)景下，列表中的項(xiàng)有非常多的屬性，所以可能可做的批量操作很多。比如用戶可能會(huì)需要批量改廣告標(biāo)題、改出價(jià)、改投放時(shí)段等等。因此用戶思考的順序是：我需要做某批量操作->我觀察到系統(tǒng)提供了這個(gè)操作功能->我開始進(jìn)行這個(gè)操作。

因此，對(duì)于一些注重操作效率、用戶專業(yè)程度高的系統(tǒng)來(lái)說(shuō)，為了能夠讓用戶能夠在進(jìn)入本頁(yè)面時(shí)就能進(jìn)行所有操作，愿意犧牲一部分頁(yè)面簡(jiǎn)潔性去換取更高的操作效率。這樣的系統(tǒng)往往選擇直接將批量相關(guān)的操作直接暴露在頁(yè)面中，因此對(duì)于設(shè)計(jì)師的排版技能有更高的要求。

在上面兩種樣式中，多選/批量操作都直接放在頁(yè)面中，不再使用模式呈現(xiàn)。因此當(dāng)頁(yè)面上按鈕比較多的時(shí)候，一般會(huì)將所有批量操作收起來(lái)做成下拉菜單。

第二，注意到我們上面所有說(shuō)的批量操作都比較簡(jiǎn)單，比如“刪除”、“下線”一步即可完成，因此用戶主要的心理成本和操作成本都?jí)涸诙噙x操作上，也就是操作本身不難，只是操作的對(duì)象很多。但有些批量操作本身非常復(fù)雜、需要花費(fèi)很多時(shí)間，那么再通過(guò)為一個(gè)管理列表添加模式來(lái)解決問(wèn)題，就不太合理。比如假如我們的“抖音廣告”新出了一個(gè)功能，允許用戶自己創(chuàng)作新的圖片，然后把創(chuàng)作出來(lái)的圖片批量應(yīng)用在已經(jīng)有的廣告上。此時(shí)顯然我們?cè)僖笥脩粝葟膹V告列表中選擇廣告，就不現(xiàn)實(shí)了。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：白話說(shuō)交互    來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

01| 驚奇變革：7步創(chuàng)造超級(jí)滿意的客戶體驗(yàn)

作者：謝普·?？希⊿hep Hyken）

推薦理由：該書以當(dāng)今客戶服務(wù)同質(zhì)化嚴(yán)重、客戶對(duì)價(jià)格敏感等經(jīng)濟(jì)環(huán)境為背景，深度解析為何客戶體驗(yàn)是企業(yè)想脫穎而出的最佳工具。提出7步創(chuàng)造卓越客戶服務(wù)體驗(yàn)的戰(zhàn)略。任何企業(yè)都可以運(yùn)用這些戰(zhàn)略來(lái)提高客戶和員工的忠誠(chéng)度，從而提供超越預(yù)期的服務(wù)。這樣可以幫助企業(yè)塑造優(yōu)質(zhì)形象，迅速形成優(yōu)質(zhì)口碑；創(chuàng)造獨(dú)特競(jìng)爭(zhēng)優(yōu)勢(shì)，超越簡(jiǎn)單價(jià)格競(jìng)爭(zhēng)；提高客戶忠誠(chéng)，讓客戶購(gòu)買得更多；讓員工和客戶都引以為傲。

02 | 海盜思維：打造令人驚奇的客戶體驗(yàn)

作者：[澳] 羅伯特·杜（Robert·Dew）

推薦理由：本書出發(fā)點(diǎn)在于幫助企業(yè)如何實(shí)施、落地以及長(zhǎng)期維持，如何獲取長(zhǎng)久的市場(chǎng)競(jìng)爭(zhēng)優(yōu)勢(shì)，帶領(lǐng)讀者思考何為客戶體驗(yàn)、客戶體驗(yàn)為何重要，以及企業(yè)六大競(jìng)爭(zhēng)優(yōu)勢(shì)的基礎(chǔ)上從如何評(píng)估你的客戶體驗(yàn)、如何打造遞增性客戶體驗(yàn)升級(jí)、如何養(yǎng)成或改變你的客戶體驗(yàn)三大方面進(jìn)行詳實(shí)具體的介紹和分析，結(jié)合諸多案例，圍繞客戶體驗(yàn)痛點(diǎn)解決的成功的和不太成功的案例，為讀者提供了一個(gè)豐富而實(shí)用的案例庫(kù)、工具包。

03 | 用戶體驗(yàn)四維度

作者：李瀟

推薦理由：該書涉及的話題既有屬于基礎(chǔ)的根需求、功能架構(gòu)、信息架構(gòu)、交互設(shè)計(jì)、UI設(shè)計(jì)，也有更進(jìn)一步的HC X（知識(shí)型UGC和信息型UGC）、HH X（人與人的交互體驗(yàn)）、HB X（人與品牌的交互體驗(yàn)），具有追求深度、追求卓越、展望未來(lái)、兼顧大小的特色，用戶即人，談?dòng)脩趔w驗(yàn)，自然離不開對(duì)人的關(guān)注， 作為人的互聯(lián)網(wǎng)從業(yè)者，在打造產(chǎn)品時(shí)，如何在兼顧商業(yè)化的同時(shí)，用更溫暖的方式去打動(dòng)人？用戶利益與企業(yè)利益的權(quán)衡，是一些產(chǎn)品正在面臨的問(wèn)題，也是所有產(chǎn)品都難以回避的問(wèn)題，作者選擇聚焦于“人”，這本書的文字能為身處困境的你帶來(lái)有溫度的思考。

04 | 極致服務(wù)：創(chuàng)造不可思議的客戶體驗(yàn)

作者：[美]肯·布蘭佳(Ken Blanchard)、[美]凱西·卡夫(Kathy Cuff)、[美]維基·哈爾西(Vick Halseyi)

推薦理由：該書作者肯·布蘭佳博士被譽(yù)為當(dāng)今商界洞察力和思想深度的人之一，而他的著作非常貼近商業(yè)現(xiàn)實(shí)，往往是通過(guò)真實(shí)的商業(yè)故事呈現(xiàn)現(xiàn)實(shí)情景，闡述其深邃的商業(yè)理念和獨(dú)到的管理見解，令讀者在閱讀過(guò)程中不知不覺領(lǐng)悟到其中精髓。此次肯·布蘭佳博士在其新作《極致服務(wù)——如何創(chuàng)造不可思議的客戶體驗(yàn)》中依然采用嫻熟的商業(yè)故事敘述手法，讓讀者在故事閱讀中領(lǐng)悟極致服務(wù)的理念價(jià)值。 極致服務(wù)是指要始終如一地提供理想服務(wù)留住顧客，從而提高企業(yè)的競(jìng)爭(zhēng)力。簡(jiǎn)單來(lái)說(shuō)，就是企業(yè)通過(guò)一系列舉措令顧客感覺到備受關(guān)注，以此實(shí)現(xiàn)極致服務(wù)。

前言

現(xiàn)如今隨著設(shè)備尺寸的多種多樣，產(chǎn)品在設(shè)計(jì)過(guò)程中需要適配到更多尺寸，布局方案與柵格系統(tǒng)的搭配使用，可以很好的做到跨平臺(tái)跨尺寸適配，極大的提升設(shè)計(jì)效率。之前有小伙伴分享過(guò)適配選型的文章中也提到過(guò)柵格，大家可以回顧一下【W(wǎng)eb產(chǎn)品的適配設(shè)計(jì)選型】。

其實(shí)，絕大多數(shù)的設(shè)計(jì)師都知道柵格很重要，市面上很多企業(yè)級(jí)系統(tǒng)也都在用柵格系統(tǒng)去規(guī)范化信息內(nèi)容的排版布局，但很多設(shè)計(jì)師直接面對(duì)結(jié)論大多是一知半解，自己做設(shè)計(jì)時(shí)有些無(wú)從下手。

作者瀏覽了大量文章結(jié)合工作中的經(jīng)驗(yàn)總結(jié)分享給大家，希望能幫助理解柵格系統(tǒng)的本質(zhì)，并能舉一反三應(yīng)用在產(chǎn)品設(shè)計(jì)中，首先從基礎(chǔ)的柵格系統(tǒng)解析開始吧。

文章概覽

Chapter One 柵格的由來(lái)

最早的柵格概念，來(lái)源于平面設(shè)計(jì)中的“網(wǎng)格”，早在1692年，新登基的法國(guó)國(guó)王路易十四不滿于法國(guó)當(dāng)時(shí)印刷水平，命人成立了管理印刷的皇家特別委員會(huì)。旨在設(shè)計(jì)出科學(xué)的，合理的，重視功能性的新字體。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格單位，每個(gè)方格單位再分成36個(gè)小格，這樣，一個(gè)印刷版面就有2304個(gè)小格組成，在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的排版，試驗(yàn)傳達(dá)功能的效能，這是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng)，也是柵格系統(tǒng)最早的雛形。再后來(lái)，20世紀(jì)初，平面設(shè)計(jì)師們發(fā)現(xiàn)通過(guò)維持視覺秩序，能使版面更加清晰有效地傳遞信息，由此便逐漸演變出一種平面設(shè)計(jì)的方法，直到20世紀(jì)40年代后期，第一次出現(xiàn)了使用網(wǎng)格進(jìn)行輔助設(shè)計(jì)的印刷作品。由瑞士設(shè)計(jì)師大師Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書，自1961年出版以來(lái)暢銷至今，對(duì)設(shè)計(jì)界有著深遠(yuǎn)的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設(shè)計(jì)運(yùn)動(dòng))，后來(lái)成為全球風(fēng)靡的International Typographic Style (國(guó)際主義設(shè)計(jì)風(fēng)格) 。

Chapter Two 柵格是什么

簡(jiǎn)單來(lái)說(shuō)：柵格是通過(guò)規(guī)則的網(wǎng)格陣列，形成穩(wěn)定的基礎(chǔ)框架，來(lái)規(guī)范界面中模塊的布局與信息元素的分布，輔助設(shè)計(jì)師組織信息的工具。前面講到UI設(shè)計(jì)中常用的柵格系統(tǒng)是從平面網(wǎng)格系統(tǒng)中發(fā)展而來(lái)，柵格與網(wǎng)格的本質(zhì)其實(shí)是相通的。那么有同學(xué)會(huì)問(wèn)，兩者區(qū)別在哪呢？平面設(shè)計(jì)中【網(wǎng)格】應(yīng)用的媒介一般為固定的紙張規(guī)格，寬度和高度都是固定的，網(wǎng)格的劃分方式是一個(gè)個(gè)等分的方格。UI設(shè)計(jì)中【柵格】寬度受設(shè)備寬度變化而變化，高度由內(nèi)容多少來(lái)決定。因此設(shè)計(jì)時(shí)只需制定縱向的分割規(guī)則，以規(guī)范縱軸方向內(nèi)容的對(duì)齊、間隔等元素的排布，這也是我們看到柵格往往都是一列一列呈現(xiàn)的原因。

Chapter Three 為什么使用柵格

• to用戶
  內(nèi)容布局的規(guī)律性，減少了用戶的認(rèn)知成本：
  柵格一定程度上從設(shè)計(jì)師的角度定義了對(duì)齊關(guān)系，留白關(guān)系，圖文的比例分割關(guān)系等排版中重要部分的限制規(guī)則，幫助我們更好的執(zhí)行設(shè)計(jì)，輸出更具有平衡和感秩序感的版面，清晰的頁(yè)面信息展現(xiàn)，有利于提高用戶的閱讀和瀏覽效率，減少認(rèn)知成本。

• to設(shè)計(jì)師
  提升決策效率與設(shè)計(jì)輸出的統(tǒng)一性：
  對(duì)于較大的團(tuán)隊(duì)，設(shè)計(jì)師使用柵格系統(tǒng)能夠降低決策成本，采用一套統(tǒng)一的標(biāo)準(zhǔn)來(lái)對(duì)設(shè)計(jì)師進(jìn)行約束和高效協(xié)同，讓設(shè)計(jì)師快速定位通用規(guī)則并執(zhí)行設(shè)計(jì)，提高設(shè)計(jì)師的決策效率，規(guī)范設(shè)計(jì)產(chǎn)出的質(zhì)量。同時(shí)也避免了各式各樣頁(yè)面出現(xiàn)的混亂場(chǎng)面，當(dāng)存在多業(yè)務(wù)線共用同一系統(tǒng)規(guī)范或者多設(shè)計(jì)師協(xié)作設(shè)計(jì)項(xiàng)目時(shí)，柵格系統(tǒng)利于幫助加強(qiáng)設(shè)計(jì)一致性，統(tǒng)一輸出標(biāo)準(zhǔn)。

• to開發(fā)
  提高設(shè)計(jì)還原度，減少解釋成本：
  在與開發(fā)側(cè)對(duì)接協(xié)作過(guò)程中，我們有一套自上而下的有規(guī)可循的設(shè)計(jì)規(guī)律，且規(guī)則計(jì)算的原理與開發(fā)習(xí)慣保持一致，能避免細(xì)節(jié)的反復(fù)溝通，提高開發(fā)的設(shè)計(jì)還原度，減少不必要的解釋成本。
  此外柵格同樣利于設(shè)計(jì)師和開發(fā)人員對(duì)組件和模塊的復(fù)用，進(jìn)一步提高協(xié)作效率。

• to響應(yīng)式
  更加規(guī)律性、合理性的實(shí)現(xiàn)自適應(yīng)：
  現(xiàn)如今多屏設(shè)計(jì)是商業(yè)設(shè)計(jì)中不可或缺的一部分，響應(yīng)式設(shè)計(jì)自然也已成為設(shè)計(jì)中必不可少的一環(huán)，柵格系統(tǒng)的建立，可以讓響應(yīng)式布局變得有規(guī)可循，兼容不同的設(shè)備尺寸，更加規(guī)范合理的完成頁(yè)面在多平臺(tái)多尺寸下的自適應(yīng)設(shè)計(jì)。

Chapter Four 柵格的構(gòu)成要素

• 網(wǎng)格（Gird）：
• 列（Column）
• 水槽（Gutter）
• 邊距（Margin）
• 柵格總寬（Container）
• 容器盒子（Col-n）

市面上各系統(tǒng)對(duì)于柵格的名詞描述各有不同，新手往往會(huì)看的越多，越迷惑，其實(shí)大可不必糾結(jié)具體叫法上的細(xì)微差異，萬(wàn)變不離其宗，理解其本質(zhì)表達(dá)的意思和柵格的結(jié)構(gòu)原則即可，下面會(huì)對(duì)這些基礎(chǔ)名詞進(jìn)行一些解釋。

1. 網(wǎng)格（Gird）：最小單元-8像素原則

網(wǎng)格（Gird）的基本構(gòu)成就是單元格，由格子組成網(wǎng)，形成網(wǎng)格。最小單元格是界面的單位基礎(chǔ)，所有界面元素都按照這個(gè)基礎(chǔ)單位布局分布，它對(duì)于創(chuàng)造性的決策具有重要的指導(dǎo)意義。

通常，我們利用 8 作為最小單元格建立網(wǎng)格。

使用 8 的倍數(shù)來(lái)定義模塊的間距與元素的尺寸。

那么為什么是8，而不是別的數(shù)字？原因如下：

a.偶數(shù)思維：8作為偶數(shù)，能適應(yīng)市面上絕大多數(shù)設(shè)備屏幕，更為普適。在輸出各種倍圖時(shí)也能保證尺寸不出現(xiàn)奇數(shù)以及0.5、0.75等次像素的出現(xiàn)（iOS導(dǎo)出1、2、3倍圖，Android導(dǎo)出1、1.5、2、3、4倍圖均為偶數(shù)）。

b.規(guī)律性：所有元素以8像素為步進(jìn)單位，利用8或8的倍數(shù)規(guī)范元素和間距大小，（例如使用4、8、16、24、32等和8具有規(guī)律關(guān)系的數(shù)字）有規(guī)可循。

c.節(jié)奏感：相比于6、10 等數(shù)字，以8為單位，在視覺感受上既不顯得過(guò)于瑣碎，也不會(huì)因?yàn)殚g隔太大而顯得內(nèi)容分散，更容易保證頁(yè)面效果的協(xié)調(diào)性。

d.目前市面上眾多開源代碼也都以8的倍數(shù)作為默認(rèn)設(shè)計(jì)大小，可行性已經(jīng)得到多輪過(guò)驗(yàn)證，設(shè)計(jì)師在與開發(fā)對(duì)接過(guò)程中對(duì)頁(yè)面有較為統(tǒng)一的理解，有效降低合作成本，在設(shè)計(jì)還原度上也更有保障。

劃重點(diǎn)：注意這里給的是建議尺寸，最小單位的制定還需要結(jié)合具體的使用場(chǎng)景來(lái)決定，我們以解決問(wèn)題為最終目的。

2.列（Column）

列（Column）的作用通常是用來(lái)對(duì)齊內(nèi)容，列也是柵格的數(shù)量單位，大家可以理解設(shè)置柵格數(shù)量就是設(shè)置列的數(shù)量，如 12 柵格就有 12 列、24 柵格就有 24 個(gè)列，通過(guò)控制列數(shù)，可控制界面排版的呼吸節(jié)奏，列數(shù)越多，內(nèi)容排布可以越精細(xì)，也容易分割的太細(xì)碎，反之列數(shù)越少，內(nèi)容排布也越容易稀疏松散。

3.水槽（Gutter）

理解了列，再來(lái)說(shuō)水槽（Gutter），水槽就是列于列之間的分隔間距，這里水槽的作用是幫助區(qū)塊內(nèi)容做分隔，需要注意，水槽內(nèi)不可放置任何板塊內(nèi)容。

水槽寬度在一定程度也會(huì)對(duì)界面的風(fēng)格有影響，水槽越大，留白越多呼吸感越好，適合一些輕松的內(nèi)容瀏覽類頁(yè)面展示，相反水槽越小，留白小內(nèi)容緊湊，適合一些嚴(yán)謹(jǐn)?shù)墓ぞ咝兔姘孱悆?nèi)容展示，各有利弊，大家可根據(jù)設(shè)計(jì)目標(biāo)權(quán)衡設(shè)計(jì)策略。

4.邊距（Margin）

邊距（Margin）有時(shí)候也會(huì)被叫安全邊距，是指設(shè)計(jì)內(nèi)容距離屏幕邊緣的距離，顧名思義，安全邊距內(nèi)是禁止放內(nèi)容的，可以類比為平面設(shè)計(jì)里的出血概念，主要用來(lái)控制屏幕核心內(nèi)容的展示邊界。

邊距值越小，界面核心內(nèi)容的有效利用空間越大，布局相對(duì)來(lái)說(shuō)會(huì)比較寬松，相反，邊距值越大，兩邊留白大呼吸感強(qiáng)，但有效利用區(qū)域相對(duì)小，內(nèi)容排布相對(duì)更緊湊，也可能會(huì)容易擁擠。這里建議界面的邊距可以根據(jù)屏幕尺寸做適配，通過(guò)斷點(diǎn)響應(yīng)變化，這樣可以更好的保證在不同屏幕上界面呼吸節(jié)奏都相對(duì)舒適。

5.柵格總寬（Container）

柵格總寬（Container）就是指頁(yè)面柵格系統(tǒng)的總寬度，即所有列寬加水槽寬度加安全邊距的總和。

6.容器盒子（Col-n）

建立好基礎(chǔ)柵格之后，我們可以根據(jù)內(nèi)容去定義一塊內(nèi)容占用幾個(gè)列的寬度，我們把這個(gè)區(qū)域理解為容器盒子，容器用來(lái)集合下級(jí)組件，也可以是對(duì)文字、圖片、按鈕等多個(gè)復(fù)雜元素的集合，按照頁(yè)面結(jié)構(gòu)可以由小到大依次從組件 – 容器 – 模塊 – 頁(yè)面 – 場(chǎng)景進(jìn)行組合拼裝最終形成設(shè)計(jì)方案。

Chapter Five 如何制定柵格系統(tǒng)

定義柵格系統(tǒng)之前，我們先了解熟悉下計(jì)算公式

如果你已經(jīng)理解了前面的柵格要素的作用和用法，那么接下來(lái)就可以按照以下步驟在自己的畫板上創(chuàng)建柵格系統(tǒng)。

1.確定柵格區(qū)域

注意柵格區(qū)域不一定是畫布的全部區(qū)域，我們可以先將頁(yè)面按照功能模塊劃分為全局控制層、內(nèi)容層、背景層、臨時(shí)層。通常我們大多是對(duì)內(nèi)容層進(jìn)行柵格化。

通常web端常用的三種布局如下圖所示，建議按照實(shí)際使用場(chǎng)景靈活的選擇布局形式后，再確定需要柵格化的區(qū)域。

當(dāng)我們遇到一個(gè)wed端的內(nèi)容瀏覽類網(wǎng)站，一般會(huì)采用上下布局，通常會(huì)基于 1920 或 1440 尺寸作為設(shè)計(jì)稿寬度，但由于需要適配主流尺寸中的最小尺寸，核心內(nèi)容展示會(huì)控制在 1024（這里不是絕對(duì)值，不同產(chǎn)品根據(jù)實(shí)際情況數(shù)字會(huì)有上下浮動(dòng)），其他空白區(qū)域即為安全邊距，這是web網(wǎng)頁(yè)中常見的一種適配方案。

2.選擇柵格列數(shù)

12柵格和24柵格是目前比較常見的列數(shù)結(jié)構(gòu)。選擇使用哪種柵格結(jié)構(gòu)，取決于產(chǎn)品對(duì)設(shè)計(jì)的要求。
12柵格：當(dāng)產(chǎn)品涉及到多平臺(tái)發(fā)布，內(nèi)容較為簡(jiǎn)單，單個(gè)容器盒子內(nèi)信息面積較大時(shí)，可以考慮采用12柵格來(lái)兼容。

24柵格：如果當(dāng)前產(chǎn)品發(fā)布于pc，內(nèi)容較多，且功能繁雜時(shí)，則需要更靈活的柵格系統(tǒng)去規(guī)范信息內(nèi)容的布局，這時(shí)我們可以考慮采用24柵格，國(guó)內(nèi)較為主流的企業(yè)級(jí)設(shè)計(jì)系統(tǒng) Ant Design采用的就是24 柵格。

3.定義水槽（Gutter）和邊距（Margin）

前面講到過(guò)在產(chǎn)品 UI 中邊距（Margin）的值對(duì)視覺的呈現(xiàn)的影響，這里就不做過(guò)多贅述。這里科普一個(gè)叫做“Rem”的計(jì)算單位，(Rem 是開發(fā)常用的計(jì)算方式，設(shè)計(jì)和開發(fā)基于同一套原理進(jìn)行設(shè)計(jì)，在協(xié)作過(guò)程中能夠極大提高協(xié)作效率，并且減少維護(hù)成本），通常制定柵格系統(tǒng)時(shí)，我們可以用1Rem的值來(lái)定義水槽（Gutter），它的靈活最強(qiáng)，可作為柵格系統(tǒng)的基準(zhǔn)值。而邊距（Margin）的值通常就是1.5Rem 或者 2Rem?；诔Ｓ玫?倍或者8倍間距系統(tǒng)規(guī)范，一般最為常用的基礎(chǔ)間距為 4，8，16，24，32，48，我們可以在這些基礎(chǔ)值里去選擇匹配產(chǎn)品的柵格系統(tǒng)基準(zhǔn)值。

通過(guò)Rem基準(zhǔn)值，我們還可以輕松得到一套匹配的間距系統(tǒng)，以1Rem=16為例，可以得到以下間距系統(tǒng)：

掌握以上要點(diǎn)，即可get一套匹配產(chǎn)品設(shè)計(jì)要求的柵格系統(tǒng)。

Chapter Six 柵格系統(tǒng)的應(yīng)用與響應(yīng)式

固定柵格

簡(jiǎn)單來(lái)講，在固定柵格中，頁(yè)面拉伸時(shí)，元素的尺寸和間距都是固定的，頁(yè)面每到一個(gè)斷點(diǎn)尺寸，就會(huì)減少或增加最邊緣的內(nèi)容元素。體現(xiàn)到柵格上，頁(yè)面寬度變化過(guò)程中未達(dá)到預(yù)設(shè)臨界值時(shí)，柵格系統(tǒng)本身的列與水槽寬度不變，頁(yè)面所有元素布局也不會(huì)有變化，直到到達(dá)臨界值，柵格列數(shù)會(huì)隨著瀏覽器寬度，增加或減少，邊緣內(nèi)容進(jìn)行換行顯示

典型案例：Dibbble、Behance

優(yōu)點(diǎn)：

適配規(guī)則簡(jiǎn)單，實(shí)現(xiàn)成本低

缺點(diǎn)：

適用范圍小，拉伸過(guò)程邊距不是固定的，大多只適用于內(nèi)容居中的上下布局類型產(chǎn)品

一個(gè)頁(yè)面盡量只有一種卡片尺寸，否則邊距不統(tǒng)一

卡片尺寸固定，在過(guò)大或者過(guò)小的屏幕尺寸上，比列容易顯得不協(xié)調(diào)

流動(dòng)?xùn)鸥?/span>

流動(dòng)?xùn)鸥裰许?yè)面邊距和內(nèi)容間距固定不變的，頁(yè)面內(nèi)容隨著頁(yè)面尺寸變化而變化，可以是增刪邊緣元素展示個(gè)數(shù)，可以是調(diào)整元素展示比例，最終效果是始終保持內(nèi)容卡片橫向充滿屏幕可用空間，這種彈性布局能更好的適應(yīng)不同分辨率體現(xiàn)到柵格上，頁(yè)面邊距和水槽寬度是固定不變的，列數(shù)在適配過(guò)程中也是固定不變的，拉伸過(guò)程中的實(shí)際列寬是通過(guò)柵格區(qū)域的百分比縮放而來(lái)，這時(shí)列的寬度就不一定最小單位的倍數(shù)了。

典型案例：百度圖片、花瓣

優(yōu)點(diǎn)：

可以兼容不同尺寸的卡片混排

頁(yè)面邊距也能保持一致，拉伸過(guò)程中拉伸過(guò)程中過(guò)渡平滑，不顯得突兀

缺點(diǎn)：

頁(yè)面伸縮時(shí)，不可避免的會(huì)出現(xiàn)卡片尺寸忽大忽小

混和柵格

在實(shí)際項(xiàng)目中，流動(dòng)?xùn)鸥窈凸潭鸥竦慕M合使用也是比較常見的做法，一些后臺(tái)系統(tǒng)設(shè)計(jì)、工具型的界面設(shè)計(jì)會(huì)較經(jīng)常使混合柵格的形式, 混合布局既有固定的內(nèi)容寬度，也有流動(dòng)的寬度，靈活性更高，對(duì)與內(nèi)容復(fù)雜的產(chǎn)品十分友好

典型案例：Ant Design Pro

優(yōu)點(diǎn)：

容器承載內(nèi)容靈活性高，不同分辨率下都能達(dá)到較為理想的視覺效果

缺點(diǎn)：

規(guī)則復(fù)雜，實(shí)現(xiàn)成本高

Chapter Seven 柵格系統(tǒng)使用要點(diǎn)

最后再來(lái)總結(jié)下柵格系統(tǒng)在使用過(guò)程中一些使用要點(diǎn)：

1.內(nèi)容區(qū)塊的定義要從列開始到列結(jié)束，可以任意分割，比如 6×2、3×4、4×3。

2.水槽內(nèi)禁止放置任何內(nèi)容元素

3.安全邊距內(nèi)禁止放置任何內(nèi)容元素

4.除非特意設(shè)計(jì)，否則不要在列之外區(qū)域放置元素

5.只要框架（父級(jí)）元素對(duì)齊柵格，原子組件（子級(jí)）可以不完全對(duì)齊列

6.對(duì)于柵格的區(qū)域選擇，可以根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景靈活應(yīng)用，不一定非要整個(gè)畫布區(qū)域

7.可以使用嵌套柵格，我們通常會(huì)用一套柵格標(biāo)準(zhǔn)來(lái)全局控制整個(gè)界面，但不乏有些產(chǎn)品中會(huì)出現(xiàn)一些典型模塊的內(nèi)容密度和全局柵格的匹配度不高，這種情況我們可將特定區(qū)域單獨(dú)定義柵格值，嵌入到總的柵格系統(tǒng)中結(jié)合使用。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：沙拉   來(lái)源：站酷

對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，尤其是現(xiàn)在 B 端設(shè)計(jì)如此流行的情況下，表單設(shè)計(jì)細(xì)節(jié)尤其需要各位設(shè)計(jì)師注意。今天會(huì)分享表單設(shè)計(jì)中那些你不注意的細(xì)節(jié)點(diǎn)，必須先點(diǎn)贊收藏了，這些干貨知識(shí)相信你一定用的上。

比如以登錄為例，當(dāng)你把密碼輸錯(cuò)后，網(wǎng)站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數(shù)據(jù)對(duì)用戶來(lái)說(shuō)很煩人，這會(huì)讓你必須重新輸入用戶名和密碼，即便只是拼錯(cuò)了密碼而已。

因此，任何專業(yè)的用戶體驗(yàn)設(shè)計(jì)師不僅應(yīng)該考慮順利的流程情況，還應(yīng)該考慮失敗時(shí)應(yīng)該怎么辦。

錯(cuò)誤提示

錯(cuò)誤提示應(yīng)該讓用戶容易找到原因并方便理解。否則，他們可能沒(méi)辦法解決這些錯(cuò)誤。所以對(duì)于設(shè)計(jì)師來(lái)說(shuō)，一個(gè)非常重要的目標(biāo)是要設(shè)計(jì)出一個(gè)易于解決錯(cuò)誤的流程。一個(gè)錯(cuò)誤信息應(yīng)該能清晰的解釋到底發(fā)生了什么，如果可能的話，最好也提供解決方案。

左邊的錯(cuò)誤信息很清晰的解釋了發(fā)生的問(wèn)題，右邊的錯(cuò)誤信息對(duì)用戶來(lái)說(shuō)非常困惑。

1. 什么時(shí)候告知用戶發(fā)生了錯(cuò)誤比較好？

當(dāng)用戶出錯(cuò)后，首先要考慮的事情就是應(yīng)該在用戶填表時(shí)提醒還是最后通知用戶。錯(cuò)誤預(yù)警中有三種常見模式：

內(nèi)聯(lián)/實(shí)時(shí)：在輸入時(shí)或移開焦點(diǎn)后立即提供反饋；

提交后/客戶端：當(dāng)用戶點(diǎn)擊提交按鈕之后；

服務(wù)器端：當(dāng)請(qǐng)求發(fā)送到服務(wù)器后再返回反饋給用戶。

這些方法中的每一種都有其優(yōu)點(diǎn)和缺點(diǎn)。

2. 內(nèi)聯(lián)驗(yàn)證

一般來(lái)說(shuō)，當(dāng)表單非常短小時(shí)用內(nèi)聯(lián)驗(yàn)證，因?yàn)樗试S在內(nèi)存中的數(shù)據(jù)仍然最新時(shí)更正錯(cuò)誤。

你可以用內(nèi)聯(lián)驗(yàn)證立即告訴用戶哪里錯(cuò)了。

3. 提交后驗(yàn)證

另一方面，當(dāng)表單很大且需要保持關(guān)注時(shí)，你希望幫助用戶保持專注，而不是通過(guò)不斷顯示錯(cuò)誤來(lái)打斷他們。

4. 服務(wù)器端驗(yàn)證

服務(wù)器端驗(yàn)證是最不友好的方式，但卻為網(wǎng)站提供了很高的穩(wěn)定性。當(dāng)需要二次檢查用戶的數(shù)據(jù)時(shí)，這種方法最有效。

5. 如何提示用戶錯(cuò)誤？

錯(cuò)誤提示告訴用戶他們做錯(cuò)了，但是他們究竟做錯(cuò)了什么，要如何修復(fù)它？很顯然，清楚地說(shuō)明錯(cuò)誤，而不僅僅是顯示 Error:90803，對(duì)用戶有很大幫助。

6. 使用積極語(yǔ)言而不是消極語(yǔ)言

錯(cuò)誤提示措辭要使用積極語(yǔ)言而不是消極語(yǔ)言。例如，如果用戶遺漏了一個(gè)字段，與其說(shuō)”該字段不應(yīng)該是空的“，不如說(shuō)”請(qǐng)?zhí)顚懘俗侄巍啊．?dāng)使用積極語(yǔ)言時(shí)，用戶不會(huì)因?yàn)橐粋€(gè)錯(cuò)誤而受到責(zé)備，這能減少用戶的焦慮感，減少流失。

7. 必要時(shí)提供幫助

在某些情況下，用戶無(wú)法自己修復(fù)錯(cuò)誤，他需要額外的幫助。例如，當(dāng)用戶無(wú)法登錄時(shí)，大多數(shù)應(yīng)用只提供找回密碼，而沒(méi)有找回用戶名。但事實(shí)上，用戶名和密碼都可能會(huì)忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來(lái)幫助用戶解決問(wèn)題。

標(biāo)簽

標(biāo)簽是表單可用性最關(guān)鍵的組成部分。如果標(biāo)簽不清晰，那么其他元素就算把可用性做得再好也沒(méi)意義。所以，不要讓用戶來(lái)猜測(cè)這里面到底要填什么內(nèi)容。

用不要用一些模棱兩可的詞，比如‘?dāng)?shù)字’可能會(huì)讓人感到困惑，一定要明確意思。

1. 將標(biāo)簽放在輸入字段的頂部

許多研究表明，將標(biāo)簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因?yàn)樗试S用戶遵循一條垂直線而不是 Z 模式。但是，如果它占用太多的垂直空間，您也可以使用浮動(dòng)標(biāo)簽。因此，如果你希望用戶更快地填充表單，請(qǐng)將他們放置在字段的頂部。

將標(biāo)簽放置在字段的頂部和使用浮動(dòng)標(biāo)簽，這兩種方式都很有效

2. 將標(biāo)簽放在輸入字段的左側(cè)

另一方面，當(dāng)你詢問(wèn)用戶比較復(fù)雜的問(wèn)題，用戶需要更多時(shí)間思考問(wèn)題答案的時(shí)候，研究表明將標(biāo)簽放在輸入框的左側(cè)會(huì)比較好。

3. 標(biāo)簽應(yīng)該是可見的，無(wú)論什么輸入狀態(tài)

無(wú)論你用什么方式，確保當(dāng)用戶填完內(nèi)容后，標(biāo)簽是可見的。因?yàn)?，?dāng)用戶需要再次確認(rèn)表單內(nèi)容的時(shí)候，他們不用刪除填好的數(shù)據(jù)來(lái)查看系統(tǒng)需要他們填什么。

4. 減少不必要的輸入項(xiàng)

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項(xiàng)。如果實(shí)在做不到，可以將必填和非必填的字段區(qū)分開，減少用戶的負(fù)擔(dān)。

5. 可見性

不管狀態(tài)如何，字段都應(yīng)該是清晰可辨的。此外，活動(dòng)字段和非活動(dòng)字段之間的區(qū)別應(yīng)該要明顯。

用輸入字段應(yīng)該有高對(duì)比度，在所有狀態(tài)下都是可見的

6. 自動(dòng)激活 PC 端表單的第一個(gè)字段

自動(dòng)激活表單的第一個(gè)字段，這可以提高處理效率，避免用戶額外點(diǎn)擊。

7. 幫用戶預(yù)先填好

在某些情況下，你可以幫用戶預(yù)先填好字段。例如，可以很容易地檢測(cè)到郵政編碼，或者某些數(shù)值可能是頻繁的。在這些情況下，為用戶填充字段。

8. 格式

含有大量小數(shù)的數(shù)字很難讀懂。因此，當(dāng)要求較大的數(shù)字時(shí)，需要考慮添加格式以支持可讀性。例如，在詢問(wèn)卡號(hào)時(shí)，使用自動(dòng)格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。

此外，當(dāng)請(qǐng)求需要特定格式化數(shù)據(jù)時(shí)，要包含一個(gè)實(shí)例，讓用戶準(zhǔn)確理解要填什么。

輸入字段的大小應(yīng)該與他預(yù)期的數(shù)據(jù)大小相對(duì)應(yīng)

10. 為桌面系統(tǒng)設(shè)計(jì)靈活的表單

在鍵盤和鼠標(biāo)之間切換很煩人。在理想的情況下，用戶應(yīng)該只使用一種媒介來(lái)填寫表單，但有時(shí)，這是不可能實(shí)現(xiàn)的。因此，如果用戶需要多種媒介來(lái)填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。

另外，當(dāng)創(chuàng)建一個(gè)網(wǎng)頁(yè)表單時(shí)，要確保用戶可以只使用鍵盤來(lái)瀏覽表單——使用TAB和方向鍵。

11. 為移動(dòng)端系統(tǒng)設(shè)計(jì)靈活的表單

當(dāng)在移動(dòng)設(shè)備上時(shí)，將你顯示的鍵盤與用戶必須輸入的數(shù)據(jù)相匹配。我們經(jīng)?？吹叫枰獢?shù)字鍵盤的輸入可以很好地實(shí)現(xiàn)這一點(diǎn)，但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤。

輸支持通過(guò)顯示正確的鍵盤輸入電子郵件

下拉菜單 vs 單選按鈕

下拉框的使用比單選按鈕更有挑戰(zhàn)性，因?yàn)樗枰~外的點(diǎn)擊來(lái)打開它們。此外，用戶無(wú)法提前看到選項(xiàng)，這可能會(huì)讓他們感到困惑。因此，如果你只有少量的選項(xiàng)，使用單選按鈕。如果選項(xiàng)的數(shù)量超過(guò) 4 個(gè)，下拉菜單的效果會(huì)更好。

1. 復(fù)選框

通過(guò)勾選復(fù)選框，用戶應(yīng)該是同意某些內(nèi)容。我的意思是，他們應(yīng)該說(shuō)，“是的，我想要這個(gè)”，而不是，“是的，我不想要這個(gè)”。不幸的是，我經(jīng)?？吹接姓`導(dǎo)性的復(fù)選框試圖在創(chuàng)建賬戶時(shí)欺騙人們訂閱他們的產(chǎn)品。當(dāng)你不想訂閱他們的通訊時(shí)，你又必須勾選復(fù)選框，像這樣的伎倆對(duì)信譽(yù)是不合適的，所以不要?jiǎng)有氖褂盟鼈儭?

通過(guò)勾選復(fù)選框，用戶應(yīng)該同意某些內(nèi)容，而不是確認(rèn)他們不同意。

結(jié)構(gòu)

一個(gè)結(jié)構(gòu)充分的表單就像一個(gè)與用戶的良好對(duì)話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。

1. 從簡(jiǎn)單的問(wèn)題開始

從簡(jiǎn)單的問(wèn)題開始，從用戶已經(jīng)很清楚知道答案的問(wèn)題開始，像名字、郵件這類。然后再循序漸進(jìn)問(wèn)稍微復(fù)雜的問(wèn)題，像賬戶信息之類的。

首先，一個(gè)很自然的順序，當(dāng)你第一次見某些人的時(shí)候，你會(huì)找一些比較好切入的問(wèn)題，比如叫什么名字啊之類的。其次，當(dāng)用戶已經(jīng)填了一些字段之后，那么之后會(huì)增加他填完表單的機(jī)會(huì)。

2. 創(chuàng)建邏輯信息塊

將不相關(guān)的信息按邏輯分組。例如，你可以將結(jié)帳表單分為“個(gè)人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個(gè)主題。

通過(guò)對(duì)相關(guān)信息進(jìn)行分組，使表單可被快速掃描

3. 單步 VS 多步表單

當(dāng)你有很多問(wèn)題要問(wèn)的時(shí)候，你可能想知道哪一個(gè)最有效：?jiǎn)尾搅鞒踢€是多步流程。一般來(lái)說(shuō)，單步表單的轉(zhuǎn)化率更高，因?yàn)樗雌饋?lái)更小，而且不會(huì)勸退用戶。如果你詢問(wèn)基本信息并希望用戶快速填寫表單，單步表單就非常不錯(cuò)。

當(dāng)用戶被要求必須填寫更多復(fù)雜信息時(shí)，多步表單會(huì)更好。為了幫助用戶在進(jìn)行多步驟填寫時(shí)不至于失去耐心，可以給到進(jìn)度條，提示還剩多少步。

4. 單列 vs 多列布局

一般來(lái)說(shuō)，用單列布局會(huì)更好，因?yàn)榭梢詭椭脩舾玫貟呙?，也可以盡量減少用戶遺漏填寫。

但當(dāng)用戶多次填寫同一個(gè)表單時(shí)，他們更喜歡多列表單，因?yàn)檫@樣不會(huì)浪費(fèi)時(shí)間滾動(dòng)。一般來(lái)說(shuō)，在 B 端應(yīng)用中這種多列表單會(huì)比較合適。

按鈕

設(shè)計(jì)可用的按鈕對(duì)提高轉(zhuǎn)化率至關(guān)重要。如果按鈕上的文字內(nèi)容比較模糊，會(huì)容易勸退新手用戶。

根據(jù)用戶按下按鈕會(huì)發(fā)生什么來(lái)命名按鈕

1. 提高用戶的容錯(cuò)率

對(duì)于更復(fù)雜的表單來(lái)說(shuō)，按鈕最重要的一點(diǎn)是，應(yīng)該有提交和取消表單的單一方法。用戶應(yīng)該至少有補(bǔ)救的機(jī)會(huì)。舉個(gè)例子，如果用戶點(diǎn)了在線幫助時(shí)，他已經(jīng)填好的數(shù)據(jù)不應(yīng)該被丟失?；蛘?，如果用戶由于意外點(diǎn)擊了按鈕，請(qǐng)求不應(yīng)該被提交。

2. 主要按鈕和次要按鈕應(yīng)該很容易區(qū)分

為了避免點(diǎn)擊錯(cuò)誤的按鈕，用戶應(yīng)該能比較容易地區(qū)分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

讓主要和次要的按鈕樣式上有比較大的區(qū)分度

3. 正確的標(biāo)簽按鈕

按功能明確地標(biāo)注按鈕。例如，如果按一個(gè)按鈕可以創(chuàng)建一個(gè)賬戶，在按鈕上的文案叫”創(chuàng)建賬戶”要好過(guò)“提交”。

總結(jié)

當(dāng)用戶打開表單時(shí)，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設(shè)計(jì)給他們?cè)O(shè)置障礙。

不幸的是，這里面提到的許多錯(cuò)誤，并不需要多么高級(jí)的技巧，而是因?yàn)樵O(shè)計(jì)沒(méi)有同理心。仔細(xì)思考你的設(shè)計(jì)流程，檢查是否能讓所有內(nèi)容對(duì)不同背景和專業(yè)知識(shí)的人都是清晰的。

通常來(lái)說(shuō)，一般要達(dá)到以下目的，大多數(shù)指導(dǎo)原則都來(lái)自這些規(guī)則：

用戶應(yīng)該只輸入一次數(shù)據(jù)

用戶應(yīng)該填盡可能少的信息

用戶應(yīng)該只需要記住少量的信息

用戶檢查和恢復(fù)錯(cuò)誤內(nèi)容應(yīng)該要很容易

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：nanaOMO   來(lái)源：站酷

譯者推薦 | 著名的諾貝爾獎(jiǎng)獲得者赫伯特·西蒙在對(duì)當(dāng)今經(jīng)濟(jì)發(fā)展趨勢(shì)進(jìn)行預(yù)測(cè)時(shí)也指出：“隨著信息的發(fā)展，有價(jià)值的不是信息，而是注意力。”

在互聯(lián)網(wǎng)中，設(shè)計(jì)師多是處在執(zhí)行層。通常我們會(huì)去追尋做這個(gè)項(xiàng)目的原因和目標(biāo)，那對(duì)于整個(gè)互聯(lián)網(wǎng)時(shí)代，設(shè)計(jì)師如何通過(guò)設(shè)計(jì)手段緊緊抓牢人類最有限卻最有價(jià)值的注意力呢？這篇文章就是一個(gè)向?qū)?，幫助你找到方向?/span>

摘要：電子產(chǎn)品正在爭(zhēng)奪用戶有限的注意力?，F(xiàn)代經(jīng)濟(jì)學(xué)越來(lái)越關(guān)注人類的注意力以及產(chǎn)品如何吸引用戶的關(guān)注。

注意力是數(shù)字時(shí)代最有價(jià)值的資源之一。在人類主要?dú)v史進(jìn)程中，獲得的信息是有限的。幾個(gè)世紀(jì)以前很多人不識(shí)字，教育是一種奢侈。如今我們可以大規(guī)模獲取信息。任何有互聯(lián)網(wǎng)連接的人都可以獲取事實(shí)、文學(xué)和藝術(shù)（通常是免費(fèi)的）。我們面對(duì)的是豐富的信息，但我們的大腦處理信息能力和以前一樣。每天仍然只有24小時(shí)。今天，注意力成為了限制因素，而不再是信息。

什么是注意力？

在深入討論注意力經(jīng)濟(jì)之前，我們首先需要把注意力的定義闡明清楚。注意力的正式心理學(xué)定義和大多數(shù)人對(duì)注意力概念的看法是重疊的。

注意力：選擇性地專注于我們目前正在感知的一些刺激，而忽略來(lái)自環(huán)境的其他刺激。

在平常的話中，我們經(jīng)常說(shuō)“請(qǐng)注意”。這個(gè)表達(dá)意味著注意力的兩個(gè)重要特征：有限的注意力和有價(jià)值的注意力。當(dāng)我們“關(guān)注”一件事，我們會(huì)消耗精神資源的預(yù)算，相應(yīng)的我們會(huì)減少消耗在其他地方的注意力。關(guān)于人類注意力的理論都認(rèn)為注意力的能力是有限的。心理學(xué)家兼經(jīng)濟(jì)學(xué)家 Herbert A. Simon 將注意力描述為人類思想中的“瓶頸”。他也提到“豐富的信息造成了注意力不能集中”。一心多用的自負(fù)是一種謠言：人們不能同時(shí)一心多用。比如，人們可能會(huì)在看電視時(shí)拿出手機(jī)，但是如果他們將注意力轉(zhuǎn)移到手機(jī)上，他們就會(huì)錯(cuò)過(guò)電視節(jié)目中發(fā)生的一些情節(jié)。

我們的注意力市場(chǎng)

注意力是我們個(gè)人的寶貴資源。這個(gè)資源同樣受到商業(yè)、政治運(yùn)動(dòng)、非營(yíng)利組織、還有無(wú)數(shù)其他組織的重視，他們都在試圖吸引我們?nèi)セㄥX或者花費(fèi)時(shí)間。在1997年，Michael H. Goldhaber 寫道，全球經(jīng)濟(jì)正在從物質(zhì)經(jīng)濟(jì)轉(zhuǎn)為基于人類注意力的經(jīng)濟(jì)。例如很多在線服務(wù)是免費(fèi)提供的，但在注意力經(jīng)濟(jì)中，注意力經(jīng)濟(jì)是資源更是一種貨幣：用戶用他們的注意力為服務(wù)付費(fèi)。今天，注意力經(jīng)濟(jì)的動(dòng)力促使企業(yè)吸引用戶在應(yīng)用程序和網(wǎng)站上花越來(lái)越多的時(shí)間。創(chuàng)建網(wǎng)站和應(yīng)用程序的設(shè)計(jì)師明白，他們的產(chǎn)品是在競(jìng)爭(zhēng)激烈的市場(chǎng)中爭(zhēng)奪有限的用戶注意力資源。吸引注意力的目標(biāo)導(dǎo)致了很多不同設(shè)計(jì)趨勢(shì)的普及，例如：

• 引人注目的動(dòng)畫可以引起用戶對(duì)一段內(nèi)容的關(guān)注
• 在繁忙擁擠的設(shè)計(jì)中，會(huì)同時(shí)顯示大量信息，希望其中的一個(gè)圖像或短語(yǔ)能夠吸引用戶的注意。 

• 廣告活動(dòng)吸引或強(qiáng)迫用戶將注意力集中在廣告上。iPhone 的 GameCenter 上提供一些包含廣告的免費(fèi)游戲。在廣告剛播放的一段時(shí)間，廣告中不會(huì)顯示關(guān)閉圖標(biāo)。這種設(shè)計(jì)迫使用戶在返回他們正在玩的游戲之前需要觀看完整的廣告。

• 網(wǎng)站和應(yīng)用旨在通過(guò)頻繁發(fā)送不必要的通知信息，以提高參與度。注意力經(jīng)濟(jì)如何影響用戶通常，設(shè)計(jì)師們會(huì)忽略用戶在使用系統(tǒng)時(shí)需要關(guān)注的許多不同刺激，并且可能會(huì)無(wú)意中設(shè)計(jì)了很多需要用戶過(guò)多關(guān)注的設(shè)計(jì)。

在我們最新的語(yǔ)音助手研究中，我們發(fā)現(xiàn)當(dāng)用戶在開車，亦或是他們的手或眼鏡很忙碌的時(shí)候，經(jīng)常用到手機(jī)語(yǔ)音助手的功能。一個(gè)常見的抱怨是，Siri 或者谷歌助手在手機(jī)屏幕上顯示結(jié)果而不是大聲讀出內(nèi)容。比如，即使是簡(jiǎn)單而常見的問(wèn)路任務(wù)，也可能要求司機(jī)將注意力分散在屏幕信息和道路之間。

配文：在 iPhone 上問(wèn) Siri 得到的查詢結(jié)果是展示在屏幕上的，用戶需要將注意力分散到任務(wù)和屏幕的信息上。

同樣，智能手機(jī)用戶的注意力也經(jīng)常被當(dāng)前使用的應(yīng)用程序、網(wǎng)站、電視節(jié)目或其他外部刺激所分散。這就是為什么手機(jī)上的會(huì)話往往比在臺(tái)式機(jī)上的會(huì)話短：中斷的可能性很高。

為了理解一個(gè)設(shè)計(jì)是否超出了用戶的注意能力，需要在上下文中進(jìn)行研究。實(shí)地研究、日記研究和訪談都可以用來(lái)了解人們?cè)诂F(xiàn)實(shí)生活中是如何使用該系統(tǒng)的。

許多用戶都知道網(wǎng)站和應(yīng)用程序在努力吸引他們的注意力。在最近的可用性測(cè)試中，一個(gè)用戶在 AllRecipes 網(wǎng)站上看一個(gè)關(guān)于“如何做煎餅”的視頻，當(dāng)這個(gè)視頻播完后，網(wǎng)站會(huì)在自動(dòng)播放列表中加入相關(guān)視頻，我們的測(cè)試者沒(méi)有發(fā)現(xiàn)暫停該視頻的選項(xiàng)。在視頻上出現(xiàn)的唯一選項(xiàng)是重新播放，或開始觀看播放列表中下一個(gè)視頻。

配文：AllRecipe 網(wǎng)站設(shè)計(jì)了自動(dòng)播放視頻列表，旨在保持用戶對(duì)網(wǎng)站的關(guān)注

當(dāng)播放列表在排隊(duì)時(shí)，用戶評(píng)論到“這似乎讓我看電腦的時(shí)間比我實(shí)際需要的時(shí)間更長(zhǎng)了”。播放列表在每一個(gè)食譜視頻播放之前展示一個(gè)廣告——該網(wǎng)站有明確的經(jīng)濟(jì)激勵(lì)措施，可以將訪問(wèn)者的注意力集中在連續(xù)的視頻上。一些用戶對(duì)于無(wú)法控制花費(fèi)在設(shè)備上的時(shí)間感到無(wú)助。數(shù)字產(chǎn)品的設(shè)計(jì)越來(lái)越吸引人，經(jīng)常讓用戶上癮。對(duì)父母來(lái)說(shuō)，花太多時(shí)間在科技上的影響尤其令人擔(dān)憂。吸引人眼球的設(shè)計(jì)可能會(huì)讓年輕人養(yǎng)成習(xí)慣，當(dāng)設(shè)備被拿走時(shí)，他們可能會(huì)經(jīng)歷“戒斷”。有些用戶會(huì)調(diào)整自身的行為。其中一些調(diào)整是有意識(shí)并采取了行動(dòng)的，以限制在線時(shí)間。經(jīng)過(guò)深思熟慮的調(diào)整包括設(shè)置上網(wǎng)時(shí)間限制、卸載某些應(yīng)用程序或使用家長(zhǎng)控制。用戶還學(xué)會(huì)以微妙的方式保護(hù)他們的注意力。條幅盲目性（Banner blindness）是對(duì)大量信息做出反應(yīng)而產(chǎn)生適應(yīng)性反應(yīng)的一個(gè)例子。條幅盲目性指的是當(dāng)廣告放在右邊欄或頁(yè)面頂部時(shí)，用戶往往會(huì)忽略廣告。這點(diǎn)就很好的說(shuō)明了用戶是如何適應(yīng)大量信息的。用戶也已經(jīng)適應(yīng)了移動(dòng)設(shè)備上常見的通知轟炸：他們已經(jīng)學(xué)會(huì)忽略其中的許多通知。在最近的一次可用性測(cè)試中，我看到一位女士在她的 iPhone 上瀏覽新的博客。當(dāng)會(huì)話的第一個(gè)通知消失時(shí)，她向我道歉并問(wèn)道：“你還用這個(gè)錄音進(jìn)行研究嗎？”在我向她確保這不是個(gè)問(wèn)題之后，她繼續(xù)了這個(gè)測(cè)試任務(wù)。在整個(gè)會(huì)話期間，還有幾個(gè)通知從這個(gè)用戶的手機(jī)上發(fā)出，但沒(méi)有一個(gè)通知打斷她的思路。

注意力經(jīng)濟(jì)的未來(lái)

我們根據(jù)目前觀察到的未來(lái)預(yù)測(cè)，為注意力而設(shè)計(jì)的趨勢(shì)將會(huì)繼續(xù)演變。很多企業(yè)將會(huì)選擇創(chuàng)造更多抓住用戶注意力的廣告。自動(dòng)播放視頻和不可跳過(guò)的廣告幾乎普遍不受用戶歡迎，但它們將繼續(xù)作為設(shè)計(jì)特色。在搶奪用戶注意力的軍備競(jìng)賽中，廣告將會(huì)變得越來(lái)越身臨其境。主流的社交媒體平臺(tái)，如 Facebook、Instagram 和 Snap 都在測(cè)試增強(qiáng)現(xiàn)實(shí)廣告。

一些企業(yè)將會(huì)持續(xù)研究形成習(xí)慣的設(shè)計(jì)，來(lái)吸引用戶越來(lái)越多的關(guān)注他們。注意力經(jīng)濟(jì)擁有一個(gè)樂(lè)觀的未來(lái)也是可能的：最近的發(fā)展為更公平的注意力經(jīng)濟(jì)帶來(lái)了希望。越來(lái)越多的廣告采用了分成收入模式，這使得用戶可以用他們的注意力（觀看廣告）或金錢（保持他們的注意力）來(lái)支付。

配文：Spotify 允許用戶在其廣告贊助的服務(wù)上免費(fèi)聽音樂(lè)，如果用戶希望避免令人分心的廣告，他們可以直接為這項(xiàng)服務(wù)付費(fèi)

一些企業(yè)已經(jīng)回應(yīng)了用戶關(guān)于分散注意力設(shè)計(jì)的抱怨。Apple 最近更改了通知的設(shè)計(jì)，可以在 iPhone 上快速連續(xù)刪除多條通知，還引入了屏幕時(shí)間統(tǒng)計(jì)功能，允許用戶監(jiān)控他們對(duì)點(diǎn)子設(shè)備的使用情況。

結(jié)論

數(shù)字經(jīng)濟(jì)的某些事實(shí)可能不會(huì)改變。在可預(yù)見的未來(lái)，廣告將為一些免費(fèi)內(nèi)容提供資金，應(yīng)用程序?qū)?zhēng)奪新用戶的注意力，而人們的注意力仍然有限。但是，設(shè)計(jì)師在注意力經(jīng)濟(jì)中有一個(gè)選擇：他們可以平衡業(yè)務(wù)需求——— 比如對(duì)新用戶、廣告收入和利潤(rùn)的需求——同時(shí)尊重用戶的最大利益。

原文標(biāo)題：The Attention Economy

原創(chuàng)作者：Lexie Kane

原文鏈接：https://www.nngroup.com/articles/attention-economy/

翻譯作者：櫻桃小丸子

授權(quán)獲?。?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:inherit !important;">張聿彤

文章審核：王翎旭

文章編輯：王鴻飛

該譯文并非完整原文，內(nèi)容已做部分調(diào)整。如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處，歡迎不吝指出。如需轉(zhuǎn)載，請(qǐng)注明來(lái)自 三分設(shè)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：三分設(shè)   來(lái)源：站酷

“仰望星空，腳踏實(shí)地” ，做設(shè)計(jì)需要想象空間，也要有反思和總結(jié)的能力。

什么是設(shè)計(jì)體系？
設(shè)計(jì)體系是為了實(shí)現(xiàn)數(shù)字產(chǎn)品的目的而組織起來(lái)的一套相互關(guān)聯(lián)的模式和共享實(shí)踐。

讓我們來(lái)看兩個(gè)毫無(wú)關(guān)聯(lián)的產(chǎn)品的界面。

BI產(chǎn)品

團(tuán)隊(duì)協(xié)作產(chǎn)品

這兩個(gè)案例展現(xiàn)了如何選用不同的模式以實(shí)現(xiàn)不同的目的。
對(duì)于BI產(chǎn)品來(lái)說(shuō)，目的是讓數(shù)據(jù)分析更徹底，提高數(shù)據(jù)分析效率；更好的整合數(shù)據(jù)，為企業(yè)提供報(bào)表，做為企業(yè)決策的依據(jù)；更好的幫助企業(yè)管理者管理企業(yè)，提高企業(yè)實(shí)力。
對(duì)于teambition來(lái)說(shuō)，目的是輕松記錄要做的事，并與伙伴實(shí)時(shí)同步進(jìn)展。讓彼此清楚地了解項(xiàng)目整體情況及事項(xiàng)優(yōu)先級(jí)，從而完成目標(biāo)。


基于產(chǎn)品目的我們可以看出BI產(chǎn)品重效率；teambition 更看重清晰以及使用是否輕松愉悅。
而產(chǎn)品的目的決定了它所采用的設(shè)計(jì)模式也會(huì)不同，下面我們?cè)賹?duì)照界面看下基于目的在界面設(shè)計(jì)上有什么不同。

BI產(chǎn)品

團(tuán)隊(duì)協(xié)作產(chǎn)品

BI數(shù)據(jù)分析類產(chǎn)品的布局多是小部件組成，這樣做會(huì)方便用戶進(jìn)行多任務(wù)處理。界面設(shè)計(jì)也會(huì)相對(duì)比較密集，整個(gè)界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。

設(shè)計(jì)模式

設(shè)計(jì)模式的概念最早是建筑師克里斯托弗 ? 亞歷山大（Christopher Alexander）在他的開創(chuàng)性著作《建筑的永恒之道》和《建筑模式語(yǔ)言》中提出的。 

《建筑模式語(yǔ)言》里面包含了253個(gè)建筑設(shè)計(jì)模式，大的如城市和道路系統(tǒng)的布局，小的如家庭住宅中的照明和家具。 

類似地，我們?cè)趧?chuàng)建界面時(shí)，也在使用設(shè)計(jì)模式（組件）來(lái)解決常見的問(wèn)題：使用標(biāo)簽頁(yè)將內(nèi)容分成幾個(gè)部分，并表明哪一個(gè)選項(xiàng)對(duì)應(yīng)于當(dāng)前的頁(yè)面；使用下拉菜單展示可供用戶選擇相關(guān)選項(xiàng)。

標(biāo)簽頁(yè)

下拉組件

設(shè)計(jì)模式分為2類：

第一類：功能性模式（組件庫(kù)）表現(xiàn)為界面上的具體模塊，如按鈕、標(biāo)題、表單元素、菜單等。
第二類：感知性模式（視覺規(guī)范）則是描述性的樣式，以可視化方式表達(dá)和呈現(xiàn)產(chǎn)品的個(gè)性，如配色、排版、圖標(biāo)、形狀、動(dòng)畫等。

功能性模式有點(diǎn)像名詞和動(dòng)詞，它們是界面中那些具體的、可操作的部分；而感知性模式則類似于形容詞，它們是描述性的。

例如，按鈕是具有明確功能的模塊，它讓用戶能夠提交某項(xiàng)操作。但按鈕上的文字的樣式，以及按鈕本身的形狀、背景色、填充、交互狀態(tài)和過(guò)渡動(dòng)畫不是模塊，而是樣式，這些樣式描述了按鈕是什么樣的。

共享語(yǔ)言

唐·諾曼在《設(shè)計(jì)心理學(xué)》一書中說(shuō)過(guò)：系統(tǒng)映像（界面）和用戶模型（用戶通過(guò)與界面交互而形成的感知）之間存在著一道鴻溝。

在設(shè)計(jì)團(tuán)隊(duì)內(nèi)部也是如此，比如“范圍輸入框”組件，你能想象它是一個(gè)什么樣的組件嗎？相信不同的人肯定有不同的心智模型，因?yàn)檫@個(gè)組件不是常用組件，在ant design、arco.design組件庫(kù)中也找不到這個(gè)名稱組件，因?yàn)樗荰Design的產(chǎn)物。

而每個(gè)公司都會(huì)根據(jù)自己的產(chǎn)品特性創(chuàng)造一些非常規(guī)類組件名稱，這個(gè)時(shí)候就需要在所有參與產(chǎn)品創(chuàng)建的人之間共享。只有產(chǎn)品內(nèi)部設(shè)計(jì)語(yǔ)言一致，才能去培養(yǎng)用戶的心智模型，這樣才能去除系統(tǒng)映像與用戶模型之間的這道鴻溝。

例如上面這個(gè)組件，每個(gè)人都需要知道這個(gè)組件叫“范圍輸入框”，而不是“輸入框”或者“數(shù)字輸入框”。

如何衡量設(shè)計(jì)體系的有效性

例如，teambition的目的是“輕松記錄要做的事，并與伙伴實(shí)時(shí)同步進(jìn)展”。

于是，我們可以去看產(chǎn)品，設(shè)計(jì)體系在實(shí)現(xiàn)這一目標(biāo)的過(guò)程中發(fā)揮了多大作用，以及這些設(shè)計(jì)實(shí)踐的效果如何。如果視覺、交互混亂，導(dǎo)致無(wú)法實(shí)現(xiàn)上述目標(biāo)，那么可以認(rèn)為這套設(shè)計(jì)體系是無(wú)效的。

上面介紹了設(shè)計(jì)體系包含的內(nèi)容，下面我們針對(duì)這些內(nèi)容進(jìn)行具體的介紹：

設(shè)計(jì)原則

有效設(shè)計(jì)原則特征

做B端的小伙伴應(yīng)該都知道ant design，但不知道有多少小伙伴有認(rèn)真的看過(guò)ant design的設(shè)計(jì)原則。 可能有小伙伴會(huì)問(wèn)這個(gè)設(shè)計(jì)原則有什么用，我最開始也覺得沒(méi)什么用，后來(lái)在參與設(shè)計(jì)體系優(yōu)化過(guò)程中發(fā)現(xiàn)這個(gè)原則就是金字塔尖。 

例如：用戶沒(méi)有填寫完表單，那么表單的提交按鈕能不能點(diǎn)？是置灰好，還是按了以后再給彈窗提示。 

例如：可編輯表格，是放一個(gè)筆狀icon來(lái)提示可編輯，還是采用鼠標(biāo)觸發(fā)時(shí)出現(xiàn)輸入框以及指針變?yōu)槲谋緺顟B(tài)。

日常工作中總會(huì)在這些細(xì)節(jié)問(wèn)題上爭(zhēng)論很久，美其名曰“打磨設(shè)計(jì)”，其實(shí)很多時(shí)候就是設(shè)計(jì)原則在團(tuán)隊(duì)內(nèi)部沒(méi)有達(dá)成共識(shí)。

為了避免出現(xiàn)上述問(wèn)題，我們要建立一套基本的價(jià)值觀和原則。在一些公司里，尤其是在處于初創(chuàng)期的公司里，嘗試建立一套共同的準(zhǔn)則是很難的。設(shè)計(jì)原則是無(wú)法量化的，因此定義這些原則可能需要多次迭代。

對(duì)于原則到底是什么，可能存在一些爭(zhēng)議。有些公司的設(shè)計(jì)原則偏重于品牌，有的偏重于團(tuán)隊(duì)文化，有的則偏重于設(shè)計(jì)流程。 

例如，Pinterest的設(shè)計(jì)原則便偏重于品牌。

Atlassian公司沒(méi)有分團(tuán)隊(duì)或者產(chǎn)品單獨(dú)制定原則。

他們的目標(biāo)是在客戶可觸及的每一點(diǎn)上都體現(xiàn)一些核心的價(jià)值觀。比如“大膽”“樂(lè)觀”“實(shí)用但不乏味”作為價(jià)值觀的體現(xiàn)。
不過(guò)，盡管各處的價(jià)值觀是相同的，但體現(xiàn)程度并不一樣。

例如，官網(wǎng)就會(huì)較多的提現(xiàn)“”大膽”，但產(chǎn)品里面就不會(huì)，正如Atlassian公司的設(shè)計(jì)經(jīng)理Kevin Coffey所說(shuō)的，“沒(méi)有人想要一個(gè)‘大膽的’服務(wù)支持頁(yè)面”。

Atlassian 官網(wǎng)截圖 https://www.atlassian.com/zh

Atlassian 設(shè)計(jì)體系 https://atlassian.design/

設(shè)計(jì)原則是真實(shí)而貼切的

我們以TED為例。TED的一條設(shè)計(jì)原則是“追求永恒，而不是追求潮流”。永恒這個(gè)詞不光體現(xiàn)在TED的界面上，還體現(xiàn)在TED的整個(gè)品牌和設(shè)計(jì)方法上。 

這意味著他們不會(huì)為了追逐潮流而采用一項(xiàng)新的技術(shù)或引入一個(gè)新的設(shè)計(jì)元素。

設(shè)計(jì)原則是實(shí)用的、可操作的

例如：定義了原則為“簡(jiǎn)化”（讓產(chǎn)品盡可能簡(jiǎn)單，簡(jiǎn)單到幾乎感覺不到它的存在）。這種原則就是不實(shí)用也不可操作的。 

怎么能讓團(tuán)隊(duì)所有人都能理解？ 

消除無(wú)用的部分。每一個(gè)設(shè)計(jì)元素，無(wú)論大小，都必須有一個(gè)目的，并遵循它所屬元素的目的。如果你無(wú)法解釋一個(gè)元素為什么要在那里，那么它便很可能不應(yīng)該在那里。這樣的定義就清晰很多。

再例如：定義了設(shè)計(jì)原則為“有用”，什么是“有用”？ 

從需求開始。如果你不知道用戶需要什么， 就無(wú)法做出正確的事情。去做調(diào)研，去分析數(shù)據(jù)，去與用戶交流，而不是做假設(shè)。

設(shè)計(jì)原則能幫我們確定優(yōu)先級(jí) 

好的設(shè)計(jì)原則也能幫我們確定優(yōu)先級(jí)和平衡點(diǎn)。 

Salesforce公司的Lightning設(shè)計(jì)體系的原則是“清晰、高效、一致、美觀”。 

這些原則的優(yōu)先級(jí)必須遵從以上順序。“美觀”不應(yīng)該高于“高效”和“一致”，而“清晰”應(yīng)該始終放在第一位。按照這種方式對(duì)原則進(jìn)行排序，可以讓團(tuán)隊(duì)在做設(shè)計(jì)決策時(shí)明確哪些東西應(yīng)該優(yōu)先考慮。

設(shè)計(jì)原則是能產(chǎn)生共鳴、容易讓人記住

Atlassian和Airbnb的團(tuán)隊(duì)成員被問(wèn)及他們的設(shè)計(jì)原則時(shí)，他們都能脫口而出，沒(méi)有片刻猶豫，沒(méi)有人表現(xiàn)出遲疑，沒(méi)有人想要去翻看品牌手冊(cè)里的原則內(nèi)容。他們?yōu)槭裁茨馨言瓌t記得這么牢固呢？因?yàn)樗麄兊脑瓌t足夠簡(jiǎn)單、實(shí)用、易于讓人產(chǎn)生共鳴。

Airbnb公司的四條設(shè)計(jì)原則（“統(tǒng)一”“通用”“風(fēng)格化的”“對(duì)話式的”）便深深地扎根于其設(shè)計(jì)過(guò)程之中。

每當(dāng)設(shè)計(jì)一個(gè)新的組件時(shí)，我們都會(huì)確保它完全滿足四條原則。如果我們沒(méi)有這一套原則，便很難就各種問(wèn)題達(dá)成一致意見。----Airbnb 首席交互設(shè)計(jì)師

怎么定義設(shè)計(jì)原則

每個(gè)團(tuán)隊(duì)建立其設(shè)計(jì)原則的方法都不盡相同：有的會(huì)召開幾輪研討會(huì)，有的可能會(huì)征求CEO或創(chuàng)意總監(jiān)的意見。不過(guò)，無(wú)論采取哪種方式，都離不開下面幾點(diǎn)：

從目的開始

TED網(wǎng)站的主要目的可以用一句話來(lái)表述：“盡可能廣泛地傳播演講?！币虼耍琓ED網(wǎng)站的精神和價(jià)值觀便是觸及盡可能多的人群，降低使用門檻，讓產(chǎn)品具有很高的兼容性和可訪問(wèn)性。這意味著優(yōu)化性能和提升可訪問(wèn)性比添加華而不實(shí)的功能更重要，清晰的文案比大膽的設(shè)計(jì)更重要。

尋找共識(shí)

如果你仍處在定義設(shè)計(jì)原則的階段，那么一個(gè)有效的方法便是讓團(tuán)隊(duì)的一些人或所有人（取決于團(tuán)隊(duì)規(guī)模）各自回答關(guān)于設(shè)計(jì)原則的問(wèn)題。例如，在他們眼里，什么樣的設(shè)計(jì)對(duì)你們產(chǎn)品來(lái)說(shuō)是好的設(shè)計(jì)？他們將如何用既實(shí)用又易于理解的五句話向團(tuán)隊(duì)的新成員解釋設(shè)計(jì)原則？

面向正確的受眾

如果搞不清楚設(shè)計(jì)原則是為誰(shuí)寫的，就一定會(huì)寫出含糊不清的原則。有的小伙伴說(shuō)我們領(lǐng)導(dǎo)就喜歡“美觀”，那我們是不是把“美觀”放在第一位？一定要搞清楚為誰(shuí)而寫。原則到模式

原則到模式

作為一個(gè)設(shè)計(jì)師，定義設(shè)計(jì)原則可能對(duì)你來(lái)說(shuō)也許并不難， 但怎么把原則、品牌價(jià)值、組件相結(jié)合，怎么體現(xiàn)在設(shè)計(jì)模型中，這個(gè)我覺得是個(gè)挑戰(zhàn)。

對(duì)于 TED 來(lái)說(shuō)，信息的清晰比美觀更重要。試圖將每個(gè)演講都 提煉成一個(gè)短句可能很難，所以有時(shí)候標(biāo)題可能很長(zhǎng)。對(duì)標(biāo)題 進(jìn)行截?cái)嗍呛苋菀椎模珜?duì)他們來(lái)說(shuō)，演講信息的優(yōu)先級(jí)是最 高的。

因此，他們沒(méi)有選擇相對(duì)容易的標(biāo)題截?cái)喾桨?，而是確保他們的設(shè)計(jì)模式可以容納長(zhǎng)的標(biāo)題。

功能性模式（組件）

功能性模式是界面中有形的構(gòu)件（表單）。它們的目的是讓用戶能夠完成某種行為（填寫表單），或者激勵(lì)用戶完成某種行為。

功能性模式可以很簡(jiǎn)單（標(biāo)簽?字、輸?框、按鈕 ），也可以組合成更復(fù)雜的模式（搜索組件）。

標(biāo)簽?字、輸?框、和按鈕

搜索組件由標(biāo)簽?字、輸?框和按鈕組成

模式在變，行為不變

隨著產(chǎn)品的發(fā)展，模式也在不斷發(fā)展。包括風(fēng)格，甚至功能和交互方式，都有變化。然而，它們的目的基本保持不變。

我們用頂部導(dǎo)航舉例：

頂部導(dǎo)航是由logo、搜索定位框、文字下拉框、圖標(biāo)功能按鈕、通知按鈕構(gòu)成。導(dǎo)航條里的每一個(gè)模塊都有自身的目的：搜索定位框告訴我們?cè)趺纯焖僬业较胍臇|西，導(dǎo)航帶領(lǐng)我們?yōu)g覽全局，指引我們到想去的地方，而后面的的圖標(biāo)按鈕讓我快速觸達(dá)。

總的來(lái)看，這些模塊都有一個(gè)共同的目的：引導(dǎo)用戶快速瀏覽使用。隨著產(chǎn)品的發(fā)展，模式也在不斷發(fā)展。

例如，隨著產(chǎn)品功能越來(lái)越多，可能會(huì)在導(dǎo)航上面新增設(shè)置功能，讓用戶自己去排布常用功能。又如，我們可能會(huì)對(duì)導(dǎo)航進(jìn)行重新布局，把導(dǎo)航按模塊分類，采用標(biāo)簽按頁(yè)展示。把模塊下面更多功能放到子頁(yè)面左側(cè)。雖然我們不斷的對(duì)模式進(jìn)行迭代，希望它更好的實(shí)現(xiàn)各自的目的或者說(shuō)更有效地激勵(lì)用戶使用。

在設(shè)計(jì)開始階段就闡明模式的目的，能避免在產(chǎn)品發(fā)展過(guò)程中做重復(fù)性的工作。

目的決定了其他的一切：模式的結(jié)構(gòu)、內(nèi)容及呈現(xiàn)。了解模式的目的，可以幫助我們?cè)O(shè)計(jì)和構(gòu)建更加穩(wěn)健的模塊。

如果說(shuō)功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。

感知性模式（視覺規(guī)范）

設(shè)想我們每個(gè)人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個(gè)衣柜。

不過(guò)，雖然都有這些家具，但每套房子給人的感覺截然不同：可能是因?yàn)榧揖叩臉邮健⒉牧?、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂(lè)不 同。

上述這些屬性便稱作感知性模式。正是因?yàn)樗鼈?，可能你的房子就像是一個(gè)地中海風(fēng)格的小窩，而我的房子就像是一個(gè)倉(cāng)庫(kù)。

而數(shù)字產(chǎn)品感知性模式的例子包括語(yǔ)氣、排版、配色、布局、插圖與圖標(biāo)樣式、形狀與紋理、間距、意象、交互或動(dòng)畫，以及這些要素在界面中的組合和使用的具體方式。

有時(shí)，人們將這樣的特性視為產(chǎn)品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產(chǎn)品的發(fā)展而發(fā)展。

只有這樣，感知性模式才會(huì)成為讓產(chǎn)品脫穎而出的強(qiáng)大力量。

感知性模式的作用

同一領(lǐng)域的產(chǎn)品，哪怕具有相似的模塊，它們給人的感覺也是不一樣的。感知性模式通過(guò)界面?zhèn)鬟f品牌，并讓品牌被人記住。

看下面的圖片，你能認(rèn)出它們是什么產(chǎn)品嗎？

這兩張圖里面并沒(méi)有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標(biāo)。然而那些視覺上的線索極具辨識(shí)度，所以你仍然很有可能看出它們分別屬于什么產(chǎn)品（即釘釘和飛書）。

這些視覺元素通過(guò)有意識(shí)地反復(fù)使用，便形成了模式，這就是為什么我們可以在沒(méi)有上下文的情況下認(rèn)出它們。

感知性模式讓系統(tǒng)更為連貫

在模塊化的系統(tǒng)中，想要做到視覺上的連貫統(tǒng)一可能是一件很棘手的事情。模塊是由不同的人根據(jù)不同的目的創(chuàng)建的。而由于感知性模式是滲透到系統(tǒng)中各個(gè)部分的，因此它們可以將系統(tǒng)的不同部分連接起來(lái)。如果這種連接是有效的，那么用戶就會(huì)感受到模塊之間的統(tǒng)一性。

例如：飛書和騰訊的相同功能的組件感知模式是不一樣的，所以兩個(gè)公司設(shè)計(jì)體系不能混用。

探索感知性模式

如果說(shuō)功能性模塊反映的是用戶需要且想要的內(nèi)容，那么感知性模式關(guān)注的則是他們直觀的感受或行為。

在《網(wǎng)站情感化設(shè)計(jì)》一書中，作者提出了一 個(gè)簡(jiǎn)單的方法，通過(guò)創(chuàng)建“設(shè)計(jì)角色”捕捉產(chǎn)品關(guān)鍵的個(gè)性 品質(zhì)。以下是一些有助于探索感知性模式的一些技巧。

情緒板

情緒板是探索不同視覺主題的絕佳工具?？梢允褂脭?shù)字化的方式創(chuàng)建情緒版（Pinterest或花瓣都是一種用于創(chuàng)建數(shù)字化情緒板的常用工具）。

如果你目前做的產(chǎn)品是需要體現(xiàn)：科技、質(zhì)感、智能，那上圖應(yīng)該可以滿足這些條件，你可以通過(guò)這張圖與領(lǐng)導(dǎo)進(jìn)行溝通達(dá)成一致，然后從中提煉出一些顏色、元素、材質(zhì)，這樣大方向就不會(huì)有太大問(wèn)題，只需在細(xì)節(jié)上進(jìn)行打磨。

樣式疊片

定義好了大致的方向之后，便可以使用樣式疊片來(lái)更加細(xì)致地探究多種可能性。樣式疊片的概念由Samantha Warren提出，他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設(shè)計(jì)交付物?！?

和情緒板一樣，樣式疊片可以為用戶和產(chǎn)品團(tuán)隊(duì)提供有價(jià)值的討論點(diǎn)，并呈現(xiàn)他們對(duì)特定設(shè)計(jì)方向的初始反應(yīng)。

arco.design 首頁(yè)這張圖可以理解為就是樣式疊片，把不同的組件樣式疊片放在一起比較，有助于準(zhǔn)確地找到設(shè)計(jì)方向。

迭代與改進(jìn)

當(dāng)功能模式和感知模式建立完成后，我們將它們集成到產(chǎn)品的過(guò)程，它們還將進(jìn)行演變。

因?yàn)樵谡鎸?shí)的界面中，模塊、交互、樣式之間相互影響下會(huì)產(chǎn)生新的問(wèn)題，這都是很正常的，是典型的迭代過(guò)程，這個(gè)過(guò)程會(huì)一直持續(xù)，直到設(shè)計(jì)語(yǔ)言最終形成。

像ant design、arco.design應(yīng)該都經(jīng)歷過(guò)這個(gè)過(guò)程，只是我們不知道而已，要不然也不需要花費(fèi)幾年的時(shí)間打磨后才發(fā)布出來(lái)。

平衡品牌性與一致性：

過(guò)分關(guān)注一致性也會(huì)扼殺品牌性。矛盾在于，讓設(shè)計(jì)達(dá)到完美的一致性無(wú)法確保它依然具有很強(qiáng)的品牌性。有時(shí)，這樣做反而會(huì)削弱品牌性——在一致性和統(tǒng)一性之間存在著細(xì)微的差別。

《英國(guó)公開大學(xué)》的創(chuàng)意總監(jiān)曾說(shuō)過(guò)：“當(dāng)你專注于產(chǎn)品一致性的時(shí)候，打造產(chǎn)品質(zhì)感的一些重要的細(xì)微之處就有可能會(huì)丟失。

發(fā)展感知性模式需要為設(shè)計(jì)師賦予打破常規(guī)的權(quán)力，鼓勵(lì)設(shè)計(jì)師積極地探索更多的可能性。好的設(shè)計(jì)體系能在品牌的一致性和創(chuàng)造性表達(dá)之間取得平衡。

小規(guī)模試驗(yàn)：

后期如果發(fā)現(xiàn)樣式無(wú)法滿足，我們?nèi)绾螌⑿碌臉邮揭朐O(shè)計(jì)體系呢？

可以先進(jìn)行一些小規(guī)模的試驗(yàn)是一種相當(dāng)有效的做法。如果某些元素的效果很好，我們就逐漸將它們集成到其他界面中去。

例如，在學(xué)習(xí)者完成一個(gè)步驟時(shí)，純功能性的切換按鈕缺乏慶祝和成就的感覺。于是，我們用帶有圓形樣式、彈跳 動(dòng)畫以及勾號(hào)圖標(biāo)的按鈕取代了先前的按鈕。

雖然新的按鈕樣式受到了學(xué)習(xí)者們的好評(píng)，但它與設(shè)計(jì)體系的其他元素格格不入。后來(lái)，我們開始在網(wǎng)站的其他地方應(yīng)用圓形圖案、彈跳動(dòng)畫和勾號(hào)圖標(biāo)。如果不這樣做，那么整個(gè)設(shè)計(jì) 體系給人的感覺就是割裂的。

共享設(shè)計(jì)語(yǔ)言

數(shù)字產(chǎn)品都是由團(tuán)隊(duì)打造的。團(tuán)隊(duì)里的每個(gè)人都有各自的具體目標(biāo)，都有各自的截止日期。這就意味著難免會(huì)出現(xiàn)草率加入的模式、重復(fù)或錯(cuò)誤的模塊。

我們能確保一個(gè)產(chǎn)品即便有多人協(xié)作，卻仍能連貫、統(tǒng)一嗎？ 只要我們團(tuán)隊(duì)對(duì)自己的設(shè)計(jì)體系及其運(yùn)轉(zhuǎn)方式有共同的理解，我們就能做到這一點(diǎn)。

這意味著我們遵循相同的指導(dǎo)原則，我們對(duì)品牌愿景的理解是一致的，我們?cè)谠O(shè)計(jì)和前端架構(gòu)方面有共享的方法，我們知道什么樣的模式是最有效的，也知道它們的工作原理。換句話說(shuō)，創(chuàng)建統(tǒng)一的設(shè)計(jì)體系需要共享設(shè)計(jì)語(yǔ)言。

許多偉大的建筑物（如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮）并不是由一位主建筑師在繪圖板上費(fèi)力地創(chuàng)造出來(lái)的，而是由一群人構(gòu)建出來(lái)的，這群人對(duì)能將這些建筑物變?yōu)楝F(xiàn)實(shí)的設(shè)計(jì)模式有著深刻的共識(shí)。

“幾組人可以通過(guò)遵循一個(gè)共同的模式語(yǔ)言，當(dāng)場(chǎng)構(gòu)思出他 們的大型公共建筑，就好像他們共有一個(gè)心靈?！?

——克里斯托弗 ? 亞歷山大，《建筑的永恒之道》

我們可以用類似的想法構(gòu)建數(shù)字產(chǎn)品。設(shè)計(jì)語(yǔ)言可以讓人們創(chuàng)建出具有整體感的產(chǎn)品，哪怕不同的人負(fù)責(zé)不同的部分也是如此。

為模式命名

如果一個(gè)界面上的元素沒(méi)有恰當(dāng)?shù)拿Q、團(tuán)隊(duì)里人盡皆知的名。那么該元素就沒(méi)有在你的設(shè)計(jì)體系中成為有效的單元。一旦你給一個(gè)物件命了名，你就塑造了它的未來(lái)。

例如，如果你給的是一個(gè)表現(xiàn)型的名稱，那么它將來(lái)就會(huì)受到樣式的限制：“藍(lán)色按鈕”只能是藍(lán)色。

例如，如果你給的是一個(gè)狀態(tài)屬性的名稱：“幽靈按鈕”，它的特點(diǎn)是：按鈕形狀的透明按鈕，但有細(xì)實(shí)線的邊框，常用在有色背景上。

將團(tuán)隊(duì)融入設(shè)計(jì)語(yǔ)言

僅僅完成命名還不足以建立共享的設(shè)計(jì)語(yǔ)言。整個(gè)團(tuán)隊(duì)都應(yīng)該 沉浸到設(shè)計(jì)語(yǔ)言中去，讓它無(wú)所不在。

讓設(shè)計(jì)模式變得可見：

如果有條件，可以在墻上開辟一塊專門展示設(shè)計(jì)體系的空間，將它稱作“模 式墻”

讓你的設(shè)計(jì)體系更加開放，人們會(huì)感覺你歡迎他們的加入，歡迎他們提出問(wèn)題甚至做出貢獻(xiàn)。

引用事物的名稱：

所有語(yǔ)言的共同特點(diǎn)是，只有不停地使用才能讓它保持活力。

它需要成為日常對(duì)話的一部分：

這就是為什么需要有意識(shí)地使用約定好的名稱去引用這些模式很重要——無(wú)論這個(gè)名稱聽起來(lái)有多奇怪。將設(shè)計(jì)體系作為入職培訓(xùn)的一部分將設(shè)計(jì)體系的內(nèi)容作為入職培訓(xùn)的一部分，新員工了解設(shè)計(jì)體系就會(huì)更加容易。當(dāng)新員工入職時(shí)，他們將了解到設(shè)計(jì)指南是如何創(chuàng)建出來(lái)的，這樣他們就可以理解為什么以及如何做出決策。在 《英國(guó)公開大學(xué)》 內(nèi)部，他們創(chuàng)建了一個(gè)入門性質(zhì)的線上課程，其中有一章專門對(duì)模式庫(kù)進(jìn)行了介紹，并包含了 一些小測(cè)驗(yàn)和小課程，這樣可以幫助新員工更好的理解設(shè)計(jì)體系。

定期組織設(shè)計(jì)體系會(huì)議：

每個(gè)人都討厭開會(huì)。但是，如果你希望每個(gè)人都跟得上設(shè)計(jì)體系的發(fā)展，那么組織召開設(shè)計(jì)體系的會(huì)議就是必要的。這是所有設(shè)計(jì)師和開發(fā)人員共同專注于設(shè)計(jì)體系的時(shí)間。一開始，可 以每周舉行一次，當(dāng)團(tuán)隊(duì)找到節(jié)奏之后，可以每?jī)芍芘e行一 次。團(tuán)隊(duì)可以利用例會(huì)時(shí)間就產(chǎn)品的總體模式（如圖標(biāo)、排版）得出一致意見。同時(shí)，這也是分享新模塊并討論其目的、 用途及可能遇到的問(wèn)題的好機(jī)會(huì)。

設(shè)計(jì)體系不是一夜之間構(gòu)建出來(lái)的，而是通過(guò)日常的實(shí)踐逐漸形成的。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：夜鷹YEAH   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

前言

對(duì)于B端來(lái)說(shuō)，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規(guī)范；因?yàn)橹捌髽I(yè)要求并不高，但是隨著市場(chǎng)和環(huán)境的發(fā)展，企業(yè)對(duì)B端越來(lái)越重視，這些模版太類同，顯然就太爛大街了。隨后字節(jié)推出Arco Design、騰訊推出企業(yè)級(jí)設(shè)計(jì)體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產(chǎn)品的模版和規(guī)范，給了我們?cè)S多借鑒，能讓我們快速作出一個(gè)不出錯(cuò)的方案。不過(guò)企業(yè)、市場(chǎng)的要求顯然不止于此，我們的設(shè)計(jì)追求也不止于此。那么我們?nèi)绾尾拍軘[脫套模版，提高界面的精致度，提升界面的交互體驗(yàn)?zāi)兀?/span>

一. 設(shè)計(jì)目標(biāo)

為啥要搭建設(shè)計(jì)系統(tǒng)？設(shè)計(jì)系統(tǒng)對(duì)我們開發(fā)團(tuán)隊(duì)中誰(shuí)有指導(dǎo)作用？

◆ 設(shè)計(jì)系統(tǒng)可以保證我們產(chǎn)品風(fēng)格的統(tǒng)一性，降低用戶對(duì)新產(chǎn)品適應(yīng)時(shí)間和學(xué)習(xí)成本；對(duì)UI設(shè)計(jì)輸出效率有很大的提高，在團(tuán)隊(duì)協(xié)同中可以大大的減少無(wú)效溝通，節(jié)約時(shí)間成本

◆ 在開發(fā)團(tuán)隊(duì)中，設(shè)計(jì)系統(tǒng)對(duì)UI、交互、前端、測(cè)試等崗位的工作都有一定的指導(dǎo)作用

二. 設(shè)計(jì)原則

設(shè)計(jì)原則是傳統(tǒng)智慧的沉淀與未來(lái)趨勢(shì)的結(jié)合體，能夠幫助我們更好的進(jìn)行設(shè)計(jì)活動(dòng)時(shí)代在進(jìn)步，設(shè)計(jì)原則也必然需要不斷的更新以適應(yīng)發(fā)展新的設(shè)計(jì)原則要求界面更友好，操作更加人性化。

這里我歸納了8條原則僅供大家借鑒學(xué)習(xí):

◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務(wù)、產(chǎn)品是否正常運(yùn)行以及是否完成工作

◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步

◆ 統(tǒng)一性：頁(yè)面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體

◆ 親密性：信息的關(guān)聯(lián)性強(qiáng)，距離就要相應(yīng)的縮短，讓他們看起來(lái)是一個(gè)視覺單元；反之，則距離要加大，要讓用戶對(duì)信息的區(qū)域劃分一目了然

◆ 對(duì)齊性：在界面中，將元素進(jìn)行對(duì)齊，符合用戶的認(rèn)知，引導(dǎo)視覺流向，讓用戶更加流暢的閱讀信息

◆ 對(duì)比性：對(duì)比是增加視覺效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識(shí)別關(guān)鍵信息。

◆ 重復(fù)性：相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識(shí)別出這些元素之間的關(guān)聯(lián)性。

◆ 穩(wěn)定性：沒(méi)有任何東西比產(chǎn)品的穩(wěn)定重要，down機(jī)再好的產(chǎn)品也是徒勞。會(huì)影響到系統(tǒng)穩(wěn)定的事情不能做

三. 框架布局

響應(yīng)式布局，能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。一般采用柵格系統(tǒng)布局，常用柵格一般是16列或24列。

◆ 柵格：是對(duì)界面當(dāng)中元素橫向排布的一種模式，主要用于大型區(qū)塊間距的排列，不適用于圖標(biāo)與文字間隔的小型元素。

◆ 模度：為界面布局的一致性和韻律感，統(tǒng)一設(shè)計(jì)到開發(fā)的布局語(yǔ)言，減少還原損耗，我們網(wǎng)格基數(shù)設(shè)為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920

◆ 布局：常用左右布局或上下布局

左右布局以1920頁(yè)面布局為案例：通常B端產(chǎn)品左側(cè)會(huì)有一個(gè)導(dǎo)航菜單，假設(shè)240px,右側(cè)核心工作區(qū)域總寬1632px, 右偏移240px ,列數(shù)16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導(dǎo)航和邊距固定不變。

上下布局以1920頁(yè)面布局為案例：通常左右會(huì)有一個(gè)留白區(qū)域，假設(shè)144px,中間核心區(qū)域總寬1632px, 右偏移144px ,列數(shù)16列，列寬86px, 間隙16px。

四. 設(shè)計(jì)風(fēng)格

設(shè)計(jì)風(fēng)格說(shuō)白了就是用戶最直觀的感受，“商務(wù)、時(shí)尚、簡(jiǎn)約、科技感、沉穩(wěn)、年輕、高端...”?

決定設(shè)計(jì)風(fēng)格的因素有這些：

1. 顏色

色彩是UI設(shè)計(jì)的基石，人腦對(duì)于色彩的記憶度要高于形態(tài)；除了美學(xué)之外，色彩還是是情感和聯(lián)想的創(chuàng)造者。通過(guò)對(duì)自然的感知和行為，我們通常對(duì)色彩定義品牌色板、功能色板、中性色板，以及衍生色。 

◆ 品牌色：是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一（例如：我們熟悉的政府藍(lán)/黨政紅/淘寶橙，他們都能直觀或間接的傳達(dá)產(chǎn)品特征屬性）

◆ 功能色：遵守用戶對(duì)色彩的基本認(rèn)知，保持一致性，不過(guò)多的自定義干擾用戶的認(rèn)知體驗(yàn)，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態(tài)，比如正常、成功、失敗、警告、鏈接等

◆ 中性色：主要應(yīng)用在界面的文字部分、背景、邊框、分割線等場(chǎng)景，根據(jù)使用場(chǎng)景，通常將中性色被定義為 3 類：文字、線條、背景

◆ 衍生色：B端產(chǎn)品中顏色的應(yīng)用場(chǎng)景可能很廣泛，要考慮它的延展性，按照一定規(guī)則定義完畢主色，便可以自動(dòng)獲得一系列完整的衍生色

2. 文字

設(shè)定統(tǒng)一的字體規(guī)范，無(wú)襯線黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達(dá)，在互聯(lián)網(wǎng)時(shí)代后期在界面設(shè)計(jì)中字體樣式還是會(huì)以無(wú)襯線體為主。

◆ 字體家族：根據(jù)系統(tǒng)區(qū)分Mac or Windows，如果用戶使用的是Mac系統(tǒng)可以優(yōu)先使用Mac默認(rèn)字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購(gòu)買版權(quán)字體的可優(yōu)先考慮），例：

◆ 字號(hào)：為了提升用戶的閱讀體驗(yàn)，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結(jié)合WCAG 2.0標(biāo)準(zhǔn)），將 PC/Web 端主字體從以前的12px改為 14px。

◆ 行高：為上下文之間提供了呼吸的空間，規(guī)范的行高，可以使得界面層次清晰、重點(diǎn)突出

◆ 字體顏色：WCAG 2.0 中將顏色對(duì)比等級(jí)分為 3 種，A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的視覺壓力越大。字體顏色數(shù)量不建議太多，根據(jù)文字主次關(guān)系定義3-4個(gè)為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）

◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）

3. 圖型

圖形中有圖片、圖標(biāo)、圖表，都對(duì)整體風(fēng)格有一定影響，設(shè)定統(tǒng)一的圖形使用規(guī)范，可以使視覺效果更加和諧

五. 交互

交互，即交流互動(dòng)，也就是說(shuō)我們自己通過(guò)我們的五覺：視覺、聽覺、觸覺、嗅覺、味覺來(lái)感受其他事物并和他們之間產(chǎn)生信息溝通的過(guò)程。在互聯(lián)網(wǎng)中交互對(duì)象個(gè)體主要是人和機(jī)器，所謂人機(jī)互動(dòng)，相互配合，共同達(dá)成某種目的。

◆ 交互方式：保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識(shí)，例：wab端頁(yè)面鼠標(biāo)交互操作一般有下拉、上滑、按壓、懸停，移動(dòng)端一般左右上下滑動(dòng)、下拉、上拉、雙指縮放...

◆ 交互狀態(tài)：按鈕狀態(tài)變化，頁(yè)面狀態(tài)變化，組件狀態(tài)變化...交互內(nèi)容確實(shí)太大了，我個(gè)人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學(xué)習(xí)

◆ 引導(dǎo)：引導(dǎo)一般常見5 種：新手引導(dǎo)）、步驟引導(dǎo)、幫助/操作引導(dǎo)、新功能引導(dǎo)、空白頁(yè)引導(dǎo)

六. 組件

什么是組件？組件是抽象概念,對(duì)面向過(guò)程而言是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝。對(duì)面向?qū)ο蠖允且恍┓夏撤N規(guī)范的類組合在一起就構(gòu)成了組件。它可以提供某些特定的功能。組件出現(xiàn)的原因軟件工程中重復(fù)、反復(fù)出現(xiàn)、普遍的、有相似的問(wèn)題的出現(xiàn),導(dǎo)致開發(fā)過(guò)程中有大量的代碼需要不斷的重新設(shè)計(jì),開發(fā)周期延長(zhǎng),開發(fā)復(fù)雜度增加。需要岀現(xiàn)一種模型通過(guò)剝離掉各個(gè)問(wèn)題的特性,抽取各個(gè)問(wèn)題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現(xiàn)就是為了解決這些實(shí)際問(wèn)題的。

在前端眼里，組件通常是指頁(yè)面上的視圖單元，可以說(shuō)，UI組件是組件的子集。組件庫(kù)大致可以分為這幾大類：

◆ 導(dǎo)航：固釘、面包屑、下拉菜單、下拉導(dǎo)航、電梯、菜單、分頁(yè)器、步驟條

◆ 數(shù)據(jù)錄入：自動(dòng)完成、級(jí)聯(lián)選擇、多選框、日期選擇框、表單、輸入框、數(shù)字輸入框、提及、步進(jìn)器、評(píng)分、下拉選擇、滑動(dòng)條、穿梭框、文件上傳

◆ 數(shù)據(jù)展示: 頭像、標(biāo)題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關(guān)鍵詞、時(shí)間軸、走馬燈、空狀態(tài)、徽標(biāo)數(shù)、樹、標(biāo)簽、標(biāo)簽頁(yè)、圖片、氣泡...

◆ 反饋: 警告提示、抽屜、全局提示、對(duì)話框、通知提醒框、氣泡確認(rèn)框、進(jìn)度條、結(jié)果、加載中..

◆ 其他: 錨點(diǎn)、回到頂部、圖標(biāo)...

七. 總結(jié) 

設(shè)計(jì)規(guī)范是為了更高效的做設(shè)計(jì)，但不是一成不變的，它在落地使用的時(shí)或多或少都會(huì)有問(wèn)題，需要我們慢慢的去反復(fù)檢驗(yàn)它的合理性，發(fā)現(xiàn)不合理的及時(shí)更正，不斷迭代，不斷沉淀，不斷優(yōu)化，這樣才能不斷提高產(chǎn)品的用戶體驗(yàn)。此次分享借鑒一些前輩的經(jīng)驗(yàn)，主要是整理歸納學(xué)習(xí)，如有需要補(bǔ)充或糾正的，歡迎大家相互探討！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：小魚ID   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

用戶體驗(yàn)（用戶使用產(chǎn)品，系統(tǒng)或服務(wù)過(guò)程中的主觀感受）

用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種純主觀感受。用戶體驗(yàn)這個(gè)詞最早被廣泛認(rèn)知是在上世紀(jì)90年代中期，由用戶體驗(yàn)設(shè)計(jì)師唐納德.諾曼（Donald Norman）所提出和推廣。對(duì)于一個(gè)界定明確的用戶群體來(lái)講，用戶體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。用戶體驗(yàn)并不是指一件產(chǎn)品本身如何工作的，更明確的是指“產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)生作用”，也就是人們?nèi)绾巍佑|’和‘使用’。無(wú)論什么產(chǎn)品，用戶體驗(yàn)總是在細(xì)微之處，往往細(xì)節(jié)最能打動(dòng)人心。用戶體驗(yàn)通常要解決的是用戶具體的使用場(chǎng)景，要兼顧視覺和功能兩方面的因素，同時(shí)解決產(chǎn)品所面臨的其他問(wèn)題。

產(chǎn)品的邏輯簡(jiǎn)易程度對(duì)于用戶體驗(yàn)是一個(gè)反向指標(biāo)，產(chǎn)品越復(fù)雜用戶體驗(yàn)會(huì)越發(fā)困難。往往產(chǎn)品后期更新迭代中，每新增一個(gè)特性，功能或者步驟，都會(huì)增加導(dǎo)致用戶體驗(yàn)不順暢或者失敗的機(jī)會(huì)。用戶體驗(yàn)的每一個(gè)流程，對(duì)開發(fā)者而言都要經(jīng)過(guò)慎重的考慮和驗(yàn)證。實(shí)際上設(shè)計(jì)出一個(gè)最優(yōu)的解決方案需要更多的時(shí)間和精力，往往不得不在各個(gè)方面作出妥協(xié)。但是一個(gè)以用戶為中心的設(shè)計(jì)流程保證來(lái)這些妥協(xié)不是隨機(jī)決定的。

為什么每個(gè)產(chǎn)品都在強(qiáng)調(diào)‘站在用戶的角度，提升產(chǎn)品的用戶體驗(yàn)’，因?yàn)閮?yōu)秀的用戶體驗(yàn)就是商機(jī)，良好順暢的用戶體驗(yàn)會(huì)極大的提升用戶轉(zhuǎn)化率，增加用戶的留存率。好的的用戶體驗(yàn)主要體現(xiàn)在兩種形式：“幫助人們工作更快”和“減少他們犯錯(cuò)幾率”。牢記“以用戶為中心的設(shè)計(jì)”在開發(fā)產(chǎn)品的每個(gè)流程都要把用戶列入考慮的范圍，每一個(gè)流程步驟都要代入用戶的使用場(chǎng)景中體驗(yàn)，想用戶所想。提供優(yōu)質(zhì)的用戶體驗(yàn)是一個(gè)重要的，可持續(xù)，良性的競(jìng)爭(zhēng)優(yōu)勢(shì)，用戶體驗(yàn)形成用戶對(duì)企業(yè)的整體形象，并以此來(lái)界定來(lái)與競(jìng)品的差異。

在產(chǎn)品的整個(gè)開發(fā)流程中都要考慮用戶有可能采取每個(gè)步驟的可能性，并且理解整個(gè)流程中每一個(gè)步驟用戶的期望值。

表現(xiàn)層：視覺設(shè)計(jì)，我們使用無(wú)論任何設(shè)備的產(chǎn)品最先看到的就是表現(xiàn)層，內(nèi)容、功能和美學(xué)匯集到一起來(lái)產(chǎn)生一個(gè)最終設(shè)計(jì)呈現(xiàn)；

框架層：界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)，框架層用于優(yōu)化設(shè)計(jì)布局，以達(dá)到界面中元素的最大效果和效率；

結(jié)構(gòu)層：交互設(shè)計(jì)和信息架構(gòu)，相對(duì)于框架層更加抽象，框架是結(jié)構(gòu)的具體表達(dá)方式，明確來(lái)元素應(yīng)該出現(xiàn)在哪里；

范圍層：功能規(guī)格和內(nèi)容需求，結(jié)構(gòu)層明確了產(chǎn)品的各種特性和功能最優(yōu)的展示組合方式，這些內(nèi)容構(gòu)成了產(chǎn)品的范圍層；

戰(zhàn)略層：產(chǎn)品目標(biāo)和用戶需求，成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”。知道企業(yè)與用戶雙方對(duì)產(chǎn)品期許和目標(biāo)，有助于確立用戶體驗(yàn)各方面戰(zhàn)略的制定；

在五個(gè)層面應(yīng)該是自下而上的建設(shè)，戰(zhàn)略 — 范圍 — 結(jié)構(gòu) — 框架 — 表現(xiàn)；不同的層面位置考慮的方向和側(cè)重點(diǎn)是不一樣的，隨著層面的上升我們考慮的決策變得更加具體，并且涉及越來(lái)越精細(xì)的細(xì)節(jié)表現(xiàn)。每一個(gè)層面都是根據(jù)下面層面來(lái)決定的，每一個(gè)層面的決定都會(huì)影響上層的可用選擇，表現(xiàn)層由框架層決定，框架層是建立在結(jié)構(gòu)層的基礎(chǔ)上，結(jié)構(gòu)層是具有范圍層，范圍層是根據(jù)戰(zhàn)略層制定的。

按照產(chǎn)品不同屬性分為兩大類：功能性產(chǎn)品/信息型產(chǎn)品；針對(duì)不同的類型將五要素細(xì)分展示，功能型產(chǎn)品更加關(guān)注的是任務(wù)，去思考用戶如何完成這個(gè)過(guò)程，用戶使用該產(chǎn)品完成一個(gè)或多個(gè)任務(wù)的工具；信息型產(chǎn)品關(guān)注的則為信息，產(chǎn)品應(yīng)該提供哪些信息，并且方便用戶快速尋找，理解，創(chuàng)建一個(gè)富信息的用戶體驗(yàn)；這種把用戶體驗(yàn)劃分為各個(gè)模塊和層面的模式，更有利于我們?nèi)タ紤]用戶體驗(yàn)中可能出現(xiàn)的麻煩。所有處在同一層面的要素都會(huì)決定最終的用戶體驗(yàn)效果。

優(yōu)秀的用戶體驗(yàn)基礎(chǔ)是要有明確的“戰(zhàn)略”立意，知道企業(yè)和用戶對(duì)產(chǎn)品的期許和目標(biāo)，才能更好的促進(jìn)用戶體驗(yàn)各方面的完善和優(yōu)化。我們要用過(guò)產(chǎn)品獲得什么？用戶通過(guò)產(chǎn)品可用得到什么？回答這兩個(gè)問(wèn)題有助于我們更好的明確產(chǎn)品目標(biāo)和用戶需求，結(jié)合兩者我們組成戰(zhàn)略層。

產(chǎn)品目標(biāo)：目標(biāo)的制定切記不要太過(guò)具體或太寬泛我們需要在這之間找出一個(gè)平衡點(diǎn)，為了更好的用戶體驗(yàn)我們需要保證所作出的決策都不是頭腦發(fā)熱拍腦門定出來(lái)的，每一個(gè)決策，都應(yīng)該建立在我們確切了解他所帶來(lái)的聯(lián)動(dòng)影響效果。明確的定義出成功的條件而不是定義成功的路徑，有時(shí)候跑的慢一定不一定就是落后者。既然是賽跑肯定會(huì)有終點(diǎn)有結(jié)果的產(chǎn)出，我們要明確“成功的標(biāo)準(zhǔn)”制定可追蹤的指標(biāo)，成功的標(biāo)準(zhǔn)不僅僅影響各階段的決策，也是衡量用戶體驗(yàn)工作的具體依據(jù)，埋點(diǎn)數(shù)據(jù)采集，上線后的客戶流存率，轉(zhuǎn)化率，新用戶的增長(zhǎng)率，老客戶的使用反饋等等。對(duì)驅(qū)動(dòng)用戶體驗(yàn)的決策而言有意義的成功標(biāo)準(zhǔn)，一定是可用明確與用戶行為綁定的標(biāo)準(zhǔn)，而這些用戶行為一定是可以通過(guò)設(shè)計(jì)來(lái)影響的。

用戶需求：明確正確的用戶需求是復(fù)雜不易的，因?yàn)橛脩羧后w存在很大差異性，確定大致目標(biāo)用戶后我們還需要精細(xì)化的區(qū)分，將用戶分成較小的，有共同特性的以此來(lái)助力我們更好的明確用戶需求，通過(guò)不同的角色群體使用產(chǎn)品來(lái)分析他們的需求。在針對(duì)用戶需求研究時(shí)我們還可以使用一些市場(chǎng)調(diào)研（將你想要的信息通過(guò)具體，有效的公式化問(wèn)題，讓用戶提交你正確的答案）；現(xiàn)場(chǎng)調(diào)查（完整的，有效且全面的方法，了解與產(chǎn)品使用生活場(chǎng)景最匹配的用戶行為）；創(chuàng)建人物角色（模擬真實(shí)用戶使用場(chǎng)景更加貼近用戶，再產(chǎn)品思考中和用戶更感同身受）。戰(zhàn)略應(yīng)該是用戶體驗(yàn)中的起點(diǎn)，但并不意味著項(xiàng)目開始之前戰(zhàn)略就完全確定下來(lái)，它是可以在整個(gè)工作中演變和改進(jìn)的。

當(dāng)我們明確了解戰(zhàn)略層后，我們就知道產(chǎn)品應(yīng)該為用戶提供什么功能和服務(wù)，這些也就逐步演變?yōu)榉秶鷮?。我們要做兩個(gè)事情來(lái)定義范圍層 —過(guò)程和產(chǎn)品。過(guò)程的意義在于當(dāng)產(chǎn)品還在一個(gè)雛形時(shí)，可以帶動(dòng)我們?nèi)ニ伎剂鞒讨锌赡艽嬖诘膯?wèn)題，功能實(shí)現(xiàn)的優(yōu)先級(jí)；產(chǎn)品的意義在于明確最終產(chǎn)出的結(jié)果，團(tuán)隊(duì)有明確的目標(biāo)。在這其中文檔的輸出是必不可少的，有計(jì)劃性說(shuō)明性的文檔輸出可以讓我們的工作更加有條不紊的推進(jìn)下去。我們可以從戰(zhàn)略層抽象出來(lái) — “我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品？”轉(zhuǎn)而到范圍層變?yōu)?— “我們要開發(fā)的是什么？”在軟件開發(fā)過(guò)程中，范圍層確定的是全部功能需求和功能規(guī)格。

功能規(guī)格：功能規(guī)格說(shuō)明不需要包含產(chǎn)品的每個(gè)細(xì)節(jié)，只需要包含在設(shè)計(jì)或開發(fā)過(guò)程中可能出現(xiàn)混淆的功能定義。同時(shí)功能規(guī)格說(shuō)明也不需要展望產(chǎn)品未來(lái)理想狀態(tài)，只需要記錄在創(chuàng)建產(chǎn)品時(shí)確定下來(lái)的決議。換句話說(shuō)，文檔不能解決問(wèn)題，但是定義可以，我們需要不是文檔多么詳細(xì)厚重，而是要足夠的清晰和準(zhǔn)確。功能說(shuō)明要明確具體避免主觀語(yǔ)氣，避免出現(xiàn)歧義，盡可能用量化的可檢驗(yàn)的標(biāo)準(zhǔn)來(lái)定義功能有助于我們的驗(yàn)收。

內(nèi)容需求：很多時(shí)候我們說(shuō)到的內(nèi)容指的是文本。但是圖像，音頻和視頻有時(shí)候比文字還要重要。這些不同類型的內(nèi)容結(jié)合到一起，相互協(xié)作去滿足某一個(gè)需求。內(nèi)容特性想要達(dá)到的規(guī)模，將對(duì)你所做的用戶體驗(yàn)產(chǎn)生極大的影響，內(nèi)容需求應(yīng)該提供每一種特性規(guī)模的大致預(yù)估，以便在設(shè)計(jì)過(guò)程中作出最為明智的決策。盡可能早的確定某個(gè)人來(lái)負(fù)責(zé)每一個(gè)內(nèi)容元素也是非常重要的，避免后期開發(fā)實(shí)現(xiàn)達(dá)不到我們預(yù)期的效果。內(nèi)容清單的輸出也是重要的，究其原因這樣團(tuán)隊(duì)中的每個(gè)人都會(huì)清楚知道自己負(fù)責(zé)的哪些部分，明確責(zé)任，提高協(xié)同效率。

學(xué)會(huì)確定需求優(yōu)先級(jí)，了解“不需要做什么”也就意味的我們知道哪些是必須要“馬上去做的”，把那些需求點(diǎn)梳理出來(lái)，找到一種適宜的方式，讓它們符合你長(zhǎng)期的規(guī)劃，這才是真正的價(jià)值所在。確定具體，系統(tǒng)的發(fā)展要求，并將任何不符合這些要求的想法作為潛在未來(lái)功能的囤積，只有通過(guò)這種更慎重的途徑，才可以真正的管理起整個(gè)項(xiàng)目過(guò)程。

在羅列出項(xiàng)目需求優(yōu)先級(jí)，梳理出大致的流程，我們對(duì)于產(chǎn)品將會(huì)包括什么主要內(nèi)容已經(jīng)有了清晰的構(gòu)想。然而，這些需求沒(méi)有進(jìn)行全面的整合還是碎片化的存在。而結(jié)構(gòu)層要做的就是整合這些創(chuàng)建一個(gè)概念性的結(jié)構(gòu)。結(jié)構(gòu)層適當(dāng)?shù)膶⑽覀冴P(guān)注點(diǎn)從抽象的決策和范圍問(wèn)題，轉(zhuǎn)移到更能影響最后的用戶體驗(yàn)具體因素。但是這里的交互設(shè)計(jì)和信息架構(gòu)所產(chǎn)出的東西大部分還是概念性的內(nèi)容。這兩項(xiàng)內(nèi)容并不完全是技術(shù)，它要求開發(fā)者要有共情能力去理解用戶，理解用戶行為操作習(xí)慣，使用場(chǎng)景，思考方式等。將了解的這些知識(shí)代入我們開發(fā)過(guò)程中，這樣會(huì)使那些不得不使用我們產(chǎn)品的用戶帶來(lái)更好的用戶體驗(yàn)。

交互設(shè)計(jì)：關(guān)注于影響用戶執(zhí)行和完成任務(wù)的元素，即關(guān)注用戶所有操作，同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”這些用戶行為。任何一個(gè)交互設(shè)計(jì)的項(xiàng)目都有很大部分牽涉處理“用戶錯(cuò)誤”當(dāng)用戶發(fā)生錯(cuò)誤時(shí)產(chǎn)品要給出什么提示，并且對(duì)于錯(cuò)誤發(fā)生時(shí)，如何防止用戶再次發(fā)生錯(cuò)誤？第一個(gè)也是最好的防止錯(cuò)誤的方法，就是將產(chǎn)品設(shè)計(jì)為不可能犯錯(cuò)的。第二個(gè)避免錯(cuò)誤的方法就是使錯(cuò)誤難以發(fā)生，即使一些錯(cuò)誤發(fā)生，產(chǎn)品也應(yīng)該幫助用戶改正錯(cuò)誤。有效的錯(cuò)誤信息和容易自我解釋的界面可以在錯(cuò)誤發(fā)生之后幫用戶糾正。當(dāng)用戶完成一些操作后無(wú)法糾正的錯(cuò)誤，產(chǎn)品就該提供從錯(cuò)誤中恢復(fù)的方式。對(duì)于那些不可恢復(fù)撤銷的錯(cuò)誤，提供大量警告就是產(chǎn)品唯一可以預(yù)防的方法。

信息框架：研究人們?nèi)绾握J(rèn)知信息的過(guò)程，對(duì)于產(chǎn)品而言信息架構(gòu)關(guān)注的就是呈現(xiàn)給用戶信息是否合理并卻具有意義。在以內(nèi)容為主的網(wǎng)站上，信息架構(gòu)主要工作就是設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu)，讓用戶可以高效率，有效的瀏覽網(wǎng)站的內(nèi)容。信息框架與信息檢索和分類體系密布可分，針對(duì)分類體系我們可以從上到下或從下到上這兩種方法來(lái)建立。

從上到下的信息架構(gòu)從戰(zhàn)略層考慮，先從最廣泛的，有可能滿足決策目標(biāo)的內(nèi)容與功能開始進(jìn)行分類，然后再依據(jù)邏輯細(xì)分出次級(jí)分類；從下到上根據(jù)對(duì)“內(nèi)容和功能需求分析”而來(lái)，從已有的資料開始，先把他們分為最低級(jí)別的分類，然后再歸納到高一級(jí)分類，從而逐步構(gòu)建出反應(yīng)我們產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。這兩種方法各有弊端，從下而上容易將內(nèi)容的重要細(xì)節(jié)忽略，從下而上使架構(gòu)過(guò)于精準(zhǔn)的反應(yīng)內(nèi)容，對(duì)于后期的維護(hù)變動(dòng)不是很靈活。因此我們要盡可能的從兩種方式中尋找一個(gè)平衡點(diǎn)。一個(gè)高效結(jié)構(gòu)的優(yōu)點(diǎn)就是具備“容納成長(zhǎng)和適用變動(dòng)”的能力。一個(gè)適應(yīng)性強(qiáng)的信息架構(gòu)體系，既可以把新內(nèi)容作為現(xiàn)有結(jié)構(gòu)的一部分容納進(jìn)來(lái)也可以當(dāng)成一個(gè)新的部分加入。

在充滿概念型的結(jié)構(gòu)層牽引出大量需求后，這些需求都是來(lái)自我們戰(zhàn)略目標(biāo)的需求。在框架層我們要更進(jìn)一步的提煉這些需求結(jié)構(gòu)，確定詳細(xì)的界面外觀，導(dǎo)航和信息設(shè)計(jì)，這樣才能使結(jié)構(gòu)變得更加豐滿。框架層需要處理更為細(xì)節(jié)問(wèn)題，在結(jié)構(gòu)層我們建立了一個(gè)框架和交互設(shè)計(jì)。在框架層我們關(guān)注點(diǎn)就是界面的元素以及它們之間的關(guān)系。當(dāng)我們提供用戶做某些事情的能力是，屬于界面設(shè)計(jì)；當(dāng)我們提供用戶去某個(gè)地方能力，則屬于導(dǎo)航設(shè)計(jì)；當(dāng)我們要傳達(dá)想法給用戶時(shí)，那就是信息設(shè)計(jì)。

界面設(shè)計(jì)：成功的界面設(shè)計(jì)就是要讓用戶一眼就看到“最重要的東西”，而另一方面，不重要的東西，不應(yīng)該被注意有時(shí)候則它們根本就沒(méi)有出現(xiàn)在那。設(shè)計(jì)界面，平面最大的挑戰(zhàn)之一就是弄清楚用戶不關(guān)注的東西并減少他們的比重。將第一要表達(dá)的要素快速傳遞到用戶。

導(dǎo)航設(shè)計(jì)：任何一個(gè)網(wǎng)站的導(dǎo)航設(shè)計(jì)必須同時(shí)完成三個(gè)目標(biāo)：1.它必須要提供用戶在網(wǎng)站的跳轉(zhuǎn)方式；2.導(dǎo)航設(shè)計(jì)必須傳達(dá)出這些元素和它們所包含內(nèi)容的關(guān)系；3.導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)之間的關(guān)系；這三個(gè)目標(biāo)就是必須要納入考慮的范圍，清晰的告知用戶“他們?cè)谀睦铩币约啊八麄兡苋ツ睦铩卑延脩舢?dāng)成是“傻瓜上帝”。

習(xí)慣和反射作用是我們與這個(gè)世界交互時(shí)的基礎(chǔ)，我們?cè)谑褂没ヂ?lián)網(wǎng)產(chǎn)品這么多年的時(shí)間中，絕大部分的操作效果和下意識(shí)的操作方式已經(jīng)被養(yǎng)成，所以要讓你的界面與用戶早養(yǎng)成的習(xí)慣保持一致是很重要的，界面要與它自身保持一致。這并不是說(shuō)，每一個(gè)界面問(wèn)題的解決方式都必須毫無(wú)條件的死守這些習(xí)慣。當(dāng)某種不同的方式有明顯的益處時(shí)，你反而應(yīng)該嘗試謹(jǐn)慎的違背一些習(xí)慣，到那時(shí)需要我們做的每一個(gè)決定都要有充分的，明確的理由。有效的使用比喻，就是減少用戶在“理解和使用你的產(chǎn)品功能”是的猜忌，讓用戶第一眼就知道你的圖標(biāo)表達(dá)的是什么意思，要有強(qiáng)指示性質(zhì)。

內(nèi)容，功能和美學(xué)匯集的地方，完成其他四個(gè)層面的所有目標(biāo)并同時(shí)滿足用戶的感官感受。在框架層，我們主要解決放置的事情；在界面設(shè)計(jì)考慮可交互的元素布局；導(dǎo)航設(shè)計(jì)考慮在產(chǎn)品引導(dǎo)用戶移動(dòng)元素安排；而信息設(shè)計(jì)考慮傳達(dá)給用戶的信息要素的排布；在向上就是表現(xiàn)層，我們這里要解決的就是彌補(bǔ)“產(chǎn)品框架層邏輯排布”的感知呈現(xiàn)問(wèn)題。我們每一次經(jīng)歷最終都是由我們的感覺器官來(lái)進(jìn)行的。在設(shè)計(jì)的過(guò)程中這是用戶體驗(yàn)的最后一站：決定我們?cè)O(shè)計(jì)最后被哪些（視覺/聽覺/嗅覺/觸覺/味覺）感受器官受到呢？

嗅覺和味覺對(duì)于用戶體驗(yàn)設(shè)計(jì)師是很少考慮的范圍；觸覺更多的用于工業(yè)設(shè)計(jì)領(lǐng)域，關(guān)注用戶和產(chǎn)品之間的物理接觸；聽覺可以應(yīng)用到不同類的產(chǎn)品中，如開機(jī)/新消息提示等；視覺：這是用戶體驗(yàn)師最得心應(yīng)手餓領(lǐng)域，幾乎所有的產(chǎn)品都會(huì)涉及視覺設(shè)計(jì)。代替用“什么具有美感”來(lái)評(píng)估一個(gè)視覺設(shè)計(jì)方案，應(yīng)該吧注意力集中在他們能否“良好運(yùn)作”，對(duì)于那些上層決定的目標(biāo)，設(shè)計(jì)能否賦能幫助企業(yè)更好的變現(xiàn)，設(shè)計(jì)的本質(zhì)就是用合適的方式幫助用戶/企業(yè)完成需求目標(biāo)；

忠于眼睛評(píng)估一個(gè)產(chǎn)品視覺設(shè)計(jì)最簡(jiǎn)單的方式，就是你的視覺首先落在什么地方？哪個(gè)設(shè)計(jì)要素第一時(shí)間吸引注意力？它們對(duì)于戰(zhàn)略目標(biāo)是最需要表現(xiàn)的東西嗎？用戶第一時(shí)間接受的信息是你想要表達(dá)的嗎？設(shè)計(jì)還是要把握4大基本原則：對(duì)比；重復(fù)；對(duì)齊；親密性；

不管你的產(chǎn)品多復(fù)雜，用戶體驗(yàn)都是一樣的，創(chuàng)建良好的用戶體驗(yàn)最重要的工作內(nèi)容就是大量收集解決細(xì)微的問(wèn)題。“成功的方法”和“注定失敗的方法”歸根究底就是：1.了解你正在試著去解決的問(wèn)題；2.了解這些解決辦法所造成的后果；必須要同時(shí)考慮五個(gè)層面的全部因素，這對(duì)于創(chuàng)建成功的用戶體驗(yàn)至關(guān)重要。

提成正確的問(wèn)題，面對(duì)那些用戶體驗(yàn)需要解決的糾纏不清的問(wèn)題，要抱有一種正確心態(tài)，不要以“節(jié)約項(xiàng)目時(shí)間或金錢”名義對(duì)用戶體驗(yàn)問(wèn)題敷衍了事。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：許小鵬   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司