近一年來，Figma 可謂是體驗設計領域中最熱門的工具。剛好最近開始頻繁的在 Axure 9.0 和 Figma 中切換使用，深刻的感受到了設計細節帶來的體驗差異化。今天就通過一些細節亮點，總結下工具軟件的體驗設計的幾個原則。

交互輸出文檔的作用

文檔這個東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協調合作，恨的就是很多人對文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應有的作用，反而成為了一個不負責任的借口。所以一份合格或者優秀的交互輸出文檔對于一個項目的流轉以及團隊的配合來說是至關重要的。交互文檔的主要利益相關者通常是以下幾個角色：交互、產品、開發、UI

交互

首先優秀的交互文檔必須在交互組內部進行過審核，包括一致的撰寫標準和模式的使用，一個比較規范的交互設計組對于交互的撰寫標準也是有嚴格的規范的，以及在什么情況使用什么交互模式還有組件庫的調用都會有詳細的說明，那么你的交互輸出文檔就必須滿足團隊設定的規范。

其次對于其他交互設計師來說，你的設計方案中是否會出現其他人負責的模塊，那么在評審的時候需要同步，雖然交互輸出文檔對于其他交互來說不是直接受益人，但是在團隊同步過程中也是非常重要的。

產品

每個公司對于文檔的要求和規則不一樣。小公司可能沒有交互設計這個崗位，那么可能產品連prd文檔也沒有，僅僅只是一個簡易的需求說明文檔，就更不用說針對交互規則的說明文檔了。

很多有完善規模和流程的團隊不僅會有詳細的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點是那么多文檔最后是給誰看的，一共在項目中會有多少文檔產生。

通常產品經理會在項目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個prd文檔主要是給業務方、交互和開發看的，在這個文檔中需要包含一些業務規則以及交互規則，所以交互的輸出文檔是需要和產品的prd文檔合并的。

當然如果你是一位很有自驅力的人，那么你可以自己推進需求并落地，一個人就可以完成prd文檔的撰寫和需求的落地了。

開發

特別想給各位提個醒，在開發需求評審的過程中，請一定記住你們評審的目的，開發同學也要注意，請把重點放在需求是否能實現以及開發相關的地方即可，請不要考慮為什么要這樣做，或者你覺得應該怎么設計，一旦進入了開發對需求和設計的評頭論足那么這個會議效率就相當低下。專業的事情就交給專業的人去做吧，可以私下討論但不要在評審會上各抒己見。

交互輸出文檔對于開發的作用就是，開發可以更好的還原該功能中交互的跳轉以及邏輯，所以我們盡量把交互規則寫明白寫詳細，比如按鈕在press和default時候是否樣式會有變化，或者頁面轉場的方向，這都是一些細節，減少不必要的低效溝通。你會發現有些時候為什么開發總是來問一些規則，就是因為文檔中沒有描述準確，所以開發和交互都需要花時間去同步這個細節。

所以這個也非?？简灲换ピO計師對需求文檔撰寫的功底，并不是圖片文字隨意擺放就可以的。和開發合作時也是一項內部的體驗設計，你把文檔寫好了，開發看起來也舒服，滿意度也高。如果是一堆文案，連基本的對齊都沒做到的話，誰來看都會看不下去。

UI

交互輸出文檔對于UI來說，作用就非常簡單了，但是這里也會碰到問題，那就是交互同學只需要把信息的層次表示出來即可，千萬不要畫到連視覺同學都沒有發揮余地的程度。所以為什么現在UXD體驗設計那么火，就是因為交互和UI其實重合度是很高的，只要有智能化組件庫和工具做支撐，那么在交互和UI的設計流程中，時間就會大大降低。

交互輸出文檔的內容

在這里，我們就將整個prd文檔的內容給大家分享一下，不僅僅是交互需要輸出的部分。因為一個高階的交互是需要能夠獨自產出prd文檔的。然后不同的公司對與文檔的要求也是不同，大家做參考即可。

一份基礎的prd文檔主要由這幾部分組成（其實就是這個需求的來源以及推導過程和如何落地的說明）：

1.項目概要

a.需求背景

這個是一個項目最重要的部分，可以說背景沒有搞清楚，后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業務方（運營）需要做一個掃一掃功能，那么這個功能首先我們就從業務價值和用戶價值兩個方面去評估，根據對業務方的溝通之后我們發現掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼，讓用戶進行掃碼參與活動這樣的玩法。

所以這個需求對于業務方來說是一個轉化手段，通過掃碼參與活動-領券-消費，確實是一個不錯的玩法，但是大家如果只盯著眼前的問題或許就不夠了，比如當周年慶結束之后這個功能還有什么用，他在以后的規劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。

其次，對于用戶來說，掃一掃并不是幫助他們解決了某個問題，而是我做了一個東西，同時搭配著這個功能讓你們去使用，對用戶來說是一個很可有可無的功能，如果線下包裹上的二維碼破損了也是非常影響體驗并且是不可控的。那么綜上所述，既然要做一個臨時的活動用其他的方式會不會更好？

所以在這個文檔中的第一步，首先就是要確定需求的背景、價值，也就是說，你這個需求是怎么來的，比如再來講我們一個店鋪的優化項目，在這個項目中，首先我們必須在評審的時候說清楚我們為什么要對其進行優化和改版，一定是出現了或者我們定義到了某個比較嚴重的問題，這邊大家對我們app業務可能不是很了解我就簡單說了，就是個人中心和店鋪營銷場景重合過多，并且賣家的同時可以買和賣兩個場景存在，所以店鋪頁通過我們的數據分析和用戶的訪談我們發現了一些機會點，以及我們必須突出一個核心場景讓用戶有明確的分辨。

另外就是背景的描述也可以帶上你的調研結果和分析，比如之前我們做首頁優化，我們觀察了近5個月的數據，都呈現下降的趨勢，所以之后有進行了一系列的訪談和用戶體驗地圖分析才有了這個需求的背景產生。

b.需求目標

目標很好理解，就是我們希望通過這次需求迭代達到一個什么成果，比如我們之前做過一次整體的體驗優化改版，那么我們的目標就是減少用戶的流程跳失、提升整體體驗滿意度、提高用戶的任務轉化率，其中我們做了一個商品關注的功能，由于是限時特價商品所以是限量的，在規定時間進行搶購，為了讓用戶的使用場景統一我們打算在應用內做一個商品關注功能，所以在這個需求的初期，我們對這個功能的目標和預期是提升xx百分比的轉化，提高x%比的gmv，提高用戶對關注商品下單的效率和滿意度，之前很多用戶想要購買商品需要自己在手機端設置鬧鐘，不方便。所以這個功能的一個目標就是解決用戶場景遷移的問題。設定目標之后，就是為了在上線后對其進行復盤和數據跟蹤還有用戶跟蹤。

可以用一句話來描述：針對什么用戶在什么場景下解決用戶的什么問題，達到什么目的？

