Android UI 設計筆記

一、設計原則
     •理解Android的外觀和感覺
          4.x版本簡單、平面、乾淨，注重功能本身。
     •基於心理模型
          將後臺複雜的事情設計成符合使用者常用的瀏覽模式和操作模式。
     •以使用者使用情景的思維方式做設計
     •為不同的裝置設計
          確保在大部分的裝置上正常執行，適用於不同的螢幕尺寸和螢幕方向，適用於低亮度或對比度較差的螢幕，和速度慢的低配置機器。注意：使用對比強的文字和元素顏色，避免使用白色或淺灰色。在不同亮度環境下檢查效果。確認UI元素和文字在小螢幕或者低解析度螢幕上顯示足夠大。
     •使用density-independent設計佈局
          確保每個螢幕上顯示的元素的物理尺寸一致
     •為不同的解析度設計
          一般從640X960開始，然後縮小到其他解析度。MDPI:HDPI:XHDPI:XXHDPH:XXXHDPI=2：3：4：6：8。
     •考慮不同的系統版本
          儘量提供最新的體驗，舊平臺的可以建立一個單獨的版本。
     •提供擴充套件元件和桌布
          桌面元件、桌布、訊息通知。
     •為平板裝置設計
          需要更大的字型、按鈕、留白。多窗格佈局。




二、設計風格
     •扁平化設計
           拒絕特效，僅僅採用二維元素，不加修飾（陰影、斜面、突起、漸變等）
           僅僅使用簡單的元素，使用簡單的外形。
           注重排版。字形應該使用粗體，文案精簡幹練。字型選擇無襯線字型，通過字型大小和比重來區分元素。
           配色更明亮、絢麗，平均使用6~8種顏色。使用純色，不做淡化或者柔化處理。
           簡約方案。避免不必要的元素，注重效率的最大化。
     •卡片式設計
           將頁面切割成N個區域，給人很好的視覺一致性，易於設計上的迭代。
           卡片以垂直的方式展現，是響應式的，易讀，可共享。
           用於解決：資訊分類、導航、任務管理。
           缺點：對頁面空間消耗大，將內容元之間割裂，一屏呈現的資訊量很小。
           當使用者需要大範圍掃視、接受大量資訊時會降低效率。


三、佈局


常見佈局：
     •相對佈局
          padding指控制元件內部內容離控制元件邊界的距離。layout_margin指該控制元件距離父控制元件的邊距。
     •線性佈局
          gravity是佈局中控制元件的對齊方式，如果沒有子控制元件則為控制元件內容的對齊方式。
          layout_gravity為控制元件在父佈局容器中的對齊方式。
     •幀佈局
          全堆放在左上角，後新增的控制元件覆蓋前面的控制元件。例如TabHost。


優化佈局：
     •複用佈局
          <include>、fragment
          注意，<include>指定了id的話，其佈局裡面的控制元件必須先獲得該佈局再findviewbyid，否則會報空指標。只有間接才能獲得相同id的控制元件。
          <merge>用於根元素，可以解決重複節點造成的浪費。view.inflate(int resource,ViewGroup root,boolean attachToRoot),attachToRoot為true.
     •多裝置支援
          建立不同螢幕尺寸的佈局檔案。放在適當的目錄下，如layout-large。檔名必須一致。
          建立橫豎屏的佈局檔案，layout-land橫向,layout-port豎向


佈局設計原則
     •為高解析度的螢幕建立資源
     •需要點選的元素要夠大
     •圖示設計遵循Android準則
     •使用適當的間距
     •支援D-pad和trackball導航
     •正確管理activity堆疊
     •正確處理螢幕方向變化
     •使用主題樣式、尺寸、顏色資源來減少多餘的值


     需要關注
     •螢幕物理尺寸
     •螢幕密度DPI
     •螢幕方向
     •UI互動方式
     •軟鍵盤還是物理鍵盤
     •裝置差異


