今天依舊是篇實(shí)戰(zhàn)小分享，就是簡(jiǎn)單和大家分享下我最近和組內(nèi)小朋友們的過(guò)稿日常。每次過(guò)稿子前我都深深在心中銘記3條準(zhǔn)則：別刷存在感、別裝13、別下手太重。這里和大家分享下我的心路歷程，希望能對(duì)大家過(guò)稿有億點(diǎn)點(diǎn)幫助。

1.不想看需求文檔

通常拿到設(shè)計(jì)師投喂的需求設(shè)計(jì)稿后，第一時(shí)間非常抵觸去看需求文檔。不用找其他借口，不看需求文檔純粹就是因?yàn)閼小２贿^(guò)很神奇的發(fā)現(xiàn)，站在陌生的第三視角反而比沉浸在需求文檔里更容易發(fā)現(xiàn)一些問(wèn)題。（絕不是為我的懶找借口）

舉個(gè)例子：

之前做海外版的需求，看到設(shè)計(jì)師有一個(gè)列表頁(yè)面設(shè)計(jì)成這樣的，我反復(fù)看了幾遍都沒(méi)明白這個(gè)“5 times（5次）”放在愛(ài)心按鈕下是啥意思。

直到對(duì)稿子的時(shí)候，設(shè)計(jì)師拿出了原型，上面對(duì)這個(gè)“5次”的解釋赫然寫(xiě)著“訪問(wèn)次數(shù)”：

可能現(xiàn)在大家和我一樣站在第三視角都會(huì)覺(jué)得這樣的布局不合理，也不清楚“5次”的意思，但是在完整的需求文檔面前很多時(shí)候疑問(wèn)后面直接有解釋的時(shí)候，我們就容易沉浸到產(chǎn)品給的信息設(shè)計(jì)中，忘記以一個(gè)陌生用戶(hù)的視角來(lái)重新審視信息的設(shè)計(jì)了，也就是通常意義上的信息理解免疫。

如果我們按照新的思路重新捋一下：這個(gè)訪問(wèn)次數(shù)應(yīng)該和什么信息群放在一起更合理？

于是我們決定把字段信息都放在左側(cè)，做一個(gè)三分段的信息布局：依次是名字、性別、訪問(wèn)次數(shù)、最后是訪問(wèn)時(shí)間。同時(shí)在訪問(wèn)時(shí)間字段上增加信息的補(bǔ)充輔助用戶(hù)理解含義。整體對(duì)比如下圖:

2.交互細(xì)節(jié)好像不夠合理

其實(shí)很多團(tuán)隊(duì)是沒(méi)有專(zhuān)門(mén)來(lái)做界面細(xì)節(jié)交互的設(shè)計(jì)師的，就算有title是交互的設(shè)計(jì)師承載的任務(wù)大部分也都是原型繪制和無(wú)止盡的PPT產(chǎn)出。所以界面里涉及的一些權(quán)責(zé)模糊的交互細(xì)節(jié)大任就落到ui的頭上，但這往往也是設(shè)計(jì)師們?nèi)菀卓紤]不周全的地方。

舉個(gè)例子：

我們這期的設(shè)計(jì)改版中涉及到一個(gè)禮物面板，設(shè)計(jì)師已經(jīng)做了很多的基礎(chǔ)優(yōu)化（轉(zhuǎn)線(xiàn)為面、空間排布及信息降噪）

但這位積極的童鞋不止于此仍然還想做點(diǎn)創(chuàng)新的東西出來(lái)，ta參考了下之前l(fā)ook的交互，又做了一個(gè)直接豎滑動(dòng)的交互設(shè)計(jì)：

（左圖為look直播的禮物面板交互）

這個(gè)交互方式比原始的輪播點(diǎn)橫滑看上去要高大上與創(chuàng)新很多，but市面上不太有直播類(lèi)的產(chǎn)品用到這種看上去very good的交互方式（除了look），那么這到底是為什么呢？

仔細(xì)觀察我們就可以發(fā)現(xiàn)使用了直接豎滑的look對(duì)禮物的種類(lèi)進(jìn)行了詳細(xì)的分類(lèi)（常用、熱門(mén)、玩法、特權(quán)、星座等），且每個(gè)分類(lèi)下的禮物滑動(dòng)基本不會(huì)超過(guò)2行（大部分控制在一屏內(nèi)）。

而對(duì)于我們現(xiàn)在要設(shè)計(jì)的禮物面板tab分類(lèi)的方式并不是以禮物種類(lèi)為維度的，所以所有禮物都被放到了一個(gè)tab下（數(shù)量很多），豎滑動(dòng)沒(méi)有輪播點(diǎn)的情況下用戶(hù)很難定位到某個(gè)具體的禮物，而輪播點(diǎn)橫滑就可以很好的對(duì)用戶(hù)帶來(lái)操作記憶，比如哪個(gè)禮物放在第幾頁(yè)大哥滑動(dòng)幾次就可以找到了。

而當(dāng)設(shè)計(jì)改動(dòng)極有可能影響到大哥送禮物的時(shí)候，以營(yíng)收kpi當(dāng)頭的項(xiàng)目組是萬(wàn)萬(wàn)不敢輕舉妄動(dòng)的。

很多設(shè)計(jì)師設(shè)計(jì)的圖標(biāo)、布局都已經(jīng)非常nice了，在設(shè)計(jì)質(zhì)量上是沒(méi)有任何問(wèn)題的，但老實(shí)說(shuō)設(shè)計(jì)這東西沒(méi)有最好只有更好，除了好看我們需要更關(guān)注設(shè)計(jì)本身傳達(dá)給用戶(hù)的理解成本，成本越低體驗(yàn)的障礙就越小，這樣帶來(lái)的點(diǎn)擊與轉(zhuǎn)化也越多，這是一個(gè)即使不量化數(shù)據(jù)也相對(duì)合理的一個(gè)體驗(yàn)假設(shè)。

舉個(gè)例子：

很多鐵汁可能都做過(guò)會(huì)員、貴族之類(lèi)的權(quán)益中心，通常這個(gè)聚合頁(yè)的常規(guī)排布中段就是一大坨展示權(quán)益的圖標(biāo)和文案說(shuō)明。

因?yàn)槭菣?quán)益等級(jí)大家的配色估計(jì)都會(huì)用的比較炫麗，這里我們展示的是一個(gè)貴族中心的權(quán)益圖標(biāo)，按照產(chǎn)品大大的指示，ta想要那種尊貴的黑金質(zhì)感，所以我們的設(shè)計(jì)師就做了如下的設(shè)計(jì)：

整體黑金質(zhì)感已經(jīng)符合產(chǎn)品的預(yù)期，也符合基本的設(shè)計(jì)質(zhì)量要求，但如果要很?chē)?yán)格的細(xì)究的話(huà)仍然有可以變得更好的方式，所以看到這個(gè)設(shè)計(jì)方案的時(shí)候我在想2個(gè)事情：

按鈕增加了動(dòng)效和光帶，大家可以自行腦補(bǔ)。

…

以上就是我們過(guò)稿的設(shè)計(jì)日常，很符合豬廠“專(zhuān)業(yè)偏執(zhí)”的特點(diǎn)。

原文地址：Nana的設(shè)計(jì)錦囊（公眾號(hào)）

作者：柒爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》當(dāng)負(fù)責(zé)人和組內(nèi)設(shè)計(jì)師過(guò)稿子的時(shí)候，都在想些什么?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)