<sup id="gsoeu"></sup> 
讓我們看看一些 UI 動(dòng)畫從優(yōu)秀到卓越的示例。只需稍加調(diào)整，您就可以通過動(dòng)畫提升您的 UI 模式。列出的交互顯示了狀態(tài)之間的連續(xù)性，指示了共享元素之間的關(guān)系，并提醒用戶注意他們應(yīng)該注意并采取行動(dòng)的內(nèi)容。
為了創(chuàng)建這些動(dòng)畫，我遵循了Material Motion、IBM 的動(dòng)畫原則和運(yùn)動(dòng)宣言中的 UX 的指導(dǎo)方針。
所有交互均使用InVision Studio的早期版本完成。您可以在此處下載源文件。
在設(shè)計(jì)類似標(biāo)簽頁或彈出菜單的交互時(shí)，請嘗試將內(nèi)容的位置與打開它的操作關(guān)聯(lián)起來。這樣，您不僅可以為內(nèi)容的可見性添加動(dòng)畫，還可以為位置添加動(dòng)畫。對了，還可以添加一個(gè)滑動(dòng)手勢，方便您在內(nèi)容之間切換。
在不同狀態(tài)之間創(chuàng)建動(dòng)畫時(shí)，請檢查它們之間是否存在共享元素并將它們連接起來。使用 InVision Studio，創(chuàng)建Motion過渡時(shí)，兩個(gè)鏈接屏幕之間重復(fù)出現(xiàn)的組件會(huì)自動(dòng)連接。這使得動(dòng)畫原型設(shè)計(jì)變得輕而易舉。
請參閱“運(yùn)動(dòng)宣言”，了解您可以應(yīng)用的動(dòng)畫類型。上面的示例結(jié)合使用了“蒙版”、“變換”、“父級(jí)”和“緩和”原則。
要實(shí)現(xiàn)瀑布效果，請嘗試對每個(gè)內(nèi)容片段或內(nèi)容組應(yīng)用延遲。保持相同的緩動(dòng)和時(shí)長，以保持一致的效果。但不要將每個(gè)小元素都層疊起來，而是要為每組內(nèi)容添加動(dòng)畫效果。動(dòng)畫要保持快速流暢。Google 建議每個(gè)元素的起始間隔不超過 20 毫秒。查看Material Motion 中的編排原理，查看更多示例。
讓內(nèi)容中的元素感知周圍環(huán)境。這意味著讓內(nèi)容吸引或排斥周圍的元素。更多示例，請查看Material Design的感知?jiǎng)有г瓌t。
嘗試使用按鈕容器來提供狀態(tài)的視覺反饋。例如，您可以用旋轉(zhuǎn)動(dòng)畫或加載動(dòng)畫替換 CTA；或者在背景中添加動(dòng)畫來顯示進(jìn)度。解決方案由您決定，其核心在于充分利用用戶正在交互的空間。如果您使用按鈕顏色和文案來確認(rèn)成功狀態(tài)，則可以獲得加分。
當(dāng)用戶需要執(zhí)行重要操作時(shí)，嘗試使用動(dòng)畫來吸引他們的注意力。先從細(xì)微的動(dòng)畫開始，然后根據(jù)操作的重要性逐漸增加強(qiáng)度（例如大小、顏色和速度的變化）。只在關(guān)鍵操作中使用這種效果——這種效果用得越多，效果就越差……用戶也會(huì)越煩躁。
我希望這些示例能幫助您在為交互添加動(dòng)畫時(shí)做出更好的決策。借助 InVision Studio 等新的動(dòng)畫和原型設(shè)計(jì)工具，我預(yù)測我們很快就會(huì)看到創(chuàng)意交互的復(fù)興。我們只需記住要負(fù)責(zé)任地使用這項(xiàng)新的超能力。
讓我們運(yùn)用動(dòng)畫來解釋狀態(tài)的變化，吸引用戶對必要操作的注意力，明確元素之間的關(guān)系，并為產(chǎn)品增添趣味和個(gè)性。遵循這些原則，我們將使動(dòng)畫從優(yōu)秀走向卓越。
每個(gè)人都在爭相打造 AI 體驗(yàn)，但產(chǎn)品真的能達(dá)到預(yù)期效果嗎？作為用戶體驗(yàn)領(lǐng)導(dǎo)者，掌控產(chǎn)品方向是我們的榮幸。這意味著我們要思考 AI 如何在用戶體驗(yàn)中呈現(xiàn)，以及它對用戶的實(shí)際意義。
僅僅擁有AI功能已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。AI成本高昂，如果執(zhí)行不力，還會(huì)給用戶帶來更多不便。其他設(shè)計(jì)師和技術(shù)人員之前也曾抱怨過這個(gè)問題，所以我就不再贅述了。那么，作為一名用戶體驗(yàn)領(lǐng)導(dǎo)者，你該如何才能更好地定位你的公司和團(tuán)隊(duì)，從而有效地推出AI技術(shù)呢？
不要僅僅為了 AI 而構(gòu)建。要識(shí)別用戶最緊迫、最普遍的問題。需要注意的危險(xiǎn)信號(hào)：
與產(chǎn)品負(fù)責(zé)人、業(yè)務(wù)利益相關(guān)者和客戶擁護(hù)者進(jìn)行交流，探討如何推動(dòng)變革。與客戶溝通，了解他們的工作方式，并提供可靠的數(shù)據(jù)來驗(yàn)證你的假設(shè)。
好了，你確定了主要問題，但人工智能真的是正確的方法嗎？數(shù)字公共服務(wù)中心的評估報(bào)告《人工智能是否是正確解決方案》提供了一些指導(dǎo)，可以幫助你入門：
如果人工智能很合適，答案不應(yīng)該總是聊天機(jī)器人，但很多公司卻這么認(rèn)為。如果你的公司也這么認(rèn)為，那么你還有很多工作要做。首要考慮因素應(yīng)該是價(jià)值，而秘訣在于組織對價(jià)值的認(rèn)同。
定義貴組織的AI 愿景和目標(biāo)——參考 Thrive 文章《如何創(chuàng)建 AI 愿景聲明》中的建議，共同制定愿景和目標(biāo)。運(yùn)用 AI 技術(shù)，增強(qiáng)用戶體驗(yàn) (UX) 或產(chǎn)品團(tuán)隊(duì)的目標(biāo)聲明。
確定可以支持您的團(tuán)隊(duì)及其 AI 計(jì)劃的聯(lián)系人。
雖然您可能沒有能力動(dòng)員這些同事或工作伙伴，但建立聯(lián)系并尋求建議仍然有助于進(jìn)一步推動(dòng)您的計(jì)劃。
在整個(gè)組織內(nèi)培養(yǎng)關(guān)系對于讓你被看到并建立信任非常重要。
在這個(gè)部分，您需要進(jìn)行認(rèn)真的、有時(shí)可能令人不快的對話，以通知、協(xié)作、獲得批準(zhǔn)或召集 AI A 團(tuán)隊(duì)的各個(gè)成員。
引導(dǎo)您和您的團(tuán)隊(duì)更好地了解您正在建設(shè)的環(huán)境。
您的組織或產(chǎn)品在智能化道路上處于什么階段？您是從零開始，還是只實(shí)現(xiàn)了少量自動(dòng)化，還是已經(jīng)擁有許多 AI 功能？這里需要考慮的重點(diǎn)是當(dāng)前狀態(tài)，而不是路線圖或理想的未來。
通過大致了解您的組織所處的狀況，您可以確定您的組織為了實(shí)現(xiàn)愿景必須達(dá)到的成熟度級(jí)別。
UI 的底層隱藏著什么？它是否采用了合適的技術(shù)架構(gòu)來支持 AI 開發(fā)？在真正投入 AI 工作之前，你需要解決多少技術(shù)債務(wù)？
在架構(gòu)師和開發(fā)人員的幫助下，您的團(tuán)隊(duì)可以全面評估您的平臺(tái)的定位。雖然我不推薦 Domo，但他們有一篇很棒的文章《AI 就緒性：評估您的業(yè)務(wù)的完整指南和免費(fèi)清單》，您可以參考。
了解這一點(diǎn)可以告訴你，你的努力是否會(huì)實(shí)現(xiàn)、是否會(huì)被推遲，或者是否會(huì)徒勞無功。
定義AI 設(shè)計(jì)原則，打造富有影響力的用戶體驗(yàn)。您可以從 VUX 的AI 設(shè)計(jì)原則中找到靈感。通過補(bǔ)充和完善概念的原則，強(qiáng)化既定的 AI 愿景和目標(biāo)。
不斷提升您的 UX 實(shí)踐以提供完善的 AI非常重要。
與工作伙伴保持定期溝通并遵循最佳實(shí)踐。
您的團(tuán)隊(duì)是否渴望開始深入研究數(shù)據(jù)？對于注重工程設(shè)計(jì)的組織，或者為了實(shí)現(xiàn)并行方法，您的團(tuán)隊(duì)也可以專注于數(shù)據(jù)準(zhǔn)備。您可以先清理和準(zhǔn)備一些基礎(chǔ)數(shù)據(jù)集，以及一些您認(rèn)為能夠帶來價(jià)值的專業(yè)數(shù)據(jù)集：
通過清理信息并將數(shù)據(jù)輸入 AI 模型，您仍然可以在現(xiàn)有路線圖上開展工作，同時(shí)為 AI 計(jì)劃取得一些進(jìn)展。這樣，您就可以在對現(xiàn)有數(shù)據(jù)集執(zhí)行深度學(xué)習(xí)關(guān)聯(lián)時(shí)讓數(shù)據(jù)為您提供指導(dǎo)，從而進(jìn)一步研究特定經(jīng)驗(yàn)用例。
要利用 AI 解決客戶問題，團(tuán)隊(duì)必須仔細(xì)思考 AI 如何在系統(tǒng)中運(yùn)行，以及它將如何影響用戶體驗(yàn)。請使用下方矩陣來指導(dǎo)討論和決策。
真正的用戶倡導(dǎo)者提出的問題
確保不錯(cuò)過任何機(jī)會(huì)，分享在探索過程中、通過用戶反饋或分析所獲得的經(jīng)驗(yàn)。及時(shí)向業(yè)務(wù)和產(chǎn)品利益相關(guān)者匯報(bào)研究結(jié)果，確保路線圖的優(yōu)先事項(xiàng)得到數(shù)據(jù)支持。
用戶體驗(yàn)團(tuán)隊(duì)還可以通過有效的可視化，在幫助利益相關(guān)者更好地確定工作優(yōu)先級(jí)方面發(fā)揮關(guān)鍵作用。與產(chǎn)品經(jīng)理合作，模擬代表最終愿景、第一步以及最終實(shí)現(xiàn)之前的幾個(gè)中間階段的英雄體驗(yàn)，這些體驗(yàn)可以映射到交付時(shí)間表和階段。
確保你能定量和定性地衡量結(jié)果。包括領(lǐng)導(dǎo)層的投資回報(bào)率 (ROI) 和產(chǎn)品團(tuán)隊(duì)的關(guān)鍵績效指標(biāo) (KPI)。雖然我不推薦這些方法，但Arounda 的《人工智能用戶體驗(yàn)：完善人工智能產(chǎn)品指標(biāo)的 10 個(gè)技巧》提供了很好的例子：
如果您已經(jīng)為客戶提供了良好的服務(wù)，那么打造高影響力的 AI 體驗(yàn)應(yīng)該輕而易舉。但陷阱在于，組織對 AI 愿景或目標(biāo)的看法不一致，以及您的產(chǎn)品技術(shù)能力尚未為 AI 做好準(zhǔn)備。作為一名設(shè)計(jì)領(lǐng)導(dǎo)者，您擁有獨(dú)特的優(yōu)勢，只需稍加挖掘、拓展人脈，并打破常規(guī)思維，就能引領(lǐng)變革。
在數(shù)字產(chǎn)品設(shè)計(jì)中，響應(yīng)式設(shè)計(jì)早已成為連接功能與體驗(yàn)的關(guān)鍵路徑。智能手表的表盤，作為最核心的信息承載區(qū)，正在向“可感知、可適配、可延展”的方向不斷演進(jìn)。而我們將其類比為“數(shù)字卡片”，正是因?yàn)槎咴谠O(shè)計(jì)邏輯上的高度契合：都追求信息層級(jí)的清晰展現(xiàn)、內(nèi)容與場景的靈活適配，以及操作的直觀反饋。
卡片設(shè)計(jì)以模塊化、結(jié)構(gòu)清晰、響應(yīng)靈活著稱，能在不同屏幕與使用場景中自如調(diào)度內(nèi)容展示方式。而智能手表的表盤設(shè)計(jì)同樣需要在極小的顯示空間內(nèi)，精準(zhǔn)傳遞時(shí)間、健康、通知等多維度信息。通過響應(yīng)式設(shè)計(jì)的引入，表盤可以根據(jù)環(huán)境光線、使用者習(xí)慣、交互狀態(tài)等動(dòng)態(tài)變化，自動(dòng)調(diào)整元素的排布與表現(xiàn)形式，實(shí)現(xiàn)“信息即所需，界面即交互”。
例如，在運(yùn)動(dòng)狀態(tài)下表盤可自動(dòng)突出心率與步數(shù)；而在夜間，它又能切換為更具護(hù)眼性的低亮模式。這種“感知上下文”的能力，讓表盤從一個(gè)靜態(tài)的界面，變?yōu)橐粋€(gè)貼近用戶、主動(dòng)適應(yīng)的智能卡片。
響應(yīng)式的表盤設(shè)計(jì)，不僅提高了使用效率，更拓展了產(chǎn)品體驗(yàn)的邊界。它像一張隨時(shí)變化的數(shù)字卡片，安靜卻聰明地陪伴在你腕間，把復(fù)雜的系統(tǒng)邏輯轉(zhuǎn)化為可感知的溫柔細(xì)節(jié)。
ChatGPT 是否有可能生成 UI？
我之前測試過幾次，但結(jié)果卻令人失望。
下面是我兩個(gè)月前在一份時(shí)事通訊中分享的一個(gè)例子。
它看上去太卡通了，不太實(shí)用。
然而，上周，OpenAI 推出了一個(gè)重大更新，所以我決定再次嘗試。
根據(jù)我的提示，我能夠生成更好的UI模型。我甚至可以根據(jù)自己的需求創(chuàng)建多個(gè)設(shè)計(jì)選項(xiàng)：
今天，我將向你們展示我進(jìn)行的實(shí)驗(yàn)、我使用的提示以及過程中的一些驚喜和收獲。
讓我們開始吧。
OpenAI 宣布，現(xiàn)在可以使用 GPT-4o 在 ChatGPT 中生成高質(zhì)量圖像，而不是使用較舊的 DALL·E 模型。
它更擅長遵循指令，并且可以更好地呈現(xiàn)圖像中的文本。
上周，許多人嘗試將照片轉(zhuǎn)換成人工智能藝術(shù)作品——這就是吉卜力風(fēng)格藝術(shù)潮流流行的原因。
我也嘗試過：
但在網(wǎng)上看到很多有趣的藝術(shù)作品后，我想：
如果我可以使用 ChatGPT 生成對產(chǎn)品設(shè)計(jì)師真正有用的 UI 會(huì)怎么樣？
實(shí)驗(yàn)就是從這里開始的。
我使用 ChatGPT 來幫助我生成我想要的 UI 的詳細(xì)提示。
# 為名為“SkillVerse - 熱門微課程”的應(yīng)用設(shè)計(jì)一個(gè)簡潔、現(xiàn)代的移動(dòng) UI 界面（iOS 風(fēng)格）。布局應(yīng)遵循以下結(jié)構(gòu)化部分。## 1. 狀態(tài)欄（頂部）- **樣式**：標(biāo)準(zhǔn) iOS 布局（頂部安全區(qū)域）---## 2. 標(biāo)題部分- **居中標(biāo)志**：“SkillVerse” - **字體**：中等粗細(xì)，小尺寸 - **顏色**：藍(lán)色文本 ---## 3. 特色課程輪播（水平滾動(dòng)）- **風(fēng)格**：具有圓角和柔和陰影的可滑動(dòng)卡片 - **卡片**: -**卡 1** - 標(biāo)題：**動(dòng)態(tài)設(shè)計(jì)簡介** - 字幕：*4 月 2 日開始* - 視覺：動(dòng)畫縮略圖 -**卡 2** - 標(biāo)題：《自由職業(yè)者精通 Excel》 - 字幕：*3 月 31 日開始* - 視覺：生產(chǎn)力圖標(biāo) ---## 4. 導(dǎo)航標(biāo)簽-**標(biāo)簽**： - **趨勢**（活躍，**粗體標(biāo)簽**帶有**藍(lán)色下劃線**） - 受到推崇的 - 已注冊 - 已保存 ---## 5. 過濾行- **過濾器（下拉菜單）**： - **過去 7 天**（基于時(shí)間） - **所有主題**（類別） - **所有級(jí)別**（難度） ---## 6. 熱門課程列表- **布局**：可重復(fù)課程項(xiàng)目的垂直堆疊： - **左**：圓形縮略圖 - **中心**： - 課程名稱 - 級(jí)別（例如，初學(xué)者、中級(jí)等） - **右**：保存圖標(biāo) - **底部**：入學(xué)人數(shù) + 趨勢（例如，入學(xué)人數(shù) 2.4k，+12%） ---## 7. 底部導(dǎo)航欄-**標(biāo)簽**： - **主頁**（活動(dòng)，突出顯示顏色） - 搜索 - 活動(dòng) - 輪廓 - **風(fēng)格**： - 下方有標(biāo)簽
然后我將其粘貼到 ChatGPT 中的新聊天窗口中，然后單擊“生成”圖標(biāo)。
令人驚訝的是，ChatGPT 在右側(cè)打開了一個(gè)額外的面板，觸發(fā)了它的 Canvas 功能。然后它開始生成代碼。
這立刻讓我想起了克勞德的神器功能。
然后我點(diǎn)擊了右上角的“預(yù)覽”按鈕。
生成了響應(yīng)式、代碼支持的 UI。
看起來很有趣，但似乎不如克勞德那么精確/精致。
由于我的目的只是生成一個(gè)圖像（一個(gè)可視化模型）而不是一個(gè)代碼支持的 UI，因此我請求后續(xù)提示來糾正它：
創(chuàng)建一個(gè)可視化模型。而是一個(gè)視覺模型。
結(jié)果如下：
結(jié)果出乎意料地好，尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個(gè)巨大的提升。
測驗(yàn)：你能在上述 AI 生成的 UI 中找到多少個(gè)拼寫錯(cuò)誤？:)
盡管用戶界面看起來不錯(cuò)，但我仍然對圖像截?cái)喔械接悬c(diǎn)困擾，所以我問了：
頂部和底部看起來有點(diǎn)截?cái)?。您能?UI 縮小 20% 左右，讓它整體更小一些嗎？頂部和底部看起來有點(diǎn)截?cái)?。您能?UI 縮小20%左右， 讓它整體更小一些嗎？
結(jié)果如下：
看起來不錯(cuò)！
然后我開始更有創(chuàng)意了……我想，如果我讓它生成多個(gè)設(shè)計(jì)方案供我參考會(huì)怎么樣？那會(huì)更有幫助！
所以我寫了這個(gè)：
創(chuàng)建三個(gè)設(shè)計(jì)選項(xiàng)。使用相同的核心內(nèi)容，但根據(jù)以下描述改變布局、UI 元素和視覺重點(diǎn)：選項(xiàng) 1. 大膽且引人入勝- 優(yōu)先考慮視覺沖擊力和品牌表達(dá)選項(xiàng) 2. 功能強(qiáng)大且快速- 優(yōu)先考慮速度、清晰度和生產(chǎn)力- 緊湊的用戶界面，卡片更小，信息層次更密集選項(xiàng)3.個(gè)性化和溫暖- 優(yōu)先考慮聯(lián)系、信任和個(gè)性化- “為你推薦”輪播，包含人工智能策劃的課程建議- 社會(huì)證明（頭像、徽章、朋友活動(dòng)）- 添加“社區(qū)”選項(xiàng)卡，用于同行共享內(nèi)容
結(jié)果如下：
再次，我對 GPT-4o 圖像生成能力的提升感到震驚。
雖然這三個(gè)選項(xiàng)看起來仍然非常相似，但如果仔細(xì)觀察，就會(huì)發(fā)現(xiàn)一些小細(xì)節(jié) - 例如“搜索”圖標(biāo)、社交證明和副本 - 試圖使每個(gè)版本都與其他版本區(qū)分開來。
不過，結(jié)果肯定還有改進(jìn)的空間。例如，由于一張圖片中包含了大量信息，ChatGPT 的精度開始下降。你可能會(huì)注意到，部分文本變得無法識(shí)別/扭曲。
接下來，作為一個(gè)有趣的測試，我使用Codia AI 的插件根據(jù) ChatGPT 生成的視覺模型生成 Figma 設(shè)計(jì)。
所有組件（包括文本）都可以在 Figma 中編輯。
它使用的字體系列是 Intel。
好得可怕。
如果我想進(jìn)行更改，這使我能夠自定義 UI 模型。
ChatGPT 生成 UI 視覺模型的能力是一個(gè)巨大的提升。與之前版本相比，它提供了更高的精度和對提示的遵循性。
話雖如此，速度還是有點(diǎn)慢，準(zhǔn)確率還有待提高。有時(shí)圖像生成到一半就停止了；有時(shí)結(jié)果很隨機(jī)，而且與指令不完全一致。
當(dāng)我要求 ChatGPT 根據(jù)設(shè)計(jì)選項(xiàng)創(chuàng)建 3D 模型時(shí)，事情變得有點(diǎn)扭曲和奇怪——但還不算太糟。
不管怎樣，這已經(jīng)是一次很棒的升級(jí)了。我現(xiàn)在能生成以前無法生成的東西了。
這一切都在 ChatGPT 聊天窗口內(nèi)完成。多么方便??？
我非常興奮并希望未來會(huì)有更好的升級(jí)。
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法，了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。本文介紹了十一條有效的設(shè)計(jì)準(zhǔn)則，用形象的圖解幫助讀者更好地理解設(shè)計(jì)準(zhǔn)則在設(shè)計(jì)工作中的運(yùn)用，幫助你利用這些方法更快捷地開展設(shè)計(jì)。適合關(guān)注產(chǎn)品設(shè)計(jì)的小伙伴閱讀。
感知力是大腦將不同的信息連接和組織成一個(gè)連貫整體的機(jī)制。例如我們將相似的對象分組并連接起來，能夠輕松地區(qū)分出不屬于該組的對象。
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法，了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。
在UI設(shè)計(jì)時(shí)，我們應(yīng)該有意識(shí)地運(yùn)用感知力，用足夠的事實(shí)來驗(yàn)證設(shè)計(jì)，有依有據(jù)地解釋為什么這個(gè)圖形元素要這樣設(shè)計(jì)？背后的原因是什么？
提升感知力有助于清晰地解釋設(shè)計(jì)方案，避免常見的設(shè)計(jì)錯(cuò)誤，引導(dǎo)我們將設(shè)計(jì)做得更好、更容易理解！
彼此靠近的元素會(huì)被自動(dòng)理解為一組。把它們的位置放得更遠(yuǎn)，會(huì)給人一種這些元素是完全獨(dú)立的個(gè)體的印象。
在UI設(shè)計(jì)中，可以利用鄰近原則將相似的界面元素組合在一起，把控總體布局。
鄰近規(guī)則適用于主導(dǎo)航、卡片、按鈕、內(nèi)容和圖標(biāo)等。我們還可以使用適當(dāng)?shù)牧舭讓⒉煌脑剡M(jìn)一步分開，創(chuàng)建一個(gè)層級(jí)更清晰的界面結(jié)構(gòu)，以此來幫助用戶瀏覽和理解不同類型的信息。
鄰近原則是直接影響界面可用性的基本規(guī)則之一。如果隨意控制元素的位置和間距，有可能會(huì)讓整個(gè)產(chǎn)品變得混亂和難以理解。
視覺上相似的元素會(huì)被視為同一組，視覺上不同的元素，大腦會(huì)下意識(shí)將其視為單獨(dú)的元素。
利用相似性可以來定義界面的特征，例如顏色、形狀、尺寸、紋理或空間位置等。最容易區(qū)分的是顏色相似，其次是尺寸和形狀相似。
如果一個(gè)元素和界面中其他的元素都不同，無法融入到其他元素組中，那么這個(gè)元素就會(huì)變得非常顯眼。
我們可以利用這種差異化的效果來突出一些具有引導(dǎo)性或者功能性的元素，例如登錄按鈕或者加入購物車按鈕等。
一組不相連的元素組合在一起，我們會(huì)下意識(shí)地自動(dòng)補(bǔ)充這些元素之間的空白，得到一個(gè)完整的、可識(shí)別的形狀。
閉合原則有多種不同的用法。例如一個(gè)虛線箭頭，我們會(huì)填補(bǔ)空白并把這些點(diǎn)連接在一起，得到一條完整的線段。
閉合原則還有助于識(shí)別抽象的圖標(biāo)形狀并賦予更多的含義。在圖標(biāo)設(shè)計(jì)中，為了避免信息過載，大多數(shù)圖標(biāo)的設(shè)計(jì)都很簡潔，更方便用戶理解。
運(yùn)用閉合原則的經(jīng)典案例包括用不同虛線構(gòu)成的IBM標(biāo)志、利用正負(fù)形空間組合而成的WWF熊貓標(biāo)志。
UI界面中的元素一旦有對稱性，就會(huì)產(chǎn)生秩序感，我們很快就能看到并理解這種形式。
我們天生喜歡對稱的物體。對稱排列的元素在視覺上更令人舒服，也更美觀。
可能有人覺得對稱設(shè)計(jì)過于呆板，這種想法在平面廣告或視覺設(shè)計(jì)中可能正確，但在UI設(shè)計(jì)中對稱布局是相當(dāng)重要且實(shí)用的界面排版形式。
對稱布局讓設(shè)計(jì)更容易理解，也更友好，缺乏對稱會(huì)導(dǎo)致界面混亂，不知道該關(guān)注哪個(gè)元素。當(dāng)然，如果想讓某個(gè)模塊突出展示，也可以嘗試打破對稱性，這樣不對稱的元素就能在界面中脫穎而出。
界面中沿著同一條線對齊的元素會(huì)被認(rèn)為屬于同一組。
在瀏覽界面時(shí)，視線會(huì)第一時(shí)間尋找最順暢的視覺動(dòng)線。這也解釋了為什么在使用連續(xù)性原則時(shí)，需要確保直線(或曲線)是均勻和可預(yù)測的。
線條越均勻，生成的形狀越容易被用戶正確識(shí)別。
連續(xù)性有助于界面保持上下垂直滾動(dòng)時(shí)的節(jié)奏，相似的內(nèi)容應(yīng)始終保持對齊。如果某個(gè)元素打破了這種連續(xù)性，我們的瀏覽節(jié)奏會(huì)被打亂，瀏覽速度也會(huì)變慢。
當(dāng)下的UI設(shè)計(jì)中，流行帶有圓角的卡片和按鈕效果。其中的一個(gè)原因是我們對于直角的處理速度稍慢，視線需要停頓并旋轉(zhuǎn)90度，而更圓滑的導(dǎo)角效果能幫助我們的視線更快地轉(zhuǎn)換。
按相同方向、以相同速度運(yùn)動(dòng)的元素被認(rèn)為是一組。
在設(shè)計(jì)輪播、下拉列表、過渡動(dòng)畫等場景時(shí)，共同命運(yùn)原則會(huì)很有幫助。例如我們的視線既跟隨輪播圖水平移動(dòng)，還跟隨下拉列表向下展開。
根據(jù)?？硕?，可供的選擇數(shù)量應(yīng)該有限制。有太多東西可供選擇可能會(huì)導(dǎo)致用戶迷失方向，做出判斷的時(shí)間加長，甚至?xí)械綁毫Α?/p>
米勒定律提到，大腦處理信息的能力與認(rèn)知負(fù)荷有直接的關(guān)系。我們大腦一次能處理的信息量大約是7個(gè)對象。對象數(shù)量越多，處理它們所需的時(shí)間就越長。
在設(shè)計(jì)時(shí)，盡量不要超過七個(gè)選項(xiàng)，為了獲得最好的體驗(yàn)，應(yīng)盡量將選項(xiàng)保持在4-5個(gè)。這意味著需要控制主導(dǎo)航數(shù)量、按鈕數(shù)量、下拉選項(xiàng)和輪播圖數(shù)量等。
當(dāng)需要用戶做選擇時(shí)，最好能突出顯示最受歡迎或最推薦的選項(xiàng)，幫助用戶更快做出決策。
我們能夠本能地區(qū)分界面中的圖形元素和背景。
界面由不同類型和樣式的圖層組成，每個(gè)圖層都有不同的層次結(jié)構(gòu)。
為了避免層次結(jié)構(gòu)混淆，我們需要清楚地定義界面的所有元素。背景不需要設(shè)計(jì)設(shè)計(jì)的太花哨，有可能會(huì)搶奪用戶對主要內(nèi)容的注意力。
輔助內(nèi)容和功能不需要太明顯，并且需要與主要內(nèi)容在設(shè)計(jì)上做出區(qū)分。
可以使用對比關(guān)系、位置關(guān)系和陰影等方法幫助用戶區(qū)分內(nèi)容和背景。
用戶通常認(rèn)為具有視覺吸引力(美觀)的產(chǎn)品更實(shí)用。
根據(jù)這個(gè)原則，流行、對稱、美觀的界面會(huì)對用戶產(chǎn)生更積極的影響。如果視覺效果給人足夠好的第一印象，用戶可能會(huì)忽略一些可用性問題。
審美可用性的基礎(chǔ)在于具有一定的可用性，之后才會(huì)起作用。如果產(chǎn)品本身的功能就很糟糕，那么再美觀的界面也無濟(jì)于事。
高質(zhì)量、美觀的界面有助于建立用戶信任。相反一個(gè)看起來混亂的設(shè)計(jì)會(huì)讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題，但他們也會(huì)覺得這個(gè)產(chǎn)品有風(fēng)險(xiǎn)或者不正規(guī)。
高質(zhì)量的UI設(shè)計(jì)對于銀行類、金融類和醫(yī)療類產(chǎn)品來說尤為重要，尤其是在需要用戶提供個(gè)人信息或涉及交易的使用場景中。
我們最容易記住一組當(dāng)中的第一個(gè)和最后一個(gè)元素。
將最重要的內(nèi)容或元素放在每組的第一個(gè)或最后一個(gè)，吸引用戶注意力，方便高頻操作。而次要的內(nèi)容操作頻率相對較低，則放到中間位置。
例如在構(gòu)建導(dǎo)航、下拉列表等場景中，將重要的操作放到首位。
在一組看起來相似的元素中，我們總是會(huì)記住與其余元素不匹配的那個(gè)元素。
在UI設(shè)計(jì)中，隔離效應(yīng)意味著將界面中重要的內(nèi)容或關(guān)鍵的操作在視覺上與眾不同。
最典型案例是界面中的CTA(號(hào)召性用語)按鈕。通過改變CTA按鈕的顏色、尺寸等，與界面中的其他按鈕區(qū)分開來，第一時(shí)間引起用戶的注意。
專欄作家
作者：Clippp，每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.1leven.cn