c.需求范圍

需求范圍也相當于范圍層，指的就是在該需求中我們需要做哪些相關功能以及功能涉及面。舉個例子，之前說的掃一掃功能，不同的產品定位對于掃一掃功能的要求也是不同的，比如說微信在掃一掃功能中承載了：掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能，再比如淘寶，有掃一掃（ar、拍立淘）、相冊、歷史、幫助、手電，這說明了不同產品對掃一掃功能有不一樣的要求，所以在需求范圍內我們需要把本次需要做的功能進行描述，并且該功能是否影響其他功能的使用和對整個產品的影響范圍。并且我們也會講所需要的功能進行拆解和優先級拆分，在表格中編輯。

d.調研分析

調研分析其實就是為我們第一步背景和價值做準備，由于匯報方案和評審，或者在項目推進時，我們需要有相應的論據來支撐我們方案的客觀性，所以在這一板塊中輸出的結論就非常重要，比如之前的首頁改版，經過用戶研究小組的訪談和數據分析得出相關的結論，通過埋點找到相應板塊的點擊數據和異常點，然后再進行一系列的問卷和訪談研究，找到結果，都是為了輔助項目的背景以及在評審中大家對需求價值的靈魂拷問。由于數據和調研結果比較敏感就不過多放了。

e.版本日志

日志是一個非常重要的組成部分，做過開發的同學都知道log 的重要性，當我們跑不通的時候我們都會去檢查log，然后多測試幾遍可能就找到問題所在了，其實我們的版本日志的作用也是這樣，但是一個是對自己來說可以記錄自己的工作過程，還有思路的變化，第二就是對外，包括和需求方的討論，會議的紀要等。

要注意的是會議紀要在備注中需要詳細說明，以做證據。同時也要郵件通知相關人員和負責人。可能有些公司還會放一些評審記錄，比如各部門負責人對方案和需求的建議，業務方和技術負責人的一些建議也會放在項目概要中，而這個prd文檔也可通過內部服務器進行實時更新和保存，如svn。方便大家對需求的進度和迭代有一個直觀的追蹤。

f.項目成員

這個就不用多說了，產品、運營、交互、視覺、開發各司其職，照相館人員即可，就不至于當項目開始進行了人員分配還沒到位就尷尬了。

2.需求方案設計

a.業務、任務、界面流程圖

有些同學不是特別明白業務流程圖和任務流程圖的區別，這邊給大家簡單介紹一下

業務流程圖：

意思就是在這個需求系統中，相關利益者的業務關系，任務信息的流向的一個圖標。比如這個簡單的例子，用戶在點外賣這個場景中，相關的利益者有用戶、店家、外賣員三者，那么當用戶開始觸發流程后，這3者在這個流程中就會各司其職，而業務流程圖也很明顯的告訴大家所有聯動者的指責和流程走向。

任務流程圖：

用戶在具體執行某一個任務時候的工作流程，以及其核心任務的操作步驟，比如在登錄注冊這個任務中，用戶需要進行一系列的操作，在這個流程中用戶的操作引發的系統判斷需要詳細說明。

界面流程圖：

界面之間的跳轉關系和路徑，在這個流程圖中，我們不需要吧詳細的說明寫上，只需要將需求中涉及到的頁面跳轉進行敘述即可。

b.相關說明和規則

接下來就要開始我們交互文檔最為關鍵的部分了，如何書寫交互說明，以及交互說明應該包含的內容。

1.全局思考

在做交互方案也就是我們畫原型的時候會思考一些問題：

a.整體思考

1.信息架構是否容易理解，信息分類是否合理，比如我們的信息架構是否采用了用戶容易理解的，市面上常用的信息架構。

2.信息層級和路徑是否合理，不一定要最簡，但是要高效，信息的優先級是否放置準確，信息組織是否具有相關性、邏輯性。

3.主題是否清晰，3秒內告訴“我”在哪里，并且可以做什么

4.方案的延展和后續功能規劃的可擴展性

b.用戶權限

根據不同用戶的權限對該需求進行檢查，比如普通用戶、vip用戶、內外網用戶、游客用戶，在登錄未登錄時候對需求內功能的使用是否有影響

c.登錄方式

用戶登錄和注冊、終端的兼容，不同方式注冊的用戶是否需要補填相關信息等等

d.流程

1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性；

2.逆向流程和非正常流程的思考有沒有完全；

3.流程的閉環有沒有做好；頁面跳轉的方式是否合理；

4.中斷后的恢復狀態如何呈現；

5是否保留原信息等等

2.內容、狀態和顯示

a.內容的獲取來源

例如下方的圖片為例，banner的圖片來源和發現feed流的圖片來源肯定是不同的，那么就要寫清楚，圖片或者數據的來源是來自于用戶的上傳還是系統后臺的配置獲??；并且獲取的方式是如何的，是需要手動下啦刷新還是切換頁面自動刷新，還是設定時間自動刷新。

字段、圖標是從接口獲取還是前端寫死，以及氣泡展示的規則等等。另外一張圖片可能用在多個地方，而可能呈現的尺寸不同，所以在涉及到相關圖片使用時要注意剪裁規則和圖片的來源。

b.緩存機制

圖片以及一些資源通常我們需要對其進行緩存，有些同學不清楚什么是緩存，緩存是在計算機上的一個原始數據的復制集，一般來說需要緩存的內容是通過瀏覽產生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會被緩存。同時在不同的網絡環境下緩存的時間標準也不同，無網絡那肯定只能讀取緩存文件，wifi環境下緩存時間可設置的短一些，而流量環境下時間就可以設置的偏長。

c.狀態

狀態大家都應該都會寫，主要包含的就是初始狀態（冷啟動無緩存第一次進入）、空狀態（無任何內容比如空的購物車）、常規狀態、異常狀態（網絡中斷、接口報錯）還有過期狀態等

d.顯示

數據和內容的極限值，最大和最小，比如粉絲和關注的數量，小于1萬人則顯示完整的數量，大于等于1萬小于11000則顯示1萬，大于11000小于12000則顯示1.1萬，這樣的方式。另外包括標題極限為一行顯示，超過部分的顯示規則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用￥xxx還是xxx元，小數點保留的規則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等

3.反饋、提示、手勢

反饋和提示的樣式有很多種，一般反饋指的是用戶對某一個控件進行觸發后獲得的反饋，比如按鈕按下的反饋，以及之后收到的反饋，是進行跳轉還是給用戶提示，采用的是模態還是非模態的提示。比如點擊關注某個人的按鈕后會提示關注成功，比如退出某個圖文編輯會二次確認是否退出，再比如抖音長按后出現的3個操作反饋，還有支付成功后的動效提示、惡意多次操作后的提示等等

如果有手勢交互也需要說明，比如滑動后內容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等

4.加載

