網(wǎng)易UEDC – 何巖：本文是剛?cè)胄械?/span>交互設(shè)計(jì)師結(jié)合整個(gè)實(shí)際項(xiàng)目實(shí)踐，嘗試探討交互設(shè)計(jì)師和產(chǎn)品經(jīng)理、其他上下游同事之間的“共生”關(guān)系，希望幫助設(shè)計(jì)新人找到與上下游配合的一點(diǎn)靈感。

（工作原因，文中配圖較模糊，請(qǐng)見諒）

協(xié)助產(chǎn)品經(jīng)理確定產(chǎn)品架構(gòu)

產(chǎn)品經(jīng)理才是最懂產(chǎn)品的人嗎？在項(xiàng)目初期，大家對(duì)產(chǎn)品的概念都很模糊，即使是產(chǎn)品經(jīng)理也是通過來自各方的需求、數(shù)據(jù)和競品分析等來大致搭起框架。這個(gè)框架是否合理，框架衍生的功能流程限定在什么范圍，這些問題即使是最有經(jīng)驗(yàn)的產(chǎn)品經(jīng)理也不敢保證。

交互設(shè)計(jì)師雖然是產(chǎn)品經(jīng)理的下游，也應(yīng)盡早參與策略層（Strategy）的討論，如果你的領(lǐng)導(dǎo)了解交互設(shè)計(jì)的重要性并且邀請(qǐng)你參加項(xiàng)目前期的務(wù)虛會(huì)議，你就應(yīng)該珍惜機(jī)會(huì)，會(huì)前做好競品分析等準(zhǔn)備工作，會(huì)上以交互崗位的專業(yè)視角提出建議； 如果你不夠幸運(yùn)，不能參與到產(chǎn)品戰(zhàn)略決策，只是承接上游下達(dá)的交互任務(wù)的話，那么也不要只是淪為畫線框圖的工具，要發(fā)揮主觀能動(dòng)性積極溝通，最終讓方案變得更好。

編者按：從iOS 9改版到iOS 10之后，鎖屏頁面的音樂控件變大了，用戶體驗(yàn)明顯提高。那么最佳的按鈕觸摸大小應(yīng)該是多少？經(jīng)過1.2億次的實(shí)驗(yàn)后，這個(gè)結(jié)果被微軟/蘋果等公司采用，強(qiáng)烈推薦學(xué)習(xí)。

@平行煎餅 ：你可能說不出來，但你肯定知道這種感覺——當(dāng)你觸摸手機(jī)應(yīng)用界面而它不能正常工作時(shí)候，當(dāng)你感覺你只有精細(xì)的點(diǎn)擊，才能出發(fā)正確的命令時(shí)，那種混合起來的沮喪和失敗感。

但是，如果你可以自己創(chuàng)建用戶界面，你知道如何合理避免這種情況嗎？如果你知道可以通過創(chuàng)建可靠的觸摸元素，來幫助您的客戶減少錯(cuò)誤，使用效率更快，使用感覺更開心嗎？

這是可能的。我們來探討一下為什么。

記得之前寫過關(guān)于標(biāo)簽導(dǎo)航如何設(shè)計(jì)的一篇文章，大體上的介紹了幾種類型，這周正好遇到一個(gè)關(guān)于標(biāo)簽導(dǎo)航的問題：產(chǎn)品經(jīng)理要求在底部的導(dǎo)航中由原來的五個(gè)主功能增加至六個(gè)，交互設(shè)計(jì)師如何說服產(chǎn)品打消這個(gè)念頭？本周就這個(gè)問題我詳細(xì)說下當(dāng)中的幾個(gè)要點(diǎn)以及延伸出來的幾個(gè)問題。

成功的產(chǎn)品通常是構(gòu)建在一系列優(yōu)秀的設(shè)計(jì)之上的，它除了擁有優(yōu)秀的框架、系統(tǒng)的邏輯和恰如其分的運(yùn)營之外，它還需要符合用戶體驗(yàn)規(guī)則的細(xì)節(jié)，和幾經(jīng)驗(yàn)證的最佳實(shí)踐來作為支撐。

今天的文章，我們來聊聊細(xì)節(jié)，從視覺反饋、文案和留白三個(gè)角度，聊聊這些同樣能夠影響整體體驗(yàn)還很容易被忽略的元素。

視覺反饋

在許多設(shè)計(jì)方案中，視覺反饋是很容易被忽略的組成部分，然而它是整個(gè)UX設(shè)計(jì)中，對(duì)體驗(yàn)影響非常大的元素。沒有正確的反饋，就沒有正確的互動(dòng)。想象一下，當(dāng)你和人溝通的時(shí)候，對(duì)方根本不會(huì)給你任何語言、表情和動(dòng)作的反饋，這是何等的尷尬。UI界面同樣是如此。

