除非有更好的選擇，否則就遵從標準  —— 阿蘭庫珀

費茨定律：

距離：起始位置離目標位置越遠，我們到達目標位置所花費的時間就越長，反之亦然。

目標大?。耗繕嗣娣e越大，我們定位到目標位置所花費的時間就越短，反之，目標越小，定位時間越長。

·生活中的費茨定律

剎車和油門踏板相距很近，剎車時的物理面積比油門的物理面積大，會最快接觸到踏板，減少事故的發生。

·界面中的費茨定律

（1）距離目標位置盡量縮短，相關操作保持親密性

例如：抖音的視頻播放界面，系統會判斷用戶進行觸發時手指與屏幕的接觸位置，并將操作按鈕顯示在離用戶手指最近的位置。

                                        

（2）目標尺寸大小要合適

目標點擊熱區在合適的范圍內，越大越容易精準點擊，越小越容易誤操作。iOS交互指南中規定最小點擊熱區為44*44。

（3）拇指原則

人們在使用手機時，75%的交互操作都是由拇指驅動的，考慮到費茨定律，如果目標位置超出拇指的移動范圍，操作成本增加。

米勒定律：

是交互設計中常用的一個定律，美國心理學家對人的記憶能力進行定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，超過這個范圍就容易出錯，在7+2與7-2之間浮動。

·生活中的米勒定律

電話號碼，銀行卡號，身份證號碼進行數字分隔，降低記憶成本，提高信息的易讀性，視覺防錯。

·界面中的米勒定律

（1）分段記憶，信息分層

文章、文本中的字號、字間距，目的就是便于讀者記憶和提高易讀性

（2）導航和選項卡不超過9個

網頁設計的一級導航不要超過9個，如果導航和選項卡內容過多，可通過聚合按鈕來包容其他次要入口。（用戶使用導航就是要快速找到自己想要的內容，如不能快速查找，用戶可能會就此流失掉）

（3）系列位置效應

首因效應：相對中間位置，我們對最前面的物體記憶清晰。

新近效應：相對中間位置，對序列末尾物體記憶更清晰。

席克定律：

是一種心理物理學定律，用戶所面臨的選擇數量越多，花費時間越長，人機交互界面選項越多，用戶決策時間越長。

·生活中的席克定律

遙控器按鈕越少，越快做出操作；如交互設計四策略：刪除、組合、隱藏、轉移。功能層級也需要細分核心功能、輔助功能、邊緣功能。而核心功能是進入產品第一個發現的功能，操作頻率高，所以它的視覺應是最突出的，可以幫助用戶增強感知和節約選擇時間。

      

·界面中的席克定律

（1）減少選項并提供默認值

選項越多，用戶決策的時間越長，減少用戶思考的時間就是減少操作時間和學習成本，讓用戶不思考就做出正確的選擇，對于小模塊來說，一般選項不超過9個，9個以上可以用交互約束用戶的行為，如展開收縮。

（2）選項分類分層，信息區分主次

在菜單欄的設計過程中，我們會進行同類分組和多級分層的設計，效率會更高。重點信息、推薦信息和普通信息要在時間上做區分，這樣才能搶占視覺并在第一時間感知到。

（3）分步完成，分布顯示

分解復雜流程，讓用戶一步步操作，而不是全部堆到用戶面前，通過分步完成一個任務流，降低其他信息給用戶帶來的干擾。例如：用戶填寫表單時，可展示選項，當填完最后一項選“其他”時，再展開剩余的表單，目的上是為了減輕大量表單，給用戶感知上帶來的壓力，達到場景細分的目的。

接近法則：

接近法則也是格式塔理論中我們最熟悉的，最常用的一種法則。觀察者看到彼此臨近的物體時，會將它們視為一體。

·生活中的接近法則

小區規劃圖中，會通過較寬的過道，綠植圍欄來劃分他們之間的關系，從而增強人們的感知。

·界面中的接近法則

界面中的接近原則是對相似的信息及功能類別進行分組、布局。作用是直接影響到用戶與產品的視覺交流，引導用戶的瀏覽及操作行為。

