做到這三點(diǎn)挑戰(zhàn)，產(chǎn)品經(jīng)理只會(huì)不斷升值
為了避免出現(xiàn)用戶所想看的信息被其他海量信息所淹沒的情況，設(shè)計(jì)師或者產(chǎn)研團(tuán)隊(duì)需要思考如何做好信息收納，讓擁有厚重信息和功能的產(chǎn)品變得簡單清爽且易用。這篇文章里，作者就梳理了如何利用好容器類UI組件達(dá)成這一目標(biāo)的策略，一起來看。
如果你問用戶他需要什么，他的回答大概率是“我全都要”。但是如果你把他想要的東西全都展示在頁面上，會(huì)發(fā)生什么？
用戶被自己想要的信息淹沒了。他會(huì)說：“這根本沒法看，也沒法用，你們的設(shè)計(jì)太爛了。”
信息量大、操作復(fù)雜是B端產(chǎn)品的典型特征。我們?nèi)绾伟丫哂泻裰匦畔⒑凸δ艿漠a(chǎn)品，變得對(duì)用戶來說清爽易用？
My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.
——Tess Gadd《UX cheat sheet: Preview and full display》
“界面設(shè)計(jì)就是把報(bào)紙塞進(jìn)火柴盒的藝術(shù)”，這個(gè)比喻真是太妙了！（本土化：把大象裝進(jìn)冰箱的藝術(shù)）。怎么把報(bào)紙塞進(jìn)火柴盒？變魔術(shù)嗎？其實(shí)從某種角度上看，我們?cè)O(shè)計(jì)師就是魔術(shù)師——在適當(dāng)?shù)臅r(shí)機(jī)展示恰到好處的信息。
而我們用到的道具，就是容器類UI組件。區(qū)別于其他類型的組件（比如輸入框下拉框），容器類組件就像收納盒，也就是用來收納信息和操作的。
咱們今天就來探索一下，如何利用好容器類UI組件，完成“空間膨脹術(shù)”，把報(bào)紙絲滑地塞進(jìn)火柴盒。
本文會(huì)分成兩部分。
這個(gè)決策樹不限于提供以下價(jià)值：
下面我們正式開始吧~
一個(gè)單點(diǎn)數(shù)據(jù)關(guān)聯(lián)的信息量能有多大？看一個(gè)網(wǎng)安行業(yè)的例子：
安全管理的目標(biāo)是要確保資產(chǎn)安全。用戶要做的，首先是要清點(diǎn)資產(chǎn)，資產(chǎn)分類分級(jí)和業(yè)務(wù)信息是資產(chǎn)自身屬性。另外，資產(chǎn)本身會(huì)存在一系列漏洞，漏洞也有分類分級(jí)以及修復(fù)過程數(shù)據(jù)。如果漏洞被利用，就會(huì)產(chǎn)生威脅告警，而告警也存在分類分級(jí)及處置過程數(shù)據(jù)。
可以看出，將數(shù)據(jù)建立層層關(guān)聯(lián)后，從一個(gè)單點(diǎn)可以衍生出來的信息是海量的、無邊的。
我們當(dāng)然不能把這全家桶一整個(gè)砸給用戶呀，用戶會(huì)被砸暈的。那我們?cè)撛趺醋觯?/p>
有兩個(gè)定律，跟“復(fù)雜”有關(guān)。
這兩個(gè)定律告訴我們一個(gè)道理：復(fù)雜，不會(huì)讓用戶覺得更好用，甚至增加了不必要的內(nèi)耗。
處理復(fù)雜，我們一般有哪些辦法呢。
第一步，先刪除多余的部分。就好比我們整理房間時(shí)，先挑出垃圾和閑置。
第二步，把物品歸類。被子和被子疊在一起，衣服和衣服掛在一起，書本放在書架上。總之，不能都堆到床上。
第三步，漸進(jìn)呈現(xiàn)。這就到了設(shè)計(jì)師要用“容器類”組件來完成“空間膨脹術(shù)”的環(huán)節(jié)了。
漸進(jìn)呈現(xiàn)的設(shè)計(jì)理論有點(diǎn)像C4模型。C4模型是一種軟件架構(gòu)可視化方法。它的獨(dú)特之處，就是從宏觀到微觀，設(shè)置了多個(gè)焦距，來層層遞進(jìn)。
產(chǎn)品中的內(nèi)容也存在層層遞進(jìn)。內(nèi)容之間的關(guān)系，常見以下兩種。
一種是從屬關(guān)系，或父子關(guān)系。
一種是關(guān)聯(lián)關(guān)系，數(shù)據(jù)以某種維度建立了關(guān)聯(lián)。
我們?nèi)绾斡萌萜黝怳I組件，去放置這些復(fù)雜且層層關(guān)聯(lián)的內(nèi)容？
以下是我們常見的容器類UI組件。
這些組件都可以用來收納，但是它們的特征差異也是巨大的，不能隨意混用。
我從“復(fù)雜度高低”和“關(guān)聯(lián)性強(qiáng)弱”這兩個(gè)坐標(biāo)維度來劃分出四個(gè)象限，展示這幾個(gè)容器的特征。
左下角這里基本是空的，為什么？因?yàn)檫@個(gè)是按照組件的最大潛力來擺放的，高維度可以兼容低維度。
值得注意的是，有一些組件在當(dāng)前頁面內(nèi)，而有些在浮層中。浮層在空間Z軸上有高度，視覺表現(xiàn)為有投影。
容器可以展示信息，也可以用來承載操作。我們把這兩個(gè)場景分開考慮。首先，我們從信息展示場景開始，分析如何選擇容器。
這里有幾個(gè)關(guān)鍵問題，我們逐個(gè)分析：
關(guān)鍵問題一：能否分清主次。
這個(gè)問題很難。用戶可能說“這個(gè)內(nèi)容我需要”，但“需要”這個(gè)詞存在極大的灰度空間，我們要判斷“需要”是多“重要”，需要從這幾個(gè)維度去分析。
關(guān)鍵問題二：是否需要對(duì)比參考。
如果需要對(duì)比參考，不能使用tabs（選項(xiàng)卡）。因?yàn)閠abs組件存在“排他性”——只有選中tab的子內(nèi)容是展示的，未選中的tabs下的內(nèi)容是被隱藏的。
以購物為例，用戶在對(duì)幾款產(chǎn)品進(jìn)行對(duì)比挑選時(shí)，期望在一個(gè)界面同時(shí)看到幾款產(chǎn)品的參數(shù)和價(jià)格等。如果把產(chǎn)品數(shù)據(jù)放入各tab中，用戶就得在tab間反復(fù)橫跳，讓有限的短期記憶承受巨大壓力。
（↑案例：蘋果手機(jī)參數(shù)對(duì)比）
當(dāng)然，如果沒有對(duì)比參考的需求，我們可以考慮把內(nèi)容歸類到不同tabs下。在使用tabs組件時(shí)要確保內(nèi)容分類合理、標(biāo)簽文案簡潔易懂。這樣用戶才能理解并愿意探索。
（↑tabs的應(yīng)用）
關(guān)鍵問題三：是否需要保持上下文。
有這樣一個(gè)場景：上級(jí)單位對(duì)多個(gè)下屬單位進(jìn)行考核，打分有一定主觀性，需要參考其他單位得分。如果跳轉(zhuǎn)新頁面進(jìn)行打分操作，就會(huì)斷開原有上下文的關(guān)系，影響用戶操作流暢性。
需要保持上下文的場景中，應(yīng)避免迫使用戶離開父級(jí)頁面，建議在原頁面或浮層中呈現(xiàn)更多信息。
關(guān)鍵問題四：是否頻繁往返。
這個(gè)一般由任務(wù)類型決定，即當(dāng)前操作是“主線任務(wù)”還是“支線任務(wù)”。
在主線任務(wù)場景中，用戶持續(xù)前進(jìn)。比如網(wǎng)購商品，用戶在選購商品-確認(rèn)地址-付費(fèi)-下單完成···等步驟中環(huán)環(huán)前行。這時(shí)建議使用原頁面跳轉(zhuǎn)的方式。
支線任務(wù)完成后，一般要回歸主任務(wù)，也就是存在“往返”，就像從小路回歸到大路上。比如清理郵箱：用戶閱讀處理完一封未讀郵件后返回未讀列表，繼續(xù)處理下一條。在這里，“閱讀并處理一條郵件”是支線任務(wù)，“”清理郵箱”是主線任務(wù)。建議給“支線任務(wù)”新開標(biāo)簽頁處理。
關(guān)鍵問題五：是不是必須看到的。
當(dāng)前信息對(duì)用戶來說是否重要且關(guān)鍵？模態(tài)是較為“強(qiáng)勢”的交互模式。原則上，界面態(tài)度保持禮貌克制，以免打擾到用戶。
并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征，會(huì)隱藏部分信息，可導(dǎo)致用戶遺漏重要操作。
我們一般將操作分成兩類：
我們可以按照表單的體量，或者信息的重要及關(guān)鍵程度，選擇相應(yīng)的UI組件。
容器組件的的神奇之處是可以多次嵌套和疊加，創(chuàng)造出更多空間。
但注意保持信息體量和層級(jí)之間的平衡，避免過多嵌套和疊加，讓用戶在多個(gè)容器中迷失方向。
（↑案例：抽屜嵌套抽屜）
（↑案例：tabs嵌套tabs）
（↑案例：抽屜嵌套tabs）
感謝讀到最后的讀者們，就用一句話來結(jié)束今天的分享吧~
設(shè)計(jì)一件東西時(shí)，總是要在更大的環(huán)境中考慮它——房間里的一把椅子、房子里的房間、環(huán)境中的房子、城市規(guī)劃中的環(huán)境。
——埃里爾·沙里寧 (1873–1950)，芬蘭建筑師
本文由 @杜大大杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在 ToB 系統(tǒng)中，跳轉(zhuǎn)場景的合理分類和設(shè)計(jì)對(duì)用戶體驗(yàn)至關(guān)重要。不同的跳轉(zhuǎn)方式（如當(dāng)前頁刷新或新開標(biāo)簽頁）直接到影響用戶的操作效率和系統(tǒng)性能。本文將從分類、設(shè)計(jì)建議以及用戶體驗(yàn)的角度，深入探討如何優(yōu)化 B 端系統(tǒng)中的跳轉(zhuǎn)場景。
金蝶云·星辰聚焦小型企業(yè)在線經(jīng)營和數(shù)字化管理，，提供財(cái)務(wù)云、稅務(wù)云、進(jìn)銷存云、訂貨商城、費(fèi)用報(bào)銷等SaaS服務(wù)，支持小型企業(yè)拓客開源、智能管理、實(shí)時(shí)決策，是一款適合小微型企業(yè)的云端財(cái)務(wù)進(jìn)銷存管理軟件
1.1.1. 工作臺(tái)
1.1.2. 目錄頁
1.1.3. 列表頁
1.1.4. 新建頁
1.1.5. 詳情頁
1.1.6. 待辦待閱
1.1.7. 幫助系統(tǒng)
1.1.8. 系統(tǒng)后臺(tái)配置
金蝶云星空是金蝶面向事業(yè)部制、多地點(diǎn)、多工廠等運(yùn)營協(xié)同與管控型企業(yè)及集團(tuán)公司，提供的一個(gè)通用ERP服務(wù)平臺(tái)
1.2.1. 工作臺(tái)
1.2.2. 列表頁
1.2.3. 新建頁
1.2.4. 詳情頁
1.2.5. 待辦帶閱
致遠(yuǎn)的智能表單管理系統(tǒng)，因權(quán)限不夠，只有部分頁面；但依然可以看到其結(jié)構(gòu)，也是系統(tǒng)內(nèi) Tab 頁簽跳轉(zhuǎn)
4.1.1. 列表頁
4.1.2. 新建頁
4.1.3. 詳情頁
4.1.4. 待辦待閱
4.1.5. 幫助系統(tǒng)
4.1.6. 系統(tǒng)后臺(tái)配置
直接菜單切換，無跳轉(zhuǎn)（前臺(tái)應(yīng)用配置，不需要跳轉(zhuǎn)頁面）
從用戶端進(jìn)入后臺(tái)配置，新開頁簽
4.2.1. 列表頁
4.2.2. 新建頁
4.2.3. 詳情頁
騰訊的企業(yè)設(shè)計(jì)體系中，也包含了這一層設(shè)計(jì)規(guī)則（功能）
在 ToB 系統(tǒng)中，在不同場景下頁面的跳轉(zhuǎn)對(duì)于用戶體驗(yàn)至關(guān)重要。不同的跳轉(zhuǎn)方式，直接影響到用戶的操作效率和系統(tǒng)性能。
從用戶操作角度，可以將頁面的跳轉(zhuǎn)分為三類「操作流程類」「信息查詢」「系統(tǒng)配置類」（端到端如 PC 端到移動(dòng)端，不在此次討論范圍）
1.1 操作流程跳轉(zhuǎn)
用戶在系統(tǒng)中進(jìn)行的具體操作，用戶執(zhí)行某個(gè)任務(wù)或業(yè)務(wù)流程，如數(shù)據(jù)的創(chuàng)建、編輯、審批等。通常目標(biāo)是推進(jìn)某個(gè)操作流程的完成。
場景：如新建或編輯某數(shù)據(jù)，收到待辦審批某流程等
1.2 信息查詢與查看類跳轉(zhuǎn)
當(dāng)用戶需要查詢、查看或分析系統(tǒng)內(nèi)的數(shù)據(jù)和信息時(shí)，需要從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，以獲取更多的詳細(xì)信息或進(jìn)行更深入的分析。
場景：如打開某數(shù)據(jù)查看詳情，從工作臺(tái)查看詳細(xì)報(bào)表進(jìn)行數(shù)據(jù)分析，查看操作歷史或日志記錄等
1.3 系統(tǒng)配置與管理跳轉(zhuǎn)
涉及系統(tǒng)設(shè)置、用戶權(quán)限管理、插件配置等功能的跳轉(zhuǎn)，通常由管理員或有權(quán)限的用戶執(zhí)行，用于配置和管理系統(tǒng)的運(yùn)行環(huán)境和用戶權(quán)限。如管理員需要從用戶管理頁面跳轉(zhuǎn)到權(quán)限設(shè)置頁面
場景：如打開后臺(tái)系統(tǒng)，配置系統(tǒng)參數(shù)或用戶權(quán)限
注：第三方系統(tǒng)跳轉(zhuǎn)、子域名跳轉(zhuǎn)屬于功能類特殊場景，已涵蓋在下方業(yè)務(wù)場景中
以上三種分類涵蓋了基本的頁面跳轉(zhuǎn)場景，但不夠具體，現(xiàn)按照以下具體場景，對(duì)競品的跳轉(zhuǎn)方式展開對(duì)比分析（注：彈窗屬于模態(tài)，不在此次范圍之內(nèi)）
跳轉(zhuǎn)方式名稱太長，簡稱為：
致遠(yuǎn)的系統(tǒng)沒有體驗(yàn)到完整的，只體驗(yàn)到部分「智能表單管理系統(tǒng)」
1）在同一個(gè)平臺(tái)或系統(tǒng)內(nèi)的信息，沒有其他特殊情況時(shí)，最好不要新開瀏覽器 Tab 頁簽，這點(diǎn)泛微和金蝶保持了統(tǒng)一，都沒有新開瀏覽器 Tab 頁簽；
2）跳轉(zhuǎn)后臺(tái)系統(tǒng)、或其他子系統(tǒng)、子域名或第三方平臺(tái)時(shí)，這時(shí)可以新開「瀏覽器 Tab 頁簽」，展示其獨(dú)立完整信息結(jié)構(gòu)
如幫助系統(tǒng)，有些幫助以文檔、視頻或論壇的形式存在，使用獨(dú)立頁簽可以很好的呈現(xiàn)其完整性；這點(diǎn)「MK」「金蝶」「泛微」都做到了統(tǒng)一；
4.1 適合系統(tǒng)外跳轉(zhuǎn)的場景
4.1.1. 跨系統(tǒng)跳轉(zhuǎn)
4.1.2. 二級(jí)域名跳轉(zhuǎn)
4.1.3. 第三方集成跳轉(zhuǎn)
4.2 適合系統(tǒng)內(nèi)跳轉(zhuǎn)的場景
4.2.1. 頁面內(nèi)跳轉(zhuǎn)
4.2.2. 模塊間跳轉(zhuǎn)
4.2.3. 流程間跳轉(zhuǎn)
1.2.4. 系統(tǒng)設(shè)置與管理跳轉(zhuǎn)
5.1 新開Tab頁簽
傳統(tǒng)的網(wǎng)頁瀏覽都是新開瀏覽器標(biāo)簽頁的形式，實(shí)現(xiàn)內(nèi)容的并行獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問題
優(yōu)點(diǎn)：實(shí)現(xiàn)內(nèi)容的并行、且獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問題；可以保證用戶并行操作，方便信息間的對(duì)比、參考；適合獨(dú)立子系統(tǒng)，完整呈現(xiàn)系統(tǒng)內(nèi)容
缺點(diǎn)：打開頁簽太多時(shí)會(huì)很耗性能，造成卡頓；也會(huì)造成用戶迷路，找不到之前的內(nèi)容
5.2 系統(tǒng)內(nèi) Tab 頁簽
在當(dāng)前頁內(nèi)，新增一行 tab，來承載內(nèi)容
優(yōu)點(diǎn)：系統(tǒng)內(nèi) Tab 頁，頁面是相互獨(dú)立的、互不干涉的，多窗口自由切換，并且信息保留在系統(tǒng)內(nèi)部，用戶的視覺動(dòng)線相對(duì)集中，交互操作成本更低
缺點(diǎn)：標(biāo)簽頁欄屬于框架層級(jí)，會(huì)影響原有的頁面結(jié)構(gòu)；且始終都會(huì)占據(jù)頁面位置，會(huì)進(jìn)一步壓縮屏幕縱向有效空間；在整體的統(tǒng)一性上，也需要綜合考慮使用
5.3. 抽屜
一般從右側(cè)劃出抽屜浮層，來承載內(nèi)容
優(yōu)點(diǎn)：在當(dāng)前頁面出現(xiàn)的抽屜浮層，可以避免頁面頻繁跳轉(zhuǎn)、以及頻繁返回帶來的頁面刷新導(dǎo)致用戶效率下降的問題
缺點(diǎn)：會(huì)遮擋一部分上文內(nèi)容，無法會(huì)看；且抽屜寬度有限，無法承載更多內(nèi)容信息（不過有些抽屜支持放大/縮小 可以避免這個(gè)問題）
ToB 的頁面跳轉(zhuǎn)方式，應(yīng)遵循完善的業(yè)務(wù)規(guī)則和使用邏輯，不能一刀切選擇一種方式（如一直新開瀏覽器 Tab 頁簽）。最好允許用戶自定義跳轉(zhuǎn)方式，如在系統(tǒng)設(shè)置中提供選項(xiàng)，讓用戶選擇某些操作是當(dāng)前頁刷新還是新開標(biāo)簽頁。這有助于滿足不同用戶的偏好，提高系統(tǒng)的靈活性和用戶滿意度。
在需要新開多個(gè)標(biāo)簽頁的場景中，需要考慮瀏覽器的性能表現(xiàn)和用戶設(shè)備的資源消耗?？梢酝ㄟ^優(yōu)化加載速度、減少頁面資源占用等方式來提升用戶體驗(yàn)。
清晰的跳轉(zhuǎn)反饋、完善的路徑和返回機(jī)制
而無論是當(dāng)前頁刷新還是新開Tab頁簽、系統(tǒng)內(nèi) Tab 頁簽，系統(tǒng)都應(yīng)在跳轉(zhuǎn)后給予用戶明確的反饋。比如加載進(jìn)度條、操作成功提示等，讓用戶始終知道自己的操作狀態(tài)。在復(fù)雜的跳轉(zhuǎn)路徑中，設(shè)計(jì)面包屑導(dǎo)航、返回按鈕或快捷鍵，有助于用戶快速找到跳轉(zhuǎn)路徑并返回到之前的操作頁面，避免跳轉(zhuǎn)迷失。
通過完善的業(yè)務(wù)規(guī)則和使用邏輯，靈活地結(jié)合用戶行為分析和個(gè)性化設(shè)置，有助于提升系統(tǒng)的整體用戶體驗(yàn)。在實(shí)際應(yīng)用中，還需時(shí)刻關(guān)注系統(tǒng)性能，確保在多標(biāo)簽頁和多終端跳轉(zhuǎn)的情況下，依然能保持流暢的用戶體驗(yàn)。
本文由 @宇相 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
研究主題：提升動(dòng)效可用性
研究對(duì)象：12條UX動(dòng)效應(yīng)用法則
“作為UX/UI設(shè)計(jì)師，我該如何適當(dāng)在UX設(shè)計(jì)中加入動(dòng)效？”，我總結(jié)了一些經(jīng)驗(yàn)法則，可以很好地回答這個(gè)問題。在過去5年里，我的UI動(dòng)畫工作室發(fā)表的教程，非常幸運(yùn)可以在40多個(gè)國家/地區(qū)，以及數(shù)百個(gè)頂級(jí)品牌設(shè)計(jì)咨詢公司中指導(dǎo)UX/UI設(shè)計(jì)師們。
研究UX/UI動(dòng)效超過15年后，我得出了一個(gè)結(jié)論——其實(shí)有12個(gè)規(guī)律方法來幫助提升UX動(dòng)效設(shè)計(jì)。我將這些機(jī)會(huì)稱為“ 12條UX動(dòng)效應(yīng)用法則”，它們可以通過多種創(chuàng)新方式進(jìn)行疊加和組合使用。
我將宣言分成5部分：
-強(qiáng)調(diào)動(dòng)效的主題；
-實(shí)時(shí)與非實(shí)時(shí)交互；
-提升動(dòng)效可用性的4種方法；
-原理，技術(shù)，特性和價(jià)值；
-12條UX動(dòng)效應(yīng)用法則。
設(shè)計(jì)人員通常將用戶界面中的運(yùn)動(dòng)主題理解為“ UI動(dòng)畫”（實(shí)際上不是），所以我覺得在開始說12條原則前，有必要為大家普及下基礎(chǔ)。
設(shè)計(jì)人員通常將“ UI動(dòng)畫”視為是讓用戶體驗(yàn)更愉悅的東西，實(shí)際上并沒有增加太多價(jià)值。因此，UI動(dòng)畫通常被視為UX的后兒子。另外，用戶界面動(dòng)效，它被認(rèn)為屬于迪士尼的12條動(dòng)畫原理范疇，我在自己的《UI Animation Principles — Disney is Dead》一文中進(jìn)行了反駁。
在我的宣言中，我將證明UI動(dòng)畫原則與“ 12 UX in Motion Principles”的關(guān)系，就像是建筑構(gòu)造和建筑風(fēng)格一樣，是各自獨(dú)立的?；蛘哌@樣理解，一個(gè)建筑結(jié)構(gòu)被物理建造后才會(huì)實(shí)際存在（施工后），但是原則理論卻能指導(dǎo)物理建造。
動(dòng)畫就是工具，而原則是用來指導(dǎo)工具使用的，因此，原則理論對(duì)設(shè)計(jì)師的影響力更大。實(shí)際上，多數(shù)設(shè)計(jì)師經(jīng)常在UX設(shè)計(jì)中，將“ UI動(dòng)畫”視為一種更高級(jí)的設(shè)計(jì)形式。
區(qū)分“狀態(tài)”和“作用”很重要，UX中的大多元素是靜態(tài)的，例如設(shè)計(jì)組件。用戶體驗(yàn)中的行為基本上是暫時(shí)的，是基于動(dòng)作的。一個(gè)元素是被隱藏的，或正在被隱藏。如果是后者，動(dòng)效的引入就可以很好地提升可用性。
另外，可以將交互的時(shí)間都視為實(shí)時(shí)或非實(shí)時(shí)發(fā)生。實(shí)時(shí)是指用戶直接與用戶界面中的對(duì)象進(jìn)行交互。非實(shí)時(shí)意味著對(duì)象行為是事后交互的：它在用戶操作之后發(fā)生，并且是過渡的。
這是一個(gè)重要的區(qū)別。實(shí)時(shí)交互也可以被認(rèn)為是“直接操縱”，因?yàn)橛脩粽谥苯雍徒缑鎸?duì)象進(jìn)行交互。用戶使用界面時(shí)，界面行為正在發(fā)生。非實(shí)時(shí)交互僅在來自用戶的輸入之后發(fā)生，并且具有將用戶短暫鎖定在用戶體驗(yàn)之外的作用，直到轉(zhuǎn)換完成。認(rèn)知這些差異性，會(huì)在我們學(xué)習(xí)12項(xiàng)原則時(shí)發(fā)揮幫助作用。
這4點(diǎn)代表判斷用戶體驗(yàn)可用性時(shí)的依據(jù)：
-預(yù)期值
分兩個(gè)方面——設(shè)計(jì)為用戶帶來的感受，以及實(shí)際呈現(xiàn)效果。換句話說，作為設(shè)計(jì)師，我們希望最大程度地減少用戶期望與他們體驗(yàn)之間的差距。
-連續(xù)性
既代表用戶流程，也代表用戶體驗(yàn)的“一致性”。可以從“內(nèi)部連續(xù)性”（場景內(nèi)的連續(xù)性）和“內(nèi)部連續(xù)性”（構(gòu)成整個(gè)用戶體驗(yàn)的一系列場景內(nèi)的連續(xù)性）的角度來考慮。
-敘述性
是用戶體驗(yàn)中事件的線性進(jìn)展，一系列微妙的變化和動(dòng)作串聯(lián)在一起是，就構(gòu)成了用戶體驗(yàn)流程。
-關(guān)聯(lián)性
指導(dǎo)用戶理解和決策界面中組件之間的關(guān)系。
泰勒·韋恩（Tyler Waye）寫道：“原理……是產(chǎn)生各種技術(shù)的基本前提和功能規(guī)則。無論發(fā)生什么，這些要素都保持一致。”我們可以設(shè)想一個(gè)層次結(jié)構(gòu)，其中“原則”在頂部，“技術(shù)”在第二，接下來是“內(nèi)容”，“量值”在最底部?？梢詫⒓夹g(shù)視為把原則實(shí)際執(zhí)行的一種呈現(xiàn)手法，類似于我們常說的“設(shè)計(jì)風(fēng)格”。
“屬性”是特定對(duì)象的參數(shù)，這些參數(shù)會(huì)被動(dòng)畫化以創(chuàng)建該技術(shù)。這些包括（但不限于）位置，不透明度，比例，旋轉(zhuǎn)，錨點(diǎn)，顏色，筆劃寬度，形狀等。“量值”是實(shí)際的數(shù)字屬性值，它們會(huì)隨時(shí)間變化以創(chuàng)建所謂的“動(dòng)畫”。
比如，設(shè)計(jì)一個(gè)飛機(jī)降落的動(dòng)效，我們可以使用“模糊原理”，模糊和不透明度調(diào)至25px和70％?，F(xiàn)在我們有了一些可以使用的工具。更重要的是，這些語言工具與任何特定的原型工具無關(guān)。
緩動(dòng)，偏移和延遲與定時(shí)有關(guān)；處理與對(duì)象關(guān)系有關(guān)；變換，數(shù)值變化，遮罩，疊加和復(fù)制都與對(duì)象連續(xù)性有關(guān)；視差與時(shí)間層次有關(guān)。模糊度，維度和滑動(dòng)變焦都與空間連續(xù)性有關(guān)。
發(fā)生即時(shí)事件時(shí)，對(duì)象行為符合用戶期望。
所有（實(shí)時(shí)或非實(shí)時(shí)）的動(dòng)效都非常緩和。這種設(shè)計(jì)輕松搭建了一種自然舒適的氛圍，也有一種連續(xù)感。順便提一句，迪士尼將其稱為“慢進(jìn)慢出”。
左側(cè)示例的線性運(yùn)動(dòng)，看起來很好像糟糕。第一個(gè)示例沒有很強(qiáng)的動(dòng)效，但呈現(xiàn)出來的也很流暢。以上三個(gè)示例都有確切的幀數(shù)，并且演示的時(shí)間相同，唯一的區(qū)別是動(dòng)效的緩和程度。
作為關(guān)注可用性的設(shè)計(jì)師，除了美學(xué)之外，我們還需要多提出質(zhì)疑，哪個(gè)示例更能提升可用性？我在這里介紹的情況是緩動(dòng)固有的特點(diǎn)。在適當(dāng)緩動(dòng)情況下，用戶會(huì)感覺動(dòng)作本身是無縫的并且在很大程度上是不可見的，這是一件好事，因?yàn)樗粫?huì)分散注意力。線性運(yùn)動(dòng)明顯可見，并且感覺不完整且分散注意力。
我們?cè)賮砜从疫叺氖纠?，它也不并不是天衣無縫的。實(shí)際上，它具有明顯的“設(shè)計(jì)”感，我們會(huì)注意到物體是如何著陸的，但與左側(cè)線性運(yùn)動(dòng)示例相比，它仍然感覺“更正確”。
我想向您開放的是一個(gè)輕松的運(yùn)動(dòng)世界。作為設(shè)計(jì)師，您實(shí)際上可以在項(xiàng)目中創(chuàng)建和實(shí)現(xiàn)無限的“緩動(dòng)”。所有這些放松都有自己的期望響應(yīng)，它們會(huì)在用戶中觸發(fā)。
引入新元素和場景時(shí)，定義對(duì)象關(guān)系和層次結(jié)構(gòu)。
“偏移與延遲”受迪斯尼動(dòng)畫原理影響，本例中為“跟隨并重疊動(dòng)作”。
但是，重要的是要注意，方法雖然類似，但目的和結(jié)果卻不同。迪斯尼的《原理》可產(chǎn)生“更具吸引力的動(dòng)畫”，而《UI動(dòng)畫》的原理則可產(chǎn)生更多可用的體驗(yàn)。
這一原則的效用在于，它通過“告訴”用戶界面中對(duì)象的性質(zhì)，預(yù)先為用戶設(shè)置成功的條件。上面參考中的敘述是頂部的兩個(gè)對(duì)象是一組，而底部則是分開的。頂部的兩個(gè)對(duì)象可以是非交互的圖像和文本，而底部的對(duì)象可以是按鈕。
甚至在用戶注冊(cè)這些對(duì)象是什么之前，設(shè)計(jì)人員就已經(jīng)通過運(yùn)動(dòng)告知這些對(duì)象是“分離的”。
Credit: InVision
在上圖示例中，懸浮按鈕（FAB）轉(zhuǎn)換成了包含三個(gè)按鈕的標(biāo)題導(dǎo)航元素。由于按鈕在時(shí)間上彼此“偏移”，因此最終通過“分離”來提升可用性。換句話說，設(shè)計(jì)人員是在利用時(shí)間本身來說（甚至在用戶注冊(cè)對(duì)象之前）對(duì)象是分開的。這可以讓用戶完全獨(dú)立于視覺設(shè)計(jì)，了解界面中對(duì)象的特性。
以下是一個(gè)示例：
Credit: Jordi Verdu
在上面的例子中，靜態(tài)視覺設(shè)計(jì)告訴我們?cè)诒尘吧嫌袌D標(biāo)。假設(shè)這些圖標(biāo)都是彼此獨(dú)立的，并且做著不同的事情。
圖標(biāo)被分組為行，并且表現(xiàn)得像單個(gè)對(duì)象。它們的標(biāo)題同樣被分組為行，并且表現(xiàn)得像單個(gè)對(duì)象。動(dòng)效告訴用戶這些界面元素不是她的眼睛所看到的。在這種情況下，我們可以說界面中對(duì)象的時(shí)間行為并沒有提升可用性。
與多個(gè)對(duì)象進(jìn)行交互時(shí)，創(chuàng)建空間和時(shí)間層次關(guān)系。
這是一項(xiàng)強(qiáng)大的原理，可“關(guān)聯(lián)”用戶界面中的對(duì)象。在上面的示例中，頂部或“子級(jí)”對(duì)象的“ scale”和“ position”屬性作為底部或“父級(jí)”對(duì)象的“ position”屬性的父級(jí)。
處理對(duì)象屬性與其他對(duì)象屬性的鏈接，創(chuàng)建對(duì)象關(guān)系和層次結(jié)構(gòu)。
還可以使設(shè)計(jì)人員更好地協(xié)調(diào)用戶界面中的時(shí)間，同時(shí)與用戶交流對(duì)象關(guān)系的本質(zhì)。回想一下，對(duì)象的“屬性”包括以下內(nèi)容：“比例”，“不透明度”，“位置”，“旋轉(zhuǎn)”，“形狀”，“顏色”，“值”等。這些屬性中的任何一個(gè)都可以鏈接到其他任何屬性，以在用戶體驗(yàn)中創(chuàng)造協(xié)同作用。
Credit: Andrew J Lee, Frank Rapacciuolo
在左側(cè)示例中，“表情”元素的“ y軸”是圓形指示器，也是“ x軸”的父級(jí)。當(dāng)圓形指示器元素沿水平軸移動(dòng)時(shí)，其“子級(jí)”元素沿水平和垂直方向移動(dòng)（同時(shí)被遮罩）。此功能最好可以“實(shí)時(shí)”互動(dòng)，當(dāng)用戶直接操作界面對(duì)象時(shí)，設(shè)計(jì)人員通過動(dòng)效與用戶溝通，將其聯(lián)系起來。
創(chuàng)建關(guān)聯(lián)有3種形式：“直接關(guān)聯(lián)”（請(qǐng)參見上面的兩個(gè)“延遲”示例，“反向”示例，請(qǐng)參見下文）。
延遲和反向
對(duì)象實(shí)用程序更改時(shí)，創(chuàng)建連續(xù)的敘述流狀態(tài)。
關(guān)于運(yùn)動(dòng)原理“轉(zhuǎn)換”中的UX的文章已經(jīng)很多。在某些方面，它是動(dòng)畫原理中最明顯和最深刻的部分。
轉(zhuǎn)換是最容易識(shí)別的，主要是因?yàn)樗Ч芡怀?。我們注意到?ldquo;提交”按鈕將形狀更改為徑向進(jìn)度條，最后再次將形狀更改為確認(rèn)復(fù)選標(biāo)記。它完整的展示了一個(gè)功能，并引起了用戶注意。
Credit: Colin Garven
變換所做的是無縫地將用戶轉(zhuǎn)換為不同的UX狀態(tài)或“是”（如這是一個(gè)按鈕，這是一個(gè)放射狀的進(jìn)度條，這是一個(gè)復(fù)選標(biāo)記），引導(dǎo)成所需的結(jié)果。通過這些功能空間將用戶吸引到了最終目的地。
轉(zhuǎn)換的作用是將用戶體驗(yàn)中的關(guān)鍵時(shí)刻從認(rèn)知上“分塊”為一系列無縫且連續(xù)的事件。這種無縫性可以提高用戶的感知度，留存率和任務(wù)成功率。
當(dāng)量值主體發(fā)生變化時(shí)，創(chuàng)建動(dòng)態(tài)且連續(xù)的敘事關(guān)系。
基于文本的界面對(duì)象（即數(shù)字和文本）可以更改其值。這是那些“難以捉摸的明顯”概念之一。
文本和數(shù)字更改非常常見，以至于它們繞過我們，而我們卻沒有給他們帶來區(qū)別和嚴(yán)謹(jǐn)性，以評(píng)估它們?cè)谔嵘捎眯苑矫娴淖饔谩?/p>
那么，當(dāng)值改變時(shí)用戶會(huì)經(jīng)歷什么？在用戶體驗(yàn)中，運(yùn)動(dòng)中的12個(gè)用戶體驗(yàn)原則是提升可用性的機(jī)會(huì)。這里的三個(gè)機(jī)會(huì)是將用戶與數(shù)據(jù)背后的現(xiàn)實(shí)，代理的概念以及價(jià)值本身的動(dòng)態(tài)性質(zhì)聯(lián)系起來。
讓我們看一下用戶儀表板的示例。
當(dāng)數(shù)字值未進(jìn)行加載時(shí)，用戶看到的數(shù)字對(duì)象是靜態(tài)的。它們就像涂漆的標(biāo)志，顯示時(shí)速限制為55英里/小時(shí)。
數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情?，F(xiàn)實(shí)可能是時(shí)間，收入，游戲得分，業(yè)務(wù)指標(biāo)，健身跟蹤等。我們通過運(yùn)動(dòng)來區(qū)分的是“量值主體”是動(dòng)態(tài)的，而這些量值反映的是該動(dòng)態(tài)價(jià)值集中的某些東西。
這種關(guān)系不僅會(huì)被視覺上包含價(jià)值的靜態(tài)對(duì)象所迷失，而且還會(huì)失去另一個(gè)更深層次的機(jī)會(huì)。
Credit: Barthelemy Chalvet, Gal Shir, Unknown
當(dāng)通過顯示或隱藏對(duì)象或組的哪一部分確定實(shí)用程序時(shí)，在接口對(duì)象或?qū)ο蠼M中創(chuàng)建連續(xù)性。
遮蓋對(duì)象的行為可以被認(rèn)為是遮蓋對(duì)象形狀與效果之間的關(guān)系。
因?yàn)樵O(shè)計(jì)師們熟悉靜態(tài)設(shè)計(jì)中的遮蓋，我們有必要同UX運(yùn)動(dòng)原理“屏蔽”做區(qū)分，因?yàn)樗且砸粋€(gè)行為動(dòng)作發(fā)生，而不是作為一個(gè)狀態(tài)。
通過暫時(shí)使用對(duì)象的顯示和隱藏區(qū)域，效用以連續(xù)和無縫的方式轉(zhuǎn)換。這也具有保留敘述流的效果。
Credit: Anish Chandran
在示例中，頁眉變成相冊(cè)時(shí)會(huì)更改邊界形狀和位置，但不會(huì)更改內(nèi)容。既改變了圖像的效果，同時(shí)將內(nèi)容保留在蒙版中——這是個(gè)相當(dāng)巧妙的技巧。這是非實(shí)時(shí)發(fā)生的，是一種過渡，在用戶執(zhí)行某個(gè)操作后即被激活。
請(qǐng)記住，UI動(dòng)畫原理是暫時(shí)出現(xiàn)的，并通過連續(xù)性、敘述、關(guān)系和期望來提升可用性。在上述參考中，對(duì)象本身不變，但也具有邊界和位置，這兩個(gè)因素最決定設(shè)計(jì)的樣子。
當(dāng)分層對(duì)象依賴于位置時(shí)，在視覺平地中創(chuàng)建與空間的關(guān)系。
疊加層通過允許用戶利用平地排序?qū)傩裕瑏砜朔强臻g層次結(jié)構(gòu)的缺乏，從而提升可用性。為了使飛機(jī)稍微降落，Overlay允許設(shè)計(jì)人員使用運(yùn)動(dòng)來傳達(dá)與位置有關(guān)的對(duì)象，這些對(duì)象存在于非3D空間中其他對(duì)象的后面或前面。
Credit: Bady, Javi Pérez
在左側(cè)的示例中，前景對(duì)象向右滑動(dòng)以顯示其他背景對(duì)象的位置。在右側(cè)的示例中，整個(gè)場景向下滑動(dòng)以顯示其他內(nèi)容和選項(xiàng)（同時(shí)使用“偏移與延遲原理”傳達(dá)對(duì)象的個(gè)性）。在一定程度上，作為設(shè)計(jì)師，“層次”的概念是如此明顯以至于不言而喻。
當(dāng)新對(duì)象出現(xiàn)和分開時(shí)，創(chuàng)建連續(xù)性、關(guān)系和敘述。
在當(dāng)前場景中（以及從當(dāng)前對(duì)象中）創(chuàng)建新對(duì)象時(shí)，以敘述方式說明它們的外觀非常重要。在此宣言中，我強(qiáng)烈主張為對(duì)象的起源和離開創(chuàng)建敘事框架的重要性。
簡單的不透明褪色往往無法達(dá)到此效果。遮罩，克隆和維度是三種基于可用性的方法，可以產(chǎn)生很棒的使用體驗(yàn)。
Credit: Jakub Antalík, Jakub Antalík, Unknown
允許用戶在空間上定位自己與對(duì)象或場景的關(guān)系，而非在視覺層次。
與“蒙版運(yùn)動(dòng)原理”中的UX相似，“模糊化”既作為靜態(tài)現(xiàn)象又作為暫時(shí)現(xiàn)象存在。這可能會(huì)使沒有時(shí)間思考經(jīng)驗(yàn)的設(shè)計(jì)師（即瞬間之間的瞬間）感到困惑。設(shè)計(jì)人員通常按屏幕設(shè)計(jì)或按任務(wù)設(shè)計(jì)。認(rèn)為遮蔽是被遮蓋的行為，而不是被遮蓋的狀態(tài)。靜態(tài)設(shè)計(jì)表示被遮蓋的狀態(tài)，引入時(shí)間可以使我們了解物體被遮擋的行為。
Credit: Virgil Pana, Apple
從以上兩個(gè)示例中，我們可以看到，看起來像透明對(duì)象或疊加層的遮擋也是一種涉及時(shí)間上多個(gè)屬性的交互。各種常見的技術(shù)包括模糊效果和降低整體對(duì)象透明度，使用戶知道她正在操作的其他非主要內(nèi)容，即在主要對(duì)象層次結(jié)構(gòu)“之后”存在的世界。
用戶滾動(dòng)時(shí)，在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。
作為運(yùn)動(dòng)原理中的UX，“視差”描述了以不同速率運(yùn)動(dòng)的不同界面對(duì)象。
使用視差，用戶可以在保持設(shè)計(jì)完整性的同時(shí)專注于主要?jiǎng)幼骱蛢?nèi)容。背景元素會(huì)為用戶在知覺和認(rèn)知上“消失”。
Credit: Austin Neill, Michael Sevilla
這對(duì)用戶的影響是，在使用期間清楚地定義各種對(duì)象關(guān)系。前景對(duì)象或移動(dòng)“快速”的對(duì)象在用戶面前顯示的“更近”。同樣，背景物體或“移動(dòng)較慢”的物體也被視為“離得更遠(yuǎn)”。
設(shè)計(jì)人員可以使用時(shí)間本身來創(chuàng)建這些關(guān)系，以告訴用戶界面中哪些對(duì)象具有更高的優(yōu)先級(jí)。因此，將背景或非交互式元素進(jìn)一步“推后”是有意義的。
當(dāng)新對(duì)象出現(xiàn)和離開時(shí)，提供空間敘事框架。
對(duì)用戶體驗(yàn)至關(guān)重要的是連續(xù)性現(xiàn)象以及位置感。維度提供了一種強(qiáng)大的邏輯方式來克服用戶覺得平庸的體驗(yàn)。人類非常善于使用空間框架在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)中導(dǎo)航。提供空間維度的出現(xiàn)及消失的參考點(diǎn)，有助于增強(qiáng)用戶對(duì)于位置的感知。
此外，維度原則克服了視覺平面中的分層悖論，出現(xiàn)在其他對(duì)象的“前面”或“后面”。維度以三種方式呈現(xiàn)：折紙維度，浮動(dòng)維度和對(duì)象維度。折紙的維數(shù)可以用“折疊”或“鉸接”式的三維界面對(duì)象來考慮。
折紙維度示例
由于將多個(gè)對(duì)象組合為“折紙”結(jié)構(gòu)，因此即使看不見隱藏對(duì)象，在空間上仍可以說它們“存在”。這有效地將用戶體驗(yàn)呈現(xiàn)為連續(xù)的空間事件，用戶可以在交互模型本身以及界面對(duì)象本身完成操作。
浮動(dòng)維度為接口對(duì)象提供了空間的起源和偏離，使交互模型直觀且具有很強(qiáng)的敘事性。
浮動(dòng)維數(shù)示例
在上面的示例中，維度是通過使用3D“卡片”來實(shí)現(xiàn)的。這提供了支持視覺設(shè)計(jì)的強(qiáng)大敘事框架。通過“翻轉(zhuǎn)”卡片來擴(kuò)展敘述，以訪問其他內(nèi)容和交互性。
維度是一種強(qiáng)大的引入新元素的方法，可以最小地降低突發(fā)性。維度系數(shù)會(huì)讓交互對(duì)象具有更模擬真實(shí)感。
對(duì)象維數(shù)示例
多個(gè)2D層在3D空間中排列形成真實(shí)尺寸的對(duì)象，它們的維度是在實(shí)時(shí)和非實(shí)時(shí)過渡時(shí)刻顯示的。物體維數(shù)指使用者在不可見的空間位置上產(chǎn)生對(duì)物體效用的敏銳意識(shí)。
在導(dǎo)航界面對(duì)象和空間時(shí)保持連續(xù)性和空間敘述。
移動(dòng)（Dolly）和變焦（Zoom）是電影概念，指的是與相機(jī)有關(guān)的對(duì)象的運(yùn)動(dòng)，并且圖像本身在幀中的大小從遠(yuǎn)攝到近攝平滑地變化（反之亦然）。
在某些情況下，無法判斷對(duì)象是否正在縮放，它是否正在朝3D空間中的相機(jī)移動(dòng)或相機(jī)是否朝著3D空間中的對(duì)象移動(dòng)，以下三個(gè)示例說明了可能的情況。
圖層是在搖動(dòng)，縮放還是在移動(dòng)相機(jī)？
將“移動(dòng)”和“縮放”的實(shí)例視為獨(dú)立的，因?yàn)樗鼈兩婕斑B續(xù)變換，并且滿足運(yùn)動(dòng)原理中用戶體驗(yàn)的要求：它們通過運(yùn)動(dòng)來提升可用性。
左邊的兩個(gè)圖像是鏡頭滑動(dòng)縮放，而右邊的圖像變焦縮放
多莉（Dolly）是一個(gè)電影術(shù)語，適用于推進(jìn)或遠(yuǎn)離對(duì)象的相機(jī)運(yùn)動(dòng)（它也適用于水平“跟蹤”運(yùn)動(dòng)，但在可用性方面不那么重要）。
Credit: Apple
在UX中，在空間上，此運(yùn)動(dòng)指的是觀察者視角的變化，也可能是指在對(duì)象更改位置時(shí)保持靜態(tài)的視角。多莉原理通過連續(xù)性和敘述性，來無縫過度對(duì)象目標(biāo)。多莉還可以結(jié)合“尺寸原則”，從而獲得更多空間體驗(yàn)和更多的深度，向用戶傳達(dá)當(dāng)前視圖“前”或“后”的其他區(qū)域。
縮放指的是既不是透視也不是物體在空間上的移動(dòng)，而是物體本身在縮放（或者我們的視野正在縮小，從而導(dǎo)致圖像放大）。這向用戶傳達(dá)對(duì)象所在“內(nèi)部”區(qū)域的信息。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
對(duì)于很多設(shè)計(jì)師來講在設(shè)計(jì)界面過程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁面時(shí)往往是直接拿到競品的頁面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁面出錯(cuò)，但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的目標(biāo)是什么，是否會(huì)匹配自己的設(shè)計(jì)目標(biāo)，如果不了解這些貿(mào)然的去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，需要設(shè)計(jì)師去進(jìn)行設(shè)計(jì)時(shí)可能就會(huì)遇到很多難點(diǎn)，作為初級(jí)設(shè)計(jì)師或者剛?cè)胄械脑O(shè)計(jì)師，前期可以去進(jìn)行搬運(yùn)設(shè)計(jì)，但是一定要了解別人為什么這么做。
接下來將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗(yàn)。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點(diǎn)擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級(jí)
九、圖標(biāo)保持一致
十、利用對(duì)比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時(shí)可以時(shí)常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟
左側(cè)為什么錯(cuò)？？
左圖中針對(duì)單條消息的操作匯聚到了icon內(nèi)，對(duì)于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時(shí)需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機(jī)系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無法操作的情況，增加手勢有弊端也有優(yōu)勢，右圖中手勢增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個(gè)理論上是可以接
受的。
實(shí)際產(chǎn)品中的運(yùn)用
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。
左側(cè)為什么錯(cuò)？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進(jìn)行操作，當(dāng)然如果整個(gè)模塊的熱區(qū)都是同一個(gè)，這樣并沒有什么問題，用戶點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶想要到達(dá)目標(biāo)必須通過按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶的操作時(shí)間。
建議正確做法～～
當(dāng)一個(gè)頁面內(nèi)出現(xiàn)多個(gè)相同模塊或者一個(gè)模塊出現(xiàn)多個(gè)熱區(qū)入口時(shí)，按鈕點(diǎn)擊區(qū)域有限，我們?cè)O(shè)計(jì)時(shí)就可以利用拇指定律進(jìn)行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時(shí)快速到達(dá)目標(biāo)，因?yàn)閲鴥?nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶，所以我們需要滿足大部分的體驗(yàn)，合理利用拇指定律。
相關(guān)定律：費(fèi)茲定律、拇指定律
實(shí)際產(chǎn)品中的運(yùn)用
對(duì)于我們來講很多東西是簡單的，但是不乏會(huì)有一些用戶是陌生的，對(duì)于他們來講可能會(huì)有填寫成本。
左側(cè)為什么錯(cuò)？？
左圖中理論上并不是錯(cuò)，我們經(jīng)常設(shè)計(jì)表單時(shí)都會(huì)用的提示話術(shù)，但是我們需要考慮更多維度的東西，對(duì)于我們來講填寫這種表單非常簡單，例如個(gè)別用戶，可能會(huì)臨時(shí)忘了郵箱格式，又或者輸入手機(jī)號(hào)時(shí)多填了一位數(shù)等等情況，用戶錯(cuò)誤一次操作步驟就會(huì)多一步，反之就是降低使用產(chǎn)品時(shí)的體驗(yàn)。
建議正確做法～～
如右圖中，我們?cè)O(shè)計(jì)時(shí)可以更改提示的話術(shù)，幫助用戶把問題前置，當(dāng)用戶看到提示郵箱時(shí)就會(huì)按照格式去填寫，通過把手機(jī)號(hào)的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無論對(duì)產(chǎn)品還是用戶都沒有任何損失，反而能降低錯(cuò)誤頻率。
實(shí)際產(chǎn)品中的運(yùn)用
無論是頁面還是模塊，用戶在閱讀時(shí)是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁面的文字元素具備一定的規(guī)律，以此來提升閱讀效率。
左側(cè)為什么錯(cuò)？？
左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會(huì)造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。
建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長短不一，但依據(jù)對(duì)齊原則在豎列情況看是具備對(duì)齊規(guī)律的，有效的提升信息篩選效率。
實(shí)際產(chǎn)品中的運(yùn)用
我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶對(duì)此類消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。
左側(cè)為什么錯(cuò)？？
我們常見的消息模塊內(nèi)容為兩種，一種是互動(dòng)類消息即用戶與用戶，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認(rèn)是可以進(jìn)行點(diǎn)擊交互，后者因?yàn)椴糠之a(chǎn)品會(huì)把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點(diǎn)擊交互，這就導(dǎo)致了用戶認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實(shí)從視覺上看，并不具備點(diǎn)擊欲望，因此可能會(huì)對(duì)用戶造成錯(cuò)誤的理解。
建議正確做法～～
當(dāng)我們?cè)谠O(shè)計(jì)時(shí)需要注意，若消息列表中存在系統(tǒng)類消息并且可以進(jìn)行交互，在設(shè)計(jì)時(shí)可以添加向箭頭、紅點(diǎn)提示等方式告知用戶可以點(diǎn)擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
實(shí)際產(chǎn)品中的案例
目前市場上產(chǎn)品幾乎都有深色版本，我們?cè)谠O(shè)計(jì)時(shí)深色版本的顏色時(shí)需要注意飽和度的高低，同樣的飽和度在黑色背景上會(huì)比白色背景上更加亮，這跟人的視覺感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。
左側(cè)為什么錯(cuò)？？
在黑色背景中使用過高的飽和度會(huì)刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調(diào)整，而彩色元素會(huì)直接運(yùn)用到深色中，那么就會(huì)造成一個(gè)問題，因?yàn)槲覀兞?xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對(duì)眼睛的傷害很高。
建議正確做法～～
我們?cè)谠O(shè)計(jì)深色版本時(shí)可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來緩沖對(duì)用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無需在添加更多的顏色規(guī)范。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)模塊或者頁面時(shí)不建議使用特殊字體來突出文字層級(jí)，這樣會(huì)導(dǎo)致視覺不統(tǒng)一，以及開發(fā)成本增加。
左側(cè)為什么錯(cuò)？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實(shí)際開發(fā)中會(huì)導(dǎo)致開發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開發(fā)同學(xué)添加對(duì)應(yīng)字體包，這樣會(huì)導(dǎo)致我們的產(chǎn)品包的內(nèi)存過大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價(jià)值。
建議正確做法～～
一般系統(tǒng)字體就能夠滿足我們的設(shè)計(jì)需求，在UI設(shè)計(jì)中我們可以通過不同的字體粗細(xì)來調(diào)整文字層級(jí)，這樣能夠保證視覺更加統(tǒng)一，減少產(chǎn)品包大小。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)時(shí)需要注意多個(gè)入口在同一位置時(shí)，需要把它們進(jìn)行層級(jí)劃分，避免影響用戶決策
左側(cè)為什么錯(cuò)？？
圖中可以看到，兩個(gè)面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁面中很容易出現(xiàn)困惑，到底需要點(diǎn)擊哪個(gè)才能購買預(yù)定，因?yàn)閮蓚€(gè)都是面性無法快速進(jìn)行定位入口，這樣不僅影響用戶決策效率，還會(huì)影響產(chǎn)品點(diǎn)擊率。
建議正確做法～～
建議設(shè)計(jì)類似模塊中時(shí)，無論是pc還是移動(dòng)端都需要對(duì)入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁面時(shí)快速定位到入口，提升決策效率，做體驗(yàn)是解決用戶的思考時(shí)間。
實(shí)際產(chǎn)品中的案例
在UI設(shè)計(jì)中使用圖標(biāo)時(shí)，要保持一致性，確保他們共有相同的視覺風(fēng)格，相同的重量，填充和描邊。不要混搭。
左側(cè)為什么錯(cuò)？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點(diǎn)綴，這在UI設(shè)計(jì)中嚴(yán)重違背了一致性的原則，會(huì)導(dǎo)致我們的頁面不夠嚴(yán)謹(jǐn)專業(yè)。
建議正確做法～～
在設(shè)計(jì)圖標(biāo)時(shí)，首先要保證圖標(biāo)風(fēng)格一致，其次在這個(gè)基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)頁面模塊時(shí)，可以多利對(duì)比度的方式來體現(xiàn)設(shè)計(jì)的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點(diǎn)，通過對(duì)比，也能夠更加清晰的強(qiáng)調(diào)設(shè)計(jì)中的重點(diǎn)，這樣給用戶的印象會(huì)更深刻，同樣會(huì)給產(chǎn)品帶來一定的趣味性。
左側(cè)為什么錯(cuò)？？
左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺表現(xiàn)力較差，在設(shè)計(jì)中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強(qiáng)，對(duì)用戶的記憶點(diǎn)不夠深刻。
建議正確做法～～
設(shè)計(jì)到類似的模塊時(shí)我們可以利用對(duì)比的關(guān)系，以此突出視覺元素，通過顏色焦點(diǎn)引導(dǎo)用戶關(guān)注，強(qiáng)化用戶印象同時(shí)還能增加頁面的視覺表現(xiàn)力和氛圍感。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)圖文疊加的卡片或者頁面時(shí)，我們需要注意不同明度的圖片上，文字識(shí)別是否有阻礙，一般情況會(huì)通過遮罩方式避免這個(gè)情況。
左側(cè)為什么錯(cuò)？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對(duì)復(fù)雜時(shí)便會(huì)影響識(shí)別，第二種情況當(dāng)圖片明度過高時(shí)文字同樣無法識(shí)別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無法看清，嚴(yán)重影響閱讀體驗(yàn)。
建議正確做法～～
在界面設(shè)計(jì)時(shí)如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識(shí)別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗(yàn)。
實(shí)際產(chǎn)品中的案例
UI設(shè)計(jì)中經(jīng)常會(huì)遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進(jìn)行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左側(cè)為什么錯(cuò)？？
左圖中我們看到，遮罩的透明度過低，我案例設(shè)置的是17%，此時(shí)彈窗內(nèi)容與頁面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無法聚焦時(shí)便很難達(dá)到目標(biāo)，并且視覺上層級(jí)更加混亂。
建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁面內(nèi)容，因?yàn)榛疑礁?，遮擋度越高，用戶跳脫感就越?qiáng)，這樣我們可以讓用戶專注彈窗內(nèi)容，同時(shí)視覺結(jié)構(gòu)上也區(qū)分很明顯。
實(shí)際產(chǎn)品中的案例
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
