打造美觀清晰易使用的交互文檔
在檢查交互文檔的時候,我有句口頭禪是:“這交互稿畫得太丑了?!甭牭竭@句話的小朋友,有些回了句“哦…”,有些則會問“交互稿也要考慮美么,交互稿不是邏輯ok就行了么”,臉上是不甚理解的。
交互文檔也要考慮美
為什么交互文檔也要考慮美,我覺得有以下幾點原因:
- 交互原則里有一個“美觀即實用法則”,人會潛意識里認為好看的東西也是好用的。所以,不要因為你的方案看上去丑而影響了上級對你方案的判斷;
- 我們同樣也會認為一個能產(chǎn)出美觀交互文檔的交互設(shè)計師是專業(yè)的、值得信賴的(這個好處就不用說了吧);
- 自己在其他方面的能力(比如邏輯思維、創(chuàng)意)并沒有出色到能蓋過自己在表現(xiàn)層上的缺點;
- 更高的層面,交互文檔也是給人用的,也應(yīng)該注重用戶體驗。
不過,對交互文檔“美”的定義,還和視覺不太一樣。一份美的交互文檔,應(yīng)該是美觀、清晰、易于使用的,它更偏向于一種邏輯美。
交互文檔的內(nèi)容
所以,一份好的交互文檔都應(yīng)包含哪些內(nèi)容,注意哪些方面呢?以下內(nèi)容來自于導師的經(jīng)驗傳承,來自于工作中同事的建議反饋,以及自己的經(jīng)驗。
1、媒介
PPT、PDF、HTML……你用什么格式輸入你的交互文檔?
PPT和PDF的好處是看上去正式、漂亮,同時因為每一頁的畫布尺寸是固定的,不容易看漏東西。但缺點也是明顯的,一張PPT沒放幾個界面就滿了,感覺不自由。而且對于動輒幾十上百頁的交互文檔,缺乏索引。所以,我還是推薦帶側(cè)邊索引,畫布空間不受限的HTML格式。
2、標識說明
放在文檔第一頁。
對于初次接觸你的交互文檔的人來說,這樣一份說明有助于對方理解你的交互,尤其是一些非通用的標識。
3、修訂記錄
放在文檔第二頁。
寫明文檔的修訂者,方便開發(fā)找到對應(yīng)的交互;列出文檔更新的具體日期(最近更新的排最前),給出被修改頁面的超鏈接,同時寫明具體修改的內(nèi)容。
4、頁面標題
寫在每一頁的頂部。表明當前頁所述的功能是屬于哪個模塊的,這樣看的人不容易迷失。
5、對齊
對齊讓文檔可讀性更好。
單個界面之中元素的對齊、界面和界面之間的對齊,頁面上任何東西都是應(yīng)該能找到對齊點的。
你的注釋的對齊了嗎?當年我的導師指出我交互稿里的注釋沒對齊這一點時,恍然大悟:這都是細節(jié)啊!
右邊注釋對齊后,可讀性更好
6、UI:顏色、線條、留白
(1)盡量做到黑白灰不帶彩色。
否則顏色和視覺稿不一致,測試會來問到底用哪種。
(2)灰色會讓交互稿看上去更精致。
避免使用黑色線條,盡量不要出現(xiàn)黑底白字。
看自己兩年前的交互文檔,雖然也是整齊的,但總有種說不出的復古。
(3)用深淺不同的灰來表現(xiàn)層次和重點。
(4)合理留白,避免界面過擠或過空。
注意顏色、留白這些細節(jié)
講到這里,有人會問,交互把時間浪費在這種視覺層面的事上有用么?
我倒覺得這是設(shè)計常識,或者你有沒有意愿提高自己在這方面的能力。若有,則隨手一畫就是如上圖右邊的界面,何談浪費時間。你永遠無法預(yù)測一種技能在未來會派上什么用場。
當然,如果你會用交互組件庫(回復交互組件庫可查看文章),也會省很多時間。
7、熱區(qū)
標明熱區(qū)的范圍。
比如,為了圖省事,沒有標明右上角“關(guān)閉”的熱區(qū)范圍。然后開發(fā)就把熱區(qū)做成和X一樣的大小了。就有用戶來反饋這個X點不中。
正確的表現(xiàn)方法:
對于緊密相連的熱區(qū),也有一些表現(xiàn)方法,能讓開發(fā)看得更清楚:
透明度疊加法
顏色區(qū)分法
重復羅列法
8、圖片
使用圖片時,要注意和背景融合,避免出現(xiàn)“剪貼畫”。
若暫沒有找到合適的圖標,寧可統(tǒng)一用占位符替代,輔以文字注釋。
說到占位符,視覺有話說:“每次交互隨手拉一個圖片占位符,我都要冥想好久?!?/p>
配圖,到底配什么圖好呢?
所以,若對圖片內(nèi)容或風格有想法,不要吝嗇用各種形式在交互文檔中表現(xiàn)出來。
9、流程圖
主線和分支的走向要始終保持一致。
如下圖,紅框框出的“是”和“否”在兩次判斷中的走向不一致,對看的人來說就不是很好的體驗。
正確的流程圖表現(xiàn)
界面流程也同樣應(yīng)該做到主線和分支清晰。
流程之間不要隔太多空白,不然開發(fā)會誤以為這個頁面的交互到此為止。
可以在頁面邊緣拉一條輔助線,線沒到頭就說明后面還有內(nèi)容。單個界面尺寸不要設(shè)太大,建議等比例縮放。否則一屏之內(nèi)顯示不了幾個界面,瀏覽效率太低。
10、注釋
注釋要簡潔、明確。
從表現(xiàn)形式上分兩種。一種是注釋和UI離得較遠,自成一體,用數(shù)字標一一對應(yīng)。
國外有很多交互稿都是這么表現(xiàn)的。優(yōu)點是看上去非常規(guī)范,適合注釋密集的界面;缺點是開發(fā)的視線需要在界面上游走,找對應(yīng)關(guān)系。
另外一種形式是注釋和UI用直接用一條引線相連。
如果注釋不是那么多,這種表現(xiàn)更為直觀。
11、側(cè)邊索引
側(cè)邊索引是交互文檔里的重中之重。它讓一個上百頁的交互文檔變得易于瀏覽和查找。
(1)合理表現(xiàn)層級關(guān)系
正確的表現(xiàn)功能從屬關(guān)系,增強側(cè)邊導航可讀性。
(2)合理命名每個頁面
頁面名稱也是有學問的,命名要做到邏輯清晰、表意全面。
舉個例子,看下面這組頁面命名,能一下子看出會員頁都有哪些狀態(tài)么?
如果這樣命名,是不是感覺更清楚一些?
(3)合理拆分頁面
理論上說,一個功能的所有流程都可以放在一個頁面上講。但是一個頁面上如果分支太多,就容易變成“蜘蛛網(wǎng)”。
記得自己剛工作的時候做注冊登錄的交互。點擊手機號注冊會分好幾種情況,我全都畫在了一個頁面上。等到交互評審時,當我拿著這張巨型流程圖”斗轉(zhuǎn)星移”地講解時,臺下人直接看暈了。后來,我就學會了拆分頁面。
(4)合理共用頁面
做積分商城時,一開始,我在所有類型的商品頁都加了支付的交互。然后發(fā)現(xiàn)支付流程是個坑,里面的不確定因素太多,一改就是所有相關(guān)頁面都要改一遍,容易出錯。最后,我就將所有商品頁的支付流程都刪掉,改成統(tǒng)一鏈接到另外一個專門講支付流程的頁面。這樣遇到改動只要改這一個頁面即可。
(5)避免側(cè)邊索引過長
做windows phone的時候,因為一次性要做別的平臺迭代了近兩年的全部功能,交互文檔的側(cè)邊索引就像萬里長城一樣,找一個功能要找好久。
后來做windows10的時候,就把交互文檔按大的功能模塊拆分了,這樣每一份文檔的頁面數(shù)量就適中了。
結(jié)語
做到以上這些點,其實并不難,難的是始終如一,變成習慣。有時候一忙、一偷懶,在細節(jié)上馬虎了,就徒增很多溝通成本。最后麻煩的還是自己。
交互文檔,形式上夠用就好,不必過于追求。畢竟頻繁的時候一天要更新好幾次,在文檔體驗和工作效率之間取得平衡吧。
如何才能讓看交互文檔的人有更好的體驗?如何更加正確清楚地傳達自己的設(shè)計?把交互文檔當做自己的一個產(chǎn)品看待,每次感到不方便的時候,想想怎么改進,聽取用戶反饋,迭代優(yōu)化。這也是提升自己的設(shè)計能力。
#專欄作家#
作者:俞靜,微信公眾號【聽音樂做設(shè)計】。人人都是產(chǎn)品經(jīng)理專欄作家,網(wǎng)易云音樂交互負責人。關(guān)注社交、工具類產(chǎn)品,交互設(shè)計和用戶體驗踐行者。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
交互組件庫
交互組件庫
交互組件庫
交互組件庫
交互組件庫
交互組件庫
請問文中展示原型和交互說明的工具是什么
Axure
?? 感謝分享
交互組件庫
為什么不直接做成高保真的交互稿呢,高保真的交互稿直觀性更強
因為沒時間
真心棒
寫的非常好
學習了 謝謝
養(yǎng)成良好的習慣確實很重要 ?
有些東西確實很實用,謝謝咯!
寫得相當好,我現(xiàn)在實習要畫線框圖,就會感覺規(guī)范化來寫幫助真的很大
很受用~做產(chǎn)品兩年多,交互一直都是產(chǎn)品承包了,從沒有專職交互設(shè)計師
看到你的收藏好贊呀,可以相互加好友互相學習嗎?
?? 講解的很詳細?。?!~蟹蟹