佈局設計技巧
     •合理利用UI空間
          共享空間——多個介面的跳轉和不同狀態之間的切換。（標籤、滾動、翻轉切換）
          expandableListView（擠壓式介面佈局）
     •注意拇指死角
          分為探索熱區（拇指觸及的扇環區域）和非探索熱區。死角區誤操作率高。
     •橫屏模式下需要考慮拉伸適配還是重新設計。
          遊戲類直接在啟動時切換到橫屏。
          視訊類可以做引導動畫效果切換到橫屏，可以將導航欄、工具類設定為隱藏或者透明。
          儘量避免重組資訊，考慮改變展示輔助資訊功能的方式，為每一種方向提供獨特的啟動圖片。
     •觸控設計
          擴大操作焦點：Android4.0規定 有效可觸控的UI元素標準是48dp。建議目標大小為7-10毫米。
          下移操作焦點：將有效點選區域向下向右（右手持機）偏移幾畫素。


四、使用hierachy viewer除錯介面
     •啟動
           SDK/tools下的hirerachyview.bat
           Windows-open perspective-hierarchy view
      •檢視控制元件層次 Load view hierarchy
      •頁面精確檢視模式  Inspect Screenshot             




五、應用主頁設計技巧
     •連結列表式（快速啟動板）
          主頁面中選單選項就是進入各個應用的起點，常見的包括3X3、2X3、2X2等網格形式。
     •列表選單式
          可分為 分組列表、個性化列表、行內擴充套件式列表、增強性列表。適合顯示較長或者擁有次級文字內容的標題。
     •選項卡式
          類似於標準網站的導航模式。不同的選項卡顯示不同的應用，可以水平滾動選項卡，數量一般不超過7個。
     •陳列館式
          在平面上顯示各個內容項類實現導航。可佈局成輪盤、網格、幻燈片演示。一般用來顯示文章、菜譜、照片、產品資訊。
     •隱喻式
          顯示一些隱喻的物件，主要用於遊戲應用，在組織事物、分類的應用也可看到，如日記、書籍等。


六、使用者體驗設計
     產品架構是否清晰：
     •產品結構清晰，沒有不必要的層級
     •能夠快速瞭解產品有幾個主要頁面
     •所有主要部分都能夠通過首頁訪問
     •清晰地指示當前位置
     產品流程是否清晰：
      •明確產品有幾個主要的任務流程
      •每個任務流程清晰，沒有太多分支
      •任務流程符合使用者操作流程
      •使用者可以取消正在執行的操作
      •操作成功或者失敗都有明確的反饋
      •在每個層級都可以找到返回上一級的方法
      •預防出錯，如果出錯要幫助使用者從錯誤中恢復過來
      •複雜的互動是否有很好的引導和幫助
     控制元件使用是否準確：
      •控制元件使用準確性
      •控制元件的複用
      •控制元件的狀態
      •連結色的準確使用
      •焦點狀態的準確使用
     資訊傳達是否到位：
     •佈局清晰
     •文案簡潔
     •沒有術語
     •合理排版（標題、作者、時間的字號、字色，頁邊距的運用）
     •標籤和內容的從屬關係
               
