Apple的制定的人機介面規範到底在寫什麼？
此篇文章將以1828王老吉涼水舖app為例，介紹Apple所制定的Human Interface Guidelines(HIG)。
這幾天在看Apple所制定的Human Interface Guidelines(HIG)，並順手整理了一下1828王老吉涼水舖這款app目前設計上的缺失，希望能藉由這個範例的解說，讓大家更了解使用者經驗(UX)與Apple所做的HIG設計指南，就跟著我一起學習其中的精神吧！
icon上不應該有文字
首先，雖然1828王老吉涼水舖app的icon看起來很精緻，但在手機主屏幕上看起來很小（如圖右），很不清楚。所以我認為應該要把icon上的文字拿掉，讓具有代表性的葫蘆變大、變清晰。
Apple的HIG設計指南上也指出，除非文字是logo很重要的一部分，否則icon上是不建議放上文字的，因為在主屏幕時，icon的下面即可放上文字。原文規範如下：
Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name.
不過這只是小錯誤而已，進入app以後，才是問題的開始。
下面我就只提幾個比較大的缺失。
狀態列、標籤列的顏色不當
首先，最基本的，最上面那條狀態列(Status Bar)提供使用者重要的資訊，例如時間、手機連線狀態、電量等，但此app的狀態列是黑色字搭在深藍色底，根本就看不清楚。
Apple的設計規範也有提到，狀態列的顯示需要依據app的設計是淺色底還是深色底，因應變成黑色或白色狀態列，我想這很基本。原文如下：
Coordinate the status bar style with your app design. A dark status bar works well above light-colored content and a light status bar works well above dark-colored content.
其次，最下面那個標籤列(Tab bars)，正活躍(active)的頁面顏色居然是最不清楚的！除此之外，Apple對於按鈕圖示的建議是，只有單一顏色，所以很明顯地，這個標籤列後面還映著灰黑色的圓圈是一種多餘。
Apple規範原文如下，按鈕圖示不應該包含任何陰影，因為那是以前iOS版本的設計。按鈕圖示的設計應該只使用單一顏色，且在透明的背景下。
You should never include any additional effects such as a drop-shadow or inner shadows on button icons because these are relicts from previous iOS versions (before the iOS 7 redesign). Button icons should be drawn in one solid color on a transparent background.
文字不夠清晰 色彩對比度不足
首先，我看了三個頁面的的背景底色（淺藍色），看起來都頗像，但色碼居然都不一樣！不知道是設計師故意的還是工程師太隨性？
用線上算顏色對比度的網站算了該app的 背景底色淺藍色(#9BD2DE) 與 文字的白色(#ffffff) 對比度只有1.65，但不論是Apple、w3c都指出背景與文字的色彩對比度至少要達到4.5以上。
Apple認為，色彩對比度至少要達到4.5以上，但7以上才有達到嚴格的易用性標準，原文如下：
Use sufficient color contrast ratios. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.
另外，讓我們看看w3c制定的網站規範(WCAG) 2.0：
level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
我個人認為，這裡的文字應該用黑色(#000)取代白色(#fff)，這樣文字與背景的色彩對比度就可以達到12.66，但問題是黑色與他的重點色(深藍色)又太過接近，所以這設計可能要從頭規劃起。
遊戲的玩法說明不應該是跳出視窗
來到第三個tab「字花攤」的時候，跳出一個字很多、排版很亂的玩法說明，使用者在接觸到字花攤更多內容前，並不會對說明有興趣，所以不會仔細看，也不會用心記，所以在一進入字花攤時即跳出視窗仔細說明玩法，我認為是一個不明智的設計。
讓我們看看Apple對於alerts的設計規範，Apple認為應該減少使用的alerts的次數，alerts應該只用在重要的地方，例如確認購買、毀滅性的動作（如刪除）或通知使用者發生問題。原文如下：
Minimize alerts. Alerts disrupt the user experience and should only be used in important situations like confirming purchases and destructive actions (such as deletions), or notifying people about problems.
結論
批評別人的作品是一件比較容易的事，但要自己做出一個沒有盲點的作品是比較困難的事。我希望能藉著這個範例傳達出User Experience(UX)的精神，並讓我們的設計越來越人性化。
拍 10 下：簽個到，表示支持（謝謝你的鼓勵）
拍 20 下：想要我未來多寫「生活觀點」
拍 30 下：想要我未來多寫「職場生產力」
拍 50 下：我有你這讀者寫這篇也心滿意足了！