如果您想訂閱本博客內(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
第一段：工具
設(shè)計師學(xué)習(xí)的第一階段其實都是從工具開始的。這分為兩種：
第一種是有形工具，比如PS、AI、Axure之類的軟件；
另一種是無形工具，就是設(shè)計時用到的思維方式。
1、有形工具
先說第一種有形工具。
很多人在學(xué)習(xí)UI時很容易陷到工具的學(xué)習(xí)里去，覺得工具學(xué)的越多能力就越強。其實根本不是這么一回事，軟件對交互來說是非常基礎(chǔ)的一部分。
從UI視覺方面來考慮，PS就足夠了，AI都顯得略有多余，不需要其他軟件。PS其實是一款非常強大的視覺軟件，切圖也比較方便，BAT等公司也是用的PS。
還有輸出交互文檔的工具，一種是PPT，一種是Axure，這兩款軟件就足夠覆蓋絕大多數(shù)交互文檔了。當(dāng)然還有其他軟件，如果是快速迭代的原型直接在紙上畫也可以。
交互需要快速溝通，你要拿著設(shè)計反復(fù)和其他人對接。要是搞了個很生僻的軟件給別人，結(jié)果別人打不開，老板就會罵你。要記住自己是設(shè)計的一環(huán)，能快速傳遞自己的設(shè)計思路才是最重要的，不要搞一些生僻的軟件、格式和字體，這都是門外漢干的事。
像AE、Flash面試時可能會給你加分，因為公司可能有一些高保真的動畫展示要做，其實在真實工作中用到的機會非常少。
2、無形工具
第二種是無形的思考工具。設(shè)計思維其實最不好培養(yǎng)，說的殘酷點，你可能看五年的書都出不來思維，最好能有人指點一下。
第二段：新產(chǎn)品、新思路
前沿的設(shè)計意識，是很多設(shè)計師容易忽略的。
這個怎么練呢？
每天一定要抽出三十分鐘的時間看新產(chǎn)品和新思路，這是今天的互聯(lián)網(wǎng)設(shè)計師必須要干的一件事。很多一線團隊每天都會分享各種各樣的新聞，百度有自己的分享機制，三星喜歡每個月讓設(shè)計師找的交互、用研、技術(shù)信息，收集起來專門搞一個月報。
設(shè)計師有很多渠道可以看前沿信息，比如互聯(lián)網(wǎng)一些事，愛范，36kr，癮科技之類的網(wǎng)站。這種前沿意識非常重要，它決定了你能在二流公司還是一流公司，這是排在第二位的。
這個堅持三個月以后，自然而然就會飛躍，不需要怎么特意去學(xué)，這可不是培訓(xùn)可以得到的，養(yǎng)成一個好的習(xí)慣，每天看半小時其實就是最好的學(xué)習(xí)。
第三段：人——對人和需求的研究
工具和思維的問題比較好解決，最難解決的問題其實是“人”的問題。可能很多設(shè)計師一輩子都解決不了“人”的問題，而它對企業(yè)的影響又是最大的，交互設(shè)計最重要的就是解決“人”的問題。這一點甚至能決定一款千萬級甚至上億級產(chǎn)品的生死。要知道你的一切設(shè)計行為都是為商業(yè)負責(zé)的，所以前期對交互不甚了解，可以先從PS開始，后期就是“思維”和“人”，這兩個東西是比較難的。
看看前輩是怎么說的：
交互設(shè)計目前發(fā)展得怎樣，前景如何？
答：現(xiàn)在我們接觸到的交互設(shè)計可能只局限在網(wǎng)頁或者APP這種，交互設(shè)計是個很廣泛的概念，前景肯定是有的?；ヂ?lián)網(wǎng)是人和服務(wù)的對接，很多嶄新的設(shè)計和商業(yè)模式一旦出來，那就是新的商機。
新手自學(xué)UI應(yīng)該從何處入手？
答：視覺基礎(chǔ)不好的就學(xué)PS去臨摹，現(xiàn)在很多開源的信息，比如學(xué)UI網(wǎng)。如果臨摹到一定程度，可以看一看dribbble，其實視覺非常好解決，思維的提升才困難。
學(xué)習(xí)交互設(shè)計需要掌握什么軟件？
答：PPT和axure足夠了，這兩個東西都不需要學(xué)。隨便來個人學(xué)兩三天都能拿著軟件畫出漂亮的線框圖，關(guān)鍵是你的線框圖從哪里來、為什么要這么畫。
交互設(shè)計師需要學(xué)習(xí)代碼嗎？
答：交互設(shè)計師不需要學(xué)代碼。知道為什么企業(yè)招聘要求你們懂代碼嗎？因為很多企業(yè)希望你做了設(shè)計做前端，節(jié)省人力成本，正式公司都不會有這個要求。就算你覺得設(shè)計師應(yīng)該學(xué)代碼，建議你還是先把本行的設(shè)計能力學(xué)好。當(dāng)兩件事你都要做的時候意味著哪件事你都做不好，這是自我管理的問題。
交互需要手繪功底嗎？
答：手繪功底？有或者沒有都可以，交互不需要你造型能力多強，你只要能把邏輯關(guān)系畫出來就行了，不需要搞什么素描陰影。你不是要做畫家，朋友們，畫家和設(shè)計師是有區(qū)別的。
（內(nèi)容來源網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系，承諾必定刪除）
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
常見的網(wǎng)頁設(shè)計、文章設(shè)計錯誤
本文來自阮一峰分享
1.內(nèi)容未按邏輯分成塊
用戶可以根據(jù)邏輯塊輕易的獲取信息。
具體做法為：將padding設(shè)置為120px-180px，同時不同的邏輯塊使用不同的背景。
2.每個邏輯塊的空白大小不一致
對于每個邏輯塊，需要設(shè)置同等大小且適宜的空白。否則網(wǎng)頁看起來會很混亂，作者不會對每個邏輯塊同等對待。
3.Padding不能設(shè)置過小，否則用戶無法將內(nèi)容分為邏輯塊
為了這點，插入大的空白（至少120px），以使內(nèi)容按邏輯塊分開。
4.背景圖片和文字 應(yīng)該對比鮮明
5.在一頁中，樣式過多
太多不同 的排版和樣式將會使得頁面不太專業(yè)以及難以閱讀。
解決的方法是，以字體為例，設(shè)置一種字體，字體為正?；虼煮w（保證在兩種不同樣式之內(nèi)）
6.背景顏色塊過于狹窄
7. 在一個狹窄的列中，放入了過多的文字
這導(dǎo)致用戶閱讀需跳很多行，整體看起來也不行。推薦的做法為，減少列的數(shù)量，精煉文字。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
各國的地圖設(shè)計類參考
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(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è)計( sillybuy.com )是一家專注而深入的界面設(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)重。”查看購物車”中的”3項”沒有加粗，因為它是補充信息，不代表具體的操作。
最后一個技巧是一種更加全面的思考，它將使按鈕可供盲人使用。色盲的人是無法通過顏色來區(qū)分按鈕的視覺重量的，他們還需要清晰的視覺符號。
給高優(yōu)先級的按鈕加上一個圖標能夠起到強調(diào)作用而與其他按鈕區(qū)分開。當(dāng)用戶瀏覽時，他們往往更關(guān)注視覺元素而不是文本。使用圖標按鈕的方式能夠確保引起用戶足夠的注意力而快速選擇到高優(yōu)先級的按鈕。
如果刪除了顏色和外框，用戶仍然能夠識別付款按鈕，圖標與文本一樣，也能夠起到說明的作用。
如果用戶要花很長時間在操作按鈕上，或者按鈕的點擊率很低，那就可能是按鈕設(shè)計的不夠直觀。如果遇到了這樣的情況，請嘗試使用文中所說的這些技巧來優(yōu)化操作按鈕，或許你將會在前后版本中看到非常大的差異。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
名片，是品牌傳遞的重要工具，但往往被人忽視。雖然紙質(zhì)的名片幾乎已被微信媒介所取代，但是作為設(shè)計師更不應(yīng)該放棄這種貌似不重要的設(shè)計。
相反，越簡單的設(shè)計，更考驗設(shè)計能力。一張名片，可以看出一個人是否真的懂得設(shè)計，因為里面包含太多基本功了。如果連一張簡單的名片都做不好，更不要說其他的設(shè)計了。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
2019草莓音樂節(jié)的主題是“循環(huán)世界Circular World”。
摩登天空聯(lián)合世界自然基金會(WWF)發(fā)起今年的音樂節(jié)主題“循環(huán)世界”，以環(huán)保為核心理念，攜手海內(nèi)外環(huán)保機構(gòu)對草莓音樂節(jié)進行多方位環(huán)保實踐，并聚合知乎、摩拜等多平臺力量影響年輕人，讓環(huán)保成為青年生活方式的一部分。
今年的主視覺海元素是被三個箭頭環(huán)繞的草莓星球，表達了“循環(huán)世界”的主題。風(fēng)格延續(xù)了去年的樣式，色彩略有調(diào)整，并加入了太空元素。
今年的主視覺當(dāng)然仍由摩登天空的當(dāng)家工作室——MVM design label_工作室操刀。
這張是今年的主視覺海報。今年，MVM特地為各城市舉辦的2019草莓音樂節(jié)單獨設(shè)計了專門的海報，一樣的版式，不一樣的內(nèi)容，既統(tǒng)一又包含新意。
2019草莓音樂節(jié)武漢站
2019草莓音樂節(jié)成都站
2019草莓音樂節(jié)西安站
2019草莓音樂節(jié)上海站
2019草莓音樂節(jié)長沙站
在今年3月30日的“地球一小時”公益活動中，草莓音樂節(jié)把自己的參與定義為“草莓星球一小時”。
而武漢OYO酒店與摩登天空聯(lián)合主辦的活動中，一張以“音樂滿房”為主題的插畫也分外有趣——原來大家為了迎接音樂節(jié)，都關(guān)上門在房間里引吭高歌呀…
音樂節(jié)配套周邊產(chǎn)品的銷售，推廣視覺設(shè)計也很有意思。
即使不是音樂迷，設(shè)計師對這樣的設(shè)計也無法抗拒吧！
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
藍藍設(shè)計的小編 http://sillybuy.com