使用模態還是非模態，如果是模態加載請盡量使用情感化設計來減少用戶焦慮。如果是非模態，根據信息呈現和體驗采用分步加載還是預加載還是智能加載。如果是分布加載就選擇先加載資源較小的內容，再加載圖片，可以先將圖片模糊化粗渲染給用戶呈現，包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預判用戶的行為進行內容加載，例如當用戶在某個圖文前停留時間達到某個值后就預先給用戶加載里面的內容。

加載的全局方式在方案中需要考慮，頁面加載、下啦刷新等等，需要統一。

5.環境、設備與場景

a.不同設備、廠商的不同版本

都會影響到方案的落地和用戶體驗這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好，但是小屏幕的時候這個交互控件顯得就很難受，所以需要仔細斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進行兼容。

b.白天和晚上是否需要做不同的風格設計，以及在是否需要給用戶遮擋隱私的功能。

6.文案

文案這點很多設計師都忽略了，你們有沒有聽說過一個叫文案設計師的崗位。其實文案在我們產品設計中是非常重要的。首先一個產品的文案對應的語氣和產品調性也是相關的，就好比我們說產品有它自己的性格一樣，另外文案的使用直接就影響用戶對該信息的理解，比如一個對話框的文案是：確定退出嗎？下面會有兩種不同的選擇，一個確定，一個是退出，大家覺得哪個比較好？還有就是不加“嗎”，就變成了：確定退出？這樣描述出來的語言給人感覺很冰冷，甚至有一些威脅。

所以首先我們的文案是否有溫度，和產品的個性是否相匹配。其次文案的表述是否準確和通俗易懂，比如你告訴程序員一句話，幫我去菜市場買西瓜，如果有西紅柿，幫我買兩個，你會帶什么東西回家？程序員版：if（看到西紅柿）西瓜等于2；else 西瓜=1。buy 西瓜。條件：看見西紅柿 執行命令：買兩個西瓜一語道破版：其實吧，看到西紅柿呢是賣兩個西瓜的觸發條件…沒看到就買一個西瓜，看到就買兩個西瓜。所以這里出現的不僅僅是程序員的思維和我們的差異化，也說明了一句話沒有表述清楚所帶來的問題是很大的。

另外就是文案用語的一致性，在整個產品同樣的場景中，我們需要統一文案用語。

7.常見控件

具體見下方列表

8.撰寫方式

作為一個設計師，不管是否在做視覺，我們都需要對文檔有一個美化意識，如果你的文檔非常凌亂，那么在別人眼里就會覺得你是一個比較粗心大意，不夠負責任的人，所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。

目錄

首先在目錄的撰寫時候要進行分類，通常我做的時候會對該需求以頁面父子集關系進行創建，父集為核心頁面，子集為其下的相關子頁面，這樣頁面的流轉和歸屬關系就不會搞錯。

說明

在撰寫規則與說明時可以通過標簽法進行標簽說明的撰寫方式，同樣在視覺上保持美觀，對比與對齊的運用，具體該寫什么東西上面已經說明就不贅述了。除了交互規則以外，高階的交互設計或者產品經理還需要補充業務規則，比如排序、商品抓去規則、權重、算法、活動規則等等這里就不展開說了。

總結

文檔的形式有非常多種，針對不同的公司和產品也需要作出相應的調整，能夠滿足需求和方便協作，目的就達到了，我們并不希望過多的時間花在文檔的撰寫上，而是希望大家在做設計時多思考業務，本次分享就到這里啦～

文章來源：站酷   作者：應駿

分享此文一切功德，皆悉回向給文章原作者及眾讀者.



免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、
cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

習慣性的去應用一些所謂的最好的設計模式，可能會讓你覺得Google，Facebook，Instagram或者說其他的一些你最喜歡的APP總是做的非常棒，你會覺得，他們的設計目標和你自己的設計目標并沒啥差別，但是，人家成功了，而你的作品卻失敗了。所以，這里推薦一些被公認為是(至少曾經被公認為)最好的設計模式，可能在你第一次看來，這些設計模式也就那樣。

1、隱藏導航

關于漢堡圖標，已經有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過，試著去讀一兩篇吧。其實，簡單說來，這些文章討論的主題更主要的是這個圖標里所隱含的那些導航，而不是這個圖標自身。

上面圖片這樣的設計對于設計師來說其實是很有吸引力的，而且簡直太方便了。根本不用擔心屏幕大小的限制，只需要這樣一個圖標，然后，把所有的導航全部塞進這個可以上下滾動的東西里，然后，讓他默認隱藏。就這樣，就這么簡單。

但是，實驗證明，與完全隱藏導航相比，適當的展示出一些導航能夠更多的增加用戶的依賴度和滿意程度，甚至為你帶來更多的收入。所以說，現在的好多大公司的播放器都拋棄了以前的漢堡圖標，將最常用的一些導航一直顯示給了用戶。

如果說你的導航比較復雜，那么，請在考慮優先級的基礎上適當地隱藏導航。

2、圖標，隨處可見的圖標

由于移動端的屏幕大小限制，許多無腦的設計師為了節省空間，在任何只要能夠使用圖標替換的文本域，都使用了圖標。大家都這樣想，象形文字或者圖標占的空間又少，不需要額外的轉換，而且，人們都很熟悉這些圖標，難道不是這樣嗎？所以，每一個APP都這樣做了。

設計師們將上面的那種假設放在腦海里，于是，有的時候，他們將實用性的功能蘊含在了圖標里面，但事實上，那個圖標是難以識別的。比如，你能猜到在下圖的Instagram里的這個圖標點擊之后能夠發送什么信息嗎？

或者說，假如你從來沒用過谷歌翻譯，那么，你會期待下圖的這個圖標實現什么樣的功能呢？

你總是假設你的用戶們非常熟悉那些抽象的圖標，或者說，你總以為用戶們會花大量的時間去研究和學習你的這個圖標的含義。這是一個很普遍性的錯誤，很多設計師都會犯這個錯誤。

Bloom.fm上讓人覺得迷糊的標簽欄

如果說你曾經設計過一個需要一個彈出框來解釋從而提高可用性的圖標，那么，即使你的用戶們會不管怎么樣都能了解它，你的這個做法也是錯誤的。

當然，并不是說你在設計中就一點都不使用圖標。你的用戶們熟悉大量的圖標，這些圖標中，有很大一部分都是能夠代表普通的功能的，比如搜索，播放視頻，郵件，設置等等。(但是，用戶們可能不會很確定當他們點擊一個心形圖標的時候，會發生什么。)

一些能夠被大多數用戶所識別的圖標并且被認為是通用的

對于復雜的和抽象的圖標，在顯示的時候，應該總是在旁邊加上一個文本來進行說明。這樣，你的圖標才是真正有用的。同時，還能夠提高菜單的可發現性，也能夠為你的APP添加漂亮的觸感和個性。

Pixelmator的導航

對于基本的功能，可以使用圖標來展現；但是，對于復雜的功能，就需要使用文本來說明了。(如果你要使用圖標的話，要時常性的做可用性測試)

