中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

上回說(shuō)到功能和數(shù)據(jù)都確定下來(lái)了，接下來(lái)我們就要把功能數(shù)據(jù)給設(shè)計(jì)出來(lái)，也就是決定它們長(zhǎng)啥樣，怎么操作的。詳見(jiàn)上一篇：論需求和功能：如何分析需求并設(shè)計(jì)成功能。

如果說(shuō)前面的分析研究、需求定義、功能數(shù)據(jù)確定是“做正確的事”，現(xiàn)在開(kāi)始我們就要“正確地做事”，方向抓準(zhǔn)了，我們就出發(fā)吧。

這里分成概念設(shè)計(jì)和細(xì)節(jié)設(shè)計(jì)兩個(gè)環(huán)節(jié)。概念設(shè)計(jì)是框架的設(shè)計(jì)。比如我們建房子，概念設(shè)計(jì)就是決定房子的架構(gòu)，哪里是廚房，哪里是客廳，門開(kāi)在哪里可以幾個(gè)房間互通，房子的裝修風(fēng)格是怎樣的。而細(xì)節(jié)設(shè)計(jì)就是細(xì)節(jié)的設(shè)計(jì)（呵呵…），也就是門是自動(dòng)門還是手動(dòng)門，門把手是旋轉(zhuǎn)的還是固定的，塑料的還是金屬的，墻紙是幾何圖形的還是花紋的。而設(shè)計(jì)本身又分成交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)兩類，交互是行為，視覺(jué)是形式，所以也就有了交互概念設(shè)計(jì)、交互細(xì)節(jié)設(shè)計(jì)、視覺(jué)概念設(shè)計(jì)、視覺(jué)細(xì)節(jié)設(shè)計(jì)。接下來(lái)我們先來(lái)看交互概念設(shè)計(jì)。

1 什么是交互設(shè)計(jì)？

1.1 就是行為的設(shè)計(jì)

什么是行為？

含羞草，碰它的葉子，它會(huì)收縮；狗狗，扔條骨頭，它會(huì)叼回來(lái)；手機(jī)，點(diǎn)擊屏幕，有東西彈出來(lái)。這就是我們跟植物、動(dòng)物、人工制品交互的過(guò)程，我們及對(duì)方的所作所為就是行為。行為分3步，1我看到你，2打你一巴掌，3你喊哎呀，也就是獲取線索、操作、反饋。

所以交互設(shè)計(jì)，就是設(shè)計(jì)線索、設(shè)計(jì)操作、設(shè)計(jì)反饋。

舉個(gè)例子：我們發(fā)短信（新建短信那種），入口在哪里，在哪里輸入短信內(nèi)容，輸入時(shí)怎么切換輸入法，除了文本，還能添加其他內(nèi)容比如圖片嗎？怎么添加，添加時(shí)有何限制，添加后怎么增刪改，短信內(nèi)容確定了，要填收件人，怎么填？直接輸入號(hào)碼還是輸入名字，有聯(lián)想嗎？或者調(diào)用聯(lián)系人名單，怎么調(diào)用，能多選嗎？怎么增刪改。收件人確定了，怎么發(fā)送？語(yǔ)音口令還是搖一搖發(fā)送，還是按按鈕，按鈕在哪里長(zhǎng)啥樣？發(fā)送出去后，怎么告知發(fā)送成功，成功后去哪里？怎么告知失敗及善后？這些問(wèn)題都需要有人來(lái)決定答案，這就是交互設(shè)計(jì)。

1.2 ?交互的趨勢(shì)

首先，個(gè)人覺(jué)得從輸入渠道來(lái)看，更多元了；而且，多渠道融合交互。

以前主要靠中間設(shè)備，鼠標(biāo)鍵盤遙控器拉桿等。現(xiàn)在多了語(yǔ)音、多了手勢(shì)、多了抖動(dòng)、多了肢體（Kinect）、多了眼球（眼動(dòng)儀）、多了亮度，等等等等。在同一個(gè)產(chǎn)品里，這些輸入方式又混搭在一起，形成統(tǒng)一的體驗(yàn)，最簡(jiǎn)單的例子是nds上的經(jīng)典游戲任天狗，你能呼喚狗狗又能觸碰它。復(fù)雜的？AR和VR！

