2015年2月2日 星期一

【筆記】IOS APP Guildline 讀後要點

一、UI設計基礎
  1. 區塊的通用名稱
  1. 按鈕的大小，不得小於 44X44 px
  2. Tab Bar 的按鈕數量，不得超過 5個，否則第5個會變成...
  3. 儘量使用已經定義的手勢，除非是遊戲，不要自己開發新手勢，已經定義的手勢有：
    1. Tap(單點觸碰)：
      • To press or select a control or item.
    2. Drag(拖曳)：
      • To scroll or pan—that is, move side to side.
        To drag an element.
    3. Flick(快速滑動)：
      • To scroll or pan quickly.
    4. Swipe(平移)：
      • With one finger, to return to the previous screen, to reveal the hidden view in a split view controller, or the Delete button in a table-view row.
      • With four fingers, to switch between apps on iPad.(iPad支援4指手勢)
    5. Double tap(雙指觸碰)：
      • To zoom in and center a block of content or an image.
      • To zoom out (if already zoomed in).
    6. Pinch(捏)：
      • Pinch open to zoom in; pinch close to zoom out.
    7. Touch and hold ()：
      • In editable or selectable text, to display a magnified view for cursor positioning.
    8. Shake(搖)：
      • To initiate an undo or redo action.
  4. 由於手機上空間有限，品牌的呈現應該優雅低調，不宜過度誇張
  1.  關於色調：
    1. 建立一套協調的色調
    2. 注意顏色對比，確保各個單元間能被清楚的看到
    3. 確保在不同的光照之下，畫面依舊能被清楚看到
    4. 理想的情況是在你的應用程序中的色彩對比度為4.5：1或更高
    5. 考慮色盲的使用者
    6. 選擇一個關鍵的顏色，表示『互動性』和『狀態』，並且避免在其他情況、頁面使用，必須維持其獨一性
    7. 不同的國家、文化，對於顏色的認知大不相同，在開發之前確認選擇的整體配色，能夠讓APP的設計理念，能被清楚的傳達
    8. 大體而言，不要讓顏色成為干擾用戶的因素。
  2. 文字內容應該可被清楚的閱讀
    1. 如果文字無法辨識，版做的多美也沒用
    2. 在不同的區塊，例如：body、Footnote, or Headline，給予不同的文字樣式，讓使用者一眼就可以分辨，是屬於不同區塊。
    3. 文字大小，應該視裝置的不同，自動改變
    4. 標題、內文、註解...的字級大小，應該要有大小配置，不能都一樣大
    5. 可接受的最小字級為12pt，預設的默認大小是17pt
    6. 在一般情況下，使用APP只使用一種字體。混合了幾種不同的字體，反而讓應用程序顯得零散和馬虎。
  3. 文字敘述：
    1. 文字敘述也是使用體驗的一部分。(記得說人話！)
    2. 專業術語是一劍兩刃，能拉近與獨特族群的距離，但會把非該族群的使用者推得更遠
    3. 用語需要簡短、直接，方便使用者快速理解。(不要文青上身)
    4. 給控制元件下個短標籤或使用容易理解的圖標。
  4. 使用標準的UI元素，設計者與使用者皆受益：
    1. 好處：節約開發時間、方便修改
    2. 使用者容易上手、理解
    3. 按照每一個UI元素的準則，You can find UI element guidelines in Bars , Content Views , Controls , and Temporary Views .
    4. 不要使用系統定義的按鈕和圖標去做別的功能，UI element guidelines有清楚標註每一個圖標的意義。
  1. 應用程序圖標(呈現在手機桌布上的圖片)
    1. 最好的應用程序圖標是獨一無二的，整潔，有魅力，令人難忘。
  2. 圖像
    1. 支持Retina顯示屏。請確保您提供高分辨率的資產在你的應用程序的所有藝術品和圖形。特別是，供給@為iPhone 6加3倍的資產和@所有其他高分辨率的iOS設備2倍的資產。
    2. 顯示照片和圖形在其原始寬高比，並沒有擴展到超過100％。你不想在你的應用程序中的圖形或圖形看歪斜或過大。讓用戶選擇是否要放大或縮小圖像。
    3. 不要使用複製蘋果的產品在設計中的圖像。這些符號受版權保護，產品設計可以經常改變。
    4. 不要使用蘋果應用程序圖標，圖像，或截圖在您的設計。蘋果的設計受版權保護，除非它們是由系統提供的不能出現在你的UI。
二、設計策略(Design Strategies)
  1. 從概念到產品
    1. 列出所有的功能你認為用戶可能喜歡
    2. 確定誰是你的用戶
    3. 經由上述2項，過濾出實際要製作的功能
    4. 不要做出讓使用者在操作過程中，會停下來的設計，例如：
      1. 使用者不需要的新功能
      2. 使用者不了解的圖示
      3. 使用者不了解的用語、標題