七、widgets設計與事件處理
     表單控制元件設計
     文字控制元件：
      •textview
           ellipsize可以設定文字的顯示方式，marquee為跑馬燈方式顯示。
      •edittext
           hint為指定輸入提示資訊，inputtype指定輸入型別
      輸入監聽：（物理鍵盤和軟鍵盤不能同時監聽）
          物理鍵盤
               setOnKeyListener(){
                    onKey（）
                    {
                         if(event.getAction()==KeyEvent.ACTION_DOWN && keyCode==KeyEvent.KEYCOSE_ENTER) //回車
                    }
               }   
          軟鍵盤
               setOnEditorActionListener{
                    new Textview.onEditorActionListener()
                    {
                         onEditorAction()
                              {
                                   if(actionId==EditorInfo.IME_ACTION_DONE) //軟鍵盤迴車
                              }
                    }
               }
     •TextSwitcher為文字設定動態效果。
     •AutoCompleteTextView和MutiAutoCompleteTextView完成文字框自動輸入功能。


     字型排版
          基於12、14、16、20、34號字型排版縮放（sp）。
          文字應當滿足最低對比度4.5:1（明度）。7:1是最適合閱讀的。
          每行包含60個左右的字元。


     按鈕控制元件
          •Button
          •ImageButton
          •ZoomControls，包含放大縮小按鈕，監聽
               setOnZoomInClickListener(new onClickListener(){
                         onClick(){}
               })
           ZoomButton用法類似。
          •RadioGroup和RadioButton.單選按鈕
          •CheckBox.多選按鈕


     按鈕風格：
          懸浮相應按鈕：點選後會產生墨水擴散效果的圓形按鈕。
          浮動按鈕：常見的方形紙片按鈕，點選後會產生墨水擴散效果。
          扁平按鈕：點選後產生墨水擴散效果，沒有浮起的效果。


     按鈕設計原則：
          對話方塊中使用扁平按鈕，在內部四周留出足夠空間。
          持續可見的功能按鈕推薦使用懸浮相應按鈕。
          非主要、快速定位的按鈕可以使用底部固定按鈕。不要在底部固定按鈕的區域內使用浮動按鈕。


     進度條控制元件
          •長形進度條、圓形進度條ProgressBar。
               設定樣式：style="?android:attr/ progressBarStyleLarge"超大圓 Small 小圓  SmallTitle標準圓
               長形：style="?android:attr/ progressBarStyleHorizontal"
               android:max="100"最大進度值 android:progress="50" 初始化進度值 android:secondaryProgress="70" 初始化底層第二個進度值
          •可拖動進度條SeekBar。
               SeekBar.OnSeekBarChangeListener.
          •星型評級控制元件RatingBar。


     介面卡控制元件：
          實現自定義介面卡、定義控制元件、繫結控制元件、適配資料、監聽事件。
          •Gallery：鎖定中心條目並且擁有水平滾動列表的檢視，一般用於一組相同尺寸圖片的顯示。
          •Spinner：下拉選單框控制元件，提供快速選擇的方式。預設顯示當前選中的項，觸控後顯示其他可選項的下拉選單，使用者可以做出新的選擇。
               生成ArrayAdapter,通過adapter.setDropDownViewResource()設定下拉選單樣式，setAdapter繫結資料來源，setOnItemSelectedLisener()響應下拉選單選擇。
          •ListView:顯示一組列表項的列表檢視，列表項可以是組合項。
               長按是OnItemLongClickListener.
          ListActivity是activity的子類，用於顯示一個繫結到陣列或者遊標等資料來源的列表，併為列表的每一項提供單擊事件的管理方法。
          •GridView是一種在平面上可顯示多個條目的可滾動的柵格檢視控制元件。
               columnWidth設定列寬度，numColumns設定列數，horizontalSpacing設定列間距，verticalSpacing設定行間距，stretchMode設定縮放模式。


     介面卡大資料載入
          •分頁顯示
               水平分頁顯示，n/m頁形式。
          •拖動重新整理
               下拉重新整理最新資料，上拉重新整理歷史資料。
          •垂直定位
               在右側顯示A~Z的索引列，可以單擊索引中字母快速定位。（聯絡人）
               右側設計垂直滾動條，並顯示位置索引。
          •支援批量操作
               選擇、新增、刪除、排序。


     按鍵事件處理
          •物理鍵盤監聽 onKeyDown,onKeyUp.
          •軟鍵盤監聽 
               顯示/隱藏監聽：
               InputMethodManager imm=(InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)；
               if(imm.isActive()) //顯示軟鍵盤時關閉軟鍵盤
               {
                    imm.toggleSoftInput(InputMethodManager.SHOW_IMPLICIT,InputMethodManager .HIDE_NOT_ALWAYS);
               }


               按鍵監聽：
               dispatchKeyEvent()


     觸屏事件處理
          onTouchEvent()
          多點觸屏通過event的getPointerCount()獲取觸屏點個數。


     手勢事件處理
          手勢類別：
               觸控，長按，滑動，拖動，雙擊，雙擊拖動，放大，縮小。


          GestureDetector類將基本的觸屏事件轉變成不同的手勢動作。通過實現GestureDetector.OnGestureListener介面來構造例項，少部分手勢動作處理可繼承GestureDetector.SimpleOnGestureListener。
          主要回撥方法包括：
               •onDown().輕觸單擊
               •onShowPress().輕觸單擊，尚未鬆開或者拖動
               •onSingleTapUp()。輕觸單擊後鬆開（單擊後立即鬆開）
               •onFling().按下、快速移動後鬆開觸發。
               •onLongPress()。長按
               •onScroll()。按下並拖動。


     手勢設計技巧
     •減少無用手勢
     •善用區域性手勢
     •注重淺性引導
          露出功能某一部分、到達界限值給出文字動畫提示、進入具有手勢操作的介面時給出氣泡動畫圖片提示、通過擬物的方式提示（繩子、開關、滑塊、掀起頁尾）。
     •提供反饋


     感應器事件處理
          感測器通過監聽機制實現，其步驟如下：
          建立SensorManager物件。Context.getSystemServiceContext (Context.SENSOR_SERVICE)
          實現SensorListener介面。onAccuracyChanged(),onSensorChanged().
          註冊SensorListener.SensorManager物件registerListener(). 取消註冊時呼叫unregisterListener()。 一般來講註冊和取消註冊成對出現，如果在onResume中註冊，在onPause中取消註冊。




