如果你是一位經驗豐富的設計師，你應該會同意這個觀點：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對設計進行深入研究呀，這也屬于一種設計模式呀，而且還遵守設計規范呢。所以，當然要以用戶們所熟悉的那些模式來創造出可用性界面。
不過，有的設計師則會認為，過于遵守設計規范，而且，經常性的從他人的作品中獲取靈感的話，自己本身的創造能力就會下降，這就導致了這樣一個結果——一天下來，你的所有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會以某種方式來設計。
自己要多想想，多設計，多研究。
衡量，測試，驗證——如果能夠做得更好，就不要害怕打破設計規范。
作者： 鄭小小莊
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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.撰寫方式
作為一個設計師，不管是否在做視覺，我們都需要對文檔有一個美化意識，如果你的文檔非常凌亂，那么在別人眼里就會覺得你是一個比較粗心大意，不夠負責任的人，所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。
目錄
首先在目錄的撰寫時候要進行分類，通常我做的時候會對該需求以頁面父子集關系進行創建，父集為核心頁面，子集為其下的相關子頁面，這樣頁面的流轉和歸屬關系就不會搞錯。
說明
在撰寫規則與說明時可以通過標簽法進行標簽說明的撰寫方式，同樣在視覺上保持美觀，對比與對齊的運用，具體該寫什么東西上面已經說明就不贅述了。除了交互規則以外，高階的交互設計或者產品經理還需要補充業務規則，比如排序、商品抓去規則、權重、算法、活動規則等等這里就不展開說了。
總結
文檔的形式有非常多種，針對不同的公司和產品也需要作出相應的調整，能夠滿足需求和方便協作，目的就達到了，我們并不希望過多的時間花在文檔的撰寫上，而是希望大家在做設計時多思考業務，本次分享就到這里啦～
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、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可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費更多的時間與精力去瀏覽和探索數據。
因此，可視化系統應當采用數據挖掘算法自動發現用戶可能會關心的數據或者模式；并通過可視化呈現給用戶，用戶在這個基礎上通過互動進行更深入的挖掘。設計師的設計決定了系統的可理解性，一旦掌握了這個邏輯，再復雜的頁面也會變得有條不紊。
我們仍需在數據可視化的道路上不斷探索挖掘數據價值，給決策者提供有效的數據分析支撐，讓設計驅動數據價值最大化。
一、什么是格式塔原理？
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
格式塔學派主張人腦的運作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經驗和印象，加起來才是我們對一朵花的感知。
格式塔心理學家認為這些原則之所以存在，是因為頭腦具有天生的傾向，可以根據某些規則感知刺激中的模式。（是不是覺得hin神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。
二、格式塔原理分析
使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如，在Ant Design的標題區域中，“ 搜索”功能與站點的主要導航位于同一行。但是，主導航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。
應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益，從而有效地將標題與下面滾動的頁面內容區分開。此外，大頁腳的單一統一背景色 可有效地表示該區域中的所有鏈接都屬于一個組。
創建清晰的邊界是一種強大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時，它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分，那么我們可以用線框畫出邊界來達到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設計時的原理，比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細細體會這個相似性原理就會給我們答案，讓我們在畫設計稿時能夠有理有據。
在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”
應用共享的顏色來表示某些項目是相關的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達它們確實相關。
在用戶界面設計中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點擊內容，鏈接顏色應僅保留給交互式文本和其他可單擊元素，因為用戶會意識到所有具有此特征的項目都是相關的，并且以相同的方式工作。因此，鏈接顏色不應用于關鍵字，不可點擊的標題或實際上不可點擊的附近圖標。
如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區域很遠，并且根據Fitts的定律，這種缺乏接近性也會降低用戶的速 度。）
相同顏色的按鈕將被視為具有相同的重要性級別。因此，應為主要操作性按鈕保留單獨的顏色，以幫助它們在輔助按鈕中脫穎而出。
在用戶界面中，我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。
例如，在產品列表頁面中，每個單獨的產品列表都以相同的大小（和相同的形狀）顯示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時，就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統首頁的改版：
根據上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結構和邏輯不清晰：
1.待處理和招聘日程兩個模塊之間的區分不夠清晰：因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產生聯想，同時這兩個模塊之間只靠間距來區分，區分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯系太弱：因為面試卡片用了非常強的邊界區分的線條（接近性原理-構建清晰的結構）確實在面試模塊之間構建了清晰的結構，與此同時卡片與頭部的日期之間看起來沒有什么關聯。
3.首頁的選中效果太弱，分析這個頁面的層級，左側首頁選中才應該是最重的，能讓用戶第一眼就知道在系統中的位置，很顯然目前來看很容易忽視首頁這個位置，關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。
根據格式塔原理中的相似性原理和接近性原理，對頁面的結構進行了調整，就看起來清晰多了。
所以，我們在制作完設計稿后，可以應用格式塔原理，分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續的形式而不是離散的碎片。
連續理解起來是很簡單的，但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。
視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實現統一整體，這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考，就是不閉合時候也會實現統一的整體，更確切的說，這種現象是一種不完全的關閉。這些圖形與設計給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復雜的場景來降低復雜度。
我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素，其余則是背景。這個原理經常會在海報設計中應用，這也是為什么我們做海報，做平面時，一定要制作好背景，背景的氛圍很重要。
Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位，對 Dribbble 設計的研究會讓我們看清設計的方向。
為了保證這篇文章的質量，Dribbble 年度的每個作品都超過 550 贊。在此原則下挑選了 828 件作品，作品總的大小為 2.2G。
從挑選出的 828 件作品中，排名前十的作品中 9 件為 B 端設計，另一件作品也是 B 端產品 C 端化的產物。其中：
明眼人都能看出其中的比重關系，B 端設計再次大火，為什么是再次？因為 B 端設計之前火過，只不過沒有趕上一個好的時代，在 C 端設計風光的十年里而忽略了其存在。隨著 C 端市場飽和與數字化的浪潮下，實體經濟、ToB、ToG 的產業再次迎來了它的曙光。視頻動效的作品占比也已超過 C 端界面設計，相信今年視頻動效作品占比還會再次提升。
Dribbble 年度最佳作品來自大家最熟悉的 UI8 團隊中的 Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢？既不是 C 端也不是純 B 端的作品，更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年Dribbble 設計流行趨勢之一。
MetroUI 是 Windows8 的界面設計語言，在 2010 年至 2013 年間曾經風靡一時，那也是移動互聯網的發展元年，現在國家推行實體經濟、數字化帶動 To B、To G 的發展元年，通過幾何色塊（MetroUI）實現 B 端產品與 C 端設計風格的傳承與銜接，你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。
最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現 B 端設計重功能和交互體驗，視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
1. 易讀性（停頓感）
字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關，因為我們都需要編排文本。當我們小時候寫作文時，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容，豐富文本內涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經有答案了。
2. 曲線
在標題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
3. 多彩高斯漸變風
多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的，多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新，給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上，為了更好的傳達信息需要去設計與內容相匹配的視覺風格。
1. 側邊欄 Sidebar
B 端設計的火爆帶動了 B 端相關模塊設計，更多的人也愿意嘗試 B 端相關模塊設計，側邊欄作為產品架構中重要的導航系統，好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果，也是受限于 PC 屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產品設計已經不再是假大空概念設計，而是一套實用美觀可落地的設計。
2. 儀表盤設計
儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B 端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態，大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據，團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同，自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態，需要分層級系統性去思考和設計。
3. 流程設計
復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業核心功能和業務，可自定義的管理流程系統搭建也是 B 端產品設計的難點，需要對業務高度抽象，讓每一個業務人員可自定義的流程才是好的流程設計。
4. B 端 C 化
B 端 C 化是 B 端產品設計的視覺表現力慢慢往 C 端產品設計的視覺靠齊，國內 B 端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業務的發展，B 端產品也開始移動化、智能化，國內主流還是通過小程序、H5 來現實 B 端產品 C 端化。
5. 輕代碼化
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統，輕松實現多元業務場景的數字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。
1. 人文氣息
為什么人加色塊的組合方式能流行起來？還是 B 端行業流行帶動的。B 端講的更多的是企業對企業。企業對企業除了講行業解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經就不言而喻了。
當然企業也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司，國內的一些手機廠商 OPPO、VIVO 等也會通過手機+背景+人物來體現科技與人文的結合，而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下 UI 扁平化的設計趨勢。蘋果 Mac OS Big Sur 系統的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術-C4D 創建彩色玻璃的 4 個技法”，完全能滿足 UI 設計師。當然還有一個好消息就是 Mac 用戶可以享有 OC 一年免費的使用權，具體安裝購買方法上某寶就可以輕松搞定，真香。
3. 輕擬物
輕擬物這幾年一直流行，在 UI 設計中趨于穩定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如 B 端產品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。
4. 簡潔設計
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在 B 端產品界面中更加需要簡潔設計，我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?；氐浆F實當需求功能不斷增加，產品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數據說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
5. 幾何圖形
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產品界面和宣傳內容的抽象，產品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B 端產品視覺設計 C 端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年Dribbble B 端產品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。
6. 暗黑設計
暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design 給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為 15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome 插件）用來測試界面的對比度。
7. 模塊化（組件化）
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面，但在 B 端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提，是否有從 0 到 1 搭建 B 端產品組件的經歷是設計師一生中最寶貴的經驗之一，它能提高設計師的系統化思維、邏輯思維和抽象思維能力。
產品模塊化設計就是將產品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置，就可以創建不同需求的產品，滿足客戶的定制需求 。
8. 插畫
插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質是都有自己的個性，但是在產品設計中更多是需要共情、共性來講故事，表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合，插畫不會過時，而是需要結合當下和產品找到最匹配的設計風格。
9. 幾何插畫
幾何插畫算是插畫簡化的一種表現形式，人和物的形態不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現，傳達出簡潔、科技的現代感。難點還是在人物形態的表現上，平時多練習練習速寫還是很有必要的。
10. 線面插畫
線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現人物形態時某些結構會表現不出來，這時候用線條簡單勾勒后，結構就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
1. 微交互
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI 界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。C 端產品微交互和動效已經很成熟了，一部分功勞來自 iOS 系統原生自帶的效果。B 端產品的微交互和動效更多還是在學習海外產品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產品體驗細節。
2. Mg 動畫
Mg 動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG 人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。
1. 三維圖標
MacOS Big Sur 系統圖標的更新帶動了三維圖標的流行，三維圖標的應該場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。
2. 輕三維
為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產物。另一個是更好的表現內容，并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加，特別是當下流行的毛玻璃效果，玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環境光更加出彩。
3. P4D（PS+C4D）
P4D 是 PS 加 C4D 的設計表現技法，也是視覺設計的最后一個環節，通過 PS 對 C4D 的渲染圖片進行調色，利用 PS 的調色技巧可以很好的解決 C4D 打燈光的瑕疵，還可以利用 PS 強大的合成功能，將渲染圖片與圖片素材進行合成，來表現畫面的視覺度，當然三維軟件比較難實現的水、粒子、煙花等效果，也可以通過 PS 的后期合成來實現，這也是 P4D 的強大之處。
4. 卡通 IP
卡通 IP 設計最近三四年技術的迭代已經慢慢的走上成熟，卡通 IP 也從傳統的純 PS 手繪技法，轉到 C4D 建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態）/AE（動態）調色。
卡通 IP 火的本質更適合做營銷，相比于品牌或 Slogan，卡通 IP 具有親和力和畫面感。隨著各種手辦行業大熱，受互聯網大廠影響下，卡通 IP 已經是互聯網 B 輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于 UI 設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。
5. 三維動畫
C4D 三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感，未來在 AR/VR 領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中 C4D 軟件對于域、動力學還是有一定的優勢。
上一次寫 Dribbble 流行趨勢還是兩年前了，通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業風風火火，隨著最近的互聯網裁員潮大家也慢慢的進入到反思層，客觀的看待和理解這個真實的世界，曾經的流行趨勢也需要慢慢的沉淀下來。
存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注，因為哪有什么所謂的創新，只不過是舊元素的重新組合，并符合當下這個時代人的審美需求。香奈兒的“時尚易逝，風格永存”大概就是這個意思吧。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前兩篇，探討了個人對交互設計價值觀的理解，以及其對從業者和用戶的價值。
這一篇，我們就來探討一下，如何做到之前提到的 4 點價值觀。
先從“周到“開始。
僅為一家之言。歡迎留言交流，說出你的看法。
本著嚴謹的態度，先捋一捋概念。
常言道，金杯銀杯，不如百姓口碑。
同理，周不周到，最終還是用戶說了算。那用戶是怎么評判的呢？通常是憑主觀感受。
拿上篇文章中網易號文章編輯頁面的例子來說，因為“保存”和“存草稿”功能做的不夠好，所以給筆者留下了不夠周到的印象。
翻譯過來，就是，一些體驗細節，影響了用戶的印象。
《設計師要懂心理學》這本書中有條原則，叫“整體認知主要依靠周邊視覺而非中央視覺”。
講的是視覺和 UI 層面的用戶認知。就是說，用戶會關注并不顯眼的邊邊角角的設計，而且這些邊邊角角的設計會影響用戶對整體設計的認知和印象。
舉個例子。假如說，微博信息流頁面的掃一掃圖標，在風格、大小等方面和其它圖標不統一，就會給用戶留下比較糟糕的印象，用戶很可能會覺得微博的設計不夠專業。
這些是 UI 設計層面的。在交互設計層面，也是類似的道理：體驗細節會影響用戶的認知。
總的來說，至少在常用的交互細節上，不要給用戶留下負面印象，也不要讓用戶產生負面情緒，避免所有的不周到，才算是周到。
個人覺得，最關鍵的地方，是滿足好小需求。
啥是小需求？
個人觀點，籠統的講， 小需求是一種共性需求， 主要是一些體驗細節。比如信息的分類與展示、銜接不同頁面的各種彈窗與提示、對各種狀態的提示、對各種情況的到位解釋，等等。
有小需求，就有大需求。
所謂大需求，更多是一種個性需求， 不同的產品，會有不同的大需求。比如短視頻產品，它的大需求會包含視頻的拍攝、上傳、播放等；資訊類產品，它的大需求則包含文章的撰寫、編輯、發布、查看等。
工作經歷，筆者見過一些交互設計不夠周到的產品。它們的共同特點就是： 大需求基本上得到了很好的滿足，小需求沒有得到很好的滿足。
這一大段，就圍繞如何更好的滿足小需求來展開。主要建議如下。
筆者有個客戶，是從事教育行業的，之前并沒有接觸過互聯網行業的產品與設計工作。
這位客戶找到筆者的時候，是想要設計一款小程序的界面。當時客戶非常自豪的對筆者說，這個（原型）是我用墨刀畫的，現學現做。
說起墨刀，本人也用過。和 Axure 相比，確實好用太多，在簡潔性和智能性方面，感覺和 Sketch 有異曲同工之處。
關于墨刀如何好用，網上已經有太多溢美之詞。筆者就結合自己的使用經歷，簡單總結一下：
1 好用，上手快。零基礎，只要會操作常用辦公軟件，簡單學一下就能上手
4 能查看頁面之間的跳轉邏輯。借助工作流功能，可實現這一點
以上主要是墨刀自身的優點。結合本段主題，我們再探討一下，對于日常工作，墨刀這把利器有哪些優勢。
1.1 可以把更多精力花在創作上
當我們不會用一款工具時，通常會有一些挫敗感。如果必須要用，接著很可能就會有一點焦灼了。
而墨刀，基本上不會讓我們體會到這些感覺。
我們也不用花無謂的時間去學習一些艱難的高深的技法，而是可以把更多的時間花在“創作”這件事上。
1.2 可以更好的去滿足小需求
部分公司，可能面臨如下情況。
公司沒有專門的交互設計師，產品的原型由產品經理來畫。產品經理本身還兼任項目經理。
如果項目又特別趕，客觀上，產品經理確實沒有太多時間去關注交互的體驗細節。
主觀上，如果產品經理對這些交互細節的興趣或重視程度不足、同時產品經理上面的決策層也不去抓這些體驗細節，最終的結果，就是產品的原型上可能會丟失很多體驗細節。
筆者就有類似的經歷。
一款 App，產品經理用 Axure 畫的原型。評審或宣講需求的時候，大家都是在電腦或會議室大屏幕上來看這個原型，同時所有人最先關注的是大需求。
理解完大需求，會有部分同學就大需求提出自己的看法或建議。最后，才會有部分同學就小需求指出不足并提出建議。
受限于職責、時間等各種因素，大家也不可能針對小需求提出太多建議。結果就是，仍然會有相當數量的小需求被遺漏，或者沒有被很好的滿足。
墨刀有兩個功能，可以較好的規避這些問題。一個是工作流功能，一個是手機端預覽功能。
工作流功能，類似流程圖，即把所有頁面以合乎邏輯的方式鏈接起來?？陀^上，會促使我們畫出所有包含小需求的頁面，包括彈窗、狀態提示等。
支持多人的手機端預覽功能，使得我們在手機上，可以通過點擊等方式來模擬體驗這款 App。這樣的環境下，我們會更容易理解大需求，也更容易發現小需求存在的問題。
所以，個人的建議，就是用墨刀來畫原型，同時把工作流和多人手機端預覽（針對 App、小程序）這兩項，作為硬性標準。
一款產品，在體驗或使用時，非常容易發現問題。
因為這時候，我們可以松弛下來，把自己切換成普通用戶。忘掉所有費腦子的需求和設計原理，只依賴經驗和直覺來用這款產品。我們的主觀感受，會告訴我們，這款產品的交互，到底周不周到。
據陸樹燊的《微信團隊的實驗室文化》一文顯示，張小龍評審微信的功能，不看原型圖，不看設計稿，也不看 Demo，而是體驗前后臺代碼開發好后的產品。這就意味著，如果一個功能在給到用戶前有 N 個方案，就會有 N 個方案對應的前后臺代碼。
一定程度上，微信團隊就是通過這種在正式發布前反復試錯、不斷打磨的方式，最終給用戶提供了優秀的交互體驗。
估計，絕大部分團隊和公司，都做不到微信這樣，開發 N 個版本，并去一一體驗和比較這 N 個版本。
無法體驗已經開發好的 N 個版本。但是，在真實的設備上體驗 N 個原型，我們還是可以做到的。
原型雖然沒有開發好的產品那么順暢和流暢，但是，如果用墨刀在手機端體驗一款加了鏈接和動效的 App 原型，一樣可以發現很多問題。
不過，根據經歷和觀察，筆者發現，我們人類，是不喜歡體驗原型的。
想一想，平常工作中，我們可能會樂此不疲的去體驗開發好的測試版產品。但對于原型，大部分時候，都是匆匆忙忙就過掉了。
個人有個猜測，就好像人類喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣，我們人類是不太愿意花費太多時間和精力去和原型這種“假產品”互動的。
所以，某種程度上，體驗原型，是一種反人性的行為。
但卻是一種非常經濟和高效的方法。
因為首先，大部分時候，我們都是先選中一個原型方案，然后去設計、去開發；其次，等到開發好進入測試環節，這時候，原型往往就成了測試的標準，依靠測試來優化原型是不現實的。
所以，結合現狀，綜合來看，小需求能不能得到很好的滿足，很大程度上還是要依靠原型。
也就是說，很有必要對原型進行優化。具體方法，就是在真實的設備上體驗原型、反復體驗、多人體驗，并進行相應優化。
如前所述，用利器來創作原型，反復在原型里體驗產品，這些強調的是內部力量，即自身的努力。
下面，再談一談外部力量，即外界海量的知識與經驗。
說起外界知識，除了直接參考其他產品的設計以外，大家參考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》這些設計規范了。
根據筆者的實際經驗，這兩個來自蘋果和谷歌的設計規范，很多時候，我們都是拿它們當字典用。即哪一點不會或不太確定的時候，去翻一翻查一查。
雖然這倆規范很優秀，但是卻很難被我們“物盡其用”，因為它們的知識體系過于龐大，有點像一本字典。拿著“字典”里的每一條原則去檢驗我們的交互設計，這是很難做到的。
但是有一個設計規范，去非常適合拿來檢驗我們的交互設計，那就是尼爾森十大可用性原則。
太詳細的就不贅述了，這里我們再簡單回顧下這十條原則。
1) 狀態可見
用戶時刻清楚，正在發生什么
2) 環境貼切
營造一個用戶熟悉的環境，比如語言、詞語、圖標等
3) 用戶可控
控制權交給用戶，并且多數時候，考慮支持撤銷重做
4) 一致性
方方面面的統一，比如文案、視覺、操作等
5) 防錯
盡最大可能，幫助用戶，避免用戶犯錯
6) 易?。鹤R別比記憶好
通過把組件、按鈕等元素可見化，降低用戶記憶負擔
7) 靈活高效
優先考慮人數最多的中級用戶，同時兼顧高級和初級用戶
8) 易掃：優美且簡約
閱讀體驗要好，掃視體驗也要好；保持簡約和美觀
9) 容錯
幫助用戶識別、診斷，并從錯誤中恢復
10) 人性化幫助
日常的使用最好脫離幫助文檔，但有必要提供幫助文檔
個人非常建議，在日常工作中，把尼爾森十大可用性原則作為一把標尺，來時時刻刻檢驗我們的交互設計。
交互設計，在涉及體驗細節的小需求上，避免所有的不周到，方才是周到。
用利器創作原型，要包含流程圖；多體驗原型或產品，以體驗結果為準、而非討論結果為準；參考優秀的設計規范，用尼爾森十大可用性原則來檢驗原型。
以上三點，可以幫助我們做到交互設計的周到。
其中，個人認為，最為核心的是第二點：多體驗原型或產品，直到自己覺得周到為止。
因為，正如電影《霸王別姬》的一句臺詞所說：人，得自個兒成全自個兒。
最近有同學問老王，UI設計師是不是需要交互設計能力？
當然需要，不懂交互的UI不是好UI~
首先UI設計不僅僅需要把功能需求可視化，還需要注重用戶體驗。所謂用戶體驗，其實就是用戶與頁面的交互。而在交互設計中有很多的方法和理論，如格式塔心理學、尼爾森可用性原則、7+2法制、3次點擊法制、功能可見性原則、菲茨定律等。他們大多的方法也是共同的。
所以呢，今天老王來說說交互設計用的最多的原則——尼爾森十大可用性原則。
很多情況用戶是不知道當前狀態的，所以在適當的時間內做出反饋很重要。不僅能讓用戶知道情況，還能防止用戶發生錯誤操作。常見反饋有刷新提示、新頁面加載提示、支付提示、下載提示。除了結果反饋提示外，對于進程中的頁面會用進度條進行表現。
今日頭條APP首頁中，看過的文章標題變為了灰色、而沒讀過的文章標題依舊保留了黑色字體。
簡單來說就是讓軟件看起來跟符合真實世界，還原現實認知。通過直觀的視覺快速傳達給用戶。
音樂軟件通過模擬現實唱片并結合旋轉的播放動畫，從而降低了學習成本，更輕松的理解界面。
說白了就是給用戶發后悔藥，當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能。買錯商品可以無條件包郵退回。
拼多多凸顯了“退貨免運費”“7無理由退回”服務，解決了用戶買到不滿意產品的售后擔心。減少了承擔運費的成本，從而促使了用戶快速下單。
一個好的產品從視覺上首先是統一的，色彩、字體、元素保持統一，能加強用戶的記憶力。在交互中同樣如此，頁面結構、操作反饋都需要保持一致性。
QQ首頁列表中不管你點擊那一條目，下一級界面都是由右往左滑出。點擊左上角返回按鈕，會從左往右滑回，體驗完全一致；幾乎所有產品進入下一層級頁面的交互方式都是如此。
為了減少用戶錯誤的可行性，進階是給出錯誤反饋是不夠的，用心一點的設計師其實會發現很多的產品是這樣做的。為了防止錯誤的發生，會進行防錯設計。
比如在發朋圈時，點擊返回按鈕出現的提示彈窗。彈出框方式會增加不可逆操作的難度，減少操作刪除帶來的順勢。更人性化的是，提示給出了保留和不保留按鈕選擇，選擇保留退出還可以再次編輯。
通過把組件、按鈕及選項可見化，減少用戶的記憶負荷，讓使用更輕松。在使用過程中不需要記住上一頁面的信息就能完成當前頁的操作。
通常更新完APP之后，會出現新功能引導。引導提示能告訴用戶新功能所在的位置和作用。這也是協助記憶原則的體現。
好的產品不僅僅需要滿足新用戶，還需要滿足深度用戶。保證第一次使用者，能清晰明白功能。對于老用戶需要提供更高效使用方式。
對用戶重復使用的功能，提供便捷按鈕。比如叮咚買菜的再次購買。
適當的留白能讓頁面功能突出，也能讓視覺更加舒服。精致的圖形元素能給用戶留下好的印象。
很多K12的產品會運用IP形象進行延展，不僅強化了品牌記憶力，更增強了互動感。
好了，以上就老王對尼爾森十大原則的解析。其實原理很簡單，甚至很多都是很直觀的廢話，但如果不把它們一條條列出來，還是有很多人連這些廢話都做不到。
關注細節，才能成就大事！
一、什么是交互設計？
先來看一下百度百科的定義
交互設計（英文Interaction Design, 縮寫IXD)，是定義、設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系，以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關注以人為本的用戶需求。簡而言之，交互設計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。
為什么要做交互設計
在使用網站，軟件，消費產品或各種服務的時候（實際上是在同它們交互），使用過程中的感覺就是一種交互體驗。隨著網絡和新技術的發展，各種新產品和交互方式越來越多，人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候，可能為當初的使用者本身就是該行業的專家，沒有人去關注使用者的感覺；相反，一切都圍繞機器的需要來組織，程序員通過打孔卡片來輸入機器語言，輸出結果也是機器語言，那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大眾組成的時候，對交互體驗的關注也越來越迫切了。因此交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了。
從用戶角度來說，交互設計是一種如何讓產品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。
通過對產品的界面和行為進行交互設計，讓產品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目標，這就是交互設計的目的。
二、交互設計常用原則和定律有哪些？
尼爾森十大可用性原則
1、狀態可見原則
系統應該讓用戶時刻清楚當前發生了什么事情，也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。
即在用戶操作界面功能時給予實時反饋，例如：頁面加載狀態提示、按鈕點擊后的狀態變化、進度條提示等。
2、環境貼切原則
設計的一切表現和表述，盡可能貼近用戶所在的環境，將現實環境的操作功能巧妙的轉化為線上功能，使其貼近用戶。使用用戶能聽懂的專業術語，涉及到專業化語言時要轉化成用戶熟悉的語言。
即模擬真實的事物，使用戶更容易理解。例如：天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品，降低理解成本。
3、操作可控原則
對于用戶的誤操作，提供二次確認或者撤銷的功能，這樣可提高用戶的操作可控性。
例如：刪除聯系人二次確認提示、消息可撤回操作。
4、一致性原則
遵循統一的產品設計規范／邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。
一致性包含視覺交互、文案描述、組建樣式等，例如：微信小程序設計規范。
5、防錯原則
設置防錯的機制，減少用戶犯錯。在用戶選擇動作發生之前，就要防止用戶容易混淆或者錯誤的選擇。
例如：用戶名稱校驗提示、手機號碼位數限制等。
6、易取原則
減少用戶記憶負荷，在適合的時機給用戶需要獲取的信息。
例如：驗證碼讀取、找人轉賬提示等。
7、靈活高效原則
提供靈活的操作和高效的獲取信息能力。
例如：手機號碼一鍵登錄、消息關鍵字識別等。
8、優美簡約原則
保留產品最主要的信息，如果不是優先級最高，要盡一切可能避免去影響產品的簡潔和美觀。
9、容錯原則
用戶在使用產品過程中出現了問題，及時準確的告知用戶出現問題的原因。
例如：信息輸入提示、搜索無結果等。
10、提供人性化幫助
在用戶需要的時候提供必要的幫助說明。
例如：新功能引導、解釋說明文案等。
七個交互設計定律
1、菲茲定律
點擊一個目標的時間同以下兩個因素有關：
（1）設備當前位置和目標位置的距離（D）。距離越長，所用時間越長；
（2）目標的大?。⊿）。目標越大，所用時間越短。
該定律經常運用于鼠標從點A到點B的運動。
例如常用按鈕的尺寸設計等。
2、?？硕?
一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。
交互設計中要合理設置選項，以免用戶使用中決策時間過長，降低使用效率。
3、米勒7±2定律
喬治米勒對短時記憶能力進行了定量研究，他發現人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。
例如：手機號碼的分位顯示、應用中標簽欄數量等
4、鄰近性法則
人們通常將距離近的事物劃分為一組。
界面設計中可以用對象間的相對距離來區分信息層級。
5、復雜性守恒定律
每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節，這一固有的復雜度都無法依照我們的意愿去除，只能設法調整、平衡。
例如：在智能手機出現之前，手機上的操作按鈕都是實體按鈕。在智能手機出現手，手機被整個屏幕占據后，所有的操作都集合在了手機系統之中，等于把物理操作轉移到了系統操作中，其本身的功能復雜程度并沒有發生改變，只是轉移了而已。
6、防錯原則
大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。
例如：登錄時用戶名校驗，手機號碼位數限制等。
7、奧卡姆剃刀原則
“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。
”這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。
在設計中可以使用戶關注最主要的信息而非其它無關緊要的事物，從而提升使用效率。
三、交互設計如何開展工作
首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產品的戰略層和范圍層的業務目標。把握產品設計大方向，只有方向對了后面的工作才是有價值的。
把握了產品方向，下面就該進行需求的分析，
首先針對需求考慮5個問題：
1、為什么要做這個功能？（業務需求）
2、產品期望得到怎樣的成果？（業務目標）
3、誰來使用？（目標用戶）
4、他們要怎樣使用？（用戶需求）
5、如何讓他們都來使用？（將業務目標轉化為用戶行為）
清楚這5個問題后，再根據交互設計流程進行一步一步的進行
這實際上就是對需求的戰略層分析。
我們進一步分析業務需求（業務目的、業務目標）和用戶需求（目標用戶、用戶體驗目標），把握關鍵因素（用戶的動機、擔憂和影響目標達成的障礙）。
歸納這些需求，明確設計策略。
將“業務目標”轉化為“用戶行為”，通過引導用戶的使用來幫助產品實現目標。
從設計“用戶行為”到設計“用戶界面”，用戶行為決定了用戶界面，用戶界面也導致了用戶會出現什么樣的行為。
設計需求分析方法就是要幫助用戶創造動機、排除擔憂、解決障礙。
四、如何進行用戶研究，方法有哪些
評估的形式及方法
常見的評估形式分為三類：
1、評估主體：根據評估的主體不同來進行區分，即誰來做評估。
按照評估主體來區分主要有兩個主體：用戶和專家
用戶評估主要靠收集用戶使用數據，也就是用戶測試，它的數據相對客觀，但時間和費用較多，評估范圍較窄。
專家評估是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。專家評估相對主觀，但費時少、費用少、評估范圍窄。
兩種評估方法可以相互補充，并結合使用。
2、評估性質：例如定性評估、定量評估或著其它方式。
按照評估的性質來區分可以分為定量評估和定性評估。
定量評估是指對可以計量的部分進行評價，如點擊量、使用率等，可以用數據來說明。
定性評估是指對非計量性的部分進行評價，如流暢度、舒適性、創造性等進行評價。它只能表示一個度，無法準確用數據來說明問題。
3、評估過程：按照評估的過程來進行區分。
從評估的過程來區分可以分為理性評估和感性評估。
理性評估相對客觀，從客觀的角度出發判斷客觀事物。
感性評估更為主觀，評估結果并沒有客觀規律。
在實際應用中也需要將理性評估和感性評估結合使用，才能完整的完成我們的任務，達到我們的目標。
常見的評估方法有四種：
1、原型評估方法：在產品研發過程中，對于界面設計以及程序的測試來獲得用戶的反饋是至關重要的。以用戶為中心和交互式設計的重要因素之一就是原型方法，原型方法的目的是將界面設計與用戶的需求進行匹配。
一般來說原型評估方法分為三大類型：
（1）快速原型：原型迅速成型并分配實施，在原型實驗收集的信息基礎上，系統從草案中得以完善。
（2）增量原型：應用與大型系統，從系統的基本骨架開始，需要階段性的安裝，及系統的本質特征是在初次安裝完成后允許階段性測試，以減少遺漏的重要特征。
（3）演化原型：對前期的設計原型不斷進行補充和優化，直到成為最后的系統。
2、簡易測試評估方法
在條件不允許的情況下，可以采取簡易的方法來對用戶體驗進行評價。步驟是：
（1）實驗室環境準備：準備好測試用的電腦或其他媒介。兩個房間，房間1用來對被測試者進行測試，房間2用于設計師和工程師的觀察。
（2）被試選擇：分為用戶組和專家組。
（3）進行測試：房間1中被試者根據自己的選擇進行操作和測試，同時說出自己的內心想法，觀察員在調查表上記錄被試者的每一次的操作情況，包括出錯情況和被試者的口語描述，當被試者在測試過程中遇到困難或操作無法進行時，觀察員要給予一定的客觀提示。房間2中通過相關設備將房間1的情況傳輸到房間2，設計師和工程師實時觀察和記錄被試者的情況，以便今后對產品做進一步的修改和完善。
（4）結果分析：通過多次測試后，將測試結果匯總，提取出交互設計中存在的問題，以及對交互設計有益的建議形成測試報告。
3、眼動評估方法
眼動追蹤可以用來評價對產品（包括硬件產品和軟件產品）設計的感性意象，評測產品設計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區域即用戶視覺注意的焦點區?？梢越Y合口語分析法了解用戶的所想 和所做。
4、腦電評估方法
通過對腦電信號的分析，研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領域應用廣泛，被用來評估交互設計、人機界面、產品設計等方面的內容。但是腦電評估也有一定的缺陷，例如空間分辨率上的局限性，因而對某些認知過程和腦區的定位并不是很準確。第二，在許多相似的實驗研究中，由于研究者采用了不同的實驗材料和方法等，實驗結果也存在差異性。第三 ，由于采集記錄時間的滯后性，腦電所記錄的并不一定是當下被試者所想到的內容。
采取哪種方法來開展用戶測試和評估，要根據不同的任務結合不同的環境來開展，比如：時間、成本、資源等。
啟發式評估法
是專家評估法的一種，也被稱為經驗性評估，最初由Nielsen博士提出。簡單來說，啟發式評估是一種簡易的可用性評估方法，使用一套相對簡單、通用、有啟發性的可用性原則，讓幾個評審根據專業知識和經驗來進行評估，發現產品潛在的可用性問題。
啟發式評估的兩大要素：評估者和評估參照的原則。
對評估者的要求主要有四個方面：
（1）人數：推薦3-5人，有時會更少
（2）知識：最好同時具有可用性知識及設計知識
（3）身份：最好是非設計者本人，否者不具有客觀性
（4）崗位：設計師或用戶研究員
評估參照的原則有：尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設計指南、拓展原則、HHS網頁設計與可用性指南等。具體需要根據實際項目來選擇，常用的是尼爾森十大交互原則。
什么時候適合使用啟發式評估法？
交互設計和UI設計階段、測試優化和產品發布后的階段。
啟發式評估的優缺點有哪些？
優點：成本低、效率高、發現大多數可用性問題，甚至是用戶測試時不會出現的問題。
缺點：不能代表真實用戶，相對主觀、有時候發現問題過多、對評估人員知識背景要求較高。
什么時候適用？
（1）適合時間、資源有限的情況下快速發現可用性問題，降低風險及成本。
（2）版本變動不大的情況下，小成本檢驗。
（3）作為可用性測試的之前準備。
啟發式評估流程是什么？
（1）準備階段：確定范圍、背景調查、參考評估原則、評委邀約、材料準備
（2）執行階段：任務走查、整體走查、結果記錄
（3）分析階段：匯總討論、報告總結、優化方案
可用性測試
先來看一下我們在平時工作中常常會聽到這樣的問題
產品經理：我們的用戶覺得產品好不好用？使用過程中會不會遇到問題？他們是否滿意？
設計師：設計的過程有一些糾結的地方，不知道實際用戶是怎么理解和操作的怎么辦？
產品開發后：想在大推前檢驗一下產品是否靠譜，適不適合大推？
當我們遇到這樣的一些問題時，如何找到方法快速得到答案呢？
那就是接下來要介紹的可用性測試方法。
可用性測試是一種常用的、高效的方法。
它的定義是：通過觀察具有代表性的用戶，完成產品的典型任務，從而找出產品可用性問題并解決，目的是為了改善產品，讓產品更容易使用。
什么時候適合做可用性測試呢？
一般是在：交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好，可以盡早發現問題并及時調整。
類型分為兩種：形成式和總結式
形成式特點：小樣本、發現問題為主、不能做定量對比。
總結式特點：大樣本（30人以上）、定量的評估、可以做對比評估
可用性測試可以解決什么樣的問題？
1、發現問題，產品在體驗上是否存在問題
2、檢驗實現，期望的設計目的有沒有達成，是否滿足了用戶的期望
3、產品評估，用戶是否會滿意
4、理解用戶，了解用戶行為習慣，了解用戶認知，找到某些問題的原因
測試流程是什么？
整體上分為4個階段：1、準備 2、測試 3、分析 4、優化
1、準備階段要做的有哪些？
確定目標：確定測試目標決定了后面測試過程要怎樣去設計
常見的測試目標有：
·對整個產品做可用性評估
·對新增的功能模塊進行評估
·提前觀察新方案對新老用戶有怎樣的影響
·提前檢測改版是否達到預計目標
·設計時存在爭議，如何選擇解決方案
·某個環節流失率較高，檢測是否為設計原因導致
·需要拓展某一類特殊用戶，測試針對這類用戶在設計上是否需要作出調整
準備測試方案
方案中應當包含以下內容：
·測試目的：明確測試的目的及范圍，測試目的決定了測試方案
·測試關注點：與負責的設計師一起梳理測試中要關注的問題
·用戶招募：招募要求，樣本配比，招募渠道
·經費預算：獎勵的形式和額度
·時間計劃：用于把控時間計劃
撰寫測試腳本：設計測試任務，通過用戶行為去觀察提問來獲得我們想要的內容
基本的流程有：
·暖場：3min，簡單聊天，消除用戶的緊張情緒
·測試說明：2min，對測試內容規則做說明
·測試前訪談：10min，了解用戶基本信息
·簡單試用：3min，讓用戶熟悉產品
·測試執行：30-45min，提示任務并觀察
·事后訪談：15min，針對疑點問點追問，填寫評價表
·道別：5min，支付禮金，送用戶離開
招募用戶
招募什么樣的用戶呢？
·根據測試目的來定，找出與測試目標有關的篩選緯度
·特別考慮用戶使用行為相關的特征，例如競品使用經驗，使用產品的目的，用戶的活躍度等
·挑選最核心的緯度，轉化成用戶招募的條件，并盡量客觀化，具體化，可衡量
·避免設置交叉條件過多，導致樣本代表性降低
·學會辨別真假的用戶信息
招募多少用戶合適？
·以發現問題為目的快速可用性測試，6-8名即可
·考慮產品的復雜性，覆蓋人群差異性，適當做調整，拓展到10-15名
招募渠道有哪些？
·公司內部
·現有產品用戶庫
·公司其他產品用戶庫
·熟人，朋友等
·推廣渠道：官微、公眾號、門戶網等
·社區，論壇，qq群等
·第三方調研公司
準備測試素材：低保真或高保真原型，或線上已經可以使用的產品，也可以準備一些量表工具來輔助測試。在測試
過程中需要用到的電腦或手機設備，攝像頭，紙，筆，桌椅等。
測試場地選擇：
·專業可用性測試實驗室：一般對測試質量要求較高，旁聽人數較多且需要采集豐富的數據的時候采用此方法。實驗室有兩個房間，一個測試間，一個觀察間，中間有單向玻璃分隔。測試間中有多角度的攝像頭，用來記錄測試過程，觀察間可以同步看到測試間里的情況，
·普通測試環境：在觀察人數較少（小于3人），條件有限時使用。
預測試階段：正式測試前進行預測試，保證測試流程通暢
·走查：記錄可能出現的問題
·預測試：找人先測試一下
·調整：調整測試流程
正式測試階段
測試參與人員有
·主持人：引導整個測試流程
·記錄員：記錄操作行為，訪談內容，發現問題等
·產品團隊：參與旁聽，觀察，結束后交流
·用戶：完成測試及訪談任務
測試過程中需要觀察的要點：
·用戶是否獨立完成了任務
·是否存在無效操作或不知所措的情況
·用戶是否滿意
結果分析
邊測試邊總結，越及時越好
·測試完一個用戶，做一次小結
·測試結束當天寫小結，與設計師當場討論
·重要問題反饋后再總結分析報告
·邊測邊改，邊改邊測
結果分析4個步驟：1、對發現分類 2、整理不確定項 3、評定優先級 4、結果記錄
撰寫報告
從4個方面來寫：
·總體如何
·有哪些問題
·嚴重程度如何
·建議是什么
·除此之外，還可以圍繞關注的問題，未滿足需求補充分析
優化跟蹤
在測試之后需要出優化的方案，測試優化的過程是循環的。
測試之后如果還有其他問題沒有得到解決，可以結合其他的一些測試方法來得到。
問卷調研
問卷調查法是以書面提出問題的方式搜集數據的一種研究方法，研究者將所要研究的問題編制成問題表格，讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫，從而了解被試者對某一現象或問題的看法和意見。問卷調研可以用于需求挖掘階段，也可以用于產品上線后的評估階段。
如果是想了解用戶對產品上線后的滿意度，可以使用問卷調研的方法。它比較適合去了解用戶的認知態度，也可以附帶了解用戶的行為習慣，
問卷調研的優缺點
優點：統一性、靈活性、量化性、匿名性
缺點：（1）只能獲得書面的信息，而不能了解到生動、具體的情況。（2）缺乏彈性，很難做深入的定性調研。（3）調查者難以了解被調查者是否認真作答，是不是自己填寫的。（4）填寫問卷比較容易，有些別調查者會隨意選擇，或者按照社會主流觀點選擇，這樣會使調查失去真實性。（5）回復效率低，對無回答者的研究比較困難。
問卷調查的使用場景
適用于：（1）需要進行定量分析的調研。（2）需要匿名進行調研的問題。（3）對已有假設進行檢驗。（4）尋找問題隱藏的關聯。（5）對產品設計用戶認知及態度的評估。
不適用于：（1）發現和描述具體問題。（2）探索受訪對象的模糊態度。（3）獲取創新想法。（4）獲取精確的行為數據。
問卷調研流程
1、確定目標：確定調研目的、對象、分析目的和應用對象。
2、調研方案：通過訪談、經驗、理論等，確定調研框架，題目選項，分析思路，投放渠道，相本配比等。
3、問卷設計：問卷設計，問題美化，投放渠道。
4、問卷測試：多人測試，確保問卷的可讀性，邏輯通暢
5、問卷投放：按照計劃好的投放渠道進行投放，回收數據，數據清洗
6、問卷分析及填寫報告：分析及報告填寫，調研結果落地
數據分析
概述：通過在網站或應用中進行數據埋點，獲取用戶對產品的使用和行為數據，并進行基于產品體驗優化的數據進行分析。
數據分析可以做什么？
1、可以做到用戶從哪里來，來了多少
2、獲取用戶屬性，用戶地域，用戶設備
3、訪問了哪些頁面，使用了哪些功能，消費了多少錢，消耗了多少時間
4、哪些流量可能存在問題，忠誠度如何，活躍度如何，有沒有達到目標，和行業相比如何
5、流失情況如何，離開之后是否還回來
可以作為產品的眼鏡和大腦，提供客觀衡量的依據，可以持續優化改進。
數據獲取方式的對比
日志文件：優勢，完整的服務端請求記錄。
缺點，日志的獲取和清洗有過濾成本，許多頁面操作無法記錄。
JS頁面標記：優勢，數據獲取可控、靈活，可以對頁面操作記錄進行記錄，獲取數據比較完整豐富。
缺點，需要在頁面植入JS標記代碼，某些情況下無法獲取，如當用戶禁用JS功能時。
常用的數據監控平臺
1、第三方監控平臺：如Google Analytics、百度統計、騰訊云分析等
2、自研平臺
數據分析流程
1、監控 2、定義 3、埋點 4、測量 5、分析 6、優化
Web分析常用的指標
PV：是指頁面瀏覽量，網頁瀏覽數實施評價網站流量最常用的指標之一，用戶每一次訪問網站中的頁面均被記錄，對統一頁面多次訪問，訪問量累計
UV：是指獨立訪客，是通過互聯網訪問、瀏覽這個頁面的自然人
UPV：是指唯一身份綜合瀏覽量
訪問：是指在一定時間范圍內，網站所有訪問者對網站發起訪問的總次數，從訪客來到網站到最終關閉網站所有頁面，記為一次訪問
識別用戶的方式：IP、IP+User Agent、cookie、User ID、設備ID、其他
復合指標
跳出率：指用戶來到網站，只瀏覽了一個頁面就離開的訪問次數，占全部訪問次數的百分比，簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質量，高跳出率表示訪問者對著陸頁面不感興趣，沒有繼續訪問更深入的頁面。也可能頁面設計存在問題，也可能是導入的用戶不匹配。跳出率可以通過調整廣告渠道，優化頁面內容來降低。
退出率：訪問者離開網站一次被記錄為一次退出，某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高，代表某一頁面可能出現了問題。
訪問時長：網站停留時長，頁面停留時長，應用使用時長。訪問量是訪問質量的一個衡量指標，較長的訪問時間說明用戶與產品進行了較多的互動。
訪問深度：可以理解為單個用戶平均訪問的頁面數，是PV/UV的比值。訪問深度也是訪問質量的一個衡量指標，可以考察用戶是否和網站進行了較多互動。這個比值越大，代表網站的粘性越高。
轉化率：指在一個統計周期內，完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算，例如注冊轉化率、付款轉化率等，是一個重要的分析指標。
移動端基礎指標
移動端的基礎指標監測與web端略有不同，但分析思路大致相同。指標分為：新增設備、累計設備、啟動次數、單詞使用時長。
常見分析內容
流量分析（哪里來？）、用戶分析（什么樣的用戶？）、行為分析（如何使用的？）、路徑轉化（表現如何？）、流失分析（粘性如何？）
A/B test
A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式，來獲得具有代表性的實驗結論，從而尋找到更好的產品策略。
簡單來說，就是為同一目標制定兩個方案，讓一部分用戶使用A方案，另一部分使用B方案，記錄用戶的使用情況，對比兩個方案的結果，選擇更符合的方案。
A/B test一般會在產品改版正式上線之前使用，來驗證新的設計是否可以提高產品的表現。
A/B test可以測試的元素有：標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務流程、頁面布局、價格、視頻等?？梢淮沃桓淖円粋€元素或一次改變多個元素的方式來測試，這就是兩個測試類型單變量測試和多變量測試。
A/B test工具
Google Website Optimizer：搜索巨頭提供的免費A/B test工具，一個很好的入門級工具，但是沒有一些先進的功能。
Visual Website Optimizer：一個易于使用的A/Btest測試工具，包含功能有所見即所得的編輯器，單機地圖，訪問者分割和標簽等。
Unbounce and Performable：集成著陸設計的A/B測試工具。
Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企業級測試工具
App Adhoc Optimizer：國內A/B Test工具，同時支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB測試服務的專業Saas平臺
Optimizely：是網上現有的最專業的AB測試工具之一，它的價格要比其他的工具高很多（也可以免費使用一個月），它提供了一些非常好的功能。
Unbounce：對于登錄頁面的測試來講非常不錯，而且它不僅僅是個測試工具，還可以在無需自己編寫任何代碼的情況下來創建登錄頁面。
如何做A/Btest
1、確定目標，例如提高網站的付費轉化率，降低跳出率等
2、測試方案，建立假設：購買按鈕的顏色會影響點擊率？縮短流程可以提高復費率？改變導航可以降低跳出率等？
3、創建相比較的兩個版本，改變其中的變量
4、發布測試，將部分流量導向B方案，但不一定是5：5
5、數據分析，收集數據，對比AB版本的轉化率、跳出率、留存率等
感謝閱讀！
藍藍設計的小編 http://www.syprn.cn