其次，跨終端。終端之間或?qū)υ捇蜚暯踊蚧パa(bǔ)。

比如在電腦逛街下單，在手機(jī)支付追蹤物流。比如游戲Lifeline在手機(jī)和手表同時(shí)進(jìn)行。

比如房間里用遙控器在戶外用手機(jī)控制空調(diào)。

比如pad和機(jī)器人對(duì)接。

再次，匹配更多線下場(chǎng)景。

比如基于交易場(chǎng)景、基于地理位置的各種應(yīng)用，已經(jīng)相當(dāng)普及但還有很多場(chǎng)景可發(fā)掘。更復(fù)雜也更有遠(yuǎn)大前景的運(yùn)用在于服務(wù)流程里，比如醫(yī)院的就醫(yī)流程，預(yù)約、等待、支付、查看報(bào)告等接觸點(diǎn)都是交互，都是機(jī)會(huì)。比如銀行業(yè)務(wù)辦理、書(shū)店購(gòu)書(shū)、看演唱會(huì)前后等等等等。

2 交互概念設(shè)計(jì)

回到主流程啦喂，交互概念設(shè)計(jì)做啥呢？三件事情。

2.1 信息架構(gòu)

大概說(shuō)一下，以后單獨(dú)開(kāi)個(gè)章節(jié)細(xì)說(shuō)，因?yàn)檎f(shuō)來(lái)實(shí)在是話長(zhǎng)啊。我們前面已經(jīng)得到了功能和數(shù)據(jù)對(duì)吧（詳見(jiàn)上一篇：論需求和功能：如何分析需求并設(shè)計(jì)成功能）？在這一步就是把這些功能數(shù)據(jù)裝到不同容器里，而多個(gè)容器的構(gòu)成整體就是產(chǎn)品啦。

容器在表現(xiàn)層看來(lái)，就是界面。容器的規(guī)劃、容器之間的邏輯關(guān)系（導(dǎo)航關(guān)系、上下級(jí)關(guān)系）就是信息架構(gòu)。信息架構(gòu)設(shè)計(jì)的產(chǎn)出就是信息樹(shù)（樹(shù)葉即容器），信息樹(shù)的畫(huà)法怎么樣都可以。

看下圖，左邊的容器（列表頁(yè)）放的是各種信息標(biāo)題和圖片（數(shù)據(jù)），同時(shí)它們又是詳情頁(yè)的入口（功能），右邊的容器（詳情頁(yè)）放的是詳細(xì)內(nèi)容和更多推薦及評(píng)論相關(guān)內(nèi)容。是先有信息架構(gòu)再有功能數(shù)據(jù)還是先有功能數(shù)據(jù)再有信息架構(gòu)？答：先有功能數(shù)據(jù)，用戶決定需求，需求決定功能，得先確定這些東東是有價(jià)值的，才能規(guī)劃它們嘛。當(dāng)然隨著產(chǎn)品開(kāi)始運(yùn)營(yíng)，數(shù)據(jù)會(huì)在原有架構(gòu)上持續(xù)豐富，功能也可能做出調(diào)整，甚至隨著產(chǎn)品發(fā)展，架構(gòu)也可能調(diào)整，這是后話了。

呃…看不懂？沒(méi)所謂，在下能力有限沒(méi)辦法長(zhǎng)話短說(shuō)，以后再慢慢說(shuō)。

有個(gè)信息架構(gòu)設(shè)計(jì)的常用方法，叫卡片分類，洋名Card Sorting，過(guò)程如同下圖。

