《移動應用UI設計模式》讀書筆記

移動應用UI設計模式

作為工具書,讀完后強烈推薦移動產品設計入門的童鞋們備一本放在案頭,有空多翻翻。很多以前在其他產品看到的好的設計都在這本書中找到了定義,不僅如此,還從中得到了很多啟發,而這些只是這本書第一次讀過后的收獲。另外,作為一本設計書,強烈建議有興趣的去買彩印(有黑白彩印兩種)。

1、導航

1.1 主要導航模式:跳板式、列表菜單式、選項卡菜單式、陳列館式、儀表式、隱喻式、超級菜單式

跳板式:為同等重要的內容項使用網格布局,為相比之下更為重要的內容項使用不規則布局形式。視情況使用個性化設置和自定義選項。

列表菜單:很適合用來顯示較長或擁有次級文字內容的標題。使用列表菜單的應用要在所有次級屏幕內提供一個選項用來返回菜單列表。

列表菜單和跳板式導航的共同點在于,每個菜單項都是進入應用各項功能的入口點。

選項卡:不同操作系統有不同規則,定義選項卡位置時需要考慮到不同的操作系統。

陳列館式:通過在平面上顯示各個內容項來實現導航,能很好的應用于用戶需要經常瀏覽,頻繁更新的內容。

儀表式:不要使用過多的儀表導航,使用之前先開展研究確定對哪些關鍵指標使用儀表導航。

隱喻式:多用于游戲中,慎用,用不好會起反作用。

超級菜單式:選擇此類導航前,先確定信息架構。如果導航的對象不是太多,可考慮用其他導航形式。

1.2 次級導航

所有的主要導航都可以用來做次級導航,除此以外,還有一些不適合當主要導航,但可以做次要導航的形式:頁面輪盤式、圖片輪盤式、行內擴展式。

頁面輪盤式:可以很好的實現少量頁面的導航(頁面太多就用其他導航),利用直觀的指示器來表明總屏數和當前所處位置。通常用“滑動”動作來操作。

圖片輪盤:能很好地顯示清新悅目的內容,如藝術品、產品、照片等。

擴展列表式:能很好地逐步顯示某個內容項的更多細節或選項。

2、表單

登錄表單:不要自己“獨創”登陸表單,采用常見的設計方案。

注冊表單:界面應該簡潔明了,最好在一屏內顯示完所有要填的信息,注冊按鈕應該顯示在同一屏內。不要把標簽和輸入框水平排列,而應該采用垂直排列。

核對表單:把提升速度、效率和讓用戶放心作為設計目標。去掉不必要的輸入域,減少頁面和操作步驟。

計算表單:使用標準的表單設計和布局原則。如果可以,在同一頁面內顯示計算結果,位置盡量明顯。

搜索表單:不要讓太多的搜索選項嚇倒用戶,把搜索條件控制在一頁以內。采用能夠通過手指,方便且快速操作的控制方式。

多步驟表單:告知用戶當前所在的位置和將要去的地方。去掉不必要的輸入域,最小化頁面和操作步驟的數量。

長表單:不要人為的把表單劃分成一些步驟來避免屏幕的滾動。堅決去掉不必要的輸入域,遵循特定的操作系統的按鈕布局標準(標題欄或底部)

3、表格和列表

基本表格:不要使用暗色的網格線和垂直分割方式。文字左對齊,數字右對齊。一屏內顯示的表格內容不宜過多,如果單個屏幕內顯示大量信息,考慮其他方式。

無表頭表格:這種表格模式非常適合用來顯示項目集合和這些項的搜索結果,這種形式能方便用戶進行快速瀏覽和選擇。每一寬行內最多顯示三行信息,不太重要的細節內容使用較小、淺色的字體。

固定列表格的表格:對于較大的表格,固定某一列或某幾列是個可行的做法。為固定的列設計比較醒目的樣式,以提示用戶,滑動操作能瀏覽更多的數據。

帶有內容總覽和數據的表格:表格內容總覽應該顯示在數據上方,且要一目了然。

行分組表格:為內容總結行設定與其他行不同的視覺效果。

級聯式列表:使用較為寬泛的信息結構可以避免在應用內產生較深的層次。

帶有視覺指示器的表格:使用那些用戶能夠快速識別的視覺化指示器,去掉不必要的圖標。

4、搜索、分類和過濾

4.1 搜索

顯性搜索:在輸入域周圍提供明顯的操作按鈕,并提供撤銷搜索的選項。通過反饋告知用戶搜索動作已執行。

自動補全搜索:如果程序在顯示搜索結果時有延遲,就要給出一些反饋。在搜索結果中突出顯示用戶輸入的搜索內容。

動態搜索:對于有限的數據,如地址簿或個人媒體庫,這種搜索模式非常有效。不太適合用來搜索海量數據。

范圍搜索:3~6個范圍選項足矣,用搜索表單實現高級搜索功能。