3、基于手勢的導航操作

當蘋果公司在2007年發布了iPhone的時候，多指觸控技術就成為了人們關注的主流技術，用戶們發現他們不僅可以在屏幕上進行點擊，還可以進行放大，縮小和左右輕掃。

手勢在設計們的圈子中流行了起來，許多的APP都圍繞著手勢操作來進行設計。

Clear里的手勢操作

就像隱藏的導航欄和使用圖標代替文本一樣，手勢看起來似乎能夠為設計師節約一些屏幕空間。(“屏幕上不應該有刪除按鈕的存在，人們只需要向左或者向右輕掃就可以進行刪除了。我們會決定怎么操作的?！?

關于手勢，你首先需要知道的是，手勢是不可見的。人們需要記住它們，就像漢堡菜單的例子一樣。如果你隱藏了一個選項，那么，用到那個選項的人就會越少。

另外，手勢存在著與圖標相同的問題：眾所周知的手勢有點擊，放大，上下滾動，同時，每個APP也有那些需要慢慢發現和學習的手勢。

不幸的是，觸屏界面的設計仍然是一個新的領域，在各個APP中，大多數手勢還不標準和統一。一個很簡單的手勢，比如左右輕掃，在各種各樣的郵件APP中可能都會大相徑庭。

在Apple的Mail APP中，向右輕掃，顯示出了“標記為未讀”的選項

同樣的手勢，在Mail Box中，就表示將郵件存檔

或者說，想一想，搖晃你的手機，在兩個APP中，也會有兩種不同的含義。在iOS中表示撤銷，在Google Maps中表示發送反饋信息。

永遠都要記住，手勢是隱藏的操作，人們不得不去記住它們。對于你的用戶，這需要大量的努力。如果你是一個發起人，也許你可以讓全世界的向右輕掃的含義都一樣——但是，只有當它是你APP的概念設計里必不可少的一個部分的時候。

4、新手引導

新手引導，最近很火的一個話題，適用于用戶第一次與APP打交道的時候。在很多情況下，這個簡單的方式能夠在一個透明的覆蓋層上為用戶展示一些標記來解釋界面元素。

dcovery APP里的新手引導

為什么說這是一個很爛的解決方案呢？因為許多用戶都會跳過你的介紹，他們想做的就是趕緊使用這個APP。即使他們注意到了你的這些標記，當他們把這個關掉的時候，這些所謂的教程也被他們忘得一干二凈了(尤其是當屏幕上擠滿了信息的時候)。最后說一句重要的，在你的屏幕上添加這些引導的標記，并不會提高APP的易用性，記住下面這句話：

原圖翻譯：用戶界面就和講笑話一樣，如果這個笑話還需要解釋才能明白的話，那么，這也不是一個好笑話。

對于你的用戶來說，新手引導也許可以使用其他的方式來設計的更加有用。比如Slack這個APP，使用第一屏來創建一個用戶場景。簡單的介紹一下他們自己，著重于利益而不是屏幕上的功能。

留住你的第一批用戶的一個更有效的方法就是逐步的引導。比如Duolingo，他沒有向用戶們解釋這個APP是如何工作的，而是促使人們做一個指定語言的快速測試(甚至不需要登錄)，因為用戶們可以在做測試的過程中了解到這個APP是如何使用的。同時，這也是展示這個APP的價值的一個更有影響力的方法。

記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎？看看他們的逐步引導是如何做的：用戶們在開始使用APP之前，必須在APP所提供的一個練習場景里嘗試使用這個APP里的每一個手勢。

在你準備在一個半透明的覆蓋層上設計你的引導標記的時候，停下來好好想想第一次使用你的APP的用戶會有寫什么樣的經歷。關注一下使用環境，通常情況下，有更好的方法來歡迎你的用戶們。

5、充滿了創造力，但是并不直觀的空白狀態

很多沒有經驗的設計師很容易忽略APP的空白狀態。但是，從一個APP的整體用戶體驗上來說，這是一個很重要的方面。

有的時候，設計師們把錯誤信息和空白狀態的界面當作一塊展示他們創造力的畫布。

比如下面這張Google Photo的空白狀態界面：

第一眼看去，簡直太棒了不是嗎？一個漂亮的矢量圖加上完全符合設計規范的布局。

但是，再看一下，就會覺得有寫奇怪的東西了：

?這塊屏幕里什么收藏也沒有，但為什么這里會有一個那么顯眼的搜索按鈕呢？難道是想讓用戶在什么都沒有的界面里搜索什么？

?第二個很顯眼的元素就是這個矢量圖，很明顯不可以點擊(雖說會有很多人去嘗試點擊)。

?屏幕上的提示說，我應該找到在頂部的那個超級不起眼的“＋”標志。為什么這個提示自己不包含一個添加按鈕呢？就像是在說“點擊繼續按鈕來繼續”

總而言之，上面這個空白屏幕沒有能夠幫助用戶理解用戶所在的這個環境：

?什么是收藏？他們為什么有用呢？

?為什么我什么都沒有呢？

?我可以做些什么嗎？(我應該做什么？)

當需要創造力時，越少有時會越有用。下面這個空白狀態屏在可用性上就做的十分完美。(先讓我們忽略那個“現在就點擊下面這歌按鈕吧”的引導提示)

在Lootsy里的空白狀態屏

記住，空白狀態(類似于網頁里的404頁面)并不只是美感和品牌特色。在可用性上，他們更為重要。要讓空白狀態更為直觀。

多問多想

不要說我是錯的：設計模式和最佳的實踐仍然是你的好伙伴。但是要知道，APP和用戶是不一樣的：在一個APP里能夠適用的方案，在你自己的APP里，也許就一點不適用。這不是一個通用方案就能解決的事情。另外，你永遠不可能知道為什么一個APP會以某種方式來設計。

自己要多想想，多設計，多研究。

文章來源：站酷   作者：鄭小小壯

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

目前為止，我發現大部分市面上的文章都在告訴大家，競品分析怎么做、場景分析怎么做、體驗地圖怎么做、訪談怎么做、度量模型怎么做，但唯獨少了最后落地方案怎么做。

我曾經試著利用迪士尼和環球影城的兩個案例來優化他們的產品，但是很多人開始無腦噴，因為沒有業務做背景，別人想怎么說怎么說，都是“我覺得”。正因為這樣，市面上你幾乎看不到有什么文章教大家實際的交互解決方案，因為怕被噴子噴，反正沒有業務背景你也無法論證自己方案的合理性，靠經驗？別人不認同，你也沒有數據來說服別人，所以這事大家都不敢去做。

但是沒有業務背景的交互方案就不能做了嗎？當然不是，有了業務背景你可以更針對性的選擇你自己知識庫里的方案和頁面結構來解決業務和用戶的問題，那么前提是你的知識庫里有那么多案例才行，否則有再多再清晰的業務背景，你掏不出來，沒有用。

所以從今天開始，我會陸續提供一些咱們小伙伴在做練習時候遇到的一些交互問題，大家一起來探討一下。業務背景會適當的提到，但是還是以交互方案的多樣性為主去討論，再強調一遍，不要揪著業務去框住自己的思維。

學習交互也好，學習UI也罷，如果你完全不懂理論是行不通的，所以很多剛入行的小伙伴基礎不夠扎實，覺得理論沒用，這是不對的，理論有用但是也配合實踐，利用更多的實際案例去加深理論的印象，做到舉一反三，這樣的效果比較好。所以在做案例之前大家務必也要多去了解一下交互的設計理論和基礎指南。

今天練習的主題是：籃球館預定流程和原型

其實以前有文章聊到過，但是大家都有不同的聲音，那么我們就繼續來探討一下有哪些不同的方案。既然業務背景不確定，那么我們的交互方案就不存在最優解。

案例

下文描述以圖片順序做記號，例如第一張界面即為p1。

產品功能為什么這么布局、為什么用這個控件、為什么用這個交互形式，取決于業務目標和設計目標，還有用戶的心智模型，以及該單元本身的屬性。那么首先來看案例1-p1，該練習的背景沒有描述業務特征，所以這個布局說明，該產品是一個平臺型的產品，有各種球館的列表，除了細節不完整以外沒啥大的問題。

再看p2和p3這兩個頁面是這個練習的核心頁面，我們總說產品形態取決于產品本身的定位，平臺型產品的球館詳情大致是可以這樣的，如果產品是自我品牌的產品，那么形態就會發生很大的變化。例如你可以在美團上點星巴克，你也可以在星巴克小程序上下單，但是這兩個應用中的星巴克，是不一樣的內容呈現。

我們從p2依次往下看，從業務和用戶兩個角度來看這個方案，首先從業務的角度看，有問題的點在于場地說明，平臺型的產品一般都會給商家做管理后臺和營銷工具，但是場地說明這個板塊就有點雞肋了，

原因1: 大部分球館的標準都是統一的，不可能一塊木地板一塊pvc這樣錯開，很難看，也不可能。如果有區別那么只有尺寸規格的區別。

原因2：場地類型展示并不是核心用戶需求，只是一種輔助決策，并且是“一次性”決策，該流程的核心任務還是要讓用戶可以去預定場地，但是目前整個頁面只有底部一個預定的按鈕（等會說這個按鈕）

原因3: 頁面頂部有場館的圖片及環境介紹了，所以場地圖片展示可以集中在頂部的圖片區域展示，例如大眾點評，點開后會有更多分類的圖片和視頻標簽。

所以中間這塊區域可以展示快捷預定的入口，比單純展示場地類型性價比高的多。

那么底部是否需要有一個立即預定的按鈕呢？如果這個產品是一個專門用來給籃球館做推廣的平臺，我覺得可以放。但如果是類似大眾點評這樣的平臺的話，就要繼續思考了。

而我們看到大眾點評為什么底部不做成一個大按鈕的形式，豈不是會更加強化這個任務的核心目標嗎？平臺類型的產品對接商家的種類非常多，同時類似這樣的平臺產品核心的產品定位是給幫助用戶去找到好吃、好玩、好看的地方，側重的是真實用戶反饋，所以說到真實用戶反饋這里再舉個小例子，大眾點評在評價的時候當點擊第五顆星的時候是顯示4.5星，而不會直接顯示5星，要再次點擊后才會變成5星。

產品認為為了快速點擊5星好評的行為并不是真實反饋，當真實想要給5星的時候才會再操作一步（題外話）。

回正題，平臺型的產品定位是為了把所有商家和用戶進行高效的匹配（花錢匹配度、曝光更高），而不是為某一個商家去做轉化。并且使用該產品的用戶場景和需求比較豐富，大部分用戶都只是來看看這些場所的評分、口碑和詳情。

所以底部就不會只放一個預定/買單的大按鈕，而改成了用戶反饋的相關功能。為了幫助商家做銷售，營銷管理工具做的還是很成熟的，什么拼團啦、套餐啦、代金券的工具啦等等。

有同學會問，那不就是大眾點評嘛，有什么區別。首先不要為了不同而不同，為了創新而創新，如果有更優秀的解決方案當然是最好了，但在當下的環境中，沒有什么必要。如果一定要做差異化，一定是業務訴求出現了。比如這個產品變成了自有品牌做的一個app/小程序，而不再是靠平臺幫我去宣傳籃球場地，那么會變成什么樣呢？

那我們可以想到的時候在預約入口的地方就會發生了變化（同星巴克），平臺通過列表進入，而自有產品則是在產品首頁中放一個入口，形態也完全改變，首頁不僅僅有場地預定，還會有私教培訓、課程套餐、活動組織等等，圍繞著這個場地衍生出很多的業務。并且像用戶評價這個東西，在自有產品中也變得不那么透明，表現形式肯定也會更加弱化。

所以在本身是平臺的屬性下，這個頁面正常就是這樣，p2缺少了用戶側的一些支線場景和功能的補充，例如咨詢入口、舉報入口等支線的功能。

再看p3，點擊預約入口后開始進行選擇場地的交互，選擇場地需要幾個關鍵要素：1.日期 2.時間 3.場地號 4.場地規格 5.價格，那么這里又涉及到業務背景了，場地號是什么？場地規格又是什么？商家如果要讓別人預定場地，是按照全場預定還是可以半場預定，場地的類型是否有多樣，都會影響到我們這整個預約的交互流程。

p3的這個方案的問題在于：

1.信息關聯度沒做好，這里的日期和時間要更緊密，和買電影票不一樣。

2.時間的交互效率低，并且沒有展示全，可擴展性不好，如果場館早上8點開門怎么辦？商家要求最低2小時起訂或者1小時起訂怎么辦？

3.半場和全場的選擇不夠簡單，全場其實等于兩個半場，而現在的展示形式變成了一個切換按鈕，雖然加了一個箭頭，但是這樣的交互形式和控件的用法是不符合常規的，并且指向性很差，當切換到3/4號場地的時候箭頭就指向了半場，這樣就會產生歧義，所以是不可行的。

所以我們這里就會發現這些信息是需要聯動的，聯動表單最常見的就是橫縱聯合。一般最初級的做法就是一個行為管一個信息，就比如這樣：把選項放入picker中

這種交互方式一般不單獨用，因為其實算是一種樹狀結構，這種結構一般運用在添加收貨地址等完全獨立的信息填寫或者一些多行表單中。

而這里的選擇日期、時間、類型、編號并不完全獨立，而且需要實時查看。

所以這樣也不夠直觀，picker擋住了價格，無法實時查看。更何況在這個頁面中所有內容都收起來版面利用率大幅下降，交互層級更深了。

再看一些其他的方案，難道就一定要選場地嗎？我只需要時間、日期行不行。不行，為什么？

那我們再來看下面這個方案：

這個方案中，同學把圖片加入進來，希望幫助用戶去輔助決策，其實沒必要，之前也說過，圖片屬于認知信息的一部分，在外面認知完了解過就可以了，里面就不需要再展示一遍了，可能也是為了不讓頁面這么空，因為底部用了一個卡片的塊選擇日期時間。但是少了場地類型的選擇（半/全）長，為什么說半全場和場地號一定要選呢？因為有很多場景缺失了，比如你要幫朋友訂另一個場地怎么辦？我要訂兩個半場打全場怎么辦？每次預定只定了時間，老板還要手動標記哪些場地在哪些時間沒有預定，非常的麻煩。所以不選擇場地是不行的。

再來看一個方案：

這個方案的選項和操作過于分散，而一般也不會將需要交互的選項放在左側，有個原則就是內容在上/左，操作在下/右，雖然不能一概而論但大部分情況都要遵循。參考古騰堡圖標原則，左側的日期不經意看以為是一個標題。大部分第一次做交互原型的同學可能都會這樣，一些按鈕和控件的用法和該放、可以放的位置不太清楚，在做交互的時候還有一件事要清楚，就是誰控制誰，控制器怎么觸發。

而這個方案和p3也是一樣，觸點順序亂了：選擇日期-選擇場地類型-選擇場地號-選擇時間。因為預約場地的場景是，今天小王想約朋友去打球，他問了一下朋友哪天有空，朋友說下周六都可以，最好是下午，于是小王打開應用軟件，選擇了下周六的日期和下午的時間，看看還有哪些場地可以預約。

同樣也是順序亂了：場地編號-日期-時間。為什么順序很重要，這就和我們買電影票的習慣一樣，大部分情況是我們想要看某一本電影，然后再考慮自己的時間和去哪個電影院，有人說，我就不一樣，我會先選擇電影院，比如我逛街途中突然想看電影了，再看看電影院最近有什么電影。我只能說，滿足大部分、大概率的用戶需求和場景才是正事，產品是無法滿足全部用戶的。

拋開日期和時間的關聯性，這個方案還有一個問題就是如果要預定多個場地就會比較復雜，例如只有1號場地和9號場地的某一個時間段可以預約，那么就需要用戶在幾個場地中展開收起進行操作，非常繁瑣。

再來看一個案例

這位同學將步驟分為了先通過picker選擇日期和時間，確定后再選擇場地。這個流程問題就在于：

1.picker用的不對，picker雖然叫做選擇器，但往往不會作為一個中間任務承載的模塊去用，而是對于一個頁面中需要選擇一些選項的時候才會用到，選擇完后依然停留在該頁面。否則進入下一個頁面后，再返回，就看不到picker了，還要再選擇一次。

2.場地可能會出現被人預定的情況，所以當選擇日期和時間后再選擇場地，如果被預定了，那么用戶就會比較抓狂。

所以在這個頁面中我們會選擇將其全部展開，怎么展開呢，有人覺的日期時間可以不動，把場地和類型展開。有人覺得全部展開才更直觀，那我們來看這兩個方案

如果日期和時間不展開，會有一個問題，那就是無法選擇多個時間段的場地，只能選擇某個時間段的多個場地，無法滿足這部分用戶需求，并且在信息展示上也會比較擁擠。那么我再看看全部展開，全部展開之后將時間和日期也做一個橫縱形式，然后將半/全場和編號進行結合，默認選擇一個塊即為半場，但是在場地命名上還是需要做一個小心思，那就是如果有人要包全場，如果我們單純給場地編號1、2、3、4….就會讓用戶不知道哪個半場和哪個半場是一體的，所以命名就可以改成1號場A、1號場B…...

當然如果不要編號問題也不大，主要是場地還有些特殊情況，比如不同場地的通風、燈光的區別，所以會有場地編號。

在之前的留言中，也有小伙伴會問，即便是自有產品，用戶在選擇場地的時候到底是否需要再看場地的圖片，直接從入口進來不顯示圖片就讓用戶去定場地合理嗎？這里主要就是分針對老用戶還是新用戶，只要去過一次的用戶基本上也就不需要再看場地圖片了，新用戶的話就需要，他們還需要知道場館的地址、聯系方式等等，所以這些內容會聚合在選擇場館的上一步，也就是首頁，具體首頁可以怎么放這些內容留給大家思考。

我們講到這里，還有一些抬杠冠軍又要說了，一個頁面這么多信息太復雜了，我選擇第一個方案，多簡單，就兩個選項。如果我們知道復雜性守恒定律，那么不管怎么壓縮信息復雜度是不變的，把那么多場地選擇壓縮在一個picker中會更加復雜和難操作。

其實當大家看到這些原型的時候，都明白問題出在哪里，真實情況是，如果讓你們從0開始，一下子就懵逼了。比如預定籃球場地的這個流程，從無到有，如果讓你自己來設計一遍，你可以完整的做下來嗎？每一個細節是否到位。大家產生了一種幻覺，看懂了，等于自己會做。一定一定要腳踏實地去做一遍才知道自己哪里搞懂哪里沒有搞懂。

什么是設計？簡而言之，就是用邏輯和美來解決人們的問題，滿足他們的愿望。在本文中，我們將討論美在用戶體驗設計中的作用：讓我們看看它如何讓用戶和企業都感到高興。

為什么美對設計很重要

網站或移動應用程序應該有效、輕松、直觀地解決他們的問題。但是接下來會發生什么，當產品不再是唯一的，不再是獨家的東西，自然競爭開始發揮作用時？人們開始看得更深，爭取更多。他們將審美愉悅和情感吸引力添加到他們的愿望清單中。而在兩款功能同樣出色的產品之間，絕大多數情況下，用戶會選擇美觀的一款。

基于需求層次，人們獲得的越多，他們的選擇就越復雜。教育和收入水平讓他們思考超越功能：除此之外，用戶追求和諧與美感。所以，美的作用越來越高。

以下是美在用戶體驗設計中以這種方式起作用的一系列原因：

1) 它使設計充滿情感，也就是人性化