研究人員將不同的陳述寫(xiě)在不同的卡片上，比如一張卡片代表一個(gè)功能，卡片上有功能名字，功能描述，確保用戶理解這些功能；然后讓用戶分別獨(dú)立地將這些卡片分堆，提問(wèn)他們；然后將所有結(jié)果加以統(tǒng)計(jì)分析，哪個(gè)功能數(shù)據(jù)被最多地裝到一堆里面，就可能是我們產(chǎn)品的最終內(nèi)容分類。

其實(shí)就是讓用戶幫我們規(guī)劃容器，裝內(nèi)容進(jìn)容器，甚至幫容器起個(gè)名字（分類名、頻道名、菜單名等）。

• 因?yàn)槭怯脩羝鸬娜萜髅?，說(shuō)明這個(gè)容器入口也許最容易被理解。
• 因?yàn)槭怯脩粢?guī)劃的分類，說(shuō)明產(chǎn)品的架構(gòu)也許最容易被接受。
• 因?yàn)槭怯脩粞b的內(nèi)容，說(shuō)明內(nèi)容也許最容易被找到。

但，信息架構(gòu)是件麻煩事，它蘊(yùn)含了我們的業(yè)務(wù)側(cè)重點(diǎn)，代表了我們對(duì)用戶的某種引導(dǎo)，個(gè)人覺(jué)得卡片分類只能是一種決策依據(jù)，不能全部依賴，卡片分類用于局部的信息架構(gòu)比如工具欄分類、商品內(nèi)容分類更理想。

2.2? 界面框架和關(guān)鍵任務(wù)流

如果說(shuō)信息架構(gòu)是把內(nèi)容裝到容器（界面）里面，界面框架就是每個(gè)界面上的內(nèi)容排排坐，決定界面的內(nèi)容布局。

因?yàn)槭歉拍钤O(shè)計(jì)，所以不需要考究細(xì)節(jié)，為了呈現(xiàn)效果給相關(guān)方，你可以畫(huà)出細(xì)節(jié)，但不需要琢磨，能夠說(shuō)明這個(gè)界面上有什么內(nèi)容、大致怎么分布的就行。這時(shí)我們會(huì)挑出關(guān)鍵界面來(lái)進(jìn)行界面框架設(shè)計(jì)，不必設(shè)計(jì)所有界面。

而關(guān)鍵任務(wù)流就是把這些關(guān)鍵界面串聯(lián)起來(lái)，讓其走通。關(guān)鍵任務(wù)流是能夠代表產(chǎn)品核心的任務(wù)流，比如購(gòu)物應(yīng)用的瀏覽商品、下單過(guò)程。這時(shí)可以單獨(dú)輸出流程圖，也可以直接把框架設(shè)計(jì)的關(guān)鍵界面加上箭頭聯(lián)通起來(lái)，能說(shuō)明事情就成。

信息架構(gòu)、界面框架、關(guān)鍵任務(wù)流的完成，就意味著交互概念設(shè)計(jì)大致完成啦，在此過(guò)程中，你也要思考你的設(shè)計(jì)理念是什么，或者說(shuō)成設(shè)計(jì)準(zhǔn)則，在你面臨設(shè)計(jì)方案選擇時(shí)，它是統(tǒng)一的標(biāo)尺幫你決定，也讓整個(gè)產(chǎn)品體驗(yàn)更一致，更能體現(xiàn)產(chǎn)品價(jià)值觀。有趣的是，理念也是在設(shè)計(jì)過(guò)程中被設(shè)計(jì)出來(lái)的，是隨著設(shè)計(jì)進(jìn)程推進(jìn)，經(jīng)驗(yàn)沉淀、碰撞出來(lái)的。下面我們來(lái)看看視覺(jué)概念設(shè)計(jì)。

3? 什么是視覺(jué)設(shè)計(jì)

概念我就不說(shuō)了，其實(shí)我也不知道。重要性我就不說(shuō)了，因?yàn)榈谝徽抡f(shuō)過(guò)。想說(shuō)的是：視覺(jué)設(shè)計(jì)至少做了這四件事情：

3.1 傳達(dá)“品牌”。

