如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
當(dāng)別人問你什么是交互設(shè)計時，你又一臉懵逼了。本篇文章就來好好聊聊什么是交互設(shè)計
工作了很多年，卻依然說不出何為交互設(shè)計。一說道理，大家都懂，但是當(dāng)別人問你什么是交互設(shè)計時，你又一臉懵逼了。為什么會這樣呢？因為我們沒有自己去總結(jié)，沒有形成自己的知識庫。
交互設(shè)計，它由IDEO的一位創(chuàng)始人比爾?莫格里奇在1984年一次設(shè)計會議上提出，他一開始給它命名為“軟面（Soft Face）”，由于這個名字容易讓人想起和當(dāng)時流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后來把它更名為“Interaction Design”――交互設(shè)計。
首先，我們來看看權(quán)威方對交互設(shè)計的定義：
交互設(shè)計協(xié)會(The Interaction Design Association (IxDA))解釋如下：
交互設(shè)計師以創(chuàng)造有用且實用的產(chǎn)品及服務(wù)為宗旨。以用戶為中心作為設(shè)計的基本原理，交互設(shè)計的實際操作必須建立在對實際用戶的了解之上：包括他們的目標、任務(wù)、體驗、需求等等。以用戶為中心的角度出發(fā)，同時努力平衡用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平之間的關(guān)系，交互設(shè)計師為復(fù)雜的設(shè)計挑戰(zhàn)提供解決方法，同時定義和發(fā)展新的交互產(chǎn)品和服務(wù)。
百度定義如下：
交互設(shè)計（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域，它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達成某種目的。交互設(shè)計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關(guān)注以人為本的用戶需求。
唐納德諾曼給出的定義：
重點關(guān)注人與技術(shù)的互動。目標是增強人們理解可以做什么，正在發(fā)生什么，以及已經(jīng)發(fā)生了什么。交互設(shè)計借鑒了心理學(xué)、設(shè)計、藝術(shù)和情感等基本原則來保證用戶得到積極的、愉悅的體驗。
首先要知道什么是交互
交互，及溝通交流，發(fā)生互動關(guān)系。比如人和人之間的交互就比較好理解，最經(jīng)典的一幕可以用孫悟空智斗金角大王、銀角大王。金角大王說：孫行者，我叫你一聲你敢答應(yīng)嗎？然后，金角大王就叫：孫行者。孫悟空回答：爺爺在此。就這樣，孫悟空就被收進去了。這就是一個簡單的交互。
再比如，我們每天上班，到公司和同事打招呼。你說：“早上好呀”，同事回答“早”。這也是一個常見的交流互動。
人和人之間的交互比較好理解，那人和機器呢？其實也是非常好理解的。我們都忘不了微信推出的搖一搖功能，打開搖一搖，搖動手機，就會出現(xiàn)“咔咔”的聲音，然后加載，搜尋出一個和你同時在搖的人。其實，我們和任何機器之間的發(fā)生互動關(guān)系，都是屬于交互。往更廣的意義上說，如果失去了交互，地球?qū)⒉辉龠\轉(zhuǎn)，將毫無生機?，F(xiàn)在，智能時代已經(jīng)到來，我們除了研究人和人、機器、產(chǎn)品、環(huán)境、服務(wù)、系統(tǒng)等之間的關(guān)系，還要研究機
器和人、機器、產(chǎn)品、環(huán)境、服務(wù)、系統(tǒng)之間的關(guān)系。
總之，當(dāng)人（或機器）和事物（無論是人、機器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）發(fā)生雙向的信息交流和互動，就是一種交互行為。
其次，我們來聊聊設(shè)計
聊設(shè)計之前，我們要先說說藝術(shù)，原研哉老師對設(shè)計和藝術(shù)的描述非常精辟，下面就引用他的話。
藝術(shù)說到底是個人意愿對社會的一種表達，其起源帶有非常個人化的性質(zhì)，所以只有藝術(shù)家自己才知道其作品的來源。這種玄虛性使得藝術(shù)“很酷”。當(dāng)然，解讀藝術(shù)家生成的表達有多種方式。非藝術(shù)家通過對藝術(shù)的有趣闡釋與藝術(shù)互動，欣賞之，評論之，在展覽中對藝術(shù)進行再創(chuàng)作，或把藝術(shù)當(dāng)做一種知識資源使用。
而設(shè)計，則基本上不是一種自我表達，它源于社會。設(shè)計的實質(zhì)在于發(fā)現(xiàn)一個很多人都遇到的問題，然后試著去解決的過程。由于問題的根源在社會內(nèi)部，除了能從設(shè)計師的視角看問題外，每個人都能理解解決問題的方案和過程。設(shè)計就是感染，因為其過程所創(chuàng)造的啟發(fā)，是基于人類在普遍價值和精神上的共鳴。（來源，原研哉，設(shè)計中的設(shè)計）
通過上述的描述，我們不難發(fā)現(xiàn)，設(shè)計主要表現(xiàn)在發(fā)現(xiàn)問題–解決問題。而交互設(shè)計就是發(fā)現(xiàn)和解決人（或機器）和事物（包括人、機器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）之間的互動關(guān)系問題。
所以說，交互設(shè)計的范圍是非常廣的，和各個學(xué)科都有涉及，我們可以通過下面的圖來看看交互設(shè)計和各個領(lǐng)域之間的關(guān)系。
那交互設(shè)計主要是做什么工作呢？
作為交互設(shè)計師，也應(yīng)該好好問問自己這個問題。通常，外界的人就認為我們就是畫畫原型，或者有時候畫畫UI，而我們通常就是這么做的，所以也不得不讓人們這么想。而現(xiàn)在大多數(shù)交互設(shè)計就是指移動端、網(wǎng)頁端的交互設(shè)計。
那么交互設(shè)計的核心競爭力是什么呢？對于很多公司來說，其實是沒有交互設(shè)計這個崗位的，交互的工作就由產(chǎn)品經(jīng)理和UI設(shè)計師各自分擔(dān)了?，F(xiàn)在產(chǎn)品經(jīng)理基本都掌握了原型技能，而且產(chǎn)品經(jīng)理通常在做需求移交的時候已經(jīng)把交互表達的很清楚了。而且很多UI設(shè)計師能力較強一點的，在做設(shè)計的時候都會考慮到交互。如果交互設(shè)計師在公司就只做做原型，那么，你就會被取代。
那么交互設(shè)計的工作內(nèi)容到底包含哪些呢？《用戶體驗要素》這本書很好的說明了這些內(nèi)容。本書把用戶體驗要素分五個層級：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。不同層級，表示著你的不同能力，引用一下大眾點評高級交互設(shè)計經(jīng)理范怡的一張圖，比較形象的描繪了交互設(shè)計的能力范疇和價值。
怎么樣，看到這些是不是有一點點覺悟了呢。如果想做好一名交互設(shè)計師，就應(yīng)該擴大自己的能力范圍，提升自身價值。怎樣做好交互設(shè)計呢？如何運用設(shè)計原理來做交互設(shè)計呢，我們下篇來聊聊唐納德羅曼老師書里的交互設(shè)計6要素：示能、意符、約束、映射、反饋、概念模型。
原文地址：站酷
作者：Luyeelin
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
新人設(shè)計師可能都會遇到這樣的問題：在設(shè)計一個復(fù)雜需求的時候，各種場景、可能性在腦中來回亂竄，常常覺得邏輯不夠嚴密。設(shè)計完成后，又被各方質(zhì)疑，提出各種異常場景，導(dǎo)致頻繁修改，縫縫補補。本文將和大家分享下解決以上問題的小方法。本文就以「企業(yè)內(nèi)部權(quán)限分配平臺」的需求為案例，整理了之前處理復(fù)雜需求的一些思路。講講在交互設(shè)計的過程中，如何避免以上兩種情況，讓我們的工作更好地服務(wù)用戶，體現(xiàn)價值。
首先，我想任何設(shè)計師在設(shè)計產(chǎn)品的時候第一步都是理解需求，這包括了需求的目標背景、角色場景、產(chǎn)品邏輯等，不同的需求側(cè)重點會不同。以「企業(yè)內(nèi)部權(quán)限分配平臺」的需求為例，目標背景和角色都比較簡單，但是一般涉及權(quán)限的產(chǎn)品，背后的邏輯就會很復(fù)雜，場景情況也很多。
和產(chǎn)品溝通，和用戶溝通，甚至網(wǎng)上找資料，都是理解需求的一些好方法。比如本次設(shè)計的需求是關(guān)于權(quán)限分配，這一篇《網(wǎng)易高手：角色權(quán)限設(shè)計的100種解法》的文章，就很好地幫助我理解權(quán)限分配背后的設(shè)計邏輯。
包括理解需求內(nèi)的專有名詞，為其建立特殊的標識樣式，也是幫助自己、團隊、用戶更好地理解產(chǎn)品需求的一種方式。
△ 名詞解釋
我們在最初思考需求的時候，肯定會從場景/問題出發(fā)，思考怎么去解決這個問題，是以「人」的思維來思考這個問題的，這是必然的，也是正確的。但此時我們的思維是散點式的，例如當(dāng)我們想到權(quán)限分配的需求時，可能會說：這次我們要新增一個「崗位」的概念，讓權(quán)限和崗位綁定，不要和人綁定。對了，還有人員離職這個問題困擾業(yè)務(wù)很久了，我們這次要在人員離職的時候進行……
所以，在最初的需求框架確定后，我得到的是這樣兩段文字：
看上去已經(jīng)非常全面了，但由于我們是散點式地收集需求，很多時候可能還是會有遺漏，或者說錯誤關(guān)聯(lián)了內(nèi)在邏輯，導(dǎo)致一些邏輯沖突、漏洞。
此時，我們需要將我們的思維從「散點式收集」轉(zhuǎn)為「結(jié)構(gòu)化梳理」。從需求說明里抽絲剝繭，我們可以得到：
各個對象之間的關(guān)系又是怎樣呢？我們把所有的對象兩兩組合，再把沒有關(guān)系的刪掉。
也就是：
這個具體的業(yè)務(wù)邏輯并不重要，不需要去費心理解，重要的是這樣一種結(jié)構(gòu)化思考的方法，可以應(yīng)用在后續(xù)各種各樣的設(shè)計中。
對象間的關(guān)聯(lián)，再和我們剛才梳理的人物、操作相結(jié)合，就可以還原成一系列的需求描述：「角色」可以在「A對象」下「操作」「B對象」，例如：超級管理員可以在部門下新增崗位。
至此，我們已經(jīng)可以建立「需求→功能對應(yīng)表」：
其中，紅色部分都是在之前散點式的需求羅列中沒有考慮到的功能點，通過結(jié)構(gòu)化的梳理，我們可以提前把它們都一一補齊。
這個過程可以減少我們最小顆粒功能點的遺漏，避免在做完大部分設(shè)計后，突然發(fā)現(xiàn)遺漏了某個功能，任務(wù)時間點又已經(jīng)到了，慌慌忙忙地加功能，就可能會影響整體的設(shè)計思路和框架。
完成了功能點的整理歸納后，就可以開始我們的界面設(shè)計了。在最初的界面設(shè)計中，這三點需要做減法：
當(dāng)然，可以先把可能存在的異常、細節(jié)都記錄下來，以便后續(xù)補充。
比如，在人員權(quán)限分配的界面結(jié)構(gòu)中，分為三個大模塊：
在有了界面框架和功能對應(yīng)表后，我們做設(shè)計會變得比較簡單，按照之前整理的「需求→功能對應(yīng)表」，把每個小顆粒的功能細節(jié)填充到界面框架內(nèi)即可。
當(dāng)主流程設(shè)計完畢之后，我們就要開始做加法了，在之前，我們一直是用一種純理性的視角來完成我們的設(shè)計，保持純理性的設(shè)計會有兩個問題：
例如，純從邏輯思維角度你能想到在一個企業(yè)里有人是沒有任何部門歸屬的嗎？然而現(xiàn)實中就存在這樣的情況──外包人員。不結(jié)合實際場景，我們也不知道用戶一天需要處理多少次重復(fù)操作，目前的設(shè)計對他是否足夠便捷。
作為一個企業(yè)內(nèi)部權(quán)限分配平臺，我們可以把部?、崗位、人員等對象作為初始線索，站在不同的用戶使用角度，沿著線索去全面地思考場景，修改功能。有一些實在難以理解的業(yè)務(wù)，找用戶聊聊也是一個好方法。
很快，我們就找到了下面這些特殊場景。
1. 人員變動
處理方法：行政架構(gòu)自動同步，紅點待辦。
我們與 OA 系統(tǒng)數(shù)據(jù)打通，自動形成四類待辦紅點：人員新增、人員離職、行政部門新增、行政部門刪除。
這樣 HR 就不需要重復(fù)做新人員的添加操作，只需要業(yè)務(wù)管理員把 OA 內(nèi)無法覆蓋的人員崗位設(shè)定好就可以，也不會出現(xiàn)遺漏的情況。
2. 高管兼職
例如某位高管：本身為 A 部門負責(zé)人，臨時兼任 B 部門負責(zé)人，那么當(dāng)他不再負責(zé) B 部門時，該如何處理他的崗位？離職？轉(zhuǎn)崗？似乎都不合適。
處理方法：新增崗位移除功能。
3. 外包人員
了解到現(xiàn)實情況中，外包人員是沒有部門歸屬的，但是實際上他們肯定也有自己負責(zé)的業(yè)務(wù)范圍和崗位，在初始化時如何安置沒有部門的人？
處理方法：新增一個部門，叫做「無崗位人員」，并且標紅作為待辦，提醒操作者去處理這些「無崗位人員」。
4. 人員離職/轉(zhuǎn)崗
在進行功能設(shè)計整合時，我考慮是否「人員離職」應(yīng)該叫「人員刪除」更系統(tǒng)化？是否可以直接整合為一個「人員編輯」的功能，將離職、轉(zhuǎn)崗的操作合并？（實際上這2個功能操作起來確實比較相似）
處理方法：最終我依然保留了「人員離職」、「人員轉(zhuǎn)崗」的功能，因為這樣更場景化，用戶清晰地知道自己當(dāng)前該操作什么。
目前對一個人進行離職操作的路徑是：找到原部門→找到崗位→找到人→處理離職，而我們的企業(yè)有 2500+ 員工，對于離職操作者 HR 來說，這個路徑是否現(xiàn)實？是否快捷？
處理方法：新增搜索功能，直接搜索人名→處理離職，這個功能也方便了其他找人的場景。
5. 更多
諸如此類的考慮還有很多，例如新建部門的時候是否會有空部門，在企業(yè)進行組織架構(gòu)重組時是否會有大批量的人員、組織變動，進而需要有批量操作等等。找到最初的線索，站在用戶的角度沿著線索思考，進行全局掃描，就會發(fā)現(xiàn)很多需要做加法的地方，發(fā)現(xiàn)的方式可以是觀察、訪談、思考等任何方式。
在已經(jīng)保證了主流程的簡潔、清晰后，再用全局掃描的方式去搜集特殊場景，給我們的設(shè)計做加法，可以保證我們整體的設(shè)計框架是清晰可用的，而特殊場景是散落在骨干上的各種小分支。
如果我們可以做到，對所有的主干場景、分支場景了然于心，并且有自己的優(yōu)先級考慮，那么對于項目成員、用戶提出的質(zhì)疑，我們也有足夠的理由來證明自己設(shè)計的合理性。
當(dāng)然，場景基本考慮全面后，還有最后一步，就是統(tǒng)一交互，完善細節(jié)，這一步也是設(shè)計上的加法。
以上，就是一個針對復(fù)雜需求的加減設(shè)計法案例，總結(jié)來說有四個大步驟：
所以，交互設(shè)計師是需要理性和感性的結(jié)合，要有抽絲剝繭，提煉總結(jié)的能力，也要有貼近用戶關(guān)注情感的細膩。把自己的工作規(guī)范化，減少無效付出，也是我們的一種能力。希望本篇文章對新人設(shè)計師有一些幫助，也歡迎大家一起探討交流。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
一位高管在餐巾紙上畫了一個新的主頁原型來演示她使用和喜歡的網(wǎng)站。一個開發(fā)人員晚上在公司呆到很晚，并添加了一個他認為很酷的新功能?；蛘弋a(chǎn)品經(jīng)理堅持采用與競爭對手相同的設(shè)計模式。
如果這些故事聽起來很熟悉，那么你并不孤單。大多數(shù)設(shè)計師都會收到這種“幫助”。
你的第一直覺可能是以平淡無奇的方式回應(yīng)“不”。但是，一個用戶體驗建議是否來自一個關(guān)鍵的利益相關(guān)者或項目周邊的人，應(yīng)該仔細處理。在您做出反應(yīng)之前，請考慮以下步驟：
你的第一反應(yīng)可能是利索地對對方說“不”。但是，無論UX建議是來自關(guān)鍵的利益相關(guān)者還是項目的外圍人員，都應(yīng)該仔細地處理它。在你做出回應(yīng)之前，考慮以下步驟:
第一步是將消除自己的主觀意識；你可能擁有豐富的設(shè)計經(jīng)驗，但不排除會有更好的想法。不要僅僅因為它是在PowerPoint文件而不是Photoshop原型中呈現(xiàn)，所以不要認為一個想法是壞的。
觀點的多樣性可以更有效的構(gòu)思：即使提出建議的人缺乏設(shè)計知識，他們可能會有不同的專業(yè)知識或經(jīng)驗，并且可能會為您正在嘗試解決的問題帶來寶貴的不同視角。
你如果像設(shè)計的上帝一樣扼殺了他人的創(chuàng)造力，最終會導(dǎo)致更糟糕的結(jié)果。
不加考慮就無情地否定別人的想法會阻礙人們在未來提出其他（有價值的）想法。即使一個想法對你來說顯然是錯誤的，但請記住，這個人也試圖讓設(shè)計變得更好，盡管他可能對“更好”的含義有不同的看法。通過允許他們：
您可能會發(fā)現(xiàn)，雖然提出的解決方案并不合適，但需要解決的問題很重要。
問問這個人他的設(shè)計理念想要達到什么目標。他在考慮不同的用戶群或業(yè)務(wù)需求嗎？繼續(xù)問“什么？”和“為什么？”（可能以不同的方式），直到你明白他考慮的問題及思考方式是什么。
確定建議和問題和好處。即使是一個壞主意也有一些好處。
例如，在大屏幕版本的網(wǎng)站上使用漢堡包菜單不利于用戶輕松找到導(dǎo)航。這是不使用它的一個非常重要的原因。然而，桌面上的漢堡也有一個視覺上吸引人、整潔的標題。確認想法的成本和收益，以便更準確地評估權(quán)衡，可以通過不同的方法犧牲或?qū)崿F(xiàn)哪些目標。
考慮舉行設(shè)計原型會議（一個設(shè)計原型會議是短，會議期間，團隊成員迅速協(xié)作和草圖設(shè)計，以探索和分享的設(shè)計思路廣闊的多樣性），一起觀看用戶研究視頻，或舉辦其他類型的用戶體驗工作坊，以便這個想法的支持者可以繼續(xù)為這項想法解釋。
解釋一下，現(xiàn)在做一個設(shè)計決定意味著跳過構(gòu)思、研究和用戶反饋。在理想的情況下，轉(zhuǎn)向設(shè)計思維過程，為所解決的問題找到正確的解決方案。
根據(jù)您對目標用戶及其任務(wù)的了解程度，確定一個想法的優(yōu)缺點可能需要:
論證該想法的成本可能會由于潛在的用戶混淆，而導(dǎo)致的用戶體驗問題，以及諸如可能延遲發(fā)布其他更重要功能的開發(fā)計劃中斷等后勤問題。要評估大量想法，請使用對其進行優(yōu)先級排序。
如果您評估確定不應(yīng)該實施該想法，您可以以積極的方式拒絕。
承認其貢獻
你不必著急全盤否定，但不要愚蠢的全去試一遍。找到您相信的有關(guān)他們建議的真實或有效的內(nèi)容，并將其標注出來。這可能是這樣的：
由于這些短語之后都會出現(xiàn)“but”，因此請確保您在所提出的觀點中是真實的。否則，說它們根本不值得。
分享您的評估理由
當(dāng)人們投入足夠的時間來提出建議時，就是幫助他們學(xué)習(xí)更多關(guān)于用戶體驗的知識，并在整個團隊中傳播更多用戶體驗知識的理想時機。利用這些時間，交流你評估的理由，而不是僅僅告訴他們一個“不”。
1. “這種設(shè)計對于[persona type]用戶可能有意義，因為他們需要[此功能]。但是我們的主要角色可能會有這個問題，因為[原因]?！?
2. “聽起來你想要解決與重要用戶任務(wù)相關(guān)的[特定客戶投訴]。確定信息的優(yōu)先順序可能會有所幫助，但要使其更大，顏色不同可能會導(dǎo)致橫幅失明。我想在第二天做一些調(diào)查，并提出一些替代解決方案的原型?！?
考慮提供原型，案列，設(shè)計原則，模式或研究發(fā)現(xiàn)，以幫助他們理解為什么一個設(shè)計可能會導(dǎo)致問題，以及為什么不同的設(shè)計會更好地工作。把每一次互動都看作是灌輸貢獻者設(shè)計理念的機會——這是對未來的一種投資。
當(dāng)客戶或強大的同事發(fā)出特定請求（或要求）時，即使您給出了解釋，也很難說“不”。但這并不意味著你應(yīng)該放棄自己的觀點并同意有害的建議。相反，與他們討論如何將想法背后的目標和資源結(jié)合在一起，而不必直接實施。
合氣道是一種試圖和平解決沖突的武術(shù)，它依靠轉(zhuǎn)彎和樞軸等動作來融合對立的能量。同樣的原則可以應(yīng)用于處理圍繞設(shè)計的沖突：與其直接拒絕一個想法，不如同意繼續(xù)探索這個建議，而不是明確地承諾實現(xiàn)它。
建議召開一次工作會議，在會上你可以提出既能獲得同樣好處又能避免成本的選擇。例如，你可以說:
比優(yōu)雅地轉(zhuǎn)移壞主意更好的方法是主動引導(dǎo)合作進入更有效的軌道。您可以通過在結(jié)構(gòu)化的、戰(zhàn)略性的時間（例如預(yù)定的研討會）尋求輸入，最大限度地利用每個人的貢獻。這種主動的方法減少了在無法有效評估或合并意外更改請求時感到意外的可能性。
每個人都對設(shè)計都自己的看法，這使得UX設(shè)計師的工作充滿挑戰(zhàn)。有些人總喜歡在界面中添加一些令人困惑的元素，比如原型、這會影響產(chǎn)品開發(fā)進度（可能包含UX迭代），以及那些喜歡設(shè)計（甚至認為自己是設(shè)計師）但缺乏任何真正的UX設(shè)計專業(yè)知識的人。
但是，如果您與您的合作者進行深入交流，向他們灌輸設(shè)計理念并引導(dǎo)他們發(fā)揮自己的長處，這種“設(shè)計幫助”的多樣性將是一種寶貴的資產(chǎn)。
最有成效的用戶體驗設(shè)計師在設(shè)計過程中會和許多人合作。他們與各種團隊成員和主要利益相關(guān)者討論業(yè)務(wù)目標，發(fā)展機會和約束，優(yōu)先級，要求和設(shè)計理念。這些人來自許多職能團體；具有不同的UX專業(yè)知識，想法和思考。
要想成為一名優(yōu)秀的用戶體驗設(shè)計師并創(chuàng)作出優(yōu)秀的設(shè)計作品，培養(yǎng)必要的溝通技巧來利用這些信息來源和輸入是必不可少的。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
是能點還是不能點呢？”這是當(dāng)用戶在面對一些操作按鈕時，大腦中所遲疑的問題。
按鈕越多，做決定的時間就越長。用戶必須仔細看每個按鈕，才能確定哪個是他們需要的。對于按鈕的任何不確定性，都可能會導(dǎo)致他們不敢操作或誤操作。
設(shè)計師可以把按鈕的優(yōu)先級設(shè)計的更加直觀以減少這樣的情況發(fā)生。當(dāng)用戶注意到哪個按鈕與他們的任務(wù)目標更契合時，就能幫助他們快速做出決定。這篇文章就是介紹一些這樣的設(shè)計技巧，通過簡單的調(diào)整使得按鈕變得更加直觀有效。
在App中，一個常見錯誤就是按鈕的排列順序偏離了用戶的閱讀習(xí)慣。他們將優(yōu)先級最高的按鈕放在最前面，期望用戶能首先注意到它。但其實只要按鈕足夠突出，視覺分量夠重，用戶就會注意到它，而無視它的排列順序。
按鈕順序不是為了提供可視性，而是為了要提率。在最前面放高優(yōu)先級的按鈕會導(dǎo)致用戶自上而下的閱讀習(xí)慣被打斷，看到按鈕后還會繼續(xù)閱讀下面的文字，然后再回過頭來找前面的按鈕進行操作。
不要讓用戶返回再次檢查按鈕，而是讓他們以自然的閱讀習(xí)慣看完所有的內(nèi)容后，按視覺比重快速進行選擇。
通過將優(yōu)先級高的按鈕放在底部，讓它處于視覺阻力最小的路徑上，這使得這個按鈕可以更有效率的被點擊。此外，底部位置是手指最容易達到的區(qū)域，這進一步提高了效率。
App上的另一個錯誤是只使用文字來表示按鈕。設(shè)計師使用文字按鈕來表示優(yōu)先級較低的操作。但是對于用戶來說，這是一個糟糕的選擇，因為純文本沒有一個按鈕的外觀，這可能導(dǎo)致用戶會忽略了這些操作。
純文本按鈕會讓用戶遲疑到底是按鈕還是內(nèi)容，從而造成混淆。這種不確定性可能會導(dǎo)致他們直接跳過這些按鈕。
純文本按鈕不僅讓人感到疑惑，在操作上也不容易點擊。將文本內(nèi)容放在按鈕框中，可以使得按鈕更容易被點擊和注意到。
與純文本相比，描邊形式的按鈕是降低優(yōu)先級的更好方法。它們使每個選項都易于識別，以便用戶能選擇他們所期望的目標。
高優(yōu)先級的按鈕應(yīng)該是最容易被識別到的，它是直接指向用戶最需要的目標操作。如果不確定優(yōu)先級，請考慮哪些操作會使得用戶朝著目標前進，哪些操作會使得用戶回退。
在這個例子中，”付款”具有更高的優(yōu)先級，因為它順應(yīng)著用戶的目標流程。但不大清楚”查看購物車”還是”繼續(xù)購買”的優(yōu)先級是如何。
“查看購物車”操作讓用戶查看已經(jīng)在購物車的商品，然后繼續(xù)結(jié)賬?！崩^續(xù)購物”操作將用戶帶回到遠離結(jié)賬的產(chǎn)品頁面。
通過思考這些操作，可以清楚的看到”查看購物車”具有中等優(yōu)先級，而”繼續(xù)購物”具有較低的優(yōu)先級。判斷的理由是哪些操作使用戶朝著他們的目標前進，哪些操作使他們遠離目標。
前進的操作總是會比回退的操作優(yōu)先級更高，因此，它們應(yīng)該被設(shè)計地有更強的視覺重量和更高的顏色對比度。
顏色是一種增加按鈕權(quán)重的有效方法，因為它從文本顏色中脫穎而出，吸引了用戶的注意力。當(dāng)按鈕的顏色與文本的顏色相同時，提示性就沒有那么強了。為優(yōu)先級更高的按鈕使用不同的顏色來輔助用戶進行快速決策。
如果對每個不同優(yōu)先級按鈕使用相同的顏色，用戶將不知道哪個優(yōu)先級更高。而使用不同的顏色只會讓用戶更加困惑，不知道這些顏色到底意味著什么。不僅如此，每個按鈕使用不同顏色，還會讓視覺權(quán)重重新變得一樣。
秘訣就在于使用相同的色相顏色，但改變飽和度和亮度就能改變這個按鈕的優(yōu)先級了，使得它比高優(yōu)先級的按鈕更輕?，F(xiàn)在按鈕的視覺比重有了區(qū)分，一下子就變得清晰了很多。
為了增加對比度，可以使用反色。在主按鈕的深色背景上使用淺色文本，而在中等優(yōu)先級按鈕上使用淺色文本。這樣就使得高優(yōu)先級的按鈕具有最亮的文本和最強的對比度。
用之前說的幾個方法，已經(jīng)足以區(qū)分優(yōu)先級，但還可以做的更好。每個按鈕設(shè)計的越直觀，讓用戶的思考就越少。
在每個按鈕文本上使用相同的粗細以表示相同的重量，最好根據(jù)優(yōu)先級不同去強調(diào)不同的文本。嘗試改變文本的粗細，優(yōu)先級越高的按鈕使用最粗體，而優(yōu)先級的文本則不加粗，這樣，按鈕文本也有了不同的優(yōu)先級，用戶在閱讀這些文字內(nèi)容的時候就能感知到。
在這個例子中，我把”付款”這個按鈕文字使用了粗體，使它變得更加醒目和明亮。”查看購物車”使用了半粗體，”繼續(xù)購物”使用了中等。所以，按鈕文本此時也有了一定的視覺權(quán)重?！辈榭促徫镘嚒敝械摹?項”沒有加粗，因為它是補充信息，不代表具體的操作。
最后一個技巧是一種更加全面的思考，它將使按鈕可供盲人使用。色盲的人是無法通過顏色來區(qū)分按鈕的視覺重量的，他們還需要清晰的視覺符號。
給高優(yōu)先級的按鈕加上一個圖標能夠起到強調(diào)作用而與其他按鈕區(qū)分開。當(dāng)用戶瀏覽時，他們往往更關(guān)注視覺元素而不是文本。使用圖標按鈕的方式能夠確保引起用戶足夠的注意力而快速選擇到高優(yōu)先級的按鈕。
如果刪除了顏色和外框，用戶仍然能夠識別付款按鈕，圖標與文本一樣，也能夠起到說明的作用。
如果用戶要花很長時間在操作按鈕上，或者按鈕的點擊率很低，那就可能是按鈕設(shè)計的不夠直觀。如果遇到了這樣的情況，請嘗試使用文中所說的這些技巧來優(yōu)化操作按鈕，或許你將會在前后版本中看到非常大的差異。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？它們不再是唯一的交互方式,一起來了解一下~
還記得瀏覽網(wǎng)頁時，只能通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？而現(xiàn)在，它們不再是唯一的交互方式，當(dāng)蘋果推出第一款iPhone時，多點觸控技術(shù)成為了主流，用戶們了解到，他們不僅可以在界面上指向、輕點還可以捏合、展開和滑動。手勢成為新的操作方式。
一、UI中手勢的力量
手勢非常自然和直觀，他們與真實世界反應(yīng)類似。
對于使用手勢，這里有三個主要的理由：
● 干擾少
App內(nèi)，手勢控制使用地越多，在屏幕上出現(xiàn)的按鈕就越少，這樣可以留出更多空間給更有價值的內(nèi)容。這使得app以內(nèi)容為重點，并讓用戶在沒有障礙，或者在分心的情況下也能進行最重要的操作。
● 使用簡單
一個手勢一旦被用戶發(fā)現(xiàn)和學(xué)習(xí)使用就會讓用戶在體驗感到愉悅，而且手勢可以減少步驟，來達到提高交互體驗的目的。例如，當(dāng)你需要刪除一些項目時，用“一次點擊刪除一個”的方式的很浪費時間的，但是如果使用“滑動一下，刪除一個”的滑動手勢，就更簡單快速，讓用戶更加愉悅。
● 無縫交互
雖然按鈕看起來對于觸發(fā)響應(yīng)更加有用，但手勢具有更大的潛力，使內(nèi)容的交互更加直觀。
二、手勢的缺點
但同時，手勢也存在難規(guī)范、易混淆等缺點。
● 增加用戶負擔(dān)
大多數(shù)手勢學(xué)起來或者記起來不自然也不簡單。舉個例子，在大多數(shù)APP，一個手指的手勢就對應(yīng)一件事，用兩個手指做一個同樣的手勢意味著另外一件事，其他對應(yīng)事件的手勢還有很多。
● 缺乏反饋
在大多數(shù)情況下，手勢不會留下任何路徑記錄。這意味著，如果做一個手勢但沒有得到反應(yīng)或者得到錯的反應(yīng)，這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。
● 缺乏一致性
大多數(shù)手勢在app中還不是標準統(tǒng)一的。他們對于用戶不總是顯而易見的。甚至一個簡單的滑動手勢，在眾多郵箱app內(nèi)的郵件項目中也有著不同的工作方式。例如，在Apple Mail 中，刪除一個未讀項目，你應(yīng)該向左滑動這個沒有打開的郵件，然后界面會出現(xiàn)選項來刪除這個項目。在Gmail里，向左滑動可以把郵件標記為未讀狀態(tài)。
三、手勢成為移動端UI成功的關(guān)鍵
1.如何選擇好的手勢
如果你的界面里要使用手勢，那你就必須要去了解你所在的市場以及你的目標用戶會去使用的app。要嘗試在你的app里使用和它們相同類型的手勢。這樣，你不僅基于你的目標市場的用戶的行為優(yōu)化了你的界面，還讓用戶從一開始就能舒適的使用你的app。
2.手勢教學(xué)
雖然每個移動端app都必定會用到手勢，但是要讓用戶很自然的就能知道如何操作(使用什么手勢可以干什么)卻一個挑戰(zhàn)。可觸摸的界面提供了很多條件來使用自然的手勢，例如輕點、滑動和捏合來完成任務(wù)，但是不同于圖形界面的操作，手勢的交互用戶往往是看不到的。
因此，要讓用戶能發(fā)現(xiàn)手勢是很重要的。你需要確保你提供了正確的線索----通過視覺引導(dǎo)來幫助用戶更容易的發(fā)現(xiàn)如何與界面進行交互。
3.如何在情境中教育用戶
教程和演示的做法相當(dāng)流行。在許多app中加入教程意味著要想用戶顯示一些說明內(nèi)容來介紹界面。然而，UI教程不是介紹app的核心功能的最優(yōu)雅的式。
良好執(zhí)行的UI手勢總是可以在易于實現(xiàn)視覺提示和漸進式披露的游戲中找到。這顯而易見，最好的游戲可以使人們隨著時間的推移來學(xué)習(xí)到技巧，而不是靠指導(dǎo)他們。例如，PuddingMonster 的游戲機器完全基于手勢，但是他們允許用戶得到基礎(chǔ)的信息，他們不需要做很多的猜測。他們可以展示動畫場景，讓用戶馬上知道要做什么。
四、使用動效來傳達手勢
手勢總是與移動app中的動效相關(guān)聯(lián)。動效在維護用戶體驗中起著非常重要的作用。作為設(shè)計師，你可以利用動效來傳達出用戶可以進行某個操作。當(dāng)動效與手勢一致時，用戶就會意識到自己與該物體正在相互作用。
動效在向用戶提供視覺反饋上是非常重要的。沒有動效，用戶就不能獲得足夠的信息反饋，不能確定他們是不是成功地完成了手勢動作。
這里有三種流行的基于動效來幫助用戶學(xué)習(xí)手勢。
第一種：動效視覺提示
顯示一個在執(zhí)行某個操作時如何和某一個界面元素進行交互的預(yù)覽。它的目的是在手勢和操作之間建立聯(lián)系。例如下圖中的這個游戲app是完全基于手勢操作的，這個app讓用戶不用去猜測就能知道該如何操作。用動畫來傳達功能信息能立即讓用戶清晰的知道該怎么做。
第二種：內(nèi)容的梳理
內(nèi)容梳理是通過微妙的視覺線索來暗示用戶進行手勢操作。例如下圖中卡片的展示，它表明這張卡的背后還存在著其他的卡片，這清晰的表明了可以滑動卡片。
第三種：功能可見性
你可以讓你界面里的某些元素具有很明顯的可供性來讓用戶知道這個是可以進行某種操作的。例如下圖中點擊相機icon后鎖屏就會從下往上彈起，展示出在下面的相機功能。
五、總結(jié)
手勢是一種強大的互動模式。移動設(shè)備已經(jīng)從磚塊發(fā)展到由我們手指驅(qū)動的復(fù)雜計算器。觸摸和手勢交互在使移動體驗更加簡便有趣方面，有很大的潛力。
設(shè)計一款移動端的app一定要思考手勢設(shè)計。手勢應(yīng)該起到協(xié)調(diào)和節(jié)約時間的作用。為了設(shè)計一個有意義的手勢，你應(yīng)該規(guī)定一個動作以及與其配套的一個手勢。提供反饋意見也非常重要，對于可能要進行的行動要有明確提示，并進行手勢的引導(dǎo)。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
好的UI設(shè)計師應(yīng)該是理論結(jié)合實踐，好的理論是指導(dǎo)實踐，所以今天我?guī)砹诉@一篇文章。講講什么是黃金ux七大定律以及它們?nèi)绾卧赨I中的運用。
費茲定律（fitts’law) 是心理學(xué)家 paul fitts 所提出的人機界面設(shè)計法則，主頁定義了游標移動到目標之間的距離，目標的大小和所花費的時間之間的關(guān)系。
定律內(nèi)容是從一個起始位置移動到一個最終目標所需的時間由兩個參數(shù)來決定，到目標的距離和目標的大小
用數(shù)學(xué)公式表示為 時間T=a+blog2(D/W+1)
用這張圖來說明，當(dāng)d(起始點到目標之間的距離）越長，使用者所花費的時間越多；而當(dāng)w（目標物平行于運動軌跡的長度）越長，則花費的時間越少，使用的效能也比較好。
我們來看新浪微博的轉(zhuǎn)發(fā)功能，因為隨著功能的復(fù)雜性，轉(zhuǎn)發(fā)功能包含了下一層級三個子功能，分別為快轉(zhuǎn)，轉(zhuǎn)發(fā)，分享。這個轉(zhuǎn)發(fā)icon一觸發(fā)，在很近的距離，3個點擊目標也設(shè)計的很大這樣容易很快的操作，利用費茲定律，提升了用戶的效能。
當(dāng)你走近一家餐廳，你看著琳瑯滿目的菜品是不是無從下手。在生活日常中你會對各種各樣的選擇而困擾，其實有時候不是你的問題，而是對方給予你的選擇太多。
Hick’s Law (席克定律)中說道：“一個人面臨的選擇（n）越多，所花費做出決定的時間（T)就越長。
用數(shù)學(xué)公式表達為 RT=a+b log2(N)
劃重點
當(dāng)選擇增加時，我們做決定的時間就會相應(yīng)增加
如果在你的服務(wù)，產(chǎn)品中“時間就是關(guān)鍵”，應(yīng)該將做決定的選項減少到最少，以減少所需反應(yīng)的時間，降低犯錯的概率。也可以對選項進行同類分類和多層次分布，提高用戶的使用效果。
奧卡姆剃刀原則也被稱為：“簡單有效原理“，由14世紀哲學(xué)家，圣方濟修士奧卡姆.威廉（William ofOccam)提出。這個原理告誡人們“不要浪費較多東西去做用較少東西也可以做好的事情?！惫P者認為和后來包豪斯密斯.凡德羅提出的：“少就是多”有異曲同工之妙。
一個簡潔的網(wǎng)站能讓用戶快速找到他們所找到的東西，當(dāng)你在銷售產(chǎn)品時候尤為關(guān)鍵。如果你的網(wǎng)站充斥著很多無關(guān)緊要的東西。比如小彈窗，無用鏈接。用戶會因為不能快速找到自己想要的東西而關(guān)閉網(wǎng)站。
合理的使用奧卡姆剃刀原則，能更好的傳達你想要表達的內(nèi)容，更容易吸引廣告投放者，給訪客帶來更好的用戶體驗。
泰思勒定律又被稱為：“復(fù)雜不滅定律”
中心思想是：“每一個程序都有必然有其與生俱來，無法縮減的復(fù)雜度，唯一的問題，就是誰來處理它。”
泰思勒定律定律認為每個過程都有其固有的復(fù)雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復(fù)雜性從一個地方移動到另外一個地方。
從手機的演變過程來看，智能手機簡化了物理操作按鍵，通過技術(shù)手段降低了手機操作的復(fù)雜度，尤其是復(fù)雜的交互手勢操作，雜度的降低是通過大量的技術(shù)和資金投入解決，體現(xiàn)了復(fù)雜守恒定律。
1956年喬治米勒對短時間記憶能力進行了定量研究，他發(fā)現(xiàn)人類大腦最好的狀態(tài)能記憶含有7（±2）項信息塊，在記憶里5-9項信息后人的大腦后開始出錯。
防錯原則是通過設(shè)計來將過失降低到最小化。該原則及時地告訴用戶哪里操作錯了。比如在填寫表單時，系統(tǒng)給出及時地報錯提示；重要、謹慎的操作，系統(tǒng)通常會有二次確認；為用戶提供撤銷的機會；為用戶提供糾錯的機會
接近法則是格式塔理論中我們最熟悉的，也最常運用的一項法則。當(dāng)對象離的太近時候，意識會覺得它們是相關(guān)的
我們來看看利用接近法則在移動端的案例，相同的模塊這兩款app都用空間間隙來做出了區(qū)分，讓人在移動的場景更能快速的尋找想要的信息。
在UI設(shè)計中，不僅僅是為了美觀的界面，更要有有理有據(jù)，在設(shè)計時應(yīng)該學(xué)會運用這些法則，不僅可以讓你的界面更專業(yè)，同時也更有說服力。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
Material Design 響應(yīng)式布局柵格適應(yīng)屏幕尺寸和方向，確保布局的一致性。
Material Design 布局柵格由三個元素組成：列、間距和邊距。
內(nèi)容放置在包含列的屏幕區(qū)域中。
列寬是使用百分比而不是固定值來定義的，以允許內(nèi)容靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列數(shù)由查看屏幕的斷點范圍（預(yù)定屏幕大小的范圍）確定，無論是移動設(shè)備，平板電腦還是其他尺寸的斷點。
間距是列之間的空間，它們有助于分離內(nèi)容。
間距在每個斷點范圍內(nèi)的值是固定的。為了更好地適應(yīng)屏幕，間距寬度可以在不同的斷點處改變。更寬的間距更適合大屏幕，因為它們在列之間創(chuàng)建了更多的空白。
邊距是內(nèi)容和屏幕左右邊緣之間的空間。
邊距寬度定義為每個斷點范圍的固定值。為了更好地適應(yīng)屏幕，邊距寬度可以在不同的斷點處改變。更寬的邊距更適合更大的屏幕，因為它們在內(nèi)容的周邊創(chuàng)建了更多的空白。
可以調(diào)整布局柵格以滿足您的產(chǎn)品和各種設(shè)備尺寸的需求。
可以調(diào)整間距以在布局的列之間創(chuàng)建更多或更少的空間。
可以調(diào)整頁邊距，以在內(nèi)容和屏幕邊緣之間創(chuàng)建或多或少的空間。頁邊距對每個斷點使用固定值。
正文副本可讀性的理想長度是每行40-60個字符。
在同一斷點內(nèi)，間距和邊距寬度可以彼此不同。
Material Design布局柵格可以被水平滾動的觸摸UI自定義。列、間距和邊距從左到右排列，而不是從上到下排列。屏幕的高度決定水平柵格中的列數(shù)。
在非觸控和web平臺，水平滾動的UI并不常見。
可以定位水平柵格以適應(yīng)不同的高度，從而為頂部的app欄或其他UI區(qū)域留出空間。
斷點是具有特定布局要求的預(yù)定屏幕大小的范圍。在給定的斷點范圍內(nèi)，布局將根據(jù)屏幕大小和方向進行調(diào)整。
Material Design基于以下列結(jié)構(gòu)提供響應(yīng)式布局。使用4列，8列和12列柵格的布局可用于不同的屏幕、設(shè)備和方向。
每個斷點范圍決定每個顯示大小的列數(shù)、建議的邊距和間距。
彈性柵格
彈性柵格使用可縮放和調(diào)整內(nèi)容大小的列。彈性柵格的布局可以使用斷點來確定布局是否需要顯著更改。
固定柵格
固定柵格使用固定大小的列，具有流體邊距，以在每個斷點范圍內(nèi)保持內(nèi)容不變。固定柵格的布局只能在指定的斷點處更改。
UI（用戶界面）區(qū)域
布局由多個UI區(qū)域組成，例如側(cè)面導(dǎo)航，內(nèi)容區(qū)域和應(yīng)用欄。這些區(qū)域可以顯示操作、內(nèi)容或?qū)Ш侥繕恕I區(qū)域應(yīng)跨設(shè)備保持一致，同時適應(yīng)不同屏幕尺寸的不同斷點。
為了提高設(shè)備之間的熟悉度，為桌面設(shè)計的UI元素應(yīng)該以與移動UI一致的方式進行組織。
永久UI區(qū)域
永久UI區(qū)域是可以在響應(yīng)柵格之外顯示的區(qū)域，如導(dǎo)航抽屜。這些地區(qū)不能重疊。
持久UI區(qū)域
持久性UI區(qū)域是可以隨時根據(jù)命令顯示的區(qū)域，或者它們可以保持可見。它們可以打開或關(guān)閉，出現(xiàn)或消失。當(dāng)它們出現(xiàn)時，它們會壓縮內(nèi)容和柵格。
當(dāng)持久性UI區(qū)域可見時，其可見性不受與屏幕上其他元素交互的影響。
臨時UI區(qū)域
臨時UI區(qū)域暫時出現(xiàn)，當(dāng)它們出現(xiàn)時，它們不會影響響應(yīng)式柵格。當(dāng)它們可見時，可以通過點擊其區(qū)域中的項目或其區(qū)域外的任何空間來隱藏它們。
當(dāng)UI區(qū)域可見時，其他屏幕元素不是交互式的。
原型
原型是結(jié)構(gòu)化布局，為布局、分層和陰影提供一致的方法。它們是一個起點，旨在在進行修改以滿足產(chǎn)品的特定需求。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
隨著折疊屏手機的發(fā)布，我們看到未來手機的形態(tài)可能會朝著柔性手機方向發(fā)展，那么，讓我們來思考一件事：如何在折疊屏手機上做交互設(shè)計呢？最近三星、華為和柔宇各發(fā)布了一款折疊屏手機，它可以把一臺8英寸的平板電腦通過折疊的方式變成一臺方便攜帶的6英寸手機。折疊屏手機屬于新的手機品種，也是我目前最看好的手機形態(tài)之一（未來手機的形態(tài)應(yīng)該是柔性手機，現(xiàn)在已知有柔性電路板的存在了）。通過幾天的觀察和思考，我認為折疊屏手機有以下好處：
以上基于「展開」態(tài)的想法，在折疊狀態(tài)下還有一些不錯的想法供大家思考。
華為在MWC2019上演示了一個名叫「鏡像智拍」的功能，它可以讓被拍攝的人實時看到拍攝效果，并調(diào)整面部表情與姿勢。用自己最了解的角度及構(gòu)圖使得拍攝事半功倍，妹子們再也不用擔(dān)心自己的男朋友把自己拍得很丑了。
在折疊狀態(tài)時可以把背面當(dāng)做一個附加的交互空間，實現(xiàn)一些簡單的交互操作，例如打吃雞游戲時我們可以考慮在背面屏幕增加一些手勢操作進行8倍鏡的縮放，這種背部觸控方式并不是什么新鮮事，在2011年索尼旗下的掌上型游戲機 PSV 已經(jīng)在背部增加了電容式多點觸控面板。
除了附加的交互空間，我們真的可以把它當(dāng)做第二塊屏幕進行使用。在平時我們可以通過兩塊屏幕同時運行兩個不同的應(yīng)用程序，例如我們可以用主屏幕玩游戲，在加載游戲時翻轉(zhuǎn)屏幕刷個微博，操作起來十分方便。
折疊屏當(dāng)然不只有展開和折疊兩個狀態(tài)，還有翻折狀態(tài)，它區(qū)別于傳統(tǒng)手機和平板的獨立狀態(tài)。最直接的效果就是它可以不需要支架就立在桌面上，實現(xiàn)中遠距離的自拍；同時它可以進行多角度拍攝，成為制作 VR 內(nèi)容的利器。在玩法上，翻折狀態(tài)可以通過兩面屏幕的不同內(nèi)容引入多人互動的概念，但這種應(yīng)用場景比較難想象。
相比外折疊設(shè)計，內(nèi)折疊設(shè)計玩法相對較少，在這里我只想到了任天堂NDS 的概念：在翻折狀態(tài)時它就是兩塊獨立屏幕，它可以獨立顯示不同的內(nèi)容，例如上屏顯示內(nèi)容，下屏顯示操作區(qū)域，打游戲時翻折狀態(tài)明顯要比其他狀態(tài)舒服。
個人觀點：從以上案例來看，外折疊設(shè)計在交互和玩法上都比內(nèi)折疊設(shè)計好，未來很有可能以外折疊設(shè)計為主。
當(dāng)折疊屏從小屏模式轉(zhuǎn)變成大屏模式時不應(yīng)該只是畫面的等比例變大，而是要考慮響應(yīng)式布局設(shè)計。
描述響應(yīng)式設(shè)計最著名的一句話就是「Content is like water。如果將屏幕看作容器，那么內(nèi)容就像水一樣」。在以前響應(yīng)式設(shè)計更多用在PC Web設(shè)計上，但現(xiàn)在手機也應(yīng)該考慮響應(yīng)式設(shè)計，以下是設(shè)計時需要考慮的細節(jié)。
它不是簡單的響應(yīng)式設(shè)計。從上文得知，「展開」態(tài)時要考慮是平板模式還是雙屏幕模式，如果是平板模式，那么內(nèi)容應(yīng)該在一個整體里；若是雙屏幕模式則可以考慮不同屏幕展示不同內(nèi)容。設(shè)計時需要根據(jù)實際需求和場景進行模式選擇。
考慮通過 Fragment（片段）來設(shè)計。Fragment 是 Android3.0提出的 API，出現(xiàn)的初衷是為了 UI 更靈活地適應(yīng)大屏幕的平板電腦。以下是 Android 對 Fragment 的官方介紹：「Fragment 表示 Activity 中的行為或用戶界面部分。您可以將多個 Fragment 組合在一個 Activity 中來構(gòu)建多窗格 UI，以及在多個 Activity 中重復(fù)使用某個 Fragment。（ Activity 可以理解為一個頁面，Android 開發(fā)中最重要的概念之一）」
參考微軟的 UWP 設(shè)計概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用應(yīng)用平臺）。UWP 應(yīng)用的理念并不是為某一個終端而設(shè)計，而是同一套代碼和設(shè)計可以在所有 Windows 10設(shè)備上運行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。
它的響應(yīng)式設(shè)計的設(shè)計技巧包括以下6點：
調(diào)整位置：你可以改變 UI 元素在不同屏幕上的位置。比如下面這個例子：為了確保同時展示兩個元素，在手機上我們必須采用縱向滾動界面，而在平板電腦上，我們可以調(diào)整框架的位置，變?yōu)闄M屏滾動界面。如果你用網(wǎng)格設(shè)計這些位置，你也可以不改變內(nèi)容框架，但其他 UI 元素可以使用響應(yīng)式設(shè)計。
調(diào)整尺寸：你可以通過調(diào)整空白和 UI 元素的尺寸來優(yōu)化框架，比如下面這個例子，可以通過簡單的增大內(nèi)容框架尺寸來提升大屏幕的閱讀體驗。
調(diào)整順序：通過調(diào)整 UI 元素的順序和方向，優(yōu)化內(nèi)容顯示效果。舉個例子，在大屏上運行時，可以再添加一欄，并且加入分類列表，這些都是合理的。這個例子展示了在手機上使用一欄縱向滾動，而在平板上使用兩欄橫向滾動的優(yōu)化。
展現(xiàn)：你可以基于屏幕的真實大小，設(shè)備支持的功能，特定的情況或者屏幕方向展示界面。下圖是媒體播放器的例子，小屏幕上這些按鈕通常是被刪減的，但在大屏幕上這些按鈕是被完全保留的。PC 上的媒體播放器比手機上的有更多的功能。
換位：這項技巧是為特定屏幕尺寸或屏幕方向切換特定的界面。下面這個例子是導(dǎo)航菜單：小屏幕上他是隱藏在漢堡菜單中縱向排列的，但是在大屏幕上，更大的 Tab 是更好地選擇。
改變結(jié)構(gòu)：你可以為特定的設(shè)備優(yōu)化特定的結(jié)構(gòu)。下面這個例子就是兩種不同的接合結(jié)構(gòu)。
以上6點引用了Windows 開發(fā)人員中心 《Design Basics：Responsive design 101 for UWP apps》
考慮用戶翻轉(zhuǎn)折疊屏幕時的場景和動機是什么，從而優(yōu)化現(xiàn)有界面及交互流程，舉幾個例子。
以 RPG 游戲為例。當(dāng)玩家使用小屏模式時我們可以收起所有功能界面，使游戲的沉浸感更強；當(dāng)玩家采用大屏模式時，我們可以認為玩家需要獲取更多信息，這時候把聊天、裝備等相關(guān)功能界面展示出來。
當(dāng)用戶在微信里查看定位信息有新消息提醒時，手機變成大屏模式時應(yīng)該同時存在地圖界面和聊天界面。
相關(guān)注意事項
Google 在2018年11月就宣布了對折疊屏的支持，包括多窗口支持、不重啟適配等等。如果想要在折疊屏手機上設(shè)計良好的用戶體驗，必須考慮以下兩個方面：生命周期管理以及轉(zhuǎn)場動效。
生命周期管理
目前大部分手機應(yīng)用為了有更流暢的體驗會做適量的生命周期管理，例如退出頁面時會釋放相關(guān)內(nèi)存。因此設(shè)計師在設(shè)計折疊屏交互時要考慮哪些頁面不能被銷毀，一定要讓用戶進行展開、折疊等操作， 應(yīng)用任務(wù)不中斷重啟，產(chǎn)品可以自動適應(yīng)各種屏幕下的靜態(tài)布局規(guī)格。
轉(zhuǎn)場動效
從目前 Google 公布的新版 Android系統(tǒng)來看，已經(jīng)可以做到當(dāng)折疊/展開設(shè)備的時候，頁面、內(nèi)容從一個屏幕自然地切換至另一個屏幕。設(shè)計師在設(shè)計時應(yīng)該基于 Google 的技術(shù)規(guī)范考慮內(nèi)容、組件等模塊的轉(zhuǎn)場效果。
參考案例：
華為基于HUAWEI Mate X發(fā)布的折疊屏官方適配方案，相關(guān)鏈接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡，讓用戶看到全部創(chuàng)作中他最想看到的那一面。在B端產(chǎn)品的設(shè)計過程中，我深切體會到動效能在很多體驗領(lǐng)域起到四兩撥千斤的作用。于是我將自己這些年來做動效的思考，結(jié)合B端產(chǎn)品的一些固有特點，來和大家聊一聊動效設(shè)計在B端產(chǎn)品體驗設(shè)計中的意義。
既然是談B端產(chǎn)品的體驗設(shè)計，那么就免不了要與C端產(chǎn)品做對比。在我看來，B端產(chǎn)品與C端產(chǎn)品在大的體驗趨勢上是趨同的。對于大多數(shù)用戶而言，都希望自己在工作與生活中是順利、愉悅的，而用戶體驗就是為了讓用戶順利、愉悅而生的。也就是說，不管是B端產(chǎn)品還是C端產(chǎn)品，其體驗的本質(zhì)都是圍繞著使用的效率與愉悅感為核心展開的。那么這次我們就將目光聚焦在B端產(chǎn)品，來看看在這個領(lǐng)域都有哪些亟待解決的設(shè)計難點。
針對這四個特點，我沉淀出一套解決B端產(chǎn)品體驗問題的方法，它們分別是：信息折疊、路徑梳理、提升效率、概念物化。接下來，我將通過具體的案例，來詳細展現(xiàn)動效在B端產(chǎn)品體驗設(shè)計中的意義。
涉及案例簡述：
案例1:
問題分析：初次進入 Dataphin，我們會提供一張業(yè)務(wù)流程圖來解釋 Dataphin 的工作流程。為了降低理解成本，我們對每個流程都添加了文字說明。然而由于流程本身已經(jīng)很復(fù)雜，頁面排版中加入說明性文字會使得流程的排版拉長，用戶很難通過一屏瀏覽完整的功能流程，體驗不佳。
解決方法：我們發(fā)現(xiàn)用戶一開始關(guān)注業(yè)務(wù)的全流程展示，然后才會仔細查看每個業(yè)務(wù)的詳細說明。當(dāng)用戶將注意力放在查看詳細說明的時候，是顧不上看全流程的。因此我們將「看流程」和「看說明」的場景區(qū)分開，共用同一塊區(qū)域，從而優(yōu)化信息排布。
案例2：
問題分析：在QuickBI中，同一套 icon 需要應(yīng)對兩種不同的使用場景，當(dāng)用戶沒有選中任何圖表的時候，點擊任意類型的圖表icon，即可新建一個圖表；當(dāng)用戶選中某一創(chuàng)建好的圖表時，再點擊圖表icon，則是為該圖表切換類型。所以為了確保用戶的認知清晰，我們需要將兩套使用場景區(qū)分開。
下圖中，我們嘗試了靜態(tài)的布局思維，雖然可以區(qū)分場景，但也造成了導(dǎo)航條過高，導(dǎo)致空間冗余，壓縮了創(chuàng)作空間。
其實這個問題不止我們家有，用過 AE 的同學(xué)應(yīng)該清楚，AE里面的形狀工具體驗也很鬼畜，用戶不選擇任何圖層的時候，使用形狀工具可以新建形狀，當(dāng)用戶選中某個圖層的時候，使用形狀工具是針對該圖層創(chuàng)建蒙版，兩種不同的功能卻沒有任何樣式或操作上的區(qū)分，對新手用戶來說是相當(dāng)不友好的。
解決方法：用戶創(chuàng)建圖表和切換類型是兩種不同的場景，不可能同時存在，在布局上沒有必要讓兩套 icon 同時存在于界面。因此使用切換式，利用鼠標對圖表的點擊、失焦可以靈活切換兩套使用場景。
問題分析：圖1是用戶在 Dataphin 中所創(chuàng)建的一張邏輯表，我們需要保證用戶在屏幕內(nèi)盡可能多的獲取信息，因此邏輯表中的空間利用就顯得很重要。在原有交互中，我們?yōu)橛脩籼峁┝怂阉鞴δ?，同時我們也在思考有沒有更優(yōu)的信息布局方案，可以為用戶展示更多的數(shù)據(jù)。
解決方法：在圖2中，我們需要在頂部區(qū)域?qū)ふ遗c用戶搜索操作不重合的場景，并把它們重疊起來。這里我用到交疊式的思路，即將搜索框收起來，只在頂部保留搜索入口，這樣在布局上就可以讓搜索與標題交疊使用同一塊區(qū)域，優(yōu)化了布局。
問題分析：在下圖中，側(cè)邊導(dǎo)航的信息過多，壓縮了創(chuàng)作區(qū)域，我們需要為導(dǎo)航「瘦瘦身」。
解決方法：通過用戶調(diào)研，我們發(fā)現(xiàn)導(dǎo)航的名稱對于新用戶來說很有必要，但隨著用戶對產(chǎn)品的逐漸熟悉，名稱重要性漸漸下降。我們需要通過動效，找到合理的展示形式，來兼顧新老用戶的使用需求。
通過動效優(yōu)化信息布局，既保證了單位面積內(nèi)盡可能多的展示有效信息，又避免了信息過載帶來的干擾與閱讀疲勞，使得用戶每次只需要專注眼前的使用場景，提高了獲取數(shù)據(jù)的效率，這便是視覺設(shè)計師在項目中的價值。
問題分析：在 Dataphin 中一共包含了80多個功能點，我們將這些功能點梳理歸納成5個大類目和20個子類目。因此我們既希望用戶能明確每個類目下包含的子類目，又希望用戶在選中子類目的同時，也能明確感知自己處在哪個大類目下。
下圖中，用戶從首頁切換到數(shù)據(jù)資產(chǎn)版圖，我們想要讓用戶明確信息的嵌套層級，靜態(tài)的思維只能用雙Tab 形式展現(xiàn)。雖然解釋了層級關(guān)系，但也使得導(dǎo)航高度過高，壓縮內(nèi)容區(qū)域，加之案例中的資產(chǎn)版圖本身還包含三個子類目，于是，同一個頁面出現(xiàn)了三層 Tab。
解決方法：將嵌套路徑通過動效的方式展現(xiàn)，運動軌跡可以暗示用戶子類目從哪里展開，其余類目被收到了哪里，用動效的方式解釋了層級嵌套路徑。明確了層級嵌套關(guān)系，節(jié)約了為解釋嵌套路徑而鋪展出的信息所浪費的頁面空間。
在 Dataphin 中，用戶在創(chuàng)建邏輯表之前，會經(jīng)過一系列繁瑣的配置工作，如下圖中，用戶需要經(jīng)過「定義維度」-「定義主鍵&來源邏輯」-「定義層級」三個步驟。由于操作流程復(fù)雜，我們?yōu)橛脩粼O(shè)計了鉛筆線動效，讓用戶時刻明確自己操作所處的位置，也方便回退操作。
通過動效梳理路徑，使得B端產(chǎn)品復(fù)雜的產(chǎn)品邏輯更為清晰，降低用戶的理解成本，縮短因查找路徑浪費的時間，提升工作效率。同時，將操作路徑巧妙地隱藏在運動路徑當(dāng)中，可以節(jié)約為了展示路徑關(guān)系而浪費的頁面空間。
問題分析：在 QuickBI 儀表板中，用戶需要導(dǎo)入已有的數(shù)據(jù)集以配置圖表內(nèi)容。數(shù)據(jù)集由用戶自行創(chuàng)建，一般來說，B端產(chǎn)品用戶文件命名比較偏長，正常情況下下拉框很難直接把名稱顯示完全，用戶還需要將鼠標hover 到名稱上才能查看完整的名稱，操作路徑被拉長了。
解決方法：我們在側(cè)邊欄展開的一瞬間向兩側(cè)借一部分空間，使得名稱獲得了更多展示空間。盡可能多的展示信息，縮短操作路徑，提率。
問題分析：在 QuickBI 儀表板中，用戶創(chuàng)建圖表的操作為，先拖動字段進入對應(yīng)軸區(qū)，軸區(qū)便能讀取字段內(nèi)的信息并生成數(shù)據(jù)可視化。這一所見即所得的操作對老用戶而言是的，但對于新用戶而言認知成本卻有些高。
設(shè)計思路：我們需要通過響應(yīng)式的設(shè)計來引導(dǎo)用戶學(xué)會這樣一個操作。首先，用戶的鼠標滑過字段，字段會高亮響應(yīng)，提示用戶此處可點擊，從而吸引用戶學(xué)會點擊拖動字段。接下來，我們通過軸區(qū)內(nèi)的文字提示，告訴用戶字段可以被拖入該軸區(qū)。用戶將字段拖入軸區(qū)的時候，對應(yīng)的軸區(qū)會高亮響應(yīng)告訴用戶字段可以被拖入軸區(qū)，同時字段會根據(jù)拖入路徑是否正確給出響應(yīng)。如果正確，字段會劃入軸區(qū)；如果錯誤，會給出錯誤提示；如果用戶執(zhí)意操作，字段會彈回原處。這樣我便構(gòu)建了一套完整的響應(yīng)流程。通過層層響應(yīng)的方式，減少用戶在每一步操作上的困惑時間，幫助用戶快速掌握這一操作手法，提升工作效率。
工具型產(chǎn)品中很多操作是相互關(guān)聯(lián)的，而且這樣的關(guān)聯(lián)關(guān)系通常是細微的，因此需要我們通過動效強化元素之間的關(guān)聯(lián)關(guān)系。案例中圖表的每一列指標可以自由配置，通過微動效，讓用戶一眼就能找到新增的指標，提升操作效率。（蘋果在新版的 Mac 系統(tǒng)中也有采用類似的設(shè)計，體驗很棒）
聯(lián)動關(guān)系在框架層面也同樣適用，比如導(dǎo)航區(qū)域與創(chuàng)作區(qū)域之間就存在拉伸聯(lián)動。這樣的動效前提，建立一整套元素的適配規(guī)范，便于開發(fā)與團隊協(xié)作。這個過程會很繁瑣，也是B端產(chǎn)品看不見的巨大工作量。
每一個微小細節(jié)的打磨才能匯聚成的用戶體驗。提升效率的點小而且零散，總結(jié)起來即是用戶的操作是強反饋的，從而增加用戶嘗試的信心；用戶的操作是有引導(dǎo)性的，即增加用戶繼續(xù)探索的信心；用戶的操作路徑是盡可能被縮短的，以節(jié)約時間。滿足這三點均可被看作是設(shè)計在提升效率方面的價值。
問題分析：QuickBI 中有一個叫「創(chuàng)作區(qū)」的模塊，是用來介紹 QuickBI 產(chǎn)品能力的。我們需要在這個區(qū)域向用戶展示 QuickBI 所具備的能力與工作流程。由于 QuickBI 是面向行業(yè)分析師的 BI工具，其所要傳達的概念對于新用戶來說比較生澀復(fù)雜，這就需要我們在產(chǎn)品流程展示設(shè)計上盡可能簡單易懂。
下圖是1.0版本中的效果，其對流程的設(shè)計僅停留在圖形的堆砌，對業(yè)務(wù)的表述不夠清晰，也就很難向用戶傳遞我們的產(chǎn)品價值。
那我們來看看視覺設(shè)計是如何物化抽象的概念的。
首先我梳理出 QuickBI 工作的四個步驟：獲取數(shù)據(jù)、創(chuàng)建數(shù)據(jù)集、數(shù)據(jù)分析、數(shù)據(jù)展示。
接下來我們思考一下，當(dāng)我們需要對某人講述一個很復(fù)雜的概念的時候，我們通常會打個比方。那么我接下來要做的，就是為這套抽象的概念「打個比方」，因此我要為它們構(gòu)建一個有故事性的場景，那么這四個步驟應(yīng)該是某種靜止且持續(xù)運轉(zhuǎn)的工廠，它們之間需要某些動態(tài)的介質(zhì)將其串聯(lián)起來。
于是我進一步挖掘視覺樣式，構(gòu)建出了場景原型圖。
進一步完善視覺效果，得到了最終的成品：零散的代碼被收集車間收集，產(chǎn)出數(shù)據(jù)表進入加工工廠，工廠將其加工成數(shù)據(jù)集，運輸進分析臺，分析臺通過「儀表板、電子表格、數(shù)據(jù)全屏」三種方式對數(shù)據(jù)進行可視化分析，最后將分析結(jié)果通過數(shù)據(jù)門戶和郵件訂閱的方式對外分享。
通過動效設(shè)計，將抽象的概念具象化，將復(fù)雜的流程簡單化，大大降低了新用戶的學(xué)習(xí)成本，使之可以快速上手。
最后，我將我的動效設(shè)計方法沉淀成一套以方盒為載體的方法論——方盒理論：「置身于三維空間下，信息的體量是無窮的，我們需要為其尋找合適的載體，在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡。即讓用戶看到全部創(chuàng)作中他最想看到的那一面?！惯@即是我所構(gòu)建的以六面方盒為基礎(chǔ)的信息載體，并為我的一切動效解決方案提供了理論支點。
B端產(chǎn)品并非大家印象中那樣的索然無味，其中有很多體驗是值得深挖的。動效僅僅是其中的一個層面。隨著近幾年B端領(lǐng)域功能點逐步完善，用戶對體驗提出了更高的要求，B端產(chǎn)品的體驗設(shè)計需求也會漸漸升溫，也希望有更多這個領(lǐng)域的優(yōu)秀設(shè)計師能和我做朋友。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.yvirxh.cn