【特別企劃】符合時代潮流的使用者介面設計　VITAL 的誕生

採當前流行的設計風格與趨勢

Vital 產品介面是根據近年流行的設計風格與趨勢，重新定義企業內部系統應呈現之面貌。應用系統介面的設計模式訴求長時間使用，與低視覺壓力的色彩搭配，強調功能性與操作面的回饋皆有別於一般網站的設計。在整體的配色上，或許使用者一時較難習慣介面色彩以灰階低彩度搭配來表現，以往國內以網頁為技術基底的應用系統，可能會運用較多的裝飾或明亮色彩、線條構成畫面，然而這樣的設計並非將應用系統視為長時間使用的應用程式。

↑不同顏色的按鈕具有不同意義，此為Bootstrap 的預設按鈕色彩建議。

應用系統的顏色安排

也具識別含意

當您將應用程式想像為您平常所使用的Word、PowerPoint 或未經設定過的作業系統介面，就能理解較無彩度的介面是應用系統的一貫設計模式，色彩作為一種操作上識別的元素，可以讓系統操作達到更多的效益。在畫面安排，透過有顏色的按鈕，可以在低彩度的介面中讓使用者聚焦，具有顏色的按鈕是系統提示使用者的建議動作，也可以減低使用者在太多色彩中，歸納理解各種色彩的含意。介面用色上，綠色常常象徵成功，而紅色是錯誤與警告，黃色可能是一些注意跟提示，藍色較常用於推薦的主要動作與綠色會交互搭配。

使用者習慣

是設計使用者介面最大的考量

在整體介面分布上，應用系統強調可用空間的最大化，與常駐的操作按鈕的安排，在主作業區與工具的搭配間如何取得最大的便利性，成為介面安排中相當困難的議題。應用系統中，作業區的行為會連帶影響操作按鈕或其他空間的反應。在Vital 系列產品中，可以發現，主選單及主要作業區的安排上是利用垂直空間做分割的，由於電腦螢幕的寬度較寬，而根據研究，近年使用者已經相當習慣垂直捲動的行為，所以畫面的選單內容或表單內容盡量利用垂直往下安排以利向下瀏覽捲動，而操作的動線則是由左至右、由上而下的閱讀順序。

企業用系統多半有許多表單與表格，以Vital Payroll 為例，以往傳統人資系統在開發上會將不具關連性的多欄位方式緊湊的放置於畫面中，根據許多情境實驗的結果，填寫表單若以多欄方式安排，使用者初次使用皆會需重新理解畫面中左右欄位的關係，同時思考應該先往右邊填寫或往下填寫。因此在Vital Payroll 中，各種填寫用的欄位，都堅持由上往下填寫的模式，除非兩個欄位是對應的關係。

   

     

介面動態

是近年介面設計的重要趨勢

介面動態的使用可以說是近年介面設計相當重要的一個趨勢，介面動態必需能夠讓使用者了解操作的連貫性，同時能夠吸引使用者注意到其操作是否有所反應，動態的使用也可以讓使用者感覺到介面的細膩度也讓整體操作上享受其細節的巧思，區塊動態間的安排也應該讓使用者可以了解到介面的空間安排，介面不應該是一個二度平面的呈現，而是在三度的空間中揭示其畫面與畫面中的順序位階。動態與介面的空間概念，正是google 於2014 年提出的Meterial Design 中相當重要的原則，Meterial Design 所提出的觀念都不是全新的，但是可以說是近五年來，介面設計成為顯學後，集大成的一個設計語言。

    
  ↑ Vital 系列產品將融入更多與使用者互動具有親和力的設計，整體系統希望能更有溫度與並具有時代感。

Vital 系列產品

將會與設計潮流共同演進

Vital 系列產品在設計上的著墨絕對不僅僅如此而已，面對設計潮流的演進，叡揚的設計團隊也持續的思考其不管在各種設計層面上的改善與演進。近年扁平風格以內容為優先的設計，將是接下來Vital 系列產品持續演進的參考設計。除了融合整體產品的識別系統，更融入更多與使用者互動具有親和力的設計，整體系統希望能更有溫度與並具有時代感。

Vital 識別系統的設計原理

Vital 的識別系統， 採用幾何元素構成Logo，象徵Vital 會是企業有效成長的根本之一，我們希望讓企業或使用者，根據所需要的服務自行租用需要的企業內部應用服務，如同積木般的logo 元素，都呼應雲端依據使用者不同自行組建所需要的企業內部系統的精神。