視覺(jué)設(shè)計(jì)形成一種氛圍，與公司品牌建立聯(lián)系。既是一種宣傳，也加深了用戶對(duì)品牌的認(rèn)知度。比如蘭芝的產(chǎn)品、界面和包裝都是一致的藍(lán)。

3.2 傳達(dá)“美感”。

漂亮的東西總是比丑陋的東西容易被人接受。這里指的“美感”應(yīng)該是“恰當(dāng)?shù)仄痢?，每個(gè)人的審美不一樣，甲之熊掌乙之砒霜，所以所謂的美感因人而異，因目標(biāo)用戶打造。小孩認(rèn)為的美跟大人認(rèn)為的美也許是不一樣的。男人認(rèn)為的美跟女人認(rèn)為的美也許是不一樣的。文藝青年的美跟土老板認(rèn)為的美也許是不一樣的。甚至同一個(gè)人身上，當(dāng)他扮演不同的角色的時(shí)候，也應(yīng)該給他恰當(dāng)?shù)拿馈?/p>

3.3 傳達(dá)“信息”。

它將產(chǎn)品上的信息/數(shù)據(jù)視覺(jué)化，以容易識(shí)別、容易理解的方式表達(dá)出來(lái)。

比如對(duì)于信息優(yōu)先級(jí)的識(shí)別，通過(guò)視覺(jué)對(duì)比讓用戶知道我們想給他優(yōu)先看什么。

比如對(duì)于信息關(guān)聯(lián)度的識(shí)別，哪些內(nèi)容跟哪些內(nèi)容是相關(guān)的，哪些是包含與被包含的。

比如通過(guò)樹(shù)狀圖、熱點(diǎn)圖等圖形表達(dá)數(shù)據(jù)的統(tǒng)計(jì)，比純粹羅列數(shù)據(jù)更好理解。

3.4 傳達(dá)“行為”。

交互的理念通過(guò)視覺(jué)傳達(dá)，視覺(jué)暗示將行為、狀態(tài)傳達(dá)給用戶。操作的線索，操作的過(guò)程，操作的結(jié)果都需要視覺(jué)來(lái)交待。比如憤怒的小鳥(niǎo)，在拉動(dòng)彈弓，拉到什么程度，彈出小鳥(niǎo)，砸中積木，整個(gè)過(guò)程都是豐富的視覺(jué)效果在負(fù)責(zé)交待。

最后舉個(gè)例子，在一顆按鈕身上可以也許可以體現(xiàn)出來(lái)這四件事情：

這顆麥當(dāng)勞的按鈕，紅色的主色，中間有些許黃色的光暈，透露“品牌”。質(zhì)感、發(fā)光的處理代表“美感”。鼠標(biāo)懸停、按下的時(shí)候，有相應(yīng)的狀態(tài)反饋，傳遞“交互”。按鈕上的字說(shuō)明“信息”。

4 視覺(jué)概念設(shè)計(jì)

這時(shí)我們要定義視覺(jué)語(yǔ)言，也就是決定風(fēng)格是怎樣的，是活潑的還是平靜的？主色是藍(lán)的還是綠的？是立體的還是扁平的？而設(shè)計(jì)對(duì)象和輸出物就是關(guān)鍵的界面的高保真，如果某些細(xì)節(jié)是亮點(diǎn)，可以輸出能說(shuō)明風(fēng)格的局部細(xì)節(jié)，如果動(dòng)效是亮點(diǎn)，可以輸出動(dòng)效，總之，很靈活，只要最終是能定下來(lái)風(fēng)格。

4.1 情緒板

在做概念設(shè)計(jì)的時(shí)候，常用到一個(gè)方法，叫情緒板，洋名moodboard，就是下圖的樣子，一堆素材圖片的組合：

用來(lái)干嘛呢？用來(lái)更準(zhǔn)確和直觀地了解用戶喜好，以提取設(shè)計(jì)元素，作為設(shè)計(jì)輸入。

4.2 怎么做情緒板？