2) 它使數字事物與現實世界保持聯系

3) 它支持可用性

4) 滿足審美需求

5) 它將不同的事物與一種風格結合在一起

6) 它讓產品在競爭中脫穎而出。

美與美學是連接設計的過去、現在和未來的堅實橋梁。今天，新的布局和圖形基于數百年來收集的豐富的世界文化遺產。現代設計師和藝術家通過一些趨勢和創新對其進行改造：建立一個新的文化歷史圈，他們保留了歷代最優秀藝術家的作品。這就是藝術和美學吸引力在設計中發揮作用的時候。我們不是在重新發明——我們是讓它變得現代化，讓它解決人們的問題。

審美-可用性效應

用戶體驗設計大師尼爾森諾曼集團將其描述為審美可用性效應現象。它指的是用戶傾向于認為有吸引力的產品更有用。人們傾向于相信看起來更好的東西會更好地工作——即使它們實際上并沒有更有效率。這種效果是為什么良好的用戶體驗不能只是功能性UI的一個重要原因——設計一個既有吸引力又實用的界面是值得付出努力的。

基于此，讓我們考慮一下美感對UX 目標的影響。UX設計有 4 個基本方面，外觀視覺和諧呈現出賦予所有要點的因素。

可用性意味著產品可以工作并且用戶了解如何工作。

