<ul id="cjhvp"></ul>
企業(yè)多產(chǎn)品線模式下，UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)模化提升多產(chǎn)品線整體體驗中的方法論和實踐經(jīng)驗。
SaaS 產(chǎn)品體驗要求越來越高，用戶體驗已經(jīng)成為產(chǎn)品競爭力的重要組成部分，怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗設(shè)計，本文從貼合業(yè)務(wù)線的設(shè)計規(guī)范、敏捷易用的前端組件庫、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)模化提升多產(chǎn)品線整體體驗過程中方法論和實踐經(jīng)驗。
關(guān)鍵詞：
用戶體驗設(shè)計；UI設(shè)計規(guī)范；多產(chǎn)品線；體驗文化；UI設(shè)計落地
面對多產(chǎn)品體系，多產(chǎn)品線，需要積極尋找和探索適合我們客觀情況的最佳實踐，我們面臨的問題有：
1.過往以功能堆砌為主、基本“能用”，缺乏平臺規(guī)范和一致性，體驗不足。
2.產(chǎn)品線多、體量大。
3.客戶對產(chǎn)品體驗要求越來越高。
4.產(chǎn)品歷史包袱、修復(fù)改動困難。
5.對用戶體驗認知不一，協(xié)同、溝通成本高。
6.重復(fù)的開發(fā)成本。
7.第三方組件與業(yè)務(wù)的匹配度不佳。
解決以上幾大難題，我們啟動了UI 設(shè)計規(guī)范的搭建、UI組件庫的開發(fā)等，讓規(guī)范和組件庫成為各產(chǎn)品線堅實底座的一部分，使用戶體驗文化賦能前端和產(chǎn)品經(jīng)理，協(xié)同 QA 力量一起推動產(chǎn)品體驗升級，以下整理分享的實踐方法適用于中小型UED團隊支撐復(fù)雜、多業(yè)務(wù)線的企業(yè)，本文嘗試從以下幾個方面總結(jié)和提煉實踐經(jīng)驗，跟業(yè)界同行探討。
設(shè)計規(guī)范體系的搭建對于新的團隊，如何從復(fù)雜海量的業(yè)務(wù)場景中制定出一套適用于自己產(chǎn)品的UI設(shè)計規(guī)范，是第一道待翻越的高墻，完整的設(shè)計規(guī)范應(yīng)該是包含視覺規(guī)范與交互規(guī)范，本文主要針對設(shè)計規(guī)范實踐過程進行闡述。
貼合場景的設(shè)計規(guī)范：
雖然市面上已經(jīng)有眾多成熟的設(shè)計規(guī)范體系可供使用，但是當(dāng)前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場景等綜合因素，決定了需要重新搭建一套符合我們自己業(yè)務(wù)場景的設(shè)計規(guī) 范體系。
UI規(guī)范效益最大化：
一旦我們決定制作規(guī)范，就要把規(guī)范當(dāng)成一個產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程，去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價值。 依據(jù)規(guī)范效益模型，在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%，先解決統(tǒng)一性，再解決場景細分，打造高質(zhì)量通用的模式庫以提高質(zhì)量和效率，并力求讓更多人從這套設(shè)計體系中獲益， 從而讓規(guī)范體系發(fā)揮更大的價值。
UI規(guī)范制定的策略：
明確用戶對設(shè)計規(guī)范的訴求，構(gòu)建適合產(chǎn)品的UI設(shè)計規(guī)范，首先，需要明確規(guī)范體系的用戶群體經(jīng)過設(shè)計團隊多輪調(diào)研，確定設(shè)計規(guī)范面向的目標(biāo)用戶群、基于核心用戶的訴求，為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。
確定UI設(shè)計價值觀：
產(chǎn)品歷史包袱重，系統(tǒng)結(jié)構(gòu)復(fù)雜，在提升用戶體驗時，內(nèi)容表達「清晰明確」是第一要務(wù)，例如尊重已經(jīng)形成的用戶習(xí)慣，優(yōu)化改造時，注意版本之間的銜接，讓用戶「清晰明確」，這也是為什么將「清晰明確」作為價值觀之首，另外提升效率是企業(yè)級產(chǎn)品用戶體驗的永恒主題，同時兼顧系統(tǒng)的簡潔與一致。
梳理UI規(guī)范框架：
UI設(shè)計規(guī)范包括設(shè)計價值觀、全局規(guī)則、組件庫、模式庫、典型頁面、移動端規(guī)范和設(shè)計資源框架整理主要從以下3個方面進行：
1.梳理現(xiàn)有組件，剔除不使用的部分 。?
2.同類競品的框架借鑒，查漏補缺。 ?
3.場景驗證，與業(yè)務(wù)場景深度結(jié)合經(jīng)過充分論證和梳理，對規(guī)范框架做了重新定義，增補了業(yè)務(wù)缺少的內(nèi)容。
如上圖所示，例如對高頻的工具欄組件的補充，典型頁面的補充，增加模式庫以及全局規(guī)則，當(dāng)前第一個版本的規(guī)范框架是基于業(yè)務(wù)場景優(yōu)先級最高的內(nèi)容進行制定，更多的規(guī)范內(nèi)容的增加依托于不斷的迭代，逐漸完善規(guī)范框架。
規(guī)范內(nèi)容的制定及評審：
組件規(guī)范包含：變更記錄、組件定義、何時使用、組件的類型、組件的響應(yīng)。
規(guī)范內(nèi)容制定的原則： ?
1.有明確場景可依。?
2.精簡不必要的分支 例如在定義表單規(guī)范時，對于表單標(biāo)簽的對齊方式做了統(tǒng)一的約束，標(biāo)簽右對齊，輸入框左對齊全局保持統(tǒng)一。
邏輯正確、規(guī)則明確易懂： ?
例如常見的alert （警告提示）名稱調(diào)整為常駐提示，語義更貼合場景，便于理解。
規(guī)則的可拓展性，多場景的兼容性： ?
產(chǎn)品架構(gòu)是PC端到移動端的自動適配，因此在組件設(shè)計的時候需同時考慮PC端與移動端的對應(yīng)關(guān)系以及兩端場景的兼容性。
協(xié)作及敏捷迭代： ?
規(guī)范發(fā)布后，伴隨著實際項目的檢驗，業(yè)務(wù)場景的擴充變化，如何高效的對設(shè)計規(guī)范進行迭代，決定了設(shè)計系統(tǒng)能否持續(xù)的走得更遠，規(guī)范內(nèi)容定期評審，必須通過業(yè)務(wù)、技術(shù)、設(shè)計評審，確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負責(zé)，同時有backup，可以幫助走查復(fù)盤雙重保障規(guī)范的質(zhì)量。
敏捷易用的前端組件庫： ?
復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點，快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。
復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點，快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。
前端組件庫建立目標(biāo)： ?
1.提高開發(fā)效率，對高頻使用、通用組件進行代碼化封裝，避免重復(fù)開發(fā)工作。 ?
2.提高開發(fā)質(zhì)量，通過各類業(yè)務(wù)場景和業(yè)務(wù)線的錘煉，沉淀組件代碼最佳實踐。 ?
3.提高產(chǎn)品體驗，組件封裝代碼化，減少在多角色協(xié)同中因為理解偏差、信息傳遞問題等導(dǎo)致的不確定性和結(jié)果不可控性，不同業(yè)務(wù)線、不行項目、共用一套基礎(chǔ)代碼，保證體驗的一致性，組件的組織形式： 結(jié)合實際業(yè)務(wù)場景和原子設(shè)計理論，將組件劃分為不同顆粒度：基礎(chǔ)組件、業(yè)務(wù)組件、典型頁面 組件，以適用于不同研發(fā)場景使用。
1.基礎(chǔ)組件，基礎(chǔ)組件為組件庫最小顆粒度，構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?
2.業(yè)務(wù)組件，在基礎(chǔ)組件的基礎(chǔ)上，結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場景，梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁面組件，梳理具有業(yè)務(wù)特點的典型頁面，相比基礎(chǔ)組件和業(yè)務(wù)組件，典型頁面更加具體， 為用戶提供具有代表性的內(nèi)容和框架，并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹右表典型 頁面組件，作為最為常見的頁面結(jié)構(gòu)，各業(yè)務(wù)場景可復(fù)用頁面組件，保證了頁面組件內(nèi)各基礎(chǔ)組 件的一致性，最大程度的實現(xiàn)不同產(chǎn)品線產(chǎn)品中頁面體驗的一致性。
推進前端組件庫落地執(zhí)行： ?
前期設(shè)計規(guī)范落地到組件庫過程中，面臨諸多問題和阻礙，比如開發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗收及修復(fù)問題不到位等問題。處理這些問題對UI團隊資源造成很大消耗， 通過總結(jié)復(fù)盤前期組件庫落地時的經(jīng)驗和教訓(xùn)，梳理落地執(zhí)行流程，在新的協(xié)作流程下，新一 批的組件開發(fā)不論在協(xié)作效率和開發(fā)質(zhì)量上都有質(zhì)的提升。
分層推進： ?
組件庫開發(fā)是一個持續(xù)迭代的過程，考慮到組件庫開發(fā)資源極為有限且無專職負責(zé)人員，在跟組 件庫開發(fā)團隊協(xié)同過程中，我們通過分步開發(fā)來解決組件庫更新優(yōu)化的問題并通過不斷優(yōu)化協(xié)作流程來助力組件庫高效落地。
前端組件庫分步開發(fā)原則： ?
1.優(yōu)先級原則，優(yōu)先開發(fā)適用于業(yè)務(wù)線普適場景的組件。 ?
2.緊急性原則，對于急需的業(yè)務(wù)線所需組件優(yōu)先開發(fā)。 ?
3.快速可實現(xiàn)原則，開發(fā)實現(xiàn)成本高的組件暫緩處理。
自查走查驗收： ?
組件UI責(zé)任人梳理出下屬組件需開發(fā)落地的細節(jié)點，整理為文檔，待開發(fā)人員完成組件開發(fā)后，自行參照UI提供的自查文檔，查漏補缺，保障進入UI驗收環(huán)節(jié)的前端組件不會出現(xiàn)較多的缺陷，降低后期走查和溝通修改的工作量，同時監(jiān)督開發(fā)人員提高組件落地還原度和質(zhì)量。
組件庫的持續(xù)迭代： ?
UI團隊通過一套標(biāo)準(zhǔn)的流程來把控組件庫迭代的質(zhì)量，在日常工作中經(jīng)常會收到產(chǎn)品經(jīng)理或項目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門作為推動組件庫搭建的核心環(huán)節(jié)，需要以全局 和更深入的視角加以判斷把關(guān)，保證前端組件庫內(nèi)容的普適性和高質(zhì)量，避免組件庫內(nèi)容冗余， 降低研發(fā)維護成本。
產(chǎn)品研發(fā)協(xié)作流程保障： ?
好的過程是好的結(jié)果的有力保障，一個業(yè)務(wù)需求從產(chǎn)生到開發(fā)落地需要經(jīng)過多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程，確保各角色清楚自己職責(zé)以及如何跟上下游銜接，同 時我們也希望協(xié)作流程能夠確保設(shè)計資源可以向重點業(yè)務(wù)模塊傾斜，以及發(fā)揮各個角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗。
UED團隊建立之初，我們面臨的首要問題是：需求隨機，完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個人，為了解決這個問題，我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問題。
企業(yè)級產(chǎn)品特點、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團隊人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團隊進 行設(shè)計，在判斷哪些需求需要流轉(zhuǎn)至UI團隊設(shè)計時，我們給出了如下指導(dǎo)性方向： ?
1.用戶量角度，大量終端用戶使用的場景，例如訂票、報銷、采購頁面 。 ?
2.用戶重要程度角度，核心、重要用戶使用的場景 eg.公司領(lǐng)導(dǎo)、決策層。 ?
3.通用性角度，通用組件或框架，需要UI通盤考慮各個業(yè)務(wù)線場景需求進行設(shè)計。 其他需求則主要由產(chǎn)品經(jīng)理進行設(shè)計，UX以評審方式輕度參與。
協(xié)作流程迭代，UI驗收成為必要一環(huán)： 隨后我們又面臨新的問題：設(shè)計還原度差，被公司老板生動的形容為：看設(shè)計稿是“精裝修”， 開發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計還原質(zhì)量，我們在研發(fā)流程中明確了所有涉 及前端頁面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負責(zé)人驗收，在產(chǎn)品團隊TAPD中記 錄UI缺陷、標(biāo)明嚴(yán)重程度，對于 “嚴(yán)重” 級別以上UI缺陷，禁止發(fā)版。
UI工期評估合理化：
為了既能盡力配合各產(chǎn)品線迭代計劃又要爭取合理UI設(shè)計時間、保證產(chǎn)出質(zhì)量，合理評估設(shè)計周期對UI人力管理尤其重要。對此，我們對設(shè)計需求分成了ABC三級進行評估。 對于A和B級需求，通常模塊較大，先有UI設(shè)計方案再去分期迭代開發(fā)，對于這兩類需求，在評估 模型中給出了大致工期概念，比如以月為單位，大于1個月或2個月。
對于C級需求，通常為產(chǎn)品經(jīng)理先排進某個迭代再來提UI設(shè)計需求，設(shè)計范圍相對明確，我們則結(jié)合典型頁面數(shù)量因子和設(shè)計難度因子給出了UI工期大概評估公式，以天為單位。 ?
1.設(shè)計難度因子：根據(jù)業(yè)務(wù)線的復(fù)雜程度而定，范圍為（0.8~1.5）。 ?
2.典型頁面數(shù)量因子：評估需求范圍規(guī)模（N）。
UI設(shè)計團隊在協(xié)作過程中面臨諸多挑戰(zhàn)：產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長、各級人員對產(chǎn)品認知及重視程度不一、好的體驗設(shè)計難落地、溝通成本高等問題，想要解決這些問題，若僅靠UI團隊自身力量是不夠的，需要動員公司各個環(huán)節(jié)和人員重視用戶體驗，共同促進產(chǎn) 品體驗提升。
搭建體驗文化灌溉機制：
UI部門通過多維度的體驗知識內(nèi)容矩陣、多渠道多場景全員覆蓋，普及和加深各級對產(chǎn)品體驗 價值的認識，提升產(chǎn)品體驗思考力和洞察力，幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗的關(guān)系，賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出，“以用戶為中心”和“打造產(chǎn)品極致體驗” 的價值觀根植與企業(yè)文化中，指導(dǎo)研發(fā)流程中各項工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個產(chǎn)品體驗維度，以實現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗”目標(biāo)。 通過搭建體驗文化灌溉機制，提升全員體驗意識，能為產(chǎn)品研發(fā)帶來長久的價值： ?
1.提高設(shè)計還原度 ?
2.減少培訓(xùn)成本 ?
3.提升跨部門溝通效率 ?
4.提升UI團隊影響力 ?
5.提升客戶滿意度
體驗文化落地實踐：
針對不同類型的體驗知識，我們采取不同的傳播渠道進行透，以期達到最好的效果，避免形式化， 將體驗文化滲透、學(xué)習(xí)落到實處，最終影響產(chǎn)品研發(fā)的各個環(huán)節(jié)。
以下為UI團隊在企業(yè)體驗文化 推廣的主要渠道和方法： ?
極致體驗公眾號主要發(fā)布產(chǎn)品體驗的基礎(chǔ)原理，體驗價值、項目復(fù)盤、常見體驗問題等深度長文。讓公司各級人 員認識用戶體驗及價值，讓用戶體驗理念深入人心。 ?
體驗知識小卡片整理產(chǎn)品體驗小的知識點，閱讀學(xué)習(xí)成本低。利用員工碎片時間，對細小體驗知識點的學(xué)習(xí)，積 跬步，至千里。 ?
直播宣講針對重點且復(fù)雜的產(chǎn)品體驗內(nèi)容，如交互規(guī)范宣講、重點問題復(fù)盤、產(chǎn)品經(jīng)理及開發(fā)人員應(yīng)知應(yīng) 會的知識點，采用宣講直播的方式，更好的對內(nèi)容進行詳細解說和疑難問題溝通。 ?
體驗調(diào)研分享UI部門成員對核心競品進行體驗調(diào)研，整理分析后對產(chǎn)品經(jīng)理及相關(guān)人員進行分享，賦能產(chǎn)品經(jīng) 理，為產(chǎn)品的體驗設(shè)計提供新的思路。
UI團隊專業(yè)水平一定程度上決定了公司產(chǎn)品體驗的上限，持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗。
設(shè)計自查：
企業(yè)級產(chǎn)品的大量體驗問題都是設(shè)計基礎(chǔ)問題。因此需要設(shè)計師不論在內(nèi)審前，還是內(nèi)審過程中都要牢記設(shè)計原則，查漏補缺，守住底線。我們在部門內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來檢查設(shè)計方案，通過這些自查點來避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗問題，從UI設(shè)計師自己這里 把好第一道關(guān)。
在日常工作中，UI自查表始終占據(jù)工區(qū)的醒目位置。在評審過程中，大家也會通過線上文檔的形 式來對設(shè)計原則的條目進行逐一檢查。
做好UI內(nèi)部評審：
設(shè)計團隊內(nèi)評審（Design critique）是幾乎所有國內(nèi)外設(shè)計團隊的普遍、經(jīng)典做法，可以有效提 高設(shè)計產(chǎn)出水平、保證團隊對外輸出質(zhì)量。方法是普適的，但具體執(zhí)行時如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評審上，我們進行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評審委員會” 團隊內(nèi)評審時邀請全員參加，但發(fā)現(xiàn)只有少數(shù)同事發(fā)言，另外一些同事因資歷淺、不了解評審產(chǎn)品或者積極性不高給不出建議。同時隨著團隊成員數(shù)量從幾個增加到十幾個，評審會議的時間成 本大大增加。
選取團隊內(nèi)相對資深和積極提出問題、建議的同事組成內(nèi)部評審委員會，以月為周期輪流進行， 可以有效分散評審委員在團隊內(nèi)部評審上的工作負荷，并明確一次UI內(nèi)部評審除了內(nèi)部評審委員 會還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請評審內(nèi)容關(guān)聯(lián)同事，比如“消息中心” UI評審跟另外一位同事負責(zé)的“討論消息”有關(guān)聯(lián)，則需要邀請這位同事一起評審，以便發(fā)現(xiàn)關(guān)聯(lián)問題，整體考慮設(shè)計方案。
以上參與評審機制明確在團隊內(nèi)部協(xié)作工具上，做到人人清楚。另外，對于評審建議，要做到有 記錄、有回應(yīng)、有跟蹤，確保有效發(fā)揮了內(nèi)部評審的價值。
UI設(shè)計師的能力模型：不言而喻，UI設(shè)計師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對于設(shè)計師能力培養(yǎng)通道上，我 們引入了以下模型。
我們將UI設(shè)計師能力歸納成了3x3能力矩陣。這可以設(shè)計師在工作中也可以有目的提升自身薄弱環(huán)節(jié)，同時也讓企業(yè)對UI設(shè)計師的要求更加清晰，除此之外，我們要求UI設(shè)計師也需要多了解業(yè)務(wù)和前端知識，往前多走一步，跟上下游角色更好的銜接，一方面，UI設(shè)計師需要理解業(yè)務(wù)，要能夠有半個產(chǎn)品經(jīng)理的業(yè)務(wù)知識儲備， 如果能站在更高的行業(yè)視角對自己所服務(wù)的業(yè)務(wù)領(lǐng)域（向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進一點）有一定的理解是更好的了，另外一方面，UI設(shè)計師跟自己的下游-前端 開發(fā)工程師也需要很好的銜接上，知道相關(guān)前端技術(shù)概念、基本頁面布局和交互實現(xiàn)邏輯、方法，能夠無縫地將界面和交互設(shè)計翻譯成前端可理解的語言。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
對于產(chǎn)品設(shè)計師來說，在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維，這樣才能輸出差異化的設(shè)計方案。而創(chuàng)意離不開優(yōu)秀作品的靈感啟發(fā)，發(fā)現(xiàn)有意思的設(shè)計細節(jié)也能提高我們的設(shè)計思維。
今天黑馬哥將會繼續(xù)為大家?guī)硪恍﹥?yōu)秀的設(shè)計細節(jié)，我們一起來反思一下，這樣的設(shè)計想法為啥自己沒有想到呢？
分享目錄
一、營造頂部區(qū)域視覺感與情感化
二、主題化配圖增強視覺感
三、彈幕式標(biāo)簽提高關(guān)注度
四、IP 強化底部標(biāo)簽欄圖標(biāo)設(shè)計
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
六、連貫性的插畫突出卡片特色
七、動態(tài)表情化的評價設(shè)計
八、場景化的推薦設(shè)計
九、上下輪播的 Banner 設(shè)計
十、情感化的氛圍營造
一、營造頂部區(qū)域視覺感與情感化
產(chǎn)品頂部區(qū)域的視覺感是吸引用戶的關(guān)鍵，在一些功能單一的產(chǎn)品中，強化視覺表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。
比如麥當(dāng)勞 App 首頁的設(shè)計中，頂部區(qū)域結(jié)合溫馨的場景插畫進行表達，讓你早上打開麥當(dāng)勞就有種心情愉悅感。動態(tài)的太陽微笑畫面給你一天好心情，情感化的設(shè)計不僅增強了視覺感，也帶給用戶美好的產(chǎn)品使用體驗。
二、主題化配圖增強視覺感
封面圖在產(chǎn)品規(guī)范中相對比較難約束，通過構(gòu)圖、比例、固定元素和配圖質(zhì)量等，在一定程度上可以提高感官體驗。如果是在重點突出的內(nèi)容上面，結(jié)合主題化配圖也可以增強視覺感。
之前在使用優(yōu)酷 App 時，當(dāng)時在重點突出熱劇的設(shè)計中，就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫面風(fēng)格和設(shè)計表現(xiàn)形式填充封面，增強了視覺表現(xiàn)力，以此突出熱劇的吸引力。
三、彈幕式標(biāo)簽提高關(guān)注度
在固定的結(jié)構(gòu)布局中如何提高局部內(nèi)容的關(guān)注度，我們需要在不改變結(jié)構(gòu)的前提下進行創(chuàng)意融入。比如動態(tài)畫面、突出視覺感、內(nèi)容特異化等等，而最近發(fā)現(xiàn)彈幕式標(biāo)簽也是一個不錯的選擇。
在體驗優(yōu)酷 App 時，在動漫欄目中針對推薦的熱播新番，想要突出的動漫結(jié)合了彈幕式標(biāo)簽進行強化。動感的節(jié)奏會提高用戶的關(guān)注度，在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上，不失為一種有效的解決方案。
四、IP 強化底部標(biāo)簽欄圖標(biāo)設(shè)計
底部標(biāo)簽欄圖標(biāo)是產(chǎn)品設(shè)計師經(jīng)常發(fā)揮的場景，在一些節(jié)慶主題或者活動中都會定制設(shè)計。
優(yōu)酷 App 在元旦促銷活動期間，就將底部標(biāo)簽欄圖標(biāo)設(shè)計與 IP 形象結(jié)合，默認以促銷主題文字展示，點擊狀態(tài)以 IP 形象顯示。圖標(biāo)與活動相結(jié)合，不僅突出圖標(biāo)視覺表現(xiàn)，也營造了活動氛圍感。
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
對于靠內(nèi)容吸引用戶參與度的產(chǎn)品來說，提高用戶發(fā)布動態(tài)的意愿度至關(guān)重要，突出動態(tài)發(fā)布的吸引力也能起到促進作用。
會玩 App 在動態(tài)發(fā)布的引導(dǎo)設(shè)計中給出了不錯的思路，未發(fā)布動態(tài)時會以形象化的空狀態(tài)設(shè)計進行引導(dǎo)。動態(tài)發(fā)布的按鈕旁以俏皮可愛的形象進行引導(dǎo)設(shè)計，提高了按鈕的吸引力，讓用戶有種參與的沖動。情感化設(shè)計的引導(dǎo)不僅可以增強感官體驗，也更容易攻破用戶的防備心理。
六、連貫性的插畫突出卡片特色
卡片式設(shè)計已經(jīng)成為主流的產(chǎn)品設(shè)計趨勢，信息的歸納感可以提高識別效率。探索卡片設(shè)計的表現(xiàn)特色尤為重要，重點在于卡片造型和內(nèi)部視覺表現(xiàn)力的發(fā)揮層面。
麥當(dāng)勞 App 在主內(nèi)容的卡片設(shè)計上運用了配送場景插畫，連貫性的插畫突出了卡片特色。插畫場景結(jié)合了品牌圖形，增強了麥當(dāng)勞的品牌曝光度；白天和晚上還以不同配色風(fēng)格和細節(jié)進行差異表現(xiàn)，無論是想法還是設(shè)計細節(jié)都非常不錯，是一個挺有創(chuàng)意的案例表現(xiàn)。
七、動態(tài)表情化的評價設(shè)計
用戶評價可以反饋服務(wù)的質(zhì)量，進而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評價的積極性，需要產(chǎn)品設(shè)計師多多探索啦！
最近在使用順豐速運小程序時，完成快遞業(yè)務(wù)之后進行評價，表情化的星級評價非常有意思。不同等級以不同的表情呈現(xiàn)，動態(tài)表達非常形象生動，讓人不由的挨個體驗。動態(tài)表情的形式提高了評價的關(guān)注度，情感化的表達讓用戶更愿意參與評價，提高了評價的體驗度。
八、場景化的推薦設(shè)計
針對電商類產(chǎn)品來說，商品/店鋪推薦模塊出現(xiàn)頻次較高，吸引用戶關(guān)注度自然成為了設(shè)計的首要目標(biāo)。
在體驗 Mars App 時，在生活超市推薦的設(shè)計中，模擬了便利店的場景形象。真實感的場景表達帶給用戶親切自然的購物體驗，同時也提高了用戶對于該模塊的關(guān)注度。
九、上下輪播的 Banner 設(shè)計
輪播 Banner 圖算是產(chǎn)品設(shè)計中最常見的模塊，在移動端的設(shè)計中通常左右輪播為主，最近體驗到上下輪播的案例，打破常規(guī)也不失為一種新的設(shè)計思路。
在 Mars App 的首頁 Banner 圖以上下輪播進行交互，左側(cè)固定展示定位城市的天氣等信息，提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上，帶給用戶沉浸式的感官體驗。
十、情感化的氛圍營造
情感化的設(shè)計可以讓產(chǎn)品更有溫度，增加用戶對產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進行表達是相對比較普遍的形式，會在產(chǎn)品主題和視覺區(qū)域進行氛圍營造。
在清明節(jié)期間體驗飛豬旅行 App 時，頂部區(qū)域以踏春的場景營造氛圍感，還在搜索區(qū)域以青團（青團是江南人家在清明節(jié)吃的一道傳統(tǒng)點心）替代搜索按鈕。情感化的設(shè)計營造不僅體現(xiàn)了產(chǎn)品的溫度，也帶給用戶對于節(jié)日的場景體驗。
小結(jié)
禁錮我們思維的不是我們的技術(shù)，而是我們的眼界和設(shè)計感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計并總結(jié)和轉(zhuǎn)化，才能讓我們打開禁錮的思維，在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計解決方案。
本文對于設(shè)計的理解闡述屬于個人見解，不足之處歡迎大家留言補充，我們互相進步。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
如果說設(shè)計思維是設(shè)計師做設(shè)計的基礎(chǔ)，那么用戶思維就是你發(fā)現(xiàn)和解決問題的能力，到底什么是用戶思維？有沒有一些具體詳細的解釋讓我們了解它呢？請看分享。
用戶思維-環(huán)境
說到用戶思維第一個必須是用戶環(huán)境，環(huán)境分為設(shè)計師的設(shè)計環(huán)境，以及用戶使用你的產(chǎn)品環(huán)境，以及物理環(huán)境，是不是有刮風(fēng)、下雨的惡劣天氣。
1.你的設(shè)計環(huán)境
▲上圖是大多數(shù)設(shè)計師平時工作環(huán)境，每天早上我們帶著一杯星巴克，用著蘋果電腦，打開iMAC做著設(shè)計，效果圖每張圖片都精挑細選，我們也理所當(dāng)然的以為我們的用戶也和我們一樣，大家都是用的蘋果電腦，用的蘋果手機？
2.你心中用戶的環(huán)境
▲很多設(shè)計師作品集里面喜歡放用戶畫像，我們理想的用戶畫像都像上圖一樣，用戶都是白領(lǐng)，聰明學(xué)歷高，能很好的看明白你的設(shè)計，也會使用。就像我之前做支付寶，也曾以為用戶都是如上圖所示，其實不是。很多時候用戶的場景和我們想象中相差甚遠。
3.用戶實際的環(huán)境
大家都是每天地鐵里面，在沒有wifi和4G的公交，地鐵里。也都是用的大屏設(shè)計，各種安卓手機。
▲舉個例子，這個「放大鏡」，做設(shè)計是人都知道是代表「搜索」但是在我們走訪線下實際場景時候，下沉到三四線城市的時候，很多時候人們并不認識。
▲三四線城市用戶就覺得這個像「平底鍋」，不知道是什么意思，這種情況不在少數(shù)。
▲家里有一臺臺式電腦給父母用，有一次打電話給我說，有個流氓軟件經(jīng)常彈窗，我教他們?nèi)ノ业碾娔X，找到「設(shè)備管理器」卸載掉即可，結(jié)果，父母問什么是「設(shè)備管理器」？
所以，你會發(fā)現(xiàn)，用戶其實和我們心目中想象的相差甚遠。我們覺得很基礎(chǔ)的互聯(lián)網(wǎng)知識，在他們那里可能會很復(fù)雜。
4.用戶設(shè)備環(huán)境
機型尺寸：安卓機的機型遠遠比我們想象的要多，各種超大屏，國內(nèi)廠商各種千奇百怪的屏幕，這些做設(shè)計都需要考慮。
操作系統(tǒng)：不同的操作系統(tǒng)，有華為系統(tǒng)，小米系統(tǒng)，魅族以及各種第三方定制的系統(tǒng)，這些系統(tǒng)上呈現(xiàn)效果，都是需要在設(shè)計時候需要去考慮的。
手機分辨率：安卓和蘋果屏幕各種大小，和主流的分辨率，設(shè)計時候如何適配，才能很好滿足主流用戶的體驗，也都需要設(shè)計師提前去規(guī)劃。
5.用戶物理環(huán)境
室內(nèi)環(huán)境：用戶在室內(nèi)使用我們產(chǎn)品時候，是不是應(yīng)該考慮如果是室內(nèi)，光線可以自動的調(diào)節(jié)。比如蘋果的系統(tǒng)，會根據(jù)用戶室內(nèi)室外的光線，調(diào)整亮度。
室外環(huán)境：用戶在陽光下使用，那么亮度變化，陽光下字體識別度等等，都應(yīng)該考慮進去。比如白天和晚上使用蘋果電腦時候的場景，是否有不同，比如iOS系統(tǒng)的設(shè)計，也是重復(fù)考慮用戶實際用戶場景。
網(wǎng)絡(luò)環(huán)境：用戶在有無限和5G情況下的體驗，是不是視頻直接播放，減少等待，當(dāng)用戶在地鐵手機網(wǎng)絡(luò)不好時候，視頻是不是支持緩存或者提醒用戶在使用流量。所以在產(chǎn)品設(shè)計時候，重復(fù)需要考慮用戶這種場景。
▲抖音和騰訊視頻，在用戶非wifi情況下，會提醒用戶當(dāng)前網(wǎng)絡(luò)環(huán)境，提示用戶注意流量使用，除了流量提醒，其實包括網(wǎng)絡(luò)加載不出來時候，如何設(shè)計產(chǎn)品策略都是需要設(shè)計時候考慮的。
噪音和隱私：比如在公共場合噪音大的時候，產(chǎn)品體驗該怎么優(yōu)化，有木有可能聲音自動調(diào)整大，比如微信當(dāng)你外面很吵時候，直接把語音放耳邊，就從外放變成內(nèi)放了。
▲比如支付寶理財頁面，資產(chǎn)和收益顯示可以隱藏金額，保護用戶隱私情況。以及支付寶在系統(tǒng)后臺時候，可以隱藏頁面。
總結(jié)下，我們平時設(shè)計中提到的用戶思維，其中關(guān)于環(huán)境的考慮就包括這些：
用戶實際環(huán)境
機型尺寸/2.操作系統(tǒng)/3.屏幕分辨率
用戶物理環(huán)境
1.室內(nèi)環(huán)境/2.室外環(huán)境/3/網(wǎng)絡(luò)環(huán)境/4.噪音和隱私
該怎么去做？
1.一部蘋果一部安卓機
之前在淘寶天貓時候，有些領(lǐng)導(dǎo)層會要求，必須使用安卓機作為主機，因為只有你去體驗安卓機，你才能發(fā)現(xiàn)頁面和產(chǎn)品有多少問題，蘋果本身的系統(tǒng)設(shè)計比較好，問題會比較少，但安卓系統(tǒng)沒有那么穩(wěn)定，容易出BUG；所以用安卓機能發(fā)現(xiàn)產(chǎn)品更多問題，同時也能讓我們更關(guān)注到真實用戶的感受。
2.換位思考將心比心
簡單來說就是做設(shè)計要有同理心，懂得如何去“換位思考，將心比心”。要學(xué)會用普通用戶視角去審視我們的產(chǎn)品問題，用理解的心態(tài)去理解用戶情緒；從用戶的角度看待問題，進而增加更多看待問題的角度，找到更多設(shè)計的空間，最后達到解決問題的目的。
之前支付寶時候，提倡管理層要每年去傾聽用戶聲音100小時，老板們需要每月抽時間去當(dāng)「客服」，看看用戶實際用我們的產(chǎn)品，有哪些難用的地方，從而做到真正從產(chǎn)品上解決用戶問題。
用戶思維-場景
1.理解用戶從哪里來要到哪里去
去過迪士尼的朋友都知道，人很多，那么如何讓這么多人，有效的去體驗更多的項目？就必須根據(jù)場景來設(shè)計，用戶從門口進來，去往哪里，每個項目的設(shè)計環(huán)節(jié)都需要思考清楚。
場景是從哪里來到哪里去：從一個場景到另外一個場景。我記得之前玩過一個迪士尼項目加勒比海盜，里面就把每個環(huán)節(jié)設(shè)計的很符合整體場景。
▲從入口，到航行過程中，到大海里大戰(zhàn)，以及故事的高潮，到最后的收尾，都是從一個時間到另外一個時間，就像在電影中親身經(jīng)歷。其實我們做設(shè)計又何嘗不是。用戶從一個入口，到最終成交轉(zhuǎn)化整個鏈路。
所以場景思維很重要就是關(guān)注用戶，每個鏈路的體驗環(huán)節(jié)，如何去發(fā)現(xiàn)其中問題，找到設(shè)計撬動點。
2.場景是帶時間維度的
時間維度很好理解，是用戶在完成任務(wù)整個過程中的行為，常見的有前，中，后。我們還是以案例來分析：
買之前：
▲認知：用戶打開支付寶想買理財，但他很可能從來沒有買過理財產(chǎn)品，那么第一步他可能會去了解產(chǎn)品，了解里面的金融術(shù)語，比如七日年化，收益率等等。那么我們在設(shè)計時候，就要去思考，如何降低用戶的認知，如何用一些淺顯易懂的文案讓用戶理解理財。
▲搜索：用戶通過第一步了解了各個理財特點，鎖定要買基金產(chǎn)品，然后這個過程中，他會去對比每只基金的收益情況，去尋找適合他的產(chǎn)品。
買之中：
▲判斷：用戶終于發(fā)現(xiàn)了一個比較符合他心中預(yù)期的產(chǎn)品，然后會去比較這產(chǎn)品的優(yōu)缺點，比如它最后想選擇，收益在6-8%的一只產(chǎn)品，然后會去思考到底買那一只合適。
▲下單：最后用戶選擇了這款收益為6%的產(chǎn)品，然后進行交易。
買之后：
▲查看：最后用戶購買成功了，購買后，他就會每天來看他這只產(chǎn)品的收益情況，每天的收益，每周收益，以及什么時候賣出去。
▲了解了用戶的購買狀態(tài)，以及場景的時間維度，我們就可以去觀察這些鏈路，去尋找一些設(shè)計線索，去發(fā)現(xiàn)問題解決問題，場景思維也能幫我們設(shè)計更好的決策。其實這個思維在電商中也同樣適用。
買之前：
▲認知：雙11快到了，你在家門口地鐵，公交或者微博廣告里面，看見了雙11的一個產(chǎn)品廣告。其中一個商品吸引了你。
▲搜索：然后你打開淘寶APP，搜索這款產(chǎn)品，通過搜索的入口，進入到了店鋪頁面。或者你通過外面的廣告頁面點擊到了商品店鋪頁面。
買之中：
▲判斷：你通過店鋪頁面，看見這個商品正在直播講解，你希望查看真實的商品情況，于是點進去，發(fā)現(xiàn)講解的內(nèi)容能讓你更好的了解了此商品，你決定去商品詳情頁準(zhǔn)備購買。
▲下單：后面你決定購買，直接淘寶下單付款。
買之后：
▲查看：買完后，你很想用上它，于是你開始查看物流，同時也在擔(dān)心如果質(zhì)量不好，你要如何發(fā)起七天無理由退款。
以上就是我們說的用戶思維里面的場景思維，我們需要了解用戶從哪里來到哪里去，同時還需要了解用戶購買前，購買中，購買后的心理變化，了解這個過程中的鏈路問題進行設(shè)計優(yōu)化。
最后
今天這篇分享的用戶思維，只是一個基礎(chǔ)框架，讓我們能利用同理心，了解用戶的行為特點，提升我們的用戶視角，發(fā)現(xiàn)更多的設(shè)計問題，進而解決問題，成為一個真正解決問題的設(shè)計師。
作者：我們的設(shè)計日記
鏈接：https://www.zcool.com.cn/article/ZMTI2MzA4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
01. 按鈕設(shè)計強弱表現(xiàn)
在整個產(chǎn)品設(shè)計中我們要根據(jù)信息傳遞的優(yōu)先級對按鈕設(shè)計進行主次區(qū)分，設(shè)計表達要有強弱差異。按鈕設(shè)計可以通過大小、填充、描邊、色相、飽和度等的不同來進行強弱差異，不同強弱的差異表現(xiàn)出按鈕的等級：行動觸發(fā)、主要、次要、輔助、禁用等。
02. 圓角設(shè)置要合理
對于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對較少，會顯得按鈕不方不圓的，設(shè)計表現(xiàn)顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通常控制在 1/4H（高度值的四分之一）以內(nèi)（僅為個人參考，并非絕對值）。
03. 投影設(shè)置要用對色彩關(guān)系
給一個有彩色系按鈕設(shè)置投影時，選擇無彩色系（比如黑色）也能達到效果，只是為了得到更好的視覺效果，提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會顯得更加干凈清爽。
04. 投影的使用勿過度泛濫
雖然投影的運用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用。比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
05. 給按鈕文字一點呼吸感
按鈕文字和邊框的設(shè)計要預(yù)留一定的留白，不要做“舍不得”的設(shè)計，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負空間獲取經(jīng)驗，看看文字大小和負空間之間是否存在某種比例關(guān)系。找到這個比例關(guān)系運用到按鈕設(shè)計中，也許會讓你的設(shè)計顯得更加成熟穩(wěn)重。
06. 按鈕設(shè)計別讓用戶思考
按鈕的存在是為了引導(dǎo)用戶進行引導(dǎo)式操作，而不是讓用戶對其產(chǎn)生困惑。按鈕設(shè)計別讓用戶思考這是啥，是否可以點擊，需要簡潔明了的對此操作進行指引。用戶已經(jīng)養(yǎng)成對按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶就會產(chǎn)生疑惑，影響使用體驗。
07. 樣式表達的一致性
當(dāng)設(shè)計元素規(guī)范統(tǒng)一時，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們在設(shè)計按鈕的時候要注意樣式表達的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會使得我們的設(shè)計可用性更強。
08. 箭頭運用不是字符輸入
一些初入職場的設(shè)計師會偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來進行設(shè)計，控制好箭頭的粗細和文字筆畫的粗細值接近，這樣顯得更有細節(jié)和態(tài)度。
09. 按鈕設(shè)計主次分明
通過信息對比才能形成主次之分，按鈕設(shè)計需要在風(fēng)格上進行區(qū)分，達到層次結(jié)構(gòu)的視覺提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進行操作。
10. 按鈕設(shè)計不要讓用戶誤解
在整個項目設(shè)計規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進行誤判。在確定好按鈕樣式特征之后，不要在其它場景運用其樣式特征或者類似的風(fēng)格特征，這樣會讓用戶產(chǎn)生錯誤的認知，因而進行無用的操作。
11. 按鈕文本表達要言簡意賅
在進行按鈕文本思考的時候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達言簡意賅，只要能夠準(zhǔn)確傳達信息識別度即可。有時候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強。
12. 按鈕文本設(shè)置切勿換行
單行文字的可讀性更高，如果出現(xiàn)換行就會降低可讀性。我們在設(shè)計按鈕的時候，確保文本內(nèi)容在一行之內(nèi)顯示，如果設(shè)計空間不足要考慮文本內(nèi)容的精簡。
13. 特殊場景要靈活轉(zhuǎn)變
底部按鈕的運用并非固定不變，不同機型或者特殊場景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類型的機型，由于底部需要預(yù)留主頁控制器的位置，所以在設(shè)計按鈕的時候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗。
14. 按鈕大小要便于點擊
按鈕需要方便用戶進行點擊操作，如果用戶點擊失敗或者誤點到周邊元素，就會帶給用戶不友好的體驗。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實現(xiàn)出來的按鈕交互熱區(qū)都會滿足點擊需求。
如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點擊區(qū)域要求。
15. 同屬板塊按鈕大小一致
在同屬板塊內(nèi)的按鈕設(shè)計，我們可以通過按鈕的強弱來體現(xiàn)層級關(guān)系，不要讓按鈕大小不一，這樣視覺平衡會受到影響。
16. 按鈕設(shè)計考慮文本最大值
稍微注意細節(jié)的設(shè)計師也不會讓文本的長度超過按鈕寬度，這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的，幾個字即可表達的意思卻使用了過多修飾詞。在進行按鈕文本思考的時候，要根據(jù)最佳的視覺效果設(shè)定一個最大值，不要任其無限制發(fā)揮，這樣會使得最終的視覺效果大打折扣，甚至影響用戶感官體驗。
17. 保持按鈕可讀性
按鈕設(shè)計需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶可以一目了然的發(fā)現(xiàn)它。現(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運用，需要考慮大多數(shù)背景下的適配。在進行色彩選擇的時候，始終保持按鈕與背景的高對比度和可讀性。
18. 按鈕去文本是否合理
關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識別性和準(zhǔn)確性，雖然純圖標(biāo)顯得設(shè)計簡潔大方，但是需要考慮圖形是否可以準(zhǔn)確的表達其含義，不會讓用戶出現(xiàn)誤解或者錯誤的認知。所以，按鈕去文本需要根據(jù)文案代表的含義來判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡潔的設(shè)計表達效果更佳。
19. 正確判斷按鈕顏色選擇
色彩在設(shè)計中是最直觀的體現(xiàn)，不同的顏色會傳遞不同的性格，帶給用戶認知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結(jié)合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會選擇輔助色來表達，紅色或者橙色多為行動刺激作用，不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用、失效等屬性，需要酌情選擇。
20. 按鈕位置結(jié)合用戶體驗
引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設(shè)計師們的爭議。比如 Windows 系統(tǒng)習(xí)慣將確認按鈕放在左邊，而蘋果系統(tǒng)卻選擇了放在右邊，用戶運用系統(tǒng)的習(xí)慣會影響其行為的適應(yīng)度。不過要是在移動端個人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊，更有利于用戶點擊（特殊人群這里需要除外）。
有時候為了防止用戶誤操作，我們會將確認操作的按鈕放在左邊，通過助力設(shè)計讓用戶再次確認。所以，一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣，另一方面也要結(jié)合用戶習(xí)慣，將按鈕放在最合適的位置，便于用戶操作。
小結(jié)
作為設(shè)計師來說，對每一個細小的元素進行深入思考和總結(jié)，才能讓我們設(shè)計出更好的解決方案。一枚小小的按鈕設(shè)計，其背后也有很多需要探索的東西，本文為大家總結(jié)了 20 條經(jīng)驗，相信還有更多值得梳理的細節(jié)，期待更多設(shè)計伙伴去挖掘。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
作為產(chǎn)品總監(jiān)，你一定明白，軟件產(chǎn)品成功的關(guān)鍵在于用戶體驗，而UI設(shè)計正是塑造用戶體驗的核心。簡單來說，UI設(shè)計就是用戶界面的設(shè)計，它決定了用戶如何與你的產(chǎn)品互動，就像產(chǎn)品的“顏值”和“內(nèi)涵”，直接影響用戶的第一印象和使用感受。UI設(shè)計不僅僅是讓界面好看，更重要的是好用。 它需要平衡視覺美感與功能實用性，讓用戶在使用過程中感到舒適、高效、愉悅。
如何提高軟件產(chǎn)品中的UI設(shè)計水準(zhǔn)？ 以下是一些建議：
關(guān)于設(shè)計思維你了解多少？
設(shè)計思維模型對于互聯(lián)人來說非常重要，經(jīng)常我們在評價一個候選人時候會說，這個同學(xué)系統(tǒng)思考差了點，或者說用戶和商業(yè)思維不夠。那么到底什么是系統(tǒng)思考，設(shè)計師該如何學(xué)會系統(tǒng)思考，系統(tǒng)思考到底能幫助我們在做設(shè)計時候有什么幫助，今天希望我的這個分享能讓你了解什么是系統(tǒng)思考，以及它的思考模型是什么。
設(shè)計做久了你會發(fā)現(xiàn)離不開流程和思維，之前支付寶一位大佬總結(jié)下來叫“左手藝術(shù)，右手科學(xué)”，藝術(shù)大家都明白，設(shè)計師是感性動物，對于美的追求是大家都是擅長的也非常有發(fā)言權(quán)，那么科學(xué)指的是我們需要通過科學(xué)的方法流程，系統(tǒng)的思考問題方式，讓設(shè)計不止好看，同時也應(yīng)該符合用戶，商業(yè)訴求，滿足好這3者的平衡點。
所以設(shè)計師，除了關(guān)注「左手」藝術(shù)的部分，同時也需要關(guān)注「右手」科學(xué)的部分。
設(shè)計思維模型不止是一個單一的思維模型，它包含三種思維模型，設(shè)計思維，用戶思維，產(chǎn)品思維。今天這篇文章，我們先來了解第一個思維，設(shè)計思維到底是什么，我們該如何提升設(shè)計師的設(shè)計思維。
第一個設(shè)計思維也是最基礎(chǔ)的，就是作為設(shè)計師，我們必須了解各大平臺的設(shè)計規(guī)范，這是做任何設(shè)計的基礎(chǔ)，如果你了解你負責(zé)的這個平臺規(guī)則，那么你的設(shè)計就無法邁出第一步，所以對于剛做設(shè)計不久的同學(xué)，基礎(chǔ)思維規(guī)范需要去死記硬背背下來，沒有這個基礎(chǔ)后面都是無用功。
常用的設(shè)計規(guī)范，比如蘋果的設(shè)計規(guī)范，里面詳細講述了，常用的蘋果導(dǎo)航欄高度是多少，蘋果的表格視圖高度多大，頁面中常用的設(shè)計字體字號多少，如何去適配不同分辨率，這些基礎(chǔ)的設(shè)計原則，都統(tǒng)稱為設(shè)計思維。
谷歌的material規(guī)范，也是設(shè)計師必須了解的規(guī)范，特別是需要了解它在系統(tǒng)層面和iOS的差異化。
設(shè)計思維很重要一點，就是要了解基礎(chǔ)的審美，以及用戶心理學(xué)，其中排版運用比較多的格式塔原理，是做設(shè)計排版的基礎(chǔ)。
相似性原則：我們會潛意識把更緊密的事物歸屬一組。
相似性原則運用：淘寶網(wǎng)導(dǎo)航菜單就是運用這種原則，根據(jù)產(chǎn)品類別一致，進行同類分類，這個就是運用的格式塔緊密設(shè)計原則。
封閉性原則：視覺系統(tǒng)自動嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片。
封閉性原則運用：我們會自動將這些不完整的圖形在腦海中封閉起來，形成一個整體圖形。如圖中海報，雖然文字被遮擋了一部分，或者被一些圖形分割了，但是我們腦海中還是會自動腦補出設(shè)計畫面。
連續(xù)性原則：我們的視覺感知系統(tǒng)傾向于連續(xù)性，視覺系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。
連續(xù)性原則運用：Pinterest和ins雖然卡片被下面截斷了，但是我們還是會認為它和下面內(nèi)容是一組的。
焦點原則：一個一面只有一個核心，一個眼睛，引導(dǎo)用戶去關(guān)注你想表達的重點。
焦點原則運用：少即是多，蘋果的很多產(chǎn)品就是運用一個焦點，做到畫龍點睛的作業(yè)。
地面原則：我們的大腦將視覺區(qū)域分為主體和背景，主體包括一個場景中占據(jù)注意力的元素，其余都為背景。
地面原則運用：如上圖案例中，我們視覺會自動將紅色，綠色，藍色當(dāng)做背景，頁面的幾何圖形會當(dāng)為主體，用戶的注意力也在上面，在平時做設(shè)計時候需要去營造這種空間和層次感。
格式塔是設(shè)計很重要基礎(chǔ)之一，來源于20世紀(jì)的德國，也是作為設(shè)計師必須掌握的設(shè)計原則，也是你做設(shè)計的第一個需要掌握的設(shè)計基礎(chǔ)。
很多同學(xué)剛做設(shè)計，很容易在頁面中為了體現(xiàn)自己掌握的某種技法，而做過了，或者設(shè)計的頁面太偏向于個人喜好。這是不對的，我們的設(shè)計最終一定要是用戶使用的，否則再漂亮華麗的設(shè)計都會是曇花一現(xiàn)。
Path的設(shè)計在剛出來時候，簡直是業(yè)內(nèi)交互和視覺標(biāo)桿性產(chǎn)品，創(chuàng)新的交互細節(jié)，精致的頁面表現(xiàn)。都很完美，但是最終也逃不過曇花不現(xiàn)，很大部分原因是產(chǎn)品定位不準(zhǔn)，商業(yè)思考不夠，沒有很好解決好用戶訴求，最終導(dǎo)致失敗。所以在一個成熟的設(shè)計中，設(shè)計好用比好看更重要，我們要做的就是在這個過程中不斷尋找合適的平衡點。
當(dāng)年Facebook 出品的paper這款產(chǎn)品，也是業(yè)內(nèi)關(guān)注度極高，把手勢運用到了極致。但最后也逃不過這種命運，幾乎移動市場上，沒有一個產(chǎn)品是因為好看而活下來的，幾乎最后的那些被人們每天使用的產(chǎn)品，都不是因為好看，而是因為好用，滿足人們痛點需求。
所以，剛工作的設(shè)計師，在設(shè)計思維這個層面，一定要明確我們的每一個頁面，一定是滿足用戶完成任務(wù)為第一優(yōu)先級，其次考慮產(chǎn)品整體和品牌，公司大的設(shè)計方向掛鉤。
工作幾年后，作為一個漂亮的設(shè)計效果圖都不難，很多時候參考下競品，在競品基礎(chǔ)上去找一些差異化創(chuàng)新，甚至做出一個超越競品的設(shè)計效果圖，加上真實動效，好看的圖片，精心排版的文案。這些很多設(shè)計師都可以做到。但是很多設(shè)計師忽略了真正上線后的效果。
上面那個情況，我想大家都經(jīng)歷過，我們效果圖做的很好，干凈的商品圖，標(biāo)簽也很規(guī)范。但是實際上線后就是右邊效果，各種圖上放牛皮癬，以及各種標(biāo)簽。
從業(yè)務(wù)層面來說，沒有錯，因為放牛皮癬可能銷量更好。但是設(shè)計時候，我們是不是可以再往前一步，幫用戶思考如果圖片上房廣告該在展示，如果文案很多時候，標(biāo)簽很復(fù)雜的展示規(guī)則。
優(yōu)秀設(shè)計師不僅僅能做出漂亮設(shè)計圖，同時他們也能對內(nèi)容進行負責(zé)，定義好詳細是內(nèi)容規(guī)范。
之前淘寶的同事，定完一個電商的KV風(fēng)格后，還會出一個詳細的風(fēng)格指南，里面會去定義配色，文案話術(shù)，字?jǐn)?shù)，以及頁面圖片的展示規(guī)范，這些的目的都是對內(nèi)容進行控制。
目前很多設(shè)計師以為做UI就只有扁平化，以為大公司設(shè)計流程都是痛點分析、人群畫像、旅程地圖、用戶調(diào)研、方案呈現(xiàn)。各種一堆推導(dǎo)，然后最終的方案簡簡單單收尾，同時還暴露一個很大問題，風(fēng)格單一。其實UI真的不止是只有扁平化。
手法一：手繪簡筆風(fēng)格
如果你是設(shè)計日記的忠實讀者，你一定看過我之前寫過一些大廠的設(shè)計手法。手繪簡筆就是其中一個風(fēng)格之一，整體風(fēng)格都是手繪線條配以低飽和度顏色，有很多趣味性和故事融合在里面。
Facebook改版之前的風(fēng)格就是運用的這套風(fēng)格，整個頁面也更加年輕和時尚。
手法二：分形藝術(shù)風(fēng)格
利用簡單的幾何圖形，不斷重復(fù)，形成一種新的形式，在一些背景上，一些圖形和海報上經(jīng)常被大量運用，只不過很多設(shè)計師并沒有關(guān)注到這些風(fēng)格。
Uber之前的規(guī)范中，對于全球的各個國家的設(shè)計，都是定義了一個國家的基礎(chǔ)圖形，然后圍繞基礎(chǔ)圖形做出了一系列擴展，這其實就運用到了這個分形重復(fù)設(shè)計手法。
包括我們熟知是蘋果相冊圖標(biāo)，chrome瀏覽器和谷歌相冊圖標(biāo)，都是運用這種手法，一個基礎(chǔ)圖形有規(guī)律的變化。
手法三：柔光風(fēng)格
很多設(shè)計師做東西風(fēng)格比較單一局限，UI發(fā)展到今天其實有很多新的風(fēng)格出現(xiàn)，柔光風(fēng)格就是其中之一，整體風(fēng)格呈現(xiàn)出光的折射特征，顏色層次豐富，有明顯的光的流動感和方向性。在設(shè)計上常用漸變，光斑，流動透明疊加手法，是目前大公司比較主流的一種風(fēng)格。
整個畫面有色彩流動感，背景一般是多色融合，有層次，有流動液體變化。
像這個案例就是色彩上跨度比較大的一個漸變，同時運用白色透明疊加方式處理，細節(jié)簡單細膩。
支付寶之前芝麻信用的風(fēng)格我很喜歡，其中就是運用的這套設(shè)計手法，背景運用這種虛實，光斑作為層次。
在很多可視化場景中也會運用，比如左圖就是運用波浪透明疊加線條作為頁面核心焦點，右邊頁面背景底部運用有層次的漸變和光暈。
手法四 ：紋理風(fēng)格
這個風(fēng)格很多人都有印象，特別是韓國設(shè)計中大量運用了這種設(shè)計，國內(nèi)電商中也會運用比較多，這種風(fēng)格就是紋理風(fēng)格。
淘寶的88會員，我們能看見會員頁面輔助元素這些紋理效果作為背景出現(xiàn)在這些頁面中，能很好將視覺層次豐富起來。
雙11的宣傳海報，也是運用這種幾何紋理作為視覺層次的裝飾。
考拉當(dāng)年的改版設(shè)計，很核心的元素就是這個圓形，以及他的底紋運用效果。
這種底紋效果，很多時候也可以傳遞出品牌的氣質(zhì)，品牌的調(diào)性，左側(cè)音樂播放默認圖片，特別有品質(zhì)感，右側(cè)電商主頁面的背景，清晰感覺，后面線條恰到好處。
當(dāng)然，設(shè)計趨勢并不止我今天說的這些，其實有很多，作為設(shè)計師，設(shè)計思維中很重要的點，就是關(guān)注趨勢，并將他運用到你設(shè)計中去，這是必不可少的一項技能。
從這張經(jīng)典的圖中我們可以看出，設(shè)計只是一個產(chǎn)品其中很小的一部分，很多設(shè)計師以為我們看見的就是一切，其實不是，就像冰山一樣，表現(xiàn)層是最上面的一部分，冰山下面其實有很多的內(nèi)容。
我們來看個案例，比如支付寶：
表現(xiàn)層：
視覺設(shè)計師比較容易關(guān)注的，圓潤的圖標(biāo)，卡片的設(shè)計，扁平的風(fēng)格，2.5D的插畫風(fēng)格，小螞蟻的微動效，支付寶品牌藍色，以及一些卡片的動畫效果。
框架層/結(jié)構(gòu)層：
頂部的4個金剛設(shè)計，也是用戶最常用的4個功能，下面14個宮格導(dǎo)航，代表不同的服務(wù)入口，小螞蟻卡片是通知入口，下面營銷廣告資源位，下面是千人千面或者推薦的服務(wù)卡片等等。理財頁面也是如此，頭部用戶數(shù)錢，下面業(yè)務(wù)入口下面不同理財服務(wù)。
范圍層：
根據(jù)用戶的訴求，中間的宮格導(dǎo)航是動態(tài)變化的，用戶也可以去根據(jù)內(nèi)容需要去定義，小螞蟻通知入口也是如此，一個小喇叭的功能，把所有支付寶的通知都收在這個地方，底部卡片根據(jù)用戶習(xí)慣去展示，比如你經(jīng)常點外賣那么推送你美食卡片，你比較關(guān)注疫情推薦你疫情卡片等等。
戰(zhàn)略層：
顧名思義，那就是公司整體戰(zhàn)略，從支付寶品牌升級更加年輕化，強化生活服務(wù)心智，首頁新增外賣到家、果蔬商超醫(yī)藥等便民生活版塊，并基于智能算法為用戶推薦喜歡的服務(wù)，讓每個用戶擁有更貼心專屬的支付寶。
所以其實所有產(chǎn)品都是圍繞這樣邏輯去設(shè)計，我們設(shè)計師要明白設(shè)計那種趨勢手法，只是一部分。我們要不斷的去了解最頂層，才能理解產(chǎn)品設(shè)計背后的規(guī)則邏輯。
今天分享的是設(shè)計師需要掌握的思維模型，其中關(guān)于設(shè)計思維的，我們再來回顧下，設(shè)計思維包括哪些：
1.了解基礎(chǔ)的設(shè)計規(guī)范；
2.知道常用設(shè)計原則；
3.知道設(shè)計是用來用的，而不是藝術(shù)；
4.知道設(shè)計不止是效果圖，對落地負責(zé)；
5.知道主流設(shè)計趨勢和手法；
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
點線面在用戶界面中的應(yīng)用貌似很少有人寫，我挑業(yè)余時間進行了大量案例的翻閱分析，發(fā)現(xiàn)其中確有規(guī)則。
首篇萬字長文獻給你。
用戶界面的本質(zhì)是資源的互換。
用戶為產(chǎn)品提供時間和注意力，產(chǎn)品為用戶提供單位時間內(nèi)最大價值的內(nèi)容。
當(dāng)視覺設(shè)計師介入其中后，他們的關(guān)系可以用這樣一幅圖表示。
表現(xiàn)層作為用戶體驗五要素的最具象層面，解決的是產(chǎn)品視覺效果的呈現(xiàn)問題。視覺設(shè)計師需要借以合理的版式和視覺手段來保障用戶在單位時間內(nèi)獲取最多的內(nèi)容資源，即實現(xiàn)信息的高效獲取。
信息的高效獲取來自合理的視覺引導(dǎo)（信息閱讀的優(yōu)先級安排）。我們一直在說的層次清晰、低信噪比、沉浸感等視覺體驗在本質(zhì)上其實都屬于合理的視覺引導(dǎo)。
借以實現(xiàn)的手段包括我們熟知的卡片、留白、配色、字體層級、圖標(biāo)等等。這些手段龐雜繁多，體系化的建設(shè)必不可少，但是漫長的積累沉淀中很容易被其淹沒，而且每種手段背后又是什么樣的底層邏輯和依據(jù)？
為什么卡片讓頁面層次清晰？為什么面性圖標(biāo)擁有較高的辨識度？為什么步驟條會有橫縱之分？...
而點、線、面解決的就是這些內(nèi)在邏輯問題，在你熟知它們的特性后，絕大多數(shù)的設(shè)計手段都可以被其解釋和串聯(lián)起來，并且讓你的設(shè)計決策和設(shè)計推導(dǎo)更加有據(jù)可依，而不是簡單的“憑感覺”。
如果我們將各種設(shè)計手段比喻為各類武學(xué)外功招式，那么點線面理論就好像吐納內(nèi)功，雖為最基礎(chǔ)的入門心法，但其對內(nèi)息的作用影響著所有招式的發(fā)揮。
點、線、面理論最早由瓦西里·康定斯基提出，他所著的《點、線、面》一書最早曾作為包豪斯學(xué)院的形式課程進行教學(xué)。他將所有藝術(shù)的形式都歸結(jié)于點、線和面三種元素的關(guān)系。
康定斯基對于點、線、面的獨到思想為設(shè)計領(lǐng)域產(chǎn)生了極為深遠的影響。我們目前最熟知運用到它的的一個領(lǐng)域就是平面設(shè)計領(lǐng)域。通過這個理論，平面中所有的元素都可以看作點、線、面三類形態(tài)，并且每類形態(tài)的存在、變化和結(jié)合，都可以為畫面?zhèn)鬟_出不同的樣式和風(fēng)格。
雖然用戶界面設(shè)計和平面設(shè)計分屬于兩個完全不同的設(shè)計行業(yè)，但點、線、面理論是相通的。
點、線、面具有普適性、相對性。前文已經(jīng)講過，點、線、面這三種形態(tài)存在于所有的元素中。不論是哪種元素都可以用點、線、面來表示。并且，點、線、面之間是相對的，并非對元素的純粹定義。
比如一個界面中的面性圖標(biāo)，我們可以將其看作一個點，當(dāng)相對于線性圖標(biāo)時，我們又可以將其看作面。如果這個圖標(biāo)和其他圖標(biāo)一起組成標(biāo)簽欄，那這串圖標(biāo)也可看作線。
下面，我將分為點、線和面三大板塊，來講述每類形態(tài)基于自身維度所擁有的特性，并如何通過存在、變化來在界面中發(fā)揮著各自的作用，實現(xiàn)合理高效的視覺引導(dǎo)。
正文開始。
萬物自一點始。
正如宇宙大爆炸源自一個引力奇點那樣，點是萬物之源，也是所有元素的基礎(chǔ)。點從維度上來說屬于零維，它沒有辦法像線、面那樣延伸，這決定了點本身的向心性和自由性。
康定斯基將點描述為“雄辯與沉默”，這句話的意思就是，當(dāng)點獨立存在于一個畫面中時，它便開始“雄辯”自己的存在，讓自己成為焦點；而當(dāng)它的數(shù)量增加時，點便傾向于“沉默”，并且根據(jù)它的排列方式傾向于對應(yīng)形態(tài)的特性。
當(dāng)一個點獨立存在時，點的向心性協(xié)助它成為視覺焦點。此時點主要起到定位的作用。
以支付寶首頁為例。在以往的界面設(shè)計中，我們往往在每個模塊標(biāo)題旁添加一個小小的短線，而這個小短線便是作為定位點引導(dǎo)用戶迅速注意到標(biāo)題，實現(xiàn)不同內(nèi)容的快速定位。并且作品包裝中也常會用到它。
不過在Complexion Reduction去形式化的浪潮洗禮下，這種方式已成為過去式，現(xiàn)在我們會直接用標(biāo)題本身作為點進行定位。
但是，在其他更多的場景下，僅靠文字其實并不能很好得發(fā)揮點的向心性，尤其是一些信息較多、需要迅速辨識的場景下。這時候，我們通常會引入另一種要素——圖標(biāo)來指代它。
圖標(biāo)本身可以用來表意，而獨立、精致的特性讓它很適合作為點元素來處理。
比如app中的標(biāo)簽欄中的圖標(biāo)就可看作點元素，每個圖標(biāo)以其所具備的向心性幫助我們迅速得聚焦到它所在的位置。列表頁的每個字段前也會加入對應(yīng)含義的圖標(biāo)來幫助用戶迅速錨定當(dāng)前欄目，并且由于圖標(biāo)擁有更高的辨識性，這讓閱讀變得輕快而富有節(jié)奏。
下圖所示為Google日歷中的活動頁表單，當(dāng)我們將字段前的圖標(biāo)去除時，閱讀沒有了強定位元素將會缺失節(jié)奏，信息獲取變得困難和緩慢，影響用戶表單的填寫。
點是自由、精致的，它不會像線那樣有向兩端延伸的特性，這意味著它可以進行各種形式、規(guī)則的排列組合以契合版面。
在這種分布形式下，點通常以圖標(biāo)的形式進行橫向及縱向的排列，并且傾向于線的引導(dǎo)性進行視線引導(dǎo)。
點的橫向排列通常見于標(biāo)簽導(dǎo)航欄、單行的金剛區(qū)入口等。點的縱向排列通常見于列表布局中。由于點本身對用戶注意力的聚焦，點沿著什么方向進行排列時，用戶視線便傾向于朝對應(yīng)的方向移動。
上面所舉的Google日歷就是這樣，單個圖標(biāo)方便定位，而多個線性排布的圖標(biāo)則具備了線的引導(dǎo)性，便于用戶的由上至下得快速瀏覽。ios自帶的音樂app和QQ音樂的歌單也同樣利用了點化線引導(dǎo)瀏覽，只是圖片和阿拉伯?dāng)?shù)字的區(qū)別而已。
在這種分布形式下，點常常橫向排列在界面中（一排內(nèi)通常不超過5個），作為一個個快捷入口存在，形成網(wǎng)格式布局。
比如金剛區(qū)業(yè)務(wù)入口、書籍等類型的布局都屬于網(wǎng)格式。這個布局下的點集合傾向于面元素，界面在這個布局下呈現(xiàn)出富有觀賞性的視覺張力，吸引用戶眼球，而且網(wǎng)格式的布局引導(dǎo)用戶視線均勻遷移，便于視覺區(qū)分。
既然講到這了，不得不提下上面兩種形態(tài)各自所在的版式——網(wǎng)格布局和列表布局。
通常來說，靜態(tài)頁面中的內(nèi)容大致可分為圖、文兩大類。
從形態(tài)上看，文本本身具有線那樣不斷延伸的特點，因此列表的橫向版面更適合長文本的展示。而圖片、圖標(biāo)通常以固定尺寸的img獨立存在，可看作點元素，像上一節(jié)所講的，它既可存在于列表又可存在于網(wǎng)格。
從視覺動線上看，列表布局的動線屬于尼爾森等老前輩所提出的F型瀏覽模式。即用戶首先落點于左側(cè)的定位點，再由左向右進行閱讀，接著再垂直掃視，當(dāng)定位到興趣點后繼續(xù)由左至右得閱讀。這種動線符合人類自然的閱讀模式。
并且在由上至下的視線遷移中，用戶的注意力勢必隨著路徑的拉長而逐步遞減。
而這種遞減效應(yīng)讓列表式布局更適合基于產(chǎn)品及用戶習(xí)慣以某種規(guī)律排序。
郵件訊息以時間進行排序，這是基于用戶查看最新消息的習(xí)慣；電商商品則默認以相關(guān)性、銷量等因素綜合排序（同時買家可以根據(jù)價格、銷量等進行自定義排序），這是基于用戶的購物喜好習(xí)慣；直播平臺以熱度進行排序，這是基于羊群效應(yīng)制造引流點，同時也刺激用戶發(fā)布優(yōu)質(zhì)內(nèi)容。并且在特定的排序規(guī)律下可以引導(dǎo)用戶帶有目的的、更迅速得掃視。
但是如果界面變?yōu)榫W(wǎng)格布局，掃視效率將大打折扣，較高的圖版率也導(dǎo)致文字信息被過度弱化。
如下圖，健身環(huán)大冒險并不屬于外觀型產(chǎn)品，用戶更關(guān)心的是價格、好評等文字信息，當(dāng)其變?yōu)榫W(wǎng)格視圖時，一方面用戶無法根據(jù)排序結(jié)果迅速垂直掃視，另一方面文字信息被重量級的圖片壓制，用戶無法迅速獲取它們。
網(wǎng)格布局通過犧牲寬度來將界面等分為一個個格子，從形態(tài)上直接限制了長文本的存在，這讓它更適合放置一個個獨立的點，比如圖片、圖標(biāo)。而文本則落于底部淪為一介輔助。
從視覺動線上看，網(wǎng)格布局傾向于Z型瀏覽模式。用戶視覺動線通常由左至右、再由上至下得進行，并可以“雨露均沾”得在數(shù)個點上均勻遷移，注意力遞減效應(yīng)不會像列表布局那么強烈。因此，網(wǎng)格布局非常適合進行不同信息的辨識和區(qū)分。
界面中常見的功能業(yè)務(wù)入口、專輯或者電影的布局、單獨店鋪中的商品，它們不需要明顯的排序處理，并且用戶初始行為都是通過圖片、圖標(biāo)進行迅速得辨別區(qū)分，繼而進行交互決策。如果將其列表化處理，不同信息的辨識區(qū)分效率將受到影響。
如下圖，服裝屬于典型的外觀型商品，當(dāng)變?yōu)榱斜硪晥D時，商品之間將難以辨識區(qū)分。
由此，我們大致可以梳理出兩種布局適用情況：
列表：適用于文本為主要展示，或者按照某種規(guī)律排序的信息。
網(wǎng)格：適用于圖片為主要展示，或者沒有排序規(guī)則，需要用戶通過圖片、圖標(biāo)辨識區(qū)分的信息。
當(dāng)然了，這兩種布局并非只能選其一，淘寶、京東這類體量龐大的電商平臺便為了方便用戶習(xí)慣，提供了兩種布局視圖便于用戶隨時切換以降低決策成本。
另外，它常被作為一類豐富畫面層次的手段。當(dāng)點不再按照橫縱方向排列分布時，便可作為圖案被用在特定場景的背景中，以降低背景過平過空的感覺。
比如美食杰封面的加載占位圖就以與產(chǎn)品相關(guān)的各種食材圖標(biāo)隨機得組合為圖案，飽滿的畫面減少了用戶等待時的枯燥無味。而QQ的群發(fā)布功能，在首個卡片背景中便加入了各種學(xué)習(xí)類的圖標(biāo)隨機分布在卡片上，烘托出熱鬧趣味的氛圍，和下面的三個次要功能從卡片背景上迅速拉開層級。
線條是一種簡單、輕盈的存在，可以看作是點受外驅(qū)力作用下的運動軌跡。它從維度上來說屬于一維，不同的外驅(qū)力結(jié)合使得線可以沿著任意方向自由得延伸，從而讓它擁有了高效的引導(dǎo)性、分割性和造型性。
康定斯基在書中以溫度去定義線的情感，他將水平線定義為無限冷能的表現(xiàn)形式，將垂直線定義為無限暖能的表現(xiàn)形式。看似晦澀難懂，但聯(lián)系到現(xiàn)實生活就相對容易理解一點。
現(xiàn)實生活中的水平線通常存在于地平線中，因此給人的感覺是穩(wěn)定、平和，類似非啟動時的“冷”態(tài)；而垂直線常見于那些從基線建造、生長的事物，比如高樓大廈、參天巨木，它們都通過能量來實現(xiàn)垂直方向的高低變化，因此給人的感覺是上升、下落、變化等感覺，類似啟動后的“暖”態(tài)。
而線具備的冷暖態(tài)決定了水平和垂直線發(fā)揮各自作用時所傳達的感受。
線可沿任意方向延伸的特點讓它具備了很強的引導(dǎo)性。界面中最常見的就是跑步、地圖類app中的路線顯示，就是通過線的引導(dǎo)性來顯示起點到終點所行進的軌跡。
如果我們將起點和終點對齊歸于一條線上時，便可以通過降維的方式將其縮減至單個維度。
時間維度可以引申到界面中的時間軸、步驟條、加載條和音視頻中的進度條等，這類維度通常需要加入點元素，通過點的向心性輔助定位。空間維度則引申到滑動頁面時出現(xiàn)的滾動條等。
如上文對溫度的解釋，“暖”態(tài)的垂直線象征變化。當(dāng)我們希望用戶能夠感知到時間的變化，或者流程需要花費較長時間時，垂直線相對來說是個更好的選擇。
比如外賣、快遞的訂單進度，火車的停靠站點時間，timeline，到賬時間等信息，要么需要傳達變化感，要么費時較長，因此適合以象征變化的垂直線來進行引導(dǎo)，給予用戶變化感、產(chǎn)生需要等待的心理預(yù)期。
“冷”態(tài)的水平線象征靜止。當(dāng)我們希望用戶能夠沉浸在這個流程中，感知不到時間的變化，或者流程時間極短時，那就更適合用水平線。
比如airbnb申請成為房東時，會有個需要用戶即時填寫的分頁表單，為了讓用戶沉浸在填寫中，同樣以水平線作為它的進度反饋，降低時間變化感。
比如美團買藥后的審方頁，藥師的審方進度是即時性的，通常只需等待十幾秒即可。水平的靜止感能夠讓用戶產(chǎn)生“當(dāng)前正在發(fā)生”的感覺，避免讓用戶產(chǎn)生需要等待較長時間的心理預(yù)期而離開當(dāng)前頁面。
但是，如果我們將美團審方的進度條改為縱向（去除文案提示），給用戶帶來的感覺也就大不相同。
下文講到的分割性也可以以冷暖態(tài)來解釋。我們希望用戶能夠專心閱讀信息，因此會盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到，也會盡量降低它的明度和長度。
另外，界面中往往也存在著一條無形的線，它同樣也是起著重要的引導(dǎo)作用，只是這類線不僅僅作用于某個特定模塊，它還可以作用于整個界面。這條線通常被稱作 視覺動線。視覺動線在網(wǎng)格與列表那一節(jié)中簡單提了下，只是這部分體系太過龐大，后面有時間我會單獨寫一篇。
很多時候，界面中僅僅以留白進行分隔時，很容易造成信息無法被明確得劃分。這時我們往往需要引入額外的形式進行輔助。比如分割線。
分割線通常運用在模塊內(nèi)部信息的分割，雖簡單粗暴，但并不能應(yīng)付更高層級的模塊分割。而模塊之間的分割通常以面性（分割條）來進行。留白、分割線和分割條三者的分割層級由低到高，通常需要在頁面中結(jié)合使用。
需要注意的是，線面的分割形式需要盡可能得輕量化，一旦擁有了視覺重量很容易成為噪音，我們需要盡量避免信噪比過低對用戶閱讀體驗的破壞。
為了增加頁面的呼吸感，我們很多時候會用留白這種最為輕量的分割方式代替所有的線、面。
這類大留白的特點往往與Complexion Reduction風(fēng)格相結(jié)合，視覺上不僅制造一種舒適的簡約感和呼吸感，也減少了頁面中線面分割形成的視覺噪音。
Complexion Reduction最早源自Airbnb、Instagram、Medium等產(chǎn)品的頁面改版，而后被UX設(shè)計師Michael Horton所總結(jié)出的設(shè)計趨勢。蘋果在17年所發(fā)布的ios11同屬于這個風(fēng)格，這類風(fēng)格最突出的三個特征就是大標(biāo)題、面性圖標(biāo)和克制用色。
但是，這種去形式化的分割方法并非適用于全部頁面，一般只有在頁面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁面才適合使用。
比如ikea和airbnb的首頁，它們并不像京東、支付寶有龐大的體量和業(yè)務(wù)需求，所以很適合全留白的方式。這讓它們的首頁看上去非常干凈清爽，富有呼吸感。
不過，在其他字段信息繁多的界面中，分割線依然是一種高效的分割方式。
我們可以看到，IKEA和airbnb的詳情頁依舊選擇了分割線的分割方式以應(yīng)對繁多的字段信息，避免全留白帶來的層級混亂。
線本身可以沿任意方向自由延伸，形成一條曲線、折線、螺旋線等等。而當(dāng)線的首尾相連時，便可以勾畫出面。
但是，線的閉合性所形成的面僅僅是一具沒有量感的空殼。但同時線條本身輕盈的特性讓其更加輕量、通透，因此對于一些辨識要求較低、或者需要被弱化的元素來說往往是個不錯的選擇。
界面中最常見的運用就是幽靈按鈕和線性圖標(biāo)。
相比于面性按鈕和圖標(biāo)，量感的缺失讓其無法在辨識性上勝出，但是在其它地方也各有所長。
幽靈按鈕常用于一些次按鈕、未選中態(tài)以及tag，線性圖標(biāo)常被用于一些次要功能、未選中態(tài)以及裝飾。
當(dāng)然，線面也可以根據(jù)產(chǎn)品自身需求作類別區(qū)分。
比如支付寶和美團這些產(chǎn)品，工具型圖標(biāo)全部線性，而業(yè)務(wù)型圖標(biāo)全部面性。并且線性圖標(biāo)得益于背景主色色塊的反白加成讓它們并不會被過度弱化。
虛線是點化線的最簡易的表現(xiàn)。
但是因為虛線本身斷開的地方太多了，并不適合用于常規(guī)信息的分割，它通常適用于一些特定的場景。
比如一些產(chǎn)品中的票券、賬單這類特殊場景中，通常會加入虛線進行信息的分割，就是為了映射模擬現(xiàn)實世界中便于撕開的撕票線來增加代入感，減少認知負荷。
虛線另一個特性是不可見性。
這個特性最早可追溯至建筑、機械等行業(yè)的制圖規(guī)范中——以同等點元素所構(gòu)成的虛線代表對象視覺盲區(qū)中的棱邊線及輪廓線。
一些漫畫或動畫作品中當(dāng)一個東西突然不翼而飛時，往往會留下一個虛線的輪廓。
這種有意思的設(shè)定也被設(shè)計師引用到了用戶界面中。
比如當(dāng)我們想讓用戶去上傳一個圖片時，往往會采取一個虛線的矩形結(jié)合按鈕進行引導(dǎo)，便是為了告訴用戶：嗨這塊地還是空的，快來加點料！
比如Pinterest、dribbble以及AntD的圖片類upload組件，都采用了這種設(shè)定。
另外，這種形式也適用于空狀態(tài)的表示，比如dropbox。
面可以看作是線的運動軌跡，可以由一個閉合的線生成，也可以由點、線強化自身而來。
康定斯基在書中曾講到，線的強化加粗，與點不斷增大面臨同樣的問題，即與面之間的臨界。
這句話的意思就是，當(dāng)點、線通過強化自身的面積、寬度后，和面的界限開始模糊，從而具備了面本身的性質(zhì)。
比如ios11中讓人印象深刻的大標(biāo)題，便是由通過增加每個點的面積（增加每個字的字號），以及筆畫的線寬（增加每個字的字重）來趨向于面，以營造出飽滿、沖擊的視覺張力。
面二維的屬性讓它可以向四周無限得擴張自己的領(lǐng)土，這個優(yōu)勢讓面可以輕松承載各類信息，并且也讓它具備了絕佳的視覺張力。
在一個點線面同時存在的畫面中，人眼優(yōu)先注意到的必定是擁有絕對視覺張力的面元素。這意味著面擁有著遠勝于前兩者的辨識性，或者說，在一部各類元素參演的戲劇里，面更擅長主角。
比如在一個放置了文字的界面中，我們希望其中一段比較重要的文字完全和其他文字區(qū)分開，也就意味著這段文字需要進行對比。
我們可以對這段文字加粗、加入顏色等等，這的確能做出一些明顯的變化。但是僅僅是對字體本身的強化，一旦界面需要劃分層級，就會顯得很“平”，造成信息關(guān)系的曖昧。
不過，當(dāng)加入一層淡淡的色塊充當(dāng)文字背景后，便可以制造出極為明朗的層次關(guān)系。一方面，這段文字神奇得與其他信息迅速孤立開來，另外，有面作為“靠山”讓它變得稍微與眾不同，并且相比其他文字能被更快得注意到。
當(dāng)然，如果你覺得它很重要，那你可以增強文字與背景的顏色對比，給面加入各種各樣的顏色。
而當(dāng)顏色對信息可讀性造成影響時，為保證信息的順利辨識，我們不得不對文字進行反色處理，以此作為視覺落點來強制用戶迅速注意到它。這就是我們熟知的反白視覺手段。
面的這種強力屬性被用到了界面的方方面面，比如按鈕和圖標(biāo)。
相比前面所講的線性圖標(biāo)，面的辨識性讓面性圖標(biāo)可以更快得被識別。因此，界面中一些重要的業(yè)務(wù)入口通常都以醒目的面性圖標(biāo)存在，并且常以面性圖標(biāo)代表激活、選中時的狀態(tài)，線性圖標(biāo)代表未激活、未選中時的狀態(tài)。
不過線性圖標(biāo)薄弱的辨識性并非完全適合標(biāo)簽欄狀態(tài)的切換。
用戶在選中到當(dāng)前頁時，并不代表其他頁面徹底弱化了，用戶同樣需要關(guān)注其他未選中的頁面。
正因如此，ios11中所有未選中的icon全部由線性更改為了面性。同樣的，國內(nèi)的簡書、天貓等產(chǎn)品也進行了圖標(biāo)的改版以提升其他頁面的點擊率。
對于按鈕，面的辨識性為它的層級使用提供了更多可能。
如下圖，按鈕從樣式上來看大致有六種樣式，深色、淺色、淺灰色、幽靈、文字和圖標(biāo)按鈕，其中面性按鈕就占了一半。相比幽靈、文字和圖標(biāo)按鈕，三種面性按鈕都以面的強辨識性引導(dǎo)用戶迅速注意到它。因此面性按鈕相對對應(yīng)更高的層級。
當(dāng)頁面中存在多個功能按鈕時，就需要以樣式進行主次之分。深色按鈕以強烈的顏色對比制造吸引力，因此常以深色表達層級最高的主按鈕，而次按鈕通常對應(yīng)層級較低的淺色、淺灰色等樣式。
當(dāng)頁面中沒有主次功能之分時，按鈕的樣式通常取決于當(dāng)前的用戶場景及業(yè)務(wù)需求。
比如知乎的答案詳情頁面，答主關(guān)注按鈕是淺灰色樣式，就是為了引導(dǎo)用戶沉浸在內(nèi)容中，避免深色樣式對閱讀造成干擾。而答主個人頁的關(guān)注變?yōu)樯钌瑒t是由于用戶點擊答主頭像的行為來自了解更多的動機，即用戶對其產(chǎn)生了特定興趣，在此場景下使用深色樣式便是為了引導(dǎo)用戶采取社交行為。
另外按鈕圓角的轉(zhuǎn)化也是為了強化信息的聚焦。關(guān)于圓角的內(nèi)容可以去我的前一篇文章《寫給設(shè)計師看的圓角背后的邏輯》，里面有更詳細的講解。
app store同理。商品列表頁的按鈕一致以淺灰色樣式表達，而詳情頁使用了深色。
我們在按鈕樣式的選擇上，務(wù)必需要考慮到當(dāng)前的用戶場景，避免過低的信噪比而影響信息的傳達效率。
比如app store列表頁中，用戶的場景是非特定的瀏覽行為，如果使用深色按鈕將會讓其成為視覺焦點，強制用戶不斷注意到它，致使其成為“噪音”，影響用戶對有效信息的獲取。
面無限延展的屬性讓它可以承載各類信息。包括文字、圖片或視頻元素，異或是元素自由組合所形成的信息單元。
并且我們僅加深界面的背景色，就可以基于面的分割性，通過控制模塊間距實現(xiàn)區(qū)域的劃分。（這里的間距即我們熟知的分割條）
但這種文字墻一般平鋪式的布局并不能更好得反映當(dāng)前模塊所在的層次，或者從用戶認知上說它們傾向于一個層面上。而且直角矩形的四個頂角所形成的四個焦點，也讓用戶的視線傾向于發(fā)散而非聚焦。直到卡片的出現(xiàn)，問題得以順利解決。
卡片在我們生活中隨處可見，信件、名片、便利貼、甚至是我們的手機屏幕，它們從形態(tài)來說都屬于面，并且都充分利用了面的承載性來充當(dāng)一個收納信息的容器或載體。
信件收納來信人的寄語，名片收納對方的個人信息、便利貼收納事項清單、屏幕收納用戶界面。而且它們方便攜帶，我們想要知道更多，打開它即可。
2012年I/O開發(fā)者大會中，隨安卓4.1系統(tǒng)一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。
這種后擬物時代的設(shè)計不僅一改Google以往混亂的信息展示問題，而且熟悉的擬物感收獲了足量用戶的喜愛。初嘗甜頭之后，Google將卡片應(yīng)用到了所有的產(chǎn)品，并且將其作為基礎(chǔ)元素列入了一門偉大的設(shè)計語言中——material design。
你可以在material design中更系統(tǒng)得看到，google通過為界面添加了z軸（海報高度），來擬物映射生活中的一張張卡片。并且通過陰影的濃淡反應(yīng)卡片所在的高度，通過不同的高度實時反映當(dāng)前元素的層級關(guān)系。
而在ios11中，改版后的app store也使用了大量的卡片進行排列組合，形成格外的清晰的頁面層次引導(dǎo)用戶的視覺動線。
相比原本平鋪直敘的信息，卡片式設(shè)計通過以下優(yōu)點讓其風(fēng)靡設(shè)計界——
1.更高效得獲取信息
每張卡片都是一個獨立的面。從面的辨識性上說，獨立和聚焦的特點讓卡片與其他內(nèi)容形成天然的斷層，更易形成視覺焦點。
從面的分割性上說，卡片通過犧牲屏幕空間（四周的塊外距）的方式讓區(qū)域的分割相較分割條更為明確，清晰的層次關(guān)系便于用戶迅速辨識和獲取信息。
比如改版后的支付寶，通過引入圓角卡片來引導(dǎo)用戶更好得留意到下方的各類生活服務(wù)，以實現(xiàn)向生活服務(wù)數(shù)字平臺的轉(zhuǎn)型。
2.更輕量的入口跳轉(zhuǎn)
每個卡片除了承載信息外，都可以作為單獨的入口承載內(nèi)頁的所有信息，并且卡片的屬性讓內(nèi)頁的展示變?yōu)榱苏归_而非跳轉(zhuǎn)。
比如app store點擊卡片后，便以非線性的展開動畫呈現(xiàn)所有內(nèi)頁信息，返回則只需下滑手勢即可，輕量而有趣。
3.更多的交互手勢
卡片獨立的特點讓它可排列也可堆疊，這為頁面帶來了更多的交互方式。
我們可以通過左右滑動（scroll）解鎖橫向更多的空間，也可以左右輕劃（flick）形成類似tinder那樣新的產(chǎn)品機制。
比如知乎的書架引入滑動手勢展示更多內(nèi)容，輕劃手勢切換問題卡片。
4.更舒適的視覺觀感
卡片基于自身獨立的特征讓它成為網(wǎng)格布局的常用載體，富有觀賞性的視覺張力讓頁面更加吸引眼球。
當(dāng)然，卡片并不是通用的，原本可以靠留白或分割線分割的信息，如果為了視覺效果硬是卡片化處理，就會導(dǎo)致閱讀的低效，而且浪費空間。
比如常見的一些feed流，相比卡片，這類同類的信息流更適合以列表來幫助用戶迅速得掃視，并節(jié)省頁面空間。
產(chǎn)品的功能并非完全互相剝離的，很多時候存在包含和平行的關(guān)系。
這兩類關(guān)系分別可以以卡片的嵌套和分割進行處理。前者通過卡片堆砌表達信息的包含關(guān)系，而后者則通過視覺分割所形成的點擊域傳達信息的平行關(guān)系。
比如天貓點評頁中的金香蕉好物推薦，每個卡片承載了商品信息以及點評信息，通過卡片的嵌套表示出兩者的包含關(guān)系。而單條推選理由及入口的引導(dǎo)屬于平行關(guān)系，因此采用了視覺分割來進行劃分。
并且前者跳轉(zhuǎn)的是點評詳情，后者跳轉(zhuǎn)的頁面中包含了所有點評、商品推薦以及我要點評，因此在后者所屬的面中加入了淡淡的一層業(yè)務(wù)主色來強化它的地位。
在支付寶改版后的卡包頁中同樣進行了一次嵌套處理，以更好得容納不同的業(yè)務(wù)并傳達各自所在的層級，并且以尺寸和顏色對比進行業(yè)務(wù)區(qū)分。
京東金融的付費業(yè)務(wù)卡片中存在兩個平行關(guān)系的功能，因此以分割線形式進行了區(qū)域的劃分。
同時，它利用了顏色進行了有效的視覺及情緒引導(dǎo)：黑色背景進行反白處理將其作為一個單獨的視覺落點，強制用戶注意到這里，并且又傳達了付費用戶所尊享的高級感。
自從ios7轉(zhuǎn)型扁平后，線元素在蘋果設(shè)計語言中一直占有重要地位，線自身的纖細、輕盈感可以迅速打造apple獨有的輕量調(diào)性，不僅是按鈕、圖標(biāo)的樣式，字體本身也更加傾向纖細的字重。
但是，這個僵局在ios11發(fā)布的那天被徹底打破。
2017年6月6日，蘋果設(shè)計師喬納森仿佛和線有了隔夜仇一般，從解鎖頁面到原生應(yīng)用中，原本ios10中曾經(jīng)被大量使用的線元素基本全部被面元素取代。
比如鎖屏頁面，所有撥號按鈕全部由幽靈樣式改為了面性樣式，而數(shù)字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識，并且降低了線圈所產(chǎn)生的視覺噪音。
app store中也同樣發(fā)生著形態(tài)的易主。
你可以在下圖中看到，原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。
另外，11代中眾所周知的大標(biāo)題同樣也可以看做化面的傾向（通過增加自身的面積），強烈的視覺張力引導(dǎo)用戶迅速得進行辨識。
另外，所有的數(shù)字全部提至文字的前方，基于用戶由左至右的動線更突出產(chǎn)品自身，以點化線的形式更好得引導(dǎo)用戶進行掃視。
追求極致的蘋果顯然不能容忍tab中未選中態(tài)下出現(xiàn)的線元素，你可以在ios13中看到，線元素得到了徹底的消除，并且顏色一并得到了克制，再次提升了閱讀內(nèi)容的沉浸感。
ios11中的商品詳情頁獲取按鈕也同樣使用了面性，深色的強調(diào)樣式更好得契合了頁面所在的用戶場景，召喚用戶對其感興趣的商品采取點擊行為。
控制中心頁面，基于面元素的承載與分割性，所有的信號類功能獨立收納到了卡片中。
亮度和音量的調(diào)節(jié)則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強了兩者的辨識力，另一方面，根據(jù)菲茨交互定律，面積的增大帶來了更好的點擊體驗。這一點在miui11的控件優(yōu)化中也得到了應(yīng)用。
所有的未選中態(tài)圖標(biāo)也進行了面性處理，大幅提升了10代中未選中頁標(biāo)簽的辨識性。并且每個圖標(biāo)對應(yīng)的文字也進行了加粗。
縱觀ios11中所有形態(tài)的變化，我們可以發(fā)現(xiàn)這次改版的最終目的是：促進內(nèi)容的高效獲取。
順從作為蘋果歷來遵循的設(shè)計法則之一，和包豪斯“形式追隨功能”設(shè)計理念不謀而合。
——設(shè)計永遠只幫助用戶理解內(nèi)容，但永遠不與內(nèi)容競爭。這一點在ios11的這次“改頭換面”中被徹底應(yīng)用及實現(xiàn)，并且對設(shè)計圈影響至今。
點、線、面理論并不像格式塔、尼爾森可用性法則等方法論那樣，為設(shè)計者提供切實可行的具體指導(dǎo)，它更類似一種內(nèi)斂的全局觀，幫助設(shè)計師拋開顏色、質(zhì)感等額外手段，從宏觀的角度以點、線和面的方式將所有的設(shè)計元素抽象化處理，讓原本雜亂無序的萬象有章可循。
最后，以康定斯基的一句話結(jié)尾——
此篇完。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 http://m.gerard.com.cn