UI 設計筆記心得篇:常見錯誤與盲點

Laura Lin
9 min readSep 15, 2017

--

最近在嘗試使用阿拉伯文排版,我根本就不知道我放了哪些字上去

最近在朋友間有機會接近一些做 UI 未滿一年的新人,看他們的作品感覺也像看到從前的自己,(不知道資歷比較深的人是怎麼看我的,先說我也還很菜XD)總之這邊也概略的整理一些我在以前的我身上發現的盲點,算是記錄自己一路走來跌過的坑吧:

構想階段:

1. 跳窗、到處都是跳窗

以前的我也是這樣,有新增的功能時,不管功能是什麼都覺得用跳窗就可以完成;但這樣其實是極其懶惰的做法,應該要思考該怎麼將新功能融入原本的介面中,跳窗其實是很顯眼的元件,通常用來做警告用途,就算要用跳窗的形式,跳窗其實也可以分成很多種的!通常會建議再去讀 iOS、Android 設計規範做參考

製圖階段:

2. 覺得畫面繽紛漂亮最重要

https://dribbble.com/Radium

設計師一定會參考像是 Dribbble 之類的網站,以前的我會覺得要做得像 Dribbble 上面的大大一樣、顏色超豐富超鮮豔、動態超酷;但後來就漸漸發現這樣會有問題:

一個小功能真的要那麼酷炫的動態轉場嗎?

你們公司有時間這樣做嗎?

你確定這個元件或這個動態實際上做得出來嗎?

你確定你設計時放了一個美美的圖,讓畫面都美美的、使用者用他自己的手機放圖時效果還會一樣嗎?

整個 APP 都是這個顏色,看久了好膩啊!

以上種種國外有個名詞叫做 Visual Sugar,不知道從哪裡開始的風氣,我以前在做 Daily UI 時很受這種圖影響;只能說有好有壞,可以從中獲取靈感和點子,讓想像力不設限;也有缺點就是了,可以參考這篇:https://uxdesign.cc/visual-sugar-f46b47ee04e5

如何避免在設計時脫離現實,建議每週都上 App Store 把首頁免錢的 APP 都下載來玩一玩,有好看的 APP 可以留下來以後當參考、或是跟工程師溝通,都很好用的!

另外有幾個網站可參考,收集著實際上架的產品:

3. 圖層混亂、忘記命名

還有Group 3、Group 3 copy、Group 3 copy 3

整理檔案是很重要的,雖然這個錯我至今還是偶爾會犯(遮臉),以前一個人做習慣了,想說切圖命名好就好,結果三個月後再回去開檔案連自己都認不得

別忘記你的檔案不只是你自己要看,幫檔案命名就是在幫你們的設計師、工程師,以及幫你自己

整理完就會覺得神清氣爽,房間很乾淨的感覺

如何命名可以參考這幾篇:

4. 不照設計規範走、自己訂完規範之後覺得很阻礙

https://ant.design/

在我開始 UI 設計師之路時,設計師要做設計規範、Template 這件事也許還不是這麼普及的觀念;當時接觸過類似的東西應該就只有 Bootstrap 的文件,有些設計師在實際開始製作前都要做海量的文件(看情況,小公司也許就不用)

我其實是在公司有其他設計師加入時我才初次嘗試製作設計規範和協同合作這一塊;以大部分的情況來說,不可能一次就將產品完成,總是要新增功能、總是要修修改改的;比較龐大的產品也需要有其他設計師的加入,這時候就會需要一個規範來讓產品保持一致性;我覺得製作設計規範最大的優點在設計後期,只要將做好的元件、依據已經定義好的空間規範擺放到相應位置,新功能簡簡單單就完成了!

不照規範走是對其他共同協作的人造成困擾,並且,不照規矩走當初幹嘛花時間訂規矩呢?但有可能是訂規範的人讓易用性太低使得大家不知道怎麼用,這又是另一回事了(注意:訂規範的人有責任要做出容易閱讀和維護的規範)

維護簡單來說就是每有更動就去更新一次文件、並且檢查目前內容等等,想到公司技術長曾經分享的這段話,我這邊再引用並改寫 Damian Conway 在《Perl Best Practices》書中建議內容:

「設計規範文件時,請想像最後維護此文件的人,是個有暴力傾向的精神病患,而且他知道你住哪裡。」

參考:原子設計

5. 沒自信,什麼都想找網路素材拼湊上去

這通常發生於對自己繪畫能力不滿意的人身上;但我必須說,我也不太會畫畫,做 UI 和畫圖是兩件事好嗎!

找網路素材沒有錯,但要注意幾件事:

  1. 素材是否有版權
  2. 你找到的素材和產品原本的風格差多少,需要改動多少?
  3. 如果你是找到一個 UI Kit ,那命名規則、做圖方式就要改成自家那一套

找素材花的精力搞不好比較多,於是我大多都自己刻,我懶惰

6. 想得太多

想得很多其實很好,但容易自己一個人陷入鑽牛角尖的狀態;我自己也常常不小心跌入這樣的陷阱,比如說客戶要一個商品訂單,Spec 上沒多加說明,我們設計 Team 就為商品訂單想了很多種可能的情境,搞死自己;但其實客戶只要最陽春的功能、其他奇怪的狀況不需要這一版就上,而且這種事情去確認一下就解決了(新人大多都不敢去問)

還有,還是要強調想得很多很好,可以預先把一些可能的情況做出來或先留空間;但不要想第一版就把所有功能放上去、也不要每做一個操作就必須換一個畫面,那叫做不懂得凝練啊~

7. 想得太少

https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23

想太多不好,但是不要太天真想得太少(到底),這邊其實是指一些需要注意的眉眉角角,需要注意的事情其實很多:

  1. 字串長度
    例如說使用者自訂姓名,要考慮到外國人的名字塞不塞得下,但是那個 uvuvwevwevwe onyetenyevwe ugwemubwem ossas 就算了
  2. 預留空間
    如果已知未來幾版的功能,其實就可以先想好預留位置,到時才不用傷透腦筋
  3. 狀態
    按鈕、輸入框、Tab、下拉選單、等等都有不同狀態,似乎羅列不完
  4. 空畫面、錯誤畫面、使用教學….
    如果要讓使用經驗完善的話,很多通常性的畫面要補齊,請見:
    https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914
  5. 註冊確認信、忘記密碼的畫面、使用條款的畫面
    同上,APP 外一切的相關畫面也要顧到,如果公司沒有想到這塊,可以去問問這部分公司想怎麼處理

參考:

請勿轉載

--

--

Laura Lin
Laura Lin

Written by Laura Lin

設計工具分享 / 學習筆記 / 個人心得

No responses yet