關(guān)于交互/用研

接著，我們也千萬(wàn)不要放過(guò)交互設(shè)計(jì)師，當(dāng)他們拿到產(chǎn)品的需求的時(shí)候，這時(shí)候我們必須不要x臉的湊過(guò)去，無(wú)論是請(qǐng)教也好，打臉也好，多去問問他做需求的思路，他是怎樣分析需求，分析商業(yè)戰(zhàn)略，怎樣梳理流程，怎樣設(shè)計(jì)框架，又是怎樣分析信息架構(gòu)和布局的。這時(shí)候假如自己是一個(gè)交互設(shè)計(jì)師，然而當(dāng)產(chǎn)品一股腦兒把需求提給你之后是不是快蒙逼了呢?不要急，萬(wàn)事開頭難，我們必須透過(guò)現(xiàn)象看本質(zhì)，挖掘出用戶的原始需求才是關(guān)鍵，舉個(gè)例子：用戶發(fā)出了一個(gè)想吃東西的信號(hào)，這個(gè)時(shí)候產(chǎn)品就說(shuō)用戶餓了，快送去饅頭米飯!!那其實(shí)真的是用戶餓了嗎，還是說(shuō)用戶在打完游戲期間想抽根煙吃點(diǎn)零食呢?所以我們需要看清楚用戶究竟需要什么?

那么我們可以怎樣去做一個(gè)需求的調(diào)研，看看用戶是不是反饋了這個(gè)比較嚴(yán)重的問題，下面我們分了3個(gè)步驟：

1.驗(yàn)證這個(gè)使用場(chǎng)景是否存在?

2.再次了解用戶是否已經(jīng)有其他的解決方法?

3.最后確定我們的解決方法是否在用戶看來(lái)比已有的解決方法跟更好?

這3個(gè)步驟缺一不可，少一個(gè)這個(gè)需求就可以不做。

找到了實(shí)際需求之后(用戶其實(shí)想抽煙)我們得來(lái)給這些需求排優(yōu)先級(jí)(買煙，點(diǎn)煙，散味)，這里教大家一個(gè)用研用的模型--kano模型，這個(gè)模型中分別列了三個(gè)屬性：必備屬性，期望屬性，魅力屬性;另外還有個(gè)個(gè)不常用的屬性：反向?qū)傩院蜔o(wú)差異屬性，這里就不細(xì)說(shuō)了。

必備屬性就是這個(gè)功能在這個(gè)產(chǎn)品里必須得有(買煙，你不給我買煙我怎么抽)。

期望屬性就是用戶希望有這個(gè)功能，如果沒有，用戶滿意度會(huì)下降(點(diǎn)煙，為了服務(wù)好用戶必須點(diǎn)上)。

魅力屬性就是如果做了這個(gè)功能，那么用戶會(huì)很開心很驚喜，如果沒有，那也影響不大(散味，這個(gè)時(shí)候要是能當(dāng)著用戶的面吸光二手煙這簡(jiǎn)直服務(wù)到家了)。

當(dāng)我們將很多需求用kano模型統(tǒng)計(jì)出來(lái)后會(huì)發(fā)現(xiàn)，我們的需求分類成這三種，那么我們做需求的順序就是必備需求>期望需求>魅力需求。

當(dāng)然以上的內(nèi)容不僅僅用研同學(xué)會(huì)用到，交互的同學(xué)也同樣可以去用，因?yàn)槲矣X得將來(lái)的趨勢(shì)將會(huì)是UX>UI,說(shuō)的更準(zhǔn)確一點(diǎn)就是兩者互相融合，甚至融合更多角色。

關(guān)于視覺

顏色：

為了保持產(chǎn)品的整體品牌調(diào)性，我們將會(huì)使用一種主色調(diào)，兩種或三種輔色，但一般選擇兩種輔色，選擇同一色系或者鄰近的色系，比如主色是藍(lán)色，那么我們可以選擇臨近色系的淺藍(lán)和深藍(lán)做為輔色。再加上1-2種點(diǎn)睛色，用來(lái)高亮顯示，提醒用戶的作用，比如紅色，橙色，黃色等對(duì)比色。

字體：( 下面說(shuō)的是在sketch下一倍設(shè)計(jì)稿的字號(hào)，你如果是ps做的就要x2 )

經(jīng)過(guò)研究及多方證實(shí)，在一倍設(shè)計(jì)圖下，最利于閱讀的字號(hào)以及大部分人所覺得最舒適的字號(hào)大小是16px。那么，在同一個(gè)產(chǎn)品里，我們將用到除了頂部導(dǎo)航以外的3種字體大小，分別為正文16px，次要性文字14px，提示文字12px。對(duì)于10px文字小編建議盡量少的使用。字體的顏色也通常使用3個(gè)顏色便足以用于這個(gè)產(chǎn)品，深色，深灰色，以及淺色字體。

線條：

線條所起的作用一個(gè)是分割內(nèi)容，第二個(gè)是流引導(dǎo)，同樣的內(nèi)容，用橫向線條或者豎向線條，用戶的瀏覽路徑將會(huì)發(fā)生變化，所以分割線在整個(gè)app里的所用也是不言而喻的，那么我們將分割線也可以定義1-2個(gè)層級(jí)的顏色，在移動(dòng)端肉眼能識(shí)別即可，但注意不能太深，也不能太淺。