可訪問性則允許界面適用于具有不同能力和跨各種設備的不同人。

實用性意味著它可以解決問題。

可取性意味著它是令人愉快的，并使用戶感到高興。

業務目標

但是，啟動新產品或改進知名產品的公司也必須從另一個角度思考。它通過各種財務因素、轉換、銷售和所有其他業務來運作。

銀幕上的美會影響他們的商業目標嗎？確實會。色彩理論和心理學、屏幕上的和諧、可讀的文本內容和有吸引力的圖像不僅是讓用戶開心的關鍵。

用戶體驗美學元素

不同的元素可以讓美融入用戶界面并構建其美學，其中包括：

a) 排版

b) 布局

c) 照片

d) 插圖

e) 3D圖形

f) 動畫片

g) 視頻

h) 人物

所有這些元素構成了交互的美感，并直接影響積極的用戶體驗。

一致性

從美學可用性效應考慮的另一個核心點在于用戶體驗和業務的十字路口——一致性。正如雅各布尼爾森所說，“一致性是最強大的可用性原則之一：當事情總是表現相同時，用戶不必擔心會發生什么。”

事實上，它比交互更進一步。它還有助于建立強大的品牌。標志和品牌商品、網站、應用程序、電子郵件和社交網絡——產品與其用戶的每個接觸點都應遵循一個總體理念和一組價值觀，并以一致和完整的風格包裝。