常見的在列表頁面，通過色塊區分大組與大組，分割線區分小組與小組，目的都是在視覺上通過組與組的區分來劃分功能與功能之間的關聯性。

以上這四條是我們在平常工作時都會用到的，我們再進行一個界面的設計時應該對照下以上幾條定律，在與產品或開發battle時也能有理有據，告訴他我們「為什么這樣設計」。寫的手有些痛，剩下的4條定律下期我再繼續補充，下期見～

作者：瞧見貓

轉載請注明：站酷

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

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

八個交互設計原則幫你避免出現基礎錯誤

1 一致性：一致性能給用戶節約成本、元素風格統一和延續性、產品內部結構的一致性

2 反饋：操作成功或失敗都有明確的反饋、告訴用戶此刻的狀態是什么會有什么結果

3 方便使用： 減法設計（扁平的框架設計—減少不必要的操作步驟，每個流程清晰沒有太多分支）

重點功能隨手可用 多選擇少輸入

4 預防出錯/防錯原則： 操作給予提示

5 幫助用戶認識改正錯誤：如果出錯要幫助用戶從錯誤中恢復過來

6 高識別性：（復雜的交互要給與引導和幫助）

7 用戶自由控制權：用戶可以取消正在執行的操作 每個層級都能找到上一級的方法

8 符合用戶的操作習慣

作者：why夏天的風

轉載請注明：站酷

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

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

作者：TUTU兔

轉載請注明：站酷

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

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

如果你是一位經驗豐富的設計師，你應該會同意這個觀點：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對設計進行深入研究呀，這也屬于一種設計模式呀，而且還遵守設計規范呢。所以，當然要以用戶們所熟悉的那些模式來創造出可用性界面。

不過，有的設計師則會認為，過于遵守設計規范，而且，經常性的從他人的作品中獲取靈感的話，自己本身的創造能力就會下降，這就導致了這樣一個結果——一天下來，你的所有APP都長一個樣。

從交互設計的角度看，我們會發現一個問題。什么問題呢？

習慣性的去應用一些所謂的最好的設計模式，可能會讓你覺得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會以某種方式來設計。

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

衡量，測試，驗證——如果能夠做得更好，就不要害怕打破設計規范。

作者： 鄭小小莊

轉載請注明：站酷

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

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

交互輸出文檔的作用

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

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

目錄

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

說明

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

總結

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

作者： 應駿

轉載請注明：站酷

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

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

      在數據可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認知，在交互分析過程中獲取解決問題的方法。

     在這個過程中，感知和認知能力直接影響著信息的獲取和處理進程，進而影響用戶對外在世界環境做出的反應，這也是設計數據可視化產品服務藍圖的基礎邏輯。

     從數據到知識有兩個途徑:交互的可視化方法和自動的數據挖掘方法。

     我們可以看到，下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點是輸入的數據，終點是提煉的知識。

     可視化的首要任務是準確地展示和傳達數據所包含的信息。根據預期和需求，提供有效輔助手段以方便用戶理解數據，從而完成有效的可視化。

     但是當出現數據尺寸大、結構復雜的情況時，有限的空間大大限制了靜態可視化的效果，有限的可視化空間和數據過載之間的處理是非常復雜的。有時我們會通過物理環境的變化來改變服務模型，但是更多時候我們需要通過交互設計來完成對復雜信息的處理，提升用戶對數據解讀的便捷性。

     那么當我們在設計一張數據大屏時，我們該如何通過交互提升用戶獲取有效數據的效能呢，下面我們一起來探討如何完善大屏設計中的交互設計：

一、信息架構

1、清晰易理解、可拓展的信息架構

2、清晰易理解的導航關系

3、清晰易理解的層級關系

案例分析：

在我們收到原型圖時，首先我們需要梳理清楚大屏的信息架構，比如整個大屏的模塊比例是按照1:1:1還是1:3:1的結構。又或者是如何設計重要功能的入口，比如整屏的導航tab選項，在布局設計上用戶是否可以明晰它是是否是全屏篩選，在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達內容。那么當用戶進行了導航的切換后又返回到上一頁面，整個行為是可以形成路徑閉環的。