widgets設計技巧
         •按鈕狀態
               不可點選狀態、可點選狀態、聚焦狀態、按下狀態。如果處於不可用狀態要灰掉或者隱藏按鈕。
          •選單項以5~7個為宜，二級選單注意合理分類。
          •每頁顯示6~10個列表，每行顯示10~16個字，標題5個字以內，標籤欄2~3個字。 如果文字過長，選擇型的截斷或者打點省略，如果內容閱讀型，折行。
          •語言精簡，使用使用者語言，準確傳達資訊。
          •分清主要任務和次要任務，清晰流程，不要有太多分支。
          •相關選項要有操作上的延續性，不要離得太遠。
          •節約流量、電量，提升瀏覽速度和瀏覽體驗。可以利用預載入快取、批量載入、動態重新整理、服務端資料壓縮等方式保證基礎體驗。
          •圖示可以做小，但是點觸範圍不要比圖示小。
          •標籤頁和內容要有聯動關係，最多二級標籤。當標籤頁是點選切換時，內容可以整體重新整理，當標籤頁是滑動切換時，內容也要滑動切換。
          •需要將功能和操作做個優先順序設定，常用的20%可以放在介面主要位置上，其他的放在次要位置或者合理歸類組織後隱藏起來。
          •空資料頁面，提供情感化的介面，引導使用者去執行建立內容的操作。
          •通用的功能、非重點模組不需要引導，功能告知需要輕量級的引導，版本更新說明可以採用說明式的引導，但要言簡意賅。
          •手機聯網、交換資料時要提供載入中狀態，旋轉進度條或者toast都可以，要告知開發人員載入中是前臺還是後臺的，且要考慮載入時間過長、網路開關沒有開啟、網路不通的情況怎麼處理。
          •注意返回鍵的使用，具體定義是例項的替換還是回到控制元件的初始狀態等。
          •橫屏模式需要考慮是簡單拉伸適配還是重新設計，如果應用不適合在橫屏模式下使用，就遮蔽掉橫屏。