用戶會(huì)對(duì)缺少視覺反饋的UI界面感到迷惑。

你需要給用戶一個(gè)反饋信號(hào)，讓他們知道他們的操作是成功了還失敗，接下來要向上翻頁還是向下滾動(dòng)，等等等等。

視覺反饋的主要目的在于：

·確認(rèn)APP或者網(wǎng)頁已經(jīng)接收到了用戶的操作或者提交的信息
·傳達(dá)交互的結(jié)果，結(jié)果可見也可理解。給用戶一個(gè)信息反饋，告訴他們?nèi)蝿?wù)執(zhí)行成功或者失敗

讓按鈕和控件易于被感知

在現(xiàn)實(shí)生活中，按鈕和各種開關(guān)都被設(shè)計(jì)成易于互動(dòng)、易于感知的樣子，這樣的設(shè)計(jì)讓人們更容易控制，也能讓事情向著預(yù)期的方向發(fā)展。而當(dāng)用戶面對(duì)UI界面的時(shí)候，他們也有同樣的需求，他們希望按鈕和控件能夠像這些日常的設(shè)計(jì)一樣，易于被感知，操控。

不管是在APP還是PC，不管是Loading頁，還是在音樂播放器中，進(jìn)度條的運(yùn)用都非常廣泛，形式也多種多樣，讓人眼花繚亂。做為一個(gè)交互設(shè)計(jì)新手，項(xiàng)目中也經(jīng)常碰到進(jìn)度條設(shè)計(jì)，總有很多疑惑在心中揮之不去：

目標(biāo)： 為什么會(huì)有進(jìn)度條的存在？引入進(jìn)度條的目的是什么？

類型： 結(jié)合使用場景，進(jìn)度條類型有哪些呢？它們的目標(biāo)是什么？需要展示哪些信息？

形式： 進(jìn)度條形式多種多樣，怎樣從本質(zhì)上區(qū)分呢？

運(yùn)用： 實(shí)際項(xiàng)目中如何選用合適的進(jìn)度條呢？

下面列出了3種常見的進(jìn)度條樣式，我們將結(jié)合這3種進(jìn)度條，一步一步梳理，希望可以幫助大家獲得更加清晰的認(rèn)知。

網(wǎng)站能承載多種多樣的內(nèi)容，但無論是哪種內(nèi)容，通常都會(huì)遵循一定的信息架構(gòu)。在這其中，故事是很特別的一種類型。講故事，往往能以更敘事、更情感化的方式，將內(nèi)容傳遞給用戶。

一個(gè)好的故事，往往始于筆端，但是最終呈現(xiàn)，還是要依靠精巧的設(shè)計(jì)。那么設(shè)計(jì)是如何講好故事的呢？今天的文章，為你分享一下創(chuàng)造故事的7個(gè)維度。

1、圖片

首先，想要講好故事，要通過設(shè)計(jì)在視覺上吸引用戶。這一切要從干凈清晰的視覺設(shè)計(jì)開始。壯美的圖片，有趣的插畫，驚艷的視頻，都會(huì)抓住用戶的注意力，并給予用戶第一印象。

在視覺上足夠突出的圖片，搭配以文案，一切開始擁有了畫面感，而故事因此而誕生。從照片到色彩，從文字到細(xì)節(jié)，故事所傳達(dá)出來的信息和氣質(zhì)，和整個(gè)視覺設(shè)計(jì)應(yīng)該是保持一致的，而好的故事，能夠帶著用戶一路走過來。

編者按：說起usTwo 你可能沒聽過，但《紀(jì)念碑谷》你肯定玩過。這個(gè)全球頂尖的設(shè)計(jì)工作室還做過哪些酷酷的產(chǎn)品？他們是如何幫助設(shè)計(jì)師和客戶合作的？想加入它們有哪些要求？這期直接讓usTwo 的設(shè)計(jì)師為大家揭秘。

我們請(qǐng)到了設(shè)計(jì)工作室 usTwo 的設(shè)計(jì)師 Avalon Hu。她曾先后就讀于臺(tái)灣大學(xué)生物產(chǎn)業(yè)機(jī)電工程系和密歇根大學(xué)人機(jī)交互專業(yè)，曾在 R/GA 和湯森路透任職。本期我們聊了聊她如何從迪士尼秀場后臺(tái)開始，轉(zhuǎn)專業(yè)成為用戶體驗(yàn)設(shè)計(jì)師；設(shè)計(jì) Agency 的工作流程；usTwo 獨(dú)特的企業(yè)文化和公司結(jié)構(gòu)；最后她也與想加入設(shè)計(jì) agency 的同學(xué)分享了自己的建議。

