[分享] 好UI爛UI大車拼01 不是平面風就是好設計

看板AndroidDev作者dementia (妖精尾巴魔導士)時間9年前 (2014/09/19 23:01)推噓3(3推 0噓 18→)

留言21則, 7人參與討論串1/3 (看更多)

網誌好讀版： http://thisblogexist.pixnet.net/blog/post/106801865 ~ ~ ~ 本文開始 ~ ~ ~ 隨著APP市場的白熱化，UI、UX日漸受到廠商重視。什麼是好UI呢？　小知識　UI：使用者介面（user interface）　UX：使用者經驗（user experience） UX比UI抽象，含蓋的層面也更廣泛。一個好的UI大約具有以下要素：　1. 簡單易懂：佔1/3 　2. 操作流暢：佔1/3 　3. 美觀大方：佔1/3 所以說，如果把UI交給美工，運氣不好的話只能拿到1/3的「分數」。好的UI 與UX絕對不等同於好的美工，卻仍有很多人誤以為只要把UI交給美工弄弄就可以了－－千萬不要再這樣想囉！糟糕案例1號：以為做了平面簡約的風格就是好UI 接下來就讓我們看真實案例。由於案例有好幾個，內容很多，我不會一次寫完，如果您在讀完後覺得喜歡，請您耐心等待續集。每一個案例中當然都有好的部分和糟糕的部分，而且平心而論，這些APP的UI 都有一定水準，比那些「不想下載」和「才開啟就想關掉」的那些強太多了。　APP資訊　APP名稱：高效Todo(备忘提醒日程记事) 　版本資訊：5.3.0 這個APP的點子非常好！也許是一個還很新的APP，有潛力，如果UI能改善的話應該會有更多人使用。讓我們先看看首頁： http://pic.pimg.tw/thisblogexist/1411129216-279528542.png

很多廠商或開發者都會把「新增」按鍵或重要的按鈕置於右上角，大概是因為右上角很空吧！那絕對不是個好位置！就因為那不是好位置，所以才容易空出來。從視覺上來說，最佳位置是左上角，這也是為什麼LOGO通常會放左上角的緣故。從操作上來說，雖然每一種尺寸的手機略有不同，但都在中間以下。由於一開始不容易注意到「新增」鈕，連帶著可能會讓使用者在中間亂點亂畫，於是使用者就看到－－放大了！ http://pic.pimg.tw/thisblogexist/1411129217-486137811.png

炫爆啦！！不幸的是炫和好是兩碼子事。現在的手機普遍在5吋以上，解析度更是越做越高，其實不用放大就已經很清晰。如果不是特別為銀髮族設計，切換大小的意義在哪裡呢？這時候你可能注意到，右上角有一個不太確定是櫃子還是幸運草的圖，也可能沒注意到。如果你沒注意到，那就回不去了。為什麼會注意不到呢？位置是原因，另一個問題是色彩。「新增」鍵是藍的，左邊都是灰的，因此使用者直覺上會產生兩種解釋：解釋一，藍色是按鈕，灰色是普通文字；解釋二，藍色是普通文字，灰色是按鈕。在這裡，藍色比較醒目，因此比較容易被解釋成按鈕。於是你終於發現了這顆重要的按鈕，你點了一下「新增」，終於，進入了你想要的頁面。 http://pic.pimg.tw/thisblogexist/1411135336-2148168492.png

接下來你茫然了。儘管這些圖示感覺都很熟悉，在其他地方都有見過，但是在目前的脈絡下代表什麼意思？不知道。好吧，先點點看再說吧。有些功能在點下去後，就能知道是做什麼的；有些功能在點下去後－－請借我使用說明書。工具類APP在「新增」頁面最需要下功夫，好讓使用者順利輸入既多又雜的項目，但實際的情況是，廠商或開發者傾向於把UI弄得很亂，似乎全世界有只有自己看得懂。請看上面這張圖。同樣是按鈕，字體有大有小：有些是白底黑字的，有些是灰的；有些長，有些短；有些從上方依序往下排，有些置底，這樣不規則的版面當使用者來逛菜市場的嗎？最後讓我們來試一下後台： http://pic.pimg.tw/thisblogexist/1411129258-1079611213.png

首先，這裡再次出現了「不一致按鈕」的問題。你可能跟我一樣，覺得四塊發亮的淺藍色應該是純文字表單，不，那是按鈕。再來，是個有趣的東西，我稱之為「藏鏡人」，因為它藏在後台裡面，好像後台住了一位藏鏡人。唉呀！看來你也發現了，在這個後台介面有個長得很像後台的符號－－點進去還真的是一個後台！不對，應該說，那才是真正的後台。不愧是「藏鏡人」！本篇完。請耐心等候續集…… -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.180.97.16 ※ 文章網址: http://www.ptt.cc/bbs/AndroidDev/M.1411138894.A.D28.html ※ 編輯: dementia (175.180.97.16), 09/19/2014 23:02:10 ※ dementia:轉錄至看板 Design 09/19 23:09 ※ dementia:轉錄至看板 Digital_Art 09/19 23:10

推

tac0wu

09/19 23:11, , 1^F

09/19 23:11, 1^F

→

dementia

09/19 23:13, , 2^F

09/19 23:13, 2^F

→

JULONE780701

09/22 12:41, , 3^F

09/22 12:41, 3^F