表單控制元件設計技巧
          •清晰的視覺縱線
               L型視線，導航和重要操作在下面。
          •資訊分組
               同一類表單可以放在一起，表單太長時可以拆分成不同的組。
               分組一種是以摺疊列表的方式顯示相關分組，一種是以分屏的方式顯示相關分組。
          •極致的減法
               表單中最好不要新增不需要的資訊，不常用的可以隱藏，通過某個入口進行新增。
          •利用選擇代替輸入
          •標籤及提示文字的排版方式：不要過於佔用垂直空間
          •依靠明文確認密碼    
               除了重複輸入兩次密碼外，可以採用其他辦法：
               預設明文，可選暗文。最後一位明文。全部明文。預設暗文，可選明文。對話方塊確認密碼輸入正確。
          •支援滑塊輸入
               滑塊直觀，對特定範圍的資料輸入非常實用，外形美觀，易於操作，佔據螢幕控制元件不多。
          •合理的鍵盤利用
               網址——網址輸入鍵盤。數字——數字鍵盤。電話——電話號碼。姓名——中文。郵箱——郵箱。
         •及時的校驗反饋
               每輸入一個表單項系統就立即告訴使用者填寫是否正確。




資料載入模式設計
     •全屏載入
          整個螢幕白屏進行資料載入，一般有旋轉的載入等待提示。保證內容的完整性，有非常強烈的等待感。常用於手機網頁的載入。
     •優先載入
          在載入圖片比較慢的情況下先載入文字，再載入圖片。這種方式不能將重要資訊放在頂層圖片，也最好不要用圖片按鈕操作。可以幫助使用者快速閱讀內容，瞭解資訊，可能會丟失重要的資訊，無法建立資訊獲取的閉環。適用於內容閱讀型應用。
     •整頁載入
          保證每個頁面的資料量不是特別大，優點是能保證每個頁面的完整性，體驗比較整體。缺點是不能保證整頁的載入效率，可能影響瀏覽的流暢度。適用於宮格圖片、全屏圖片、網狀詳情頁。
     •自動載入
          適用於長列表的情況，可以設定規則。如預設載入20條，當滾動到第20條再自動載入20條。代入無盡瀏覽模式，不需要手動點選下一頁，缺點是不方便快速索引定位到某個內容。適用於瀑布流、長列表、商品列表等情況。
     •智慧載入
          根據網路狀況智慧調整，根據具體場景來控制流量和載入速度，缺點是不一定真實有效地命中使用者需求，所以要給予設定項。適用於有大量圖片或視訊的應用。
     •離線載入
          在使用者沒有連線網路時，採用預載入+離線快取的設計。在連線網路時將資料提前載入並快取到本地，沒有網路時直接載入已經快取的內容。使用者可以選擇是否開啟WiFi下的預載入功能。解決了沒有網路時獲取資料的問題，節約流量，保證流暢，缺點是佔用本地空間，有時候預載入的內容沒有用到。適用於小說閱讀、新聞閱讀、視訊類。
     •支援非同步任務
          在等待介面時允許其他操作。