三、UI元素
  1. 狀態欄(The Status Bar)
    1. 是透明的
    2. 當存在時，總是出現在屏幕的上邊緣
    3. 不要創建(create)一個自定義狀態欄
    4. 為了可讀性，最好給予背景色(系統默認值或是純色)
    5. 最好不要永久隱藏，因可能會造成使用者的不便
  1. 導航欄(Navigation Bar)
    1. 是半透明
    2. 位置：通常出現在一個應用程序的屏幕的頂部，僅低於狀態欄
    3. 在常規水平的環境中，導航欄還可以顯示一個觀點，即不會在屏幕上延伸，如拆分視圖控制器的一個窗格中。
    4. 出現鍵盤的時候可以隱藏，用戶作出手勢，或當含有視圖控制器過渡到垂直緊湊的環境。
    5. 可著色。（使用tintColor到著色欄按鈕的項目;使用barTintColor來著色的欄背景。）
    6. 當用戶進入到一個導航層次結構一個新的水平，兩件事情應該發生：
      1. 導航欄標題應更改為新的層次的標題，如果適當的話。
      2. 返回按鈕應該出現在酒吧的左端; 它可以被標記上一級的標題，if it adds value.
      3. 後退按鈕還是外觀和行為像一個後退按鈕
    7. 分段控制(segmented control)：如果您使用的是分段控制的導航條，一定要選擇準確的後退按鈕
    8. 按鈕之間具有足夠的空間
    9. 盡可能，確保定制的導航欄的外觀為和整個應用程序保持一致。
  1. 工具欄(Toolbar)
    1. 是半透明
    2. 總是出現在iPhone上的屏幕或視圖的底部邊緣
    3. 也可出現在屏幕或視圖上的iPad的頂部邊緣。
    4. 出現鍵盤的時候可以隱藏，用戶作出手勢，或當含有視圖控制器過渡到垂直緊湊的環境。
  1. 導覽列跟工具列的按鈕
  1. 標籤欄(Tab Bar)
    1. 一個標籤欄給人以應用不同的子任務，視圖或模式之間切換的能力。
    1. 是半透明
    2. 總是出現在屏幕的底部邊緣
    3. 不超過五個（如果超過，第五個會變成More，如上圖1）
    4. 保持相同的高度在所有方向
    5. 可一個標籤進行通信的應用程序特定的信息上顯示徽章（徽章是包含白色文本和一個數字或感嘆號的紅色橢圓

  1. 標籤欄圖標
控制-一些ISO內建元素
  1. 活動指示燈(Activity Indicator)
  2. 聯繫方式添加按鈕(Contact Add Button）
  3. 日期選取器(Date Picker)
  4. 詳細披露按鈕(Detail Disclosure Button)、信息按鈕(Info Button)
  5. 標籤(Label)
  6. 網絡活動指示燈(Network Activity Indicator)
  7. 頁面控制(Page Control)
  8. 選擇器(Picker)
  9. 拾取器:(A picker:)
  10. 查看進展(Progress View)
  11. 刷新控制(Refresh Control)
  12. 圓角矩形按鈕(Rounded Rectangle Button)
  13. 分段控制(Segmented Control)
  14. 滑塊(Slider)
    1. 不要使用滑塊來顯示音量控制。如果你需要顯示音量滑塊，使用所提供的系統音量滑塊可用時使用MPVolumeView類。
  15. 步進(Stepper)
  16. 開關(Switch)
  17. 系統按鈕(A system button:)
  18. 文本字段(Text Field)
四、圖標，形象設計(Icon and Image Design)
  1. 圖標和圖像尺寸
    1. 一開始設計的時候，不需要將調色板限制為網頁安全色
    2. 表41-1的自定義圖標和圖像尺寸（像素）
財富
iPhone 6加（@ 3X）
iPhone 6和iPhone 5（@ 2X）
iPhone 4S（@ 2X）
iPad和iPad的迷你（@ 2X）
iPad 2和iPad的迷你（@ 1X）
應用程序圖標（所需的所有應用程序）
180×180
120×120
120×120
152 x 152
76×76
對於App Store的應用程序圖標（所需的所有應用程序）
1024×1024
1024×1024
1024×1024
1024×1024
1024×1024
啟動文件或圖像（所需的所有應用程序）
使用一個啟動文件（見圖片發射）
對於iPhone 6，使用一個啟動文件（見圖片啟動）
640×960
1536×2048（縱向）
768×1024（縱向）


對於iPhone 5，640×1136

2048×1536（橫向）
1024×768（橫向）
Spotlight搜索結果圖標（推薦）
120×120
80×80
80×80
80×80
40×40
設置圖標（推薦）
87×87
58×58
58×58
58×58
29 X 29
工具欄和導航欄圖標（可選）
約66 X 66
約44 x 44
約44 x 44
約44 x 44
約22×22
標籤欄圖標（可選）
約75×75（最大：144×96）
約50×50（最大：96×64）
約50×50（最大：96×64）
約50×50（最大：96×64）
約25×25（最大：48×32）
對於App Store的默認報亭蓋圖標（所需的應用程序報刊亭）
最長邊至少1024像素
最長邊至少1024像素
最長邊至少1024像素
最長邊至少1024像素
上的最長邊​​至少512個像素
網頁剪輯圖標（建議Web應用程序和網站）
180×180
120×120
120×120
152 x 152
76×76

  1. 應用程序圖標
    1. 簡潔、容易識別
    2. 確認做出來的圖標，在各種背景上都清晰可見
    3. 避免透明度
    4. 不要用iOS界面元素，此舉會造成用戶混淆
    5. 做成正方形就好，圓角是上版時設定裁切
  2. 圖片發布
  3. 欄按鈕圖標
  4. 報亭圖標
  5. 的Web Clip圖標
  6. 創建可調整大小的圖片
Posted by 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)