設(shè)計(jì)風(fēng)格是一種很虛的東西，對(duì)于大部分的 UI 設(shè)計(jì)師來說，都是如此。

相信很多人都是在一家小型的互聯(lián)網(wǎng)公司做設(shè)計(jì)，估計(jì)還是公司唯一的設(shè)計(jì)師，同時(shí)對(duì)設(shè)計(jì)風(fēng)格又拿捏不定，總感覺是跟著產(chǎn)品經(jīng)理或老板的思路去做設(shè)計(jì)。比如老板的要求是“大氣”，誰 TM 知道這“大氣”指的什么鬼？

即使花了不少時(shí)間去研究其他公司的產(chǎn)品，依然做不出領(lǐng)導(dǎo)滿意的視覺稿，最后還被各個(gè)崗位的同事指點(diǎn)著去修改你一把屎一把尿喂大的稿子。

我上面也說了，其實(shí)這種事情（講述設(shè)計(jì)風(fēng)格）對(duì)于視覺設(shè)計(jì)師而言是一種很常見的現(xiàn)象。我身邊也同樣有很多設(shè)計(jì)師出現(xiàn)這個(gè)問題，不知道如何向領(lǐng)導(dǎo)或客戶講述自己的設(shè)計(jì)風(fēng)格。

說個(gè)現(xiàn)象，仔細(xì)想想自己是不是這樣的：我們?cè)谧鲆曈X評(píng)審的時(shí)候，設(shè)計(jì)師講述的常常是文字對(duì)齊、線條、高斯模糊、圖片大小等視覺表現(xiàn)，有時(shí)候甚至沉醉于 icon 的角度及尺寸的問題。面對(duì)于產(chǎn)品經(jīng)理與程序員的質(zhì)疑只能說：我覺得這樣更好看、這樣比較適合我們產(chǎn)品的風(fēng)格…之類的話。要知道，這些理由在如今這個(gè)以顯性數(shù)字指標(biāo)為衡量標(biāo)準(zhǔn)的互聯(lián)網(wǎng)時(shí)代已顯得蒼白無力。

實(shí)話實(shí)話，想要把設(shè)計(jì)風(fēng)格講清楚，的確不是一件容易的事。但絕對(duì)要避免從感性的角度來闡述事實(shí)的這種習(xí)慣，畢竟現(xiàn)在的移動(dòng)產(chǎn)品從視覺表現(xiàn)力方面正在逐步降低要求，這種環(huán)境的變化也是要求視覺設(shè)計(jì)師應(yīng)該主動(dòng)去加強(qiáng)設(shè)計(jì)思路的原因。

為什么要用這個(gè)顏色，為什么要用線條、模糊、留白、卡片、陰影…說這么多干嘛？別人能懂？即使聽懂了，他也會(huì)從他的角度來告訴你：那我覺得這個(gè)陰影不要會(huì)更好。你怎么回復(fù)？

動(dòng)效是如今UI設(shè)計(jì)中的重要組成部分，也是目前最熱門的設(shè)計(jì)趨勢之一。在之前的《在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，動(dòng)效有哪些常見的用法》這篇文章中，我們探討了動(dòng)效對(duì)于交互和用戶的重要意義，動(dòng)效在不同的環(huán)節(jié)發(fā)揮的作用越越來越大。而今天我們要聊的是光標(biāo)懸停，這也是近年動(dòng)效設(shè)計(jì)的熱點(diǎn)之一。

正是由于Material Design 和蘋果所引領(lǐng)的動(dòng)效設(shè)計(jì)風(fēng)潮，許多曾經(jīng)有過的設(shè)計(jì)技巧和元素正在逐步回歸，而懸停就是其中之一。但是相比于曾經(jīng)那些閃爍彈跳的，現(xiàn)如今的光標(biāo)懸停來的更加微妙，更加強(qiáng)調(diào)功能性和體驗(yàn)。

和其他動(dòng)效相似，光標(biāo)懸停讓交互的引導(dǎo)性更強(qiáng)，有的還帶有預(yù)覽的作用，它的使用范圍非常廣，大到全屏，小到提示和導(dǎo)航元素，不一而足。

接下來，我們通過實(shí)戰(zhàn)案例看看，光標(biāo)懸停目前有哪些創(chuàng)新的玩法。

首頁動(dòng)效

模塊大家應(yīng)該都不陌生，任何一個(gè)完整的界面，都會(huì)有多個(gè)功能模塊，而每個(gè)模塊內(nèi)有相應(yīng)的組件，每個(gè)組件中又有相應(yīng)的元素，其中任何一點(diǎn)的變化，都會(huì)使用戶對(duì)產(chǎn)品的認(rèn)知發(fā)生改變。