搜尋設計技巧
     •自動輸入提示
          當文字框獲得焦點時，搜尋框展開顯示歷史搜尋建議，或者智慧給出參考。
     •語音輸入
          點選麥克風按鈕啟用語音搜尋，提高搜尋簡易性。
     •儲存搜尋記錄
          儲存使用者搜尋記錄並顯示最近搜尋內容，使用者不需要再次輸入相同的關鍵詞。能極大地提高使用者輸入效率。
     •將結果與本地結合
          將使用者的搜尋結果做一個本地化處理，並能在搜尋結果頁直接啟動導航或者開啟地圖，提高效率和體驗。
     •移動即時搜尋
          保證搜尋結果的新鮮感，時效性。基於位置的搜尋。
     •顯示搜尋結果
          鍵盤隱藏，搜尋框失去焦點。搜尋結果顯示為表格或者列表樣式，地圖搜尋直接顯示錨點，可以將結果格式化為卡片。延遲載入。提供多種檢視。搜尋結果過多時提供一個“檢視更多結果”按鈕。


 八、對話方塊、選單、導航


     通知
          •toast
               簡單的彈出式資訊，適用於確定使用者正在關注螢幕時顯示簡單資訊。不接受互動事件。
          •notification
               在狀態列顯示簡要資訊，將狀態列下滑可以開啟通知抽屜，單擊訊息會開啟相關應用。適用於程式在後臺服務工作時，需要通知使用者某一事件時使用。
               以下情況不應該使用notification通知：
               和使用者沒有直接關係或者不是時間敏感的事件。如果事件已經顯示在螢幕上了就不要用notification了。如果應用可以自己處理的技術就不要問使用者。不要用錯誤資訊打擾使用者。不要通知使用者無法手動開始或者停止的服務。
          •對話方塊
               alertdialog，progressdialog，datepickerdialog，timepickerDialog。
               注意dismissdialog是使對話方塊消失但還處於記憶體中。removedialog從記憶體中將dialog清除。


     選單
          •options menu
               按下menu鍵後顯示在螢幕下方的選單，最多隻能顯示6個選單項，只支援文字和圖表，可以設定快捷鍵。
          •context menu
               長按一個註冊了context menu的view彈出的浮動選單專案列表，相當於右鍵選單。
               
     動作欄
          •actionbar
               API 11引入的概念。主要作用包括：突出重要操作；提供統一導航和檢視切換體驗；較少使用的功能收集到其他操作選單中，減少介面上的雜亂佈局；為應用提供展示特點的空間。


          •actionmode
               浮於標題欄上的臨時操作欄，用來放置一些特定的子任務。顯示使用者可以對當前選中專案進行的操作選項。
               
     導航
          •應用圖示導航
               動作欄左側顯示應用圖示，使用者單擊時回到父級activity或者回到初始狀態。
               例如使用者單擊時回到父級activity ：
                    onStart(){
                    ActionBar bar=this.getActionBar();
                    bar.setDisplayOptions(ActionBar.DISPLAY_HOME_AS_UP,ActionBar.DISPLAY_HOME_AS_UP);//點選圖示返回父級activity
                    //或者為圖示增加一個箭頭，作用一樣
                    bar.setDisplayHomeAsUpEnabled(true);
               }
               該圖示id為android.R.id.home.
               例如點選圖示跳轉到MainActivity:
               onOptionsItemSelected()
               {
                    switch(item.getItemId() )
                    {
                              case android.R.id.home :
                              Intent intent=new Intent(this,MainActivity.class);
                              intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);//要啟動的activity如果已經存在於當前任務中，則所有在他上的activity都被銷燬，該activity到最上層。
                              startActivity(intent);
                              return true;
                              …………
                    }
         
               }
     
     •標籤頁導航
          基本過程是：
          建立一個ActionBar.TabListener的實現來處理動作欄標籤的互動事件。
               例如：
                    public static class TabListener<T extends Fragment> implements ActionBar.TabListener{
                         private Fragment mFrag;
                         private final Activity mAc;
                         private final String mTag;
                         private final Class<T> mClass;
                         public TabListener(Activity String Class<T> ){……}
                         onTabSelected{
                              if(mFrag==null)
                              {  mFrag=Fragment.instantiate(mAc,mClass.getName());ft.add(android.R.id.content,mFrag,mTag);}
                              else{ft.attach(mFrag);}
                         }
                         onTabUnselected(){
                              if(mFrag!=null){ft.detach(mFrag);}
                         }
                    }
          對於要新增的每個標籤頁，呼叫setTabListener()來例項化，還可以用setText()、setIcon()設定標題和圖示。
          通過addTab()將每個標籤頁新增到動作欄。例如
               onCreate()
               {
                    ActionBar bar=getActionBar();
                    bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)；
                    bar.setDisplayShowTitleEnabled(false);
                    Tab tab=bar.newTab().setText("a").setTabListener(new TabListener<XXXXFragment>(this,"Fragment A",FragmentA.class));
                    bar.addTab(tab);
                    tab=bar.newTab().setText("b").setTabListener(new TabListener<XXXXFragment>(this,"Fragment B",FragmentB.class));
                    bar.addTab(tab);
               }


•下拉選單導航
          在動作欄新增一個spinner控制元件，過程是
               建立一個adapter,為下拉提供列表和列表項的佈局。
               實現actionbar.onnavigationlistener.定義使用者選中列表項的發生的行為。
               在activity的oncreate方法中使用setNavigationMode()開啟導航模式。  如bar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST)；
               設定下拉選單的回撥.setListNavigationCallbacks().