二、流程設計

1、可下鉆的模塊需給用戶以引導

2、相同功能的用戶體驗路徑需保持一致

3、逆向流程的功能設計能形成閉環

案例分析：

我們經常會在大屏中間設計地圖的樣式來展示某個省的數據情況，比如，如圖所示，當業務側需要從湖北省跳轉至武漢市，查看武漢市的詳細數據，那么我們可以在省級地圖輪播的數據氣泡上給予用戶以提示，用戶可以清楚獲取到跳轉市級大屏的路徑方法。

三、界面展示

1、一致可控的圖表組件

可視化大屏中最核心的數據展示形式就是圖表模塊，我們需要正確地展示圖表組件外觀與組件關系，把控好相似功能的橫向一致性，我們可以細分為以下幾點。

（1）選擇正確清晰的圖表組件

（2）正確表達組件元素之間的關系

（3）一致性的組件樣式和交互行為

（4）不要忽視組件的不可用狀態（按鈕）

（5）刪減影響用戶視線和注意力的冗余元素

案例分析：

當一個模塊內需要展示數據的多個維度，我們如何將該模塊設計得更加清晰呢。如下圖，根據人從左往右的閱讀習慣，在左邊展示數據1和數據2的總指標數，在右邊展示數據1和數據2的詳細走勢，右上角我們還可以添加tab選項，用戶可以進行tab切換查看更多維度的數據內容。

所以，我們可以將用戶使用習慣和交互行為很好地結合起來，不僅免去了圖表多亂雜的場景，用戶也可以更快地查看到想要獲取的數據信息。

2、清晰的數據展示

配合圖表展示的就是我們的“數據數字”內容了，在我們將設計稿傳遞給前端同事后，填充真實數據后的視覺效果可能看起來沒有效果圖規整，一方面在進行繪制效果圖之前，可以與產品業務側共同探討數據內容，盡量給視覺設計師提供真實的數據，另一方面，在我們作圖搬磚的時候，也要注意一下幾點：

（1）不要遺漏了“無數據”的缺省空界面，當無法獲取到數據時，我們需要給前端提供這樣的缺省圖；

（2）清晰的數據排序規則，比如環形圖中，總起始點到終點，數據對應的數值量應該是遞減的排序規則；

（3）考慮數據的極值情況，比如在搜索列表中學校名稱文字的極限字數是多少，超出多少字用省略號顯示，這些我們都需要考慮到；

（4）是否需要標明數據的更新時間節點，有的大屏強調數據實時性，我們經常會在右上角增加數據截止更新時間來來引導用戶；

（5）特定的數值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時間識別到是人民幣，而如果金額數字過長后面再加元會降低識別效率。

案例分析：

3、選擇與輸入的信息反饋

（1）展示合適的首選項或默認值

（2）輸入前有效的文本提示

（3）輸入完成后需及時反饋

案例分析：

4、用動效進行有效的交互引導

     利用動效進行交互引導，即使大屏操作鏈路過長，也可以讓用戶快速上手操作，減少流程學習時間。進入下一場景后，又會有對應的區域提示用戶返回全局或查看其他場景；當做到層層有響應，就能減少用戶在每一步操作上的困惑時間，幫助用戶快速上手操作流程，并且大大提升工作效率。

     但是我們需要注意的是，不要為了酷炫而做太多無用的動效，不僅會讓頁面加載速度慢，也會讓用戶覺得雜亂無重點。

     總結：

     交互可提高可視化系統的效率，幫助用戶處理更多的數據，完成更復雜的任務。然而，實現交互本身也有額外成本?；拥南到y可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費更多的時間與精力去瀏覽和探索數據。

     因此，可視化系統應當采用數據挖掘算法自動發現用戶可能會關心的數據或者模式；并通過可視化呈現給用戶，用戶在這個基礎上通過互動進行更深入的挖掘。設計師的設計決定了系統的可理解性，一旦掌握了這個邏輯，再復雜的頁面也會變得有條不紊。

     我們仍需在數據可視化的道路上不斷探索挖掘數據價值，給決策者提供有效的數據分析支撐，讓設計驅動數據價值最大化。