前陣子跟幾個(gè)同行交流，提到關(guān)于交互和 UI 的走查工作問題，所以特地整理了一下，給大家說說關(guān)于設(shè)計(jì)走查的幾個(gè)問題。

1. 設(shè)計(jì)走查的作用

在很多設(shè)計(jì)師身上都存在一個(gè)現(xiàn)象，就是拿到需求或原型，然后設(shè)計(jì)完成之后，就以為沒自己什么事了，也不會(huì)主動(dòng)去找事情做，他們認(rèn)為到這里，自己的工作就完成了。

其實(shí)到這為止，設(shè)計(jì)師才做完一半的工作。為什么呢?

當(dāng)設(shè)計(jì)師把設(shè)計(jì)稿交給開發(fā)時(shí)，雖然已經(jīng)標(biāo)好注、切好圖(交互注釋也很完美)，但是不代表開發(fā)能把界面表達(dá)的跟設(shè)計(jì)稿完全一樣，甚至?xí)泻艽笃?，所以設(shè)計(jì)師就要做好設(shè)計(jì)走查工作，盡量跟開發(fā)一起把頁面實(shí)現(xiàn)的更好，這里不僅僅說的是UI、也包括交互。

這樣不僅能提高產(chǎn)品的實(shí)現(xiàn)度，讓用戶體驗(yàn)更好，還能促進(jìn)團(tuán)隊(duì)的工作氛圍，畢竟大家的目標(biāo)還是一致的。

2. 錯(cuò)誤觀點(diǎn)

當(dāng)中有一個(gè)朋友提到，設(shè)計(jì)走查應(yīng)該是測試同學(xué)的事情。

首先，我并不否認(rèn)這位朋友的觀點(diǎn)，但還是局限了。

這位朋友的原話是：“設(shè)計(jì)只要做好設(shè)計(jì)的工作，開發(fā)也必須做好自己的事情，很好的去實(shí)現(xiàn)設(shè)計(jì)稿，然后測試也要做好自己的工作，找到視覺、交互、開發(fā)的所有問題，這才是每個(gè)人真正的職責(zé)所在。”

三個(gè)字總結(jié)：理想化。

這是一件不大可能的事情，首先開發(fā)要很好的實(shí)現(xiàn)設(shè)計(jì)稿，前提是有一個(gè)不錯(cuò)的開發(fā)能力，同時(shí)如果還想在不需要設(shè)計(jì)的幫助下就實(shí)現(xiàn)好頁面，那開發(fā)本身就要有一個(gè)不錯(cuò)的設(shè)計(jì)功底，這樣就可以在獨(dú)立工作的情況下，相對完美的實(shí)現(xiàn)視覺稿。

但是做設(shè)計(jì)的同學(xué)都知道，即使兩個(gè)人設(shè)計(jì)水平相同，他們在臨摹完同一個(gè)頁面的時(shí)候也會(huì)有明顯的差別，更何況是開發(fā)用代碼去還原頁面呢?

再者，測試如果要同時(shí)找到所有的 UI、交互、開發(fā) Bug，遇到的問題會(huì)跟上述開發(fā)的問題一樣，同時(shí)需要的能力要更高。這是一件幾乎不可能的事情。(可能真有這么牛逼的人物存在，不過我至今沒見過。)

所以設(shè)計(jì)師做好設(shè)計(jì)走查，還是很有必要的。

△ 交互設(shè)計(jì)過程

3. 如何做設(shè)計(jì)走查

那怎么做設(shè)計(jì)走查工作呢?

一. 檢查頁面一致性

包括頭部、尾部等位置是否完整統(tǒng)一，按鈕樣式、反饋狀態(tài)、報(bào)錯(cuò)等樣式是否統(tǒng)一;是否有缺少的場景和狀態(tài)，根據(jù)任務(wù)流程對場景和狀態(tài)進(jìn)行排查，保證設(shè)計(jì)的完整性。

二. 確保方案的可用性和屏幕上的操作易于使用

設(shè)計(jì)任務(wù)流程，進(jìn)行設(shè)計(jì)走查，在移動(dòng)App端，我們所設(shè)計(jì)的應(yīng)用是建立在手指點(diǎn)擊操作的基礎(chǔ)上進(jìn)行使用的。我們的手指不像鼠標(biāo)一樣能夠精確定位和響應(yīng)，所以我們需要在設(shè)計(jì)的過程中確?？牲c(diǎn)擊的區(qū)域能夠較為明顯的識(shí)別。

三. 確保文本易于閱讀

文本內(nèi)容是大部分產(chǎn)品的重要組成部分，所以文本的排版是非常重要的(很多人說中文排版不好看，那是因?yàn)槟悴粫?huì)用中文排版的方式去做排版)。確保文字清晰、易閱讀是在文字處理上的必須保證的。

四. 注意顏色對屏幕的影響

Androind 不同的屏幕在色彩飽和度上有較大的差異，比如三星的屏幕亮度和飽和度都比一般機(jī)型要偏高。所以在進(jìn)行設(shè)計(jì)的時(shí)候，選擇的顏色一定要適中，不要偏色。

五. icon 的使用

icon 是代替文字標(biāo)識(shí)的一種圖形，它的價(jià)值意義就在于簡化文字，通過圖形來表達(dá)功能含義。所以設(shè)計(jì)的 icon 如果不能表達(dá)好，就會(huì)造成一定的識(shí)別障礙，這也是為什么我們說設(shè)計(jì) icon 是考驗(yàn)一個(gè)設(shè)計(jì)師功底的技能。

六. 動(dòng)效的使用

動(dòng)效這塊是產(chǎn)品中比較高規(guī)格的一個(gè)存在，所以在使用的過程中一定要謹(jǐn)慎，不能隨意加入多余的動(dòng)效，導(dǎo)致在使用產(chǎn)品的過程中出現(xiàn)問題。

當(dāng)然，雖然我只說了這六點(diǎn)，但是還有許多其他的東西需要注意，包括新功能提示、熱區(qū)的控制等等，這些都是需要設(shè)計(jì)師去定義的。所以我說開發(fā)和測試有時(shí)候沒辦法發(fā)現(xiàn)這些問題，那設(shè)計(jì)師做走查的這項(xiàng)工作就必不可少了。

4. 走查遇到的問題

有的設(shè)計(jì)師說：“我們都做好走查工作了，可是開發(fā)還是實(shí)現(xiàn)的有問題，再溝通就變成吵架了。”

如果到這一步為止，你的任務(wù)完成的很好了，實(shí)現(xiàn)來說一般不會(huì)有什么問題。如果是一些小差別，實(shí)在沒辦法溝通，那可能是開發(fā)的問題，也可能是你的設(shè)計(jì)并不現(xiàn)實(shí)，讓開發(fā)實(shí)現(xiàn)的代價(jià)很大，所以要綜合考慮實(shí)現(xiàn)因素，不要把責(zé)任推給別人，認(rèn)為就是開發(fā)的問題。

同時(shí)，希望大家在工作中多投入自己的精力，做好自己的工作，不要完成表面工作就自以為做的很好了。說實(shí)話，還差得遠(yuǎn)呢~