搜索表單:盡量減少輸入域的數量,為特定的操作系統選擇適當的輸入控制

搜索結果/瀏覽結果:標明已找到搜索結果的總項數,使用延遲加載,而非分頁顯示的方式

4.2 分類:屏內分類、分類排序選擇器、分類表單

4.3 過濾:屏內過濾、過濾容器、過濾對話框、過濾表單

過濾器選項的用詞應該清晰無誤,易于理解。使用過濾對話框時,使用簡短的過濾選項列表,避免滾屏。如果列表較長或有多個過濾選項,使用過濾表單。

5、工具

工具欄:也稱為操作欄,工具欄通常顯示在屏幕底端,工具欄內的圖標應該是用戶熟悉、易于識別的或者采用標簽加圖標的設計。

選項菜單:如果可能,采取直接交互式的設計方案。不要把導航隱藏在選項菜單中。

調用動作按鈕:不要把主要操作隱藏在菜單中,也不能將其設計成無法識別的工具欄圖標。一定要讓其顯而易見(良好的對比效果),不言自明(含義清晰的標簽)

情景工具:如果可能,采取直接交互式的設計方案。如果需要按鈕,盡量將其放置在可操作對象旁邊,使用用戶熟悉或帶有文字標簽的圖標。

內聯操作:每個對象最多只能有1~2種內聯操作。

批量操作:諸如刪除和重新排序之類的批量操作最好在編輯模式下進行。提供明顯的選項,讓用戶可以退出編輯模式。

6、圖表

常見圖表模式:帶過濾器的圖標、總覽加數據式圖表、滾動預覽圖表、數據點細節圖、詳細信息圖、縮放圖、數據透視表、火花譜線圖

所有的圖標模式都建立在基本圖表的設計之上,最簡單的圖標應該包括標題、軸標簽以及數據。數據應該顯示為餅狀圖、條形圖、柱狀圖、面積圖、折線圖、氣泡圖、散點圖、子彈圖、雷達圖、計量圖或混合圖表。

7、視覺吸引

對話框:內容一定要言簡意賅,對話框是移動設計中最常見的視覺吸引模式,但也是最容易被忽略、最得不到用戶注意的元素。

提示:可以出現于屏幕的任意位置,比對話框更能融入使用情景。提示要盡可能的接近所指向的功能,保持內容的簡潔,在交互開始時關閉提示。

使用向導:能很好地從用戶使用目標的角度出發,突出應用的主要功能。兼顧內容簡潔和視覺效果。

視頻演示:可以展示應用的關鍵功能,也可以顯示標準使用流程。一定要提供常見的視頻控制選項(停止、暫停、音量控制等)。

幻燈片:注意把握,不要把屏幕搞得混亂不堪,一旦交互開始,移除幻燈片。

首次使用引導:將首次使用引導和其他內容區別開來。

持續視覺吸引:保持持續視覺吸引元素的簡潔,與其他內容區分開來。

可發現的視覺吸引:最常見的是鼓勵用戶刷洗數據的提示。

8、反饋與功能可見性

反饋:出錯信息、確認、系統狀態

出錯信息用純文字形式展現,不要使用模式對話框。主動向用戶提供解決方法,在屏幕上突出顯示出錯信息。

當用戶執行某操作時,提示確認信息,但不要打斷用戶使用產品的過程。

系統及時提供反饋信息能提升用戶對軟件的信任度,為可能會持續較長時間的操作提供“取消”選項

功能可見性:觸摸、滑動、拖曳

觸摸:用常見的視覺效果來暗示可觸摸的控制項,一定要謹慎的使用三維效果,泛濫的陰影和斜角效果會降低可讀性

滑動:通過頁面指示器,或顯示其余內容的一部分來告知用戶,滑動屏幕可以發現更多內容。不要使用反應過慢的滾動條。

拖曳:拖動手柄的圖標一定要易于識別。

9、幫助

使用說明、界面元素說明、使用向導

10、反模式

標新立異、隱喻錯位、愚蠢的對話框、圖表垃圾、按鈕海。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 這周看了一本書——《移動應用UI設計模式》,與0-1歲產品經理分享: 其實全書就是把移動應用的表皮撕碎了來講,從用...
    拾零閱讀 1,439評論 1 9
  • 主要導航模式: 跳板式導航:跳板式導航對操作系統并沒有特殊要求,在各種設備上都有良好表現。它有時也被 稱為快速啟動...
    2c5994723157閱讀 1,004評論 0 2
  • 讀后感:基礎性知識,很多適合新手的干貨,讀起來很輕松。書內提供的案例有一定年代感,擬物化確實比扁平化的認知難度要高...
    微小宇宙閱讀 1,220評論 0 5
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 今天,我朋友做了一件十分窩心的事情,讓我感覺到,有人把你放在心上,感覺很溫暖。 前些時候,跟朋友聊起,有一男生在網...
    無憂閱讀 850評論 1 2