【特別企劃】app UI 設計超詳解！ 該怎麼設計才不會惹火User
設計行動裝置介面，並不能以滑鼠操作Web介面的方式來思考，當使用者手中握持一個螢幕畫面，需要專注並減低操作錯誤，因此介面設計師必須跳脫原本習慣的設計模式，重新用手體會，在體會的過程中，必須專注每個動作與回饋的意義。而如何設計出一個良好的行動裝置用的介面，大量的參考各種優秀的行動裝置app就是相當重要的習慣。
我要解決什麼問題？這是我接收到一個產品設計需求第一個要想的想法。一個產品要能夠給予使用者怎樣的幫助，我們如何從各種經驗中，嘗試讓使用者導向一個良好的解決方式，是身為介面設計師必須仔細思考的。
Vitals/KM是我們幫助使用者群體建立組織知識、檢視知識、查詢知識的工具。以往我們提供了Web版的介面，讓使用者可以在各種擁有網路的環境中使用Vitals/KM，也設計了Mobile Web版本的介面，讓使用者可以用簡潔舒適的方法檢視組織內的知識物件。然而我們也思考到，除了檢視之外，使用者之中有許多是外勤或業務人員，這些人員往往需要能夠隨時將獲得的資訊，在不可或可預期的情況下將內容快速的記錄下來。而這些處境中我們開始思考透過軟體可以怎樣解決？使用者會遇到哪些比較常發生的問題？要如何讓使用者快速的紀錄？
經過一番討論，我們認為使用者現在身邊最常帶的軟體載具就是智慧型手機，也是除了紙張以外最容易利用來記住東西的工具，外勤或業務人員不會想要帶著電腦隨時隨地的走動在任何情境中。但是現在行動裝置可以說是人們隨時貼身不離的工具，你可能不會常常帶著電腦在上廁所，但是卻會在廁所裡玩起PokoPang或神魔之塔，所以行動裝置會是我們設計一款需要隨時有可能記錄知識、查詢知識時需要優先考量的方案，因為你很可能在上廁所時就想到一個很棒的點子需要記錄下來與其他同事討論。
黃金法則
1.離線也好用
以往在組織內的知識管理系統中，在我們的統計中瀏覽知識的行為，佔了絕大多數，然而要有可以被瀏覽的知識，必然要有知識被建立進去。如何方便的建立知識就是這次設計中相當重要的環節。而往往我們在外部使用手機擷取建立資訊的時候也會遇到網路不穩或者沒有網路的情況。所以在這種情境下可以讓使用者依然能立即記錄下腦中的東西，也是必須加入產品設計考量的一部分，因此我們設計了離線記事的功能，您可以將任何的想法或記錄透過離線筆記暫時存於手機中，當回到網路穩定的情況時，您可以將筆記轉換為正確的知識類型，填入其他欄位並上傳到公司的Vitals/KM中，或者您所建立的知識物件也可以暫時存到草稿夾中，之後隨時補完後再上傳到Vitals/KM裡。而這都是讓使用者可以更容易建立知識的一環。
2.關注長時間閱讀的舒適性
面對需要有大量閱讀且圖片較少的介面設計，在這樣的前提下，我們從較多閱讀類的app作為研究的對象，例如RSS閱讀類app即是代表性的內容閱讀為重的類別，從像是Reeder、Feedly、Pocket等app，都採用全面幾近米白色的畫面設計，甚至通常會採用主題色的頁頭都是灰階色處理。因此我們也考量根據這種思維，整體介面在區塊層次的設計上採用高明度低彩度的灰白色調，而畫面若特別需要強調的按鈕等，才會採用較亮麗的藍色作為吸引使用者點擊的目標。或許第一眼觀看會較為不具特色，但是對於長時間瀏覽卻是相當容易閱讀的設計。在於系統建立知識物件方面，這次我們有別原本在Web版的Vitals/KM中新增內容的方式，以往我們先尋找到指定的資料夾再選擇知識類型新增內容，但是這次我們重新思考，當使用者打開app就想要立即新增東西的話，先思考到”我想要新增什麼”會是使用者優先想到的，所以我們讓系統中，隨時可以使用新增按鈕，點擊後就會顯示常用知識類型。而選擇資料夾的流程合併於撰寫物件時的層次。另外如果使用者在某個資料夾中點擊新增按鈕，app中也會自動將當下所處的資料夾帶入新增的知識物件中，使用者可以省去自己選擇的步驟。
3.尊重User最直覺的操作
在於系統建立知識物件方面，這次我們有別原本在Web版的Vitals/KM中新增內容的方式，以往我們先尋找到指定的資料夾再選擇知識類型新增內容，但是這次我們重新思考，當使用者打開app就想要立即新增東西的話，先思考到”我想要新增什麼”會是使用者優先想到的，所以我們讓系統中，隨時可以使用新增按鈕，點擊後就會顯示常用知識類型。而選擇資料夾的流程合併於撰寫物件時的層次。另外如果使用者在某個資料夾中點擊新增按鈕，app中也會自動將當下所處的資料夾帶入新增的知識物件中，使用者可以省去自己選擇的步驟。
4.些許趣味吸引點 增加使用互動
在進入app時，瞬間從畫面左側滑入的藍色圓球，相當容易吸引使用者的注意，這個動作一方面也提示使用者頁面有確實的回應，也讓使用者可以注意到這個"+"號是吸引人去點擊的，在點擊後，往上將會以弧形的方式彈出幾種知識類型的按鈕，這部份的動態一方面讓使用者可以在其中感受到操作中的回饋與趣味，一方面也在這種有趣的過程中增加願意新增知識物件的心理。
5.一指神功 介面千萬要考量
而新增按鈕所滑入的位置目前我們先依據左手握持手機的模式，大拇指會容易按到的水平距離為主，但是當面對各種大尺寸的智慧型手機時，這顆新增按鈕並不會繼續貼齊於右側，而是依然保持於拇指可以碰觸到的距離。另外點擊新增按鈕後所彈出的常用知識類型，抑是作手握持後拇指可以延展觸擊的弧形區域，讓使用者選擇知識類型時能夠很容易完成動作。這些細節都是希望使用者在各種匆忙的情況下，可以快速的進入新增的畫面，並立即的輸入內容，減少失誤的發生。
6.大螢幕成趨勢 當紅app設計做參考
新增按鈕的位置安排，我們也參考了各種app的新增模式，歸納出了兩種方向。有許多app，往往會將新增的按鈕置於畫面右上角。然而我們也發現有許多app例如：Tumblr、iOS Mail、Path、Instagram等，選擇將新增放於畫面下方，而為何需要放到畫面下方更與當今行動裝置螢幕尺寸不停的變大有相當大的關係，因為當我們單手握持手機時，右上角已經是相當難於4.3吋以上的手機上利用拇指點擊到的區域。於是我們也認為，盡量將大部分的操控放置於畫面拇指可以觸擊的區域，並利用手勢來規劃常用的操作，是新一代大螢幕介面設計需要考慮的設計模式。
7.專注當下 輸入內容不出錯
進入了新增的畫面後，Vitals Mobile中會有相當多的欄位類型，針對這些欄位類型，我們選擇保持每一個欄位項目的高度，當需要選擇或輸入一些多行文字欄位內容時，會將畫面帶入到另一個畫面中，這樣的設計思維就是讓使用者在處理輸入資料的環節時，專注於目前這個項目上，在操控上不會受到其他欄位的影響，這種同時間專注於一件事的設計思維，在行動裝置較小的畫面中都是相當重要的設計模式，減低視覺上其他物件的干擾，專注於目前系統希望使用者進行的任務，並透過色彩或任何視覺元素影響使用者導引入設計好的流程中。
8.輕易的認識區塊空間關係
在系統介面的設計中，當代的系統介面所考量的已經不單單是平面的區塊配置，如何妥善的利用3D空間的思維來規劃介面是相當重要的課題。而在空間的配置上利用動態來提示空間的關係也是一門學問。在Vitals Mobile中，我們將畫面主要分為：選單、列表、內容，三個層次。當畫面中一個區塊進入操作區時，將前一個畫面往後退並稍微縮小，都是讓使用者可以輕易的認識區塊空間關係的手法。
9.跳脫原本習慣的設計模式
設計行動裝置介面，並不能以滑鼠操作Web介面的方式來思考，當使用者手中握持一個螢幕畫面，如何專注並減低操作錯誤， 介面設計師必須跳脫原本習慣的設計模式，重新用手體會。在體會的過程中，必須專注每個動作與回饋的意義。而如何設計出一個良好的行動裝置用的介面，大量的參考各種優秀的行動裝置app就是相當重要的習慣。在前面的內容中我們就提及了許多其他的案例，對於設計師思考每一個環節都是很好的學習資源，然而不一味的限於這些經驗中，思考每個設計的優點、缺點更是一個成熟的設計師必須擁有的敏銳度。期許各位在使用Vitals Mobile時可以體會到在這之中的每一個巧思。