首先我們要定義體驗(yàn)關(guān)鍵詞，這些關(guān)鍵詞根據(jù)前期的分析研究，大家討論得出。關(guān)鍵詞是能概括產(chǎn)品個(gè)性、指導(dǎo)風(fēng)格的，比如我們做一個(gè)幼兒早教類產(chǎn)品，關(guān)鍵詞就可能是可愛(ài)、童真、易學(xué)、溫馨等等。個(gè)人覺(jué)得，大概2-5個(gè)關(guān)鍵詞足矣。

關(guān)鍵詞決定后，我們就要根據(jù)關(guān)鍵詞來(lái)尋找相關(guān)素材了。比如對(duì)于關(guān)鍵詞“萌”，我們選這張喬巴：

可以是設(shè)計(jì)師自己選擇，也可以是找典型用戶來(lái)選擇，前者節(jié)約成本后者更能反應(yīng)用戶心智。選擇的素材可以是各種影像載體，數(shù)字圖片、印刷媒體、視頻片段等，最方便的是數(shù)字圖片。素材的來(lái)源不限，從執(zhí)行的角度來(lái)看，一般我們會(huì)圈定一個(gè)素材庫(kù)，填入圖片，相當(dāng)于項(xiàng)目組先海選一輪，然后讓大家從中再選。

素材選定后（可能經(jīng)過(guò)多輪篩選），拼在一起就是情緒板了，用戶對(duì)于產(chǎn)品的風(fēng)格認(rèn)知就通過(guò)情緒板表達(dá)出來(lái)。接下來(lái)我們要從情緒板里頭抽取出視覺(jué)元素。看回上面那張喬巴，我們能抽取出什么呢？顏色粉藍(lán)粉紅，細(xì)小的體積，圓滾滾的形狀。那我們之后的界面就可能是粉藍(lán)粉紅主色，各種圓角和小玩意。

下面看一個(gè)完整例子：

4.3 注意什么？

首先，在決定體驗(yàn)關(guān)鍵詞的時(shí)候，關(guān)鍵詞不要南轅北轍，比如“酷”和“萌”同時(shí)出現(xiàn)，之后就難辦了，而產(chǎn)品的定位也應(yīng)該是出了問(wèn)題。

其次，選擇素材的時(shí)候，憑感覺(jué)選，畫(huà)面里無(wú)論什么都可以，可以是一些細(xì)節(jié)可以是人可以是抽象的眩光可以是已有的產(chǎn)品界面。但是，但是，但是，在篩選的時(shí)候，務(wù)必讓剩下來(lái)的幾個(gè)關(guān)鍵詞的相關(guān)素材和，諧，相，處。大家看下面這張圖，有沒(méi)有發(fā)現(xiàn)問(wèn)題？

每個(gè)關(guān)鍵詞對(duì)應(yīng)的圖片，看上去都沒(méi)有問(wèn)題，圖片都能代表關(guān)鍵詞，但是，當(dāng)把全部圖片擺在一起，卻顯得特別雜，看不出最終產(chǎn)品的風(fēng)格。問(wèn)題出在“時(shí)尚”，能代表時(shí)尚的圖片類型是很多的，圖中所用的炫麗前衛(wèi)的風(fēng)格是一種，但它們跟旁邊的“簡(jiǎn)潔”“舒服”不相容。如果把時(shí)尚的圖片換成簡(jiǎn)約的時(shí)尚，這張情緒板就和諧了。

最后，在抽取視覺(jué)元素的時(shí)候，不要只顧顏色。顏色是最重要也是最容易獲取的，但如果想更充分利用好情緒板，還可以從中抽取更多的有用元素，比如前面舉例的，從喬巴的圖片還能抽取出形狀。當(dāng)然仔細(xì)觀察，還有光、動(dòng)作、文字、質(zhì)感等等。

好了，到目前為止，概念設(shè)計(jì)也完成了。下次為大家介紹細(xì)節(jié)設(shè)計(jì)和測(cè)試和總結(jié)。謝謝啦。

作者信息：Danis，YY交互設(shè)計(jì)師，http://danis.zcool.com.cn/

本文由 @Danis 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。