最后

在全球范圍內，所有的設計解決方案都應該回答一個問題——Why？我們做出的所有決定都應該從“Why”開始，這將形成如何與用戶交談，無論溝通的來源是什么。無論與品牌的連接點是什么，您都應該確定與您交流的是什么。這會建立信任感并使品牌更強大，而這正是美有助于使用戶體驗更加穩固和有用的地方。

背景

“時間”作為人機交互界面中經常出現的元素，本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現，關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產品設計中把握“時間”顯示的訣竅，讓其在頁面中發揮最大的作用。

“時間”元素的分類

按照“時間”元素在頁面中的出現場景和所起到的作用，可以大致歸為以下幾類：

A. 事件的關鍵構成要素

時間作為描述整個事件的重要組成部分，缺失后會對原本所要傳達的內容產生嚴重的影響，進而影響用戶的使用預期和結果，比方說用戶可能不能以一個較低的價格完成商品購買，或錯過了產品發布會的時間。

B. 行為的時間標記

指用戶本人作為行為主體或行為的接收對象，在某一動作發生后為其所打上的時間標記，比方說“我”購買商品下單的時間或收到一封郵件的時間。

C. 內容的附屬信息

用戶在使用產品進行內容消費時，時間作為該條內容的附屬信息，起到補充說明的作用，比方說一條短視頻或新聞的發布時間。

在上面的案例中，我們會發現“時間”在對應場景里所發揮的作用不同，用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時，要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級，通常情況下：時間作為事件的關鍵構成要素＞行為的時間標記＞內容的附屬信息，之后再思考用什么樣的設計形式去展示來達到我們的目標。

“時間”的呈現方式和運用技巧

在討論“時間”元素的設計之前，我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度，類似我們高中物理時學過的“時刻”和”時間間隔“的概念。

拿開會舉例子：“下午 4:30 會議開始”、“下午 6:00 會議結束”描述的是事件開始、結束的時間點，而“整個會議持續 1.5 小時”、“會議時間為下午 4:30-6:00”描述的是事件過程的時間段；但是，我們在會議開始時也可以這樣講“會議將在 1.5 小時后結束”。

通過上面的例子我們可以發下，同樣是描述一件事情，運用不同的時間點、時間段的方式去表達，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關系：

1）時間段加上定語會變成時間點（但同樣是時間點，“下午 6:00”是絕對時間，而“1.5 小時后”是相對時間，剛好對應到我們設計時兩種時間戳類型）；

2）兩個時間點之間則表示時間段。

所以，我們在平時表達或設計時，要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點？還是想描述其所持續的時間過程？之后我們再針對不同語境去選取合適的文案和呈現方式。

時間的呈現方式離不開：時間戳類型、時間顯示格式、時間顆粒度。其中，時間顆粒度指的是描述時間的最小單位，往往顆粒度越細，給用戶傳達的確定感越強（如轉賬時間是 12 日 15:15:20），對用戶的激勵作用越明顯（如距搶購結束僅剩 00 時 01 分 23.6 秒）。

1. 絕對時間戳

絕對時間可理解為事物發生時的確切時間，由具體日期（年、月、日）和時間（時、分、秒）組成。使用絕對時間戳的優勢是信息傳達精準，顯得正式，給人確定感和安全感，同時排布規整，便于形成認知習慣；但缺點是內容顯示過長不利于閱讀，并且占用空間較大。

在時間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來分隔日期，而“/”分隔符在不同國家有不同的展示順序習慣，容易造成誤解，盡量少用。

時間顆粒度的選擇依情況而定，一般場景總結如下：

2. 相對時間戳

相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時，距當前時間點的時間差值，多用于 push 通知、信息流產品，側重強調內容的時效性；而“倒計時”也算相對時間的一種，側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低，不用通過計算來判斷時間過去或還剩下多久；缺點是不夠精確、正式，并很難衡量兩個時間點的臨近性。

在使用相對時間時，要注意格式友好。時間單位可隨著時間的推移自動改變；數字不要過多，盡量取整；并且可設置其與絕對時間轉換的臨界點。

總結

在設計界面中的“時間”元素時，要遵循場景貼合、便于閱讀理解的總體原則；之后根據場景和目標，再選取合適的“時間”呈現方式（包括時間戳類型、時間顯示格式、時間顆粒度）。

當時間作為“A.事件的關鍵構成要素”時

一般情況下使用絕對時間，并且要看是為了強調某一關鍵時間節點，還是側重表達整個持續過程。此外，選用關聯場景的文案或者運用倒計時（相對時間）的形式，可一定程度上促進用戶更加集中注意力，提升對信息的關注度，并達到特殊的激勵作用和轉化效果。

當時間作為“B.行為的時間標記”時

該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點（段）去查找、回顧相應內容，因此大多數采用絕對時間，時間顆粒度依具體情況而定。

當時間作為“C.內容的附屬信息”時

如果所設計的產品供給內容的更新速度快，用戶活躍度高，并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性，那么通常會使用相對時間。部分信息流產品（比如新聞資訊類、社區類）會在列表頁使用相對時間，在詳情頁使用絕對時間，時間顆粒度也是依情況而定；并且會隨著時間推移，在某一時間節點前把相對時間轉換為絕對時間。