圖標(biāo)：

圖標(biāo)能使整個(gè)app更生動(dòng)，但是圖標(biāo)有時(shí)候單獨(dú)存在又是個(gè)硬傷，對(duì)于一些抽象畫的字段圖標(biāo)沒辦法更好的繪制出來(lái)的時(shí)候我們就需要進(jìn)行圖文結(jié)合來(lái)描述。圖標(biāo)使用的位置不同，大小也會(huì)不同，甚至風(fēng)格也會(huì)迥異。比如：微信底部標(biāo)簽欄的圖標(biāo)，和頂部導(dǎo)航欄的圖標(biāo)粗細(xì)不同，風(fēng)格也不同。但是不是一個(gè)app里就有很多風(fēng)格的圖標(biāo)，只要形成統(tǒng)一就行。一般圖標(biāo)能分為線性和色塊兩種，線性圖標(biāo)更輕盈，缺點(diǎn)是放大之后線條會(huì)變粗，且線性圖標(biāo)沒有色塊圖標(biāo)來(lái)的表意明確。色塊圖標(biāo)更直觀，且放大縮小不影響，可以用到iconfont里，圖標(biāo)將成為一種字體，比較大程度優(yōu)化app的內(nèi)存，缺點(diǎn)是信息較多時(shí)比較冗雜。

排版：

排版對(duì)于一個(gè)頁(yè)面來(lái)說(shuō)是最最重要不過(guò)了，在交互稿上，交互已經(jīng)大致區(qū)分出了信息的布局，這個(gè)時(shí)候我們視覺需要去進(jìn)行“具像化”(或許前期交互就是你自己做的)。我們先將信息關(guān)聯(lián)度大的內(nèi)容整合在一起，再根據(jù)內(nèi)容的重要程度，以用戶的視覺流進(jìn)行排布，當(dāng)然這個(gè)只是正常的設(shè)計(jì)流程，凡事無(wú)絕對(duì)，要懂得變通。再說(shuō)一個(gè)小竅門，就是盡量保證信息元素之間的距離相等，除非為了區(qū)分兩個(gè)信息，間距一致會(huì)使整個(gè)頁(yè)面更美觀，當(dāng)然我們考慮做頁(yè)面的時(shí)候不是能展示所有信息就是好設(shè)計(jì)，我們強(qiáng)調(diào)的是用戶體驗(yàn)，那么用戶不希望一眼看去都是信息，這個(gè)時(shí)候我們需要做一些留白的設(shè)計(jì)或者信息的層級(jí)顯示。

做項(xiàng)目碰到的問題：

1.目前采用的標(biāo)注方式使用sketch的插件marketch一鍵導(dǎo)出標(biāo)注，雖然不是很精確，但已經(jīng)大大提高了工作效率。問題來(lái)了，開發(fā)到底看不看標(biāo)注?很有意思的問題，其實(shí)只要項(xiàng)目緊他們一般不會(huì)看標(biāo)注，等到邏輯寫完了，再來(lái)改UI的問題。那么為了避免在頁(yè)面寫完后不做大的布局調(diào)整，做為視覺設(shè)計(jì)，應(yīng)該在開發(fā)前期就和前端定義好布局的框架，交互，用自定義還是系統(tǒng)控件，否則等開發(fā)寫完你和開發(fā)說(shuō)我要的效果不是這樣，但是開發(fā)說(shuō)已經(jīng)改不了了，再改就要很大的精力去重寫(當(dāng)然也可能是開發(fā)想偷懶)，這里必須說(shuō)一下，其實(shí)為了你我他，UI設(shè)計(jì)必須要學(xué)前端代碼，否則開發(fā)隨便忽悠下你你就放棄了自己的立場(chǎng)，這完全是對(duì)自己，對(duì)產(chǎn)品不負(fù)責(zé)。

2.盡可能將頁(yè)面的狀態(tài)補(bǔ)全，因?yàn)榭赡軟]有交互，也可能交互的文檔原型沒有那么細(xì)致。比如你做完一個(gè)頁(yè)面發(fā)現(xiàn)所有字段都填滿了，整個(gè)頁(yè)面挺飽滿，這個(gè)時(shí)候測(cè)試的同學(xué)說(shuō)了，這個(gè)字段后臺(tái)可能不返回，是空，那里也是空，這樣的頁(yè)面東邊少一塊，西邊少一塊還好看嗎?

3.適配的問題。運(yùn)營(yíng)要做活動(dòng)圖片，通過(guò)后臺(tái)返回獲取到不是由前段添加，這時(shí)候我們需要定義一個(gè)比例，不同機(jī)型等比例縮放即可。

4.同時(shí)接到3個(gè)以上的需求怎么辦，拍優(yōu)先級(jí)?怎么排?

把內(nèi)容少的，重要的部分先做，再做內(nèi)容多的，重要的。最重要的還是老板重視的，必須先做!

5.能這個(gè)版本迭代掉的內(nèi)容千萬(wàn)不要放倒下一個(gè)版本，放著放著就沒了。

6.sketch的插件craft+dropbox的新組合用來(lái)制作app kit，能拖拽直接使用和編輯

最后講一句話：請(qǐng)基于場(chǎng)景設(shè)計(jì)!

文章來(lái)源：DevStore