文章來源：優設   作者：VMIC UED



分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

我們在周圍的世界中看到了許多熟悉的設計模式。例如，大多數道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區使用不同的系統，司機將不得不為他們想要駕車經過的每個國家/地區學習新的駕駛模式——但這不切實際！

UX 設計模式的工作原理類似。它們使用戶無需學習新系統即可熟悉瀏覽數字產品或網頁。

什么是用戶體驗設計模式？

UX 設計模式是用于構建用戶界面的常見構建塊。設計師使用 UX 設計模式作為可重用組件來解決常見的可用性問題。

例如，我們經?？吹降囊环N設計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。

UX 設計模式如何改善用戶體驗

設計模式為設計人員提供了構建塊以更快地創建用戶界面，但它們也增強了用戶體驗。

UX 設計模式通常遵循用戶熟悉的通用設計標準，從而減少學習和瀏覽新產品或網站所需的時間和認知負擔。

在《我們如何決定》一書中，作者喬納·萊勒 (Jonah Lehrer) 寫道，識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關的化學物質。當用戶體驗模式按預期工作時，多巴胺命中會增加。

使用有效的UX 設計心理學技術的設計師，例如熟悉的 UI 設計模式，可以增強用戶體驗并使產品交互更加愉快。

UX 和 UI 模式之間的差異

大多數設計師交替使用UX 模式和UI 模式這兩個術語，因為區別很小，有很多重疊，并且可能會引起混淆！

UX 模式：用戶流和導航的可重用模式——在社交媒體平臺或網站上無限或連續滾動。用戶認識到他們可以向下滾動以刷新頁面。

UI 模式：用于視覺和交互設計的可重用模式——一個漢堡圖標。用戶知道漢堡包圖標將打開導航。

何時以及如何應用設計模式

知道何時使用設計模式對于產品設計和用戶體驗至關重要。設計人員必須僅在有明確的可用性原因時才使用設計模式。

以下是識別用戶需求和應用設計模式的四步、以問題為中心的方法：

查明問題——您可以通過分析和可用性測試的組合來識別問題。例如，您注意到在獲取客戶詳細信息時，您的產品注冊流程有很高的流失率。通過可用性測試，您了解到一個常見的痛點是注冊過程耗時太長——您的注冊表單要求填寫全名、電子郵件、年齡、性別、城市和手機號碼（其中許多細節與使用產品無關） 。

通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設計庫，以找到常見的 UI 模式來解決您的問題?；氐轿覀兩厦娴睦樱鷷l現競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄，從而簡化注冊流程。

自定義設計模式——您必須自定義新的設計模式以匹配您的品牌和現有設計系統。對于我們的用戶注冊示例，此自定義可能包括調整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標簽和錯誤/成功消息將使用您的樣式指南中的顏色。

測試您的設計模式——最后，您必須始終測試新的設計模式實現，以確保它們滿足可用性和品牌要求。

上面的例子展示了可用性測試的重要性——識別和應用用戶界面設計模式以測試開始和結束。

不要因為競爭對手有一個設計模式或者你認為這是正確的做法就添加一個設計模式。例如，您的網頁設計是否需要面包屑導航？對于電子商務，可能有必要讓用戶返回到產品類別或知道他們在結賬序列中的位置。但是，對于大多數其他網站，它只是添加了額外的數據點供用戶處理。

UX 設計模式的常見示例

設計模式分為六大類：

A. 數據輸入輸出

B. 內容結構

C. 導航

D. 社交媒體和分享

E. 激勵

F. 等級制度

數據輸入和輸出

數據輸入和輸出是最常見的用戶/產品交互之一。用戶輸入信息，系統返回數據或完成一個動作。

一個很好的例子是許多網站和應用程序使用的日期選擇器。盡管它們看起來略有不同，但大多數日期選擇器顯示類似的布局和功能——標題中的月/年、星期幾和日期。

當用戶單擊一個日期時，它會突出顯示以選擇。最后，有一個 CTA（有時是一個取消按鈕），用戶可以在完成并準備繼續時單擊。

數據輸入和輸出的其他示例包括：

a) 表單提交

b) 成功/失敗消息

c) 應用通知

d) 進度條/步驟

內容結構

你有沒有注意到大多數界面使用類似的塊布局和圖像縮略圖？或者，管理界面的左側導航面板和右側的內容如何？

使用這些熟悉的內容結構和 UI 模式可以幫助用戶快速瀏覽新的數字產品或網站。目標是最大限度地減少摩擦（例如學習新界面），以獲得無縫和愉快的用戶體驗。

導航

熟悉的 UI 模式可以幫助用戶輕松瀏覽網站或數字產品。桌面和移動界面有不同的導航模式。

例如，主導航位于桌面網站或應用程序的標題中或左側。在移動應用程序中，主導航欄位于頁腳中，只需用拇指觸碰即可。

無限或連續滾動是 Instagram 和 Pinterest 使用的典型導航設計模式。當用戶滾動時，系統會刷新以顯示更多內容。這種設計模式很熟悉并增強了用戶體驗，因為用戶不需要單擊下一步按鈕或分頁來查看更多內容。

社交媒體與分享

設計師可以使用多種社交媒體和共享設計模式，包括：

a) 鏈接的品牌社交媒體圖標

b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標

c) 引言——用引號引用此人的姓名和形象

這些熟悉的設計模式可幫助用戶找到社會認同，以建立對您的產品和品牌的信任。

這些設計模式利用心理學，鼓勵用戶執行所需的操作。這里的目標是在用戶和產品之間建立聯系。

激勵

激勵 UX 模式利用設計心理學來鼓勵用戶執行任務和操作，從而創建用戶/產品關系。

設計師鼓勵使用設計模式通過積極的反饋、認知、游戲化等來吸引用戶。

例如，游戲化模式鼓勵用戶邀請朋友來獲得獎勵。UI 模式將通過 CTA 向用戶顯示他們當前的積分，以邀請更多朋友賺取更多。

等級制度

層次結構模式類似于內容結構，因為它們為用戶創造了即時的視覺熟悉度，以便快速瀏覽界面并知道如何完成所需的操作。

博客的兩種常見層次結構模式包括標題和目錄。用戶可以滾動頁面以快速找到他們想要的內容或使用目錄跳轉到特定部分。

面包屑是電子商務網站用來幫助用戶瀏覽產品頁面和結賬流程的另一種層次結構模式。

總結

UX設計模式是用戶體驗的重要組成部分，因為它們最大限度地減少了產品的學習曲線和人類認知負擔。設計師必須知道何時使用這些 UX 設計模式，而不僅僅是出于習慣或模仿競爭對手而實施它們。

分析和可用性研究可幫助設計人員確定界面中缺少哪些 UX 模式，然后測試他們是否實施了正確的模式。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務