天天看點

解讀iPhone平台的一些優秀設計思路

  本文試圖從iPhone的角度結合一些iPhone平台項目的設計經驗提煉出iPhone平台的一些優秀設計思路,以供大家在做移動網際網路裝置設計時參考。

  1、移動網際網路裝置和傳統手機的差別

  在傳統手機時代,标準的通話鍵、挂機鍵、菜單鍵是手機的标配,使用者被教育成了用鍵盤來操作資料,于是我們就養成了使用鍵盤的習慣,經典的案例就是諾基亞主導的時代。

  在移動網際網路時代,特别是觸屏的大規模應用,手機的功能已經發生了轉變,對網際網路内容的浏覽、下載下傳、消費等等成為主要應用場景,觸摸屏成為行業趨勢,直接對内容進行操作,在螢幕範圍内的點選成為主要的操作。絕大部分操作通過直接和内容互動完成,不要讓使用者通過中間裝置間接進行控制。

  是以,就可以了解為什麼蘋果會這麼激進,隻保留了一個home鍵,而将其他功能性的操作全部做在了螢幕裡面。

解讀iPhone平台的一些優秀設計思路

  在底部的幾個按鍵的處理上(傳回、菜單、home、搜尋),Android的做法似乎介于傳統手機和iPhone兩者之間,既保留了傳統手機的一些特性,但也在學習iPhone的觸屏做法。從蘋果遵循極簡的設計思路來看,iPhone做得更徹底、更加極緻一些。

  2、高度直覺化的界面

  蘋果采用了隐喻等方式來暗示使用者這裡的操作,目的就是降低使用者的學習門檻,使使用者第一眼就知道怎麼去用iPhone,典型的案例就是鎖屏界面的解鎖操作,以及縮放照片的操作。

解讀iPhone平台的一些優秀設計思路

  iPhone采用了全觸屏的操作方式,絕大部分操作都通過直接觸摸完成,僅提供一個home鍵的實際按鍵,這種做法配合multi-touch技術,無論是完成一個任務還是體驗遊戲,操作都最大程度簡化了使用者的操作路徑。

  為此,iPhone還提供了各種豐富的手勢,基于此,開發者可以創造豐富的操作體驗。比如:tweetie 2

解讀iPhone平台的一些優秀設計思路

  3、在需要時給我導航,且告訴我将去向何處

  在iPhone平台上,如果應用程式有資訊層級關系(比如郵箱>收件箱>郵件),利用title進行導航,導航欄左側始終是傳回按鈕,右側如果有必要,可以放針對内容的操作控件,中間有标題。

  對這裡的導航按鈕來說,始終隻有傳回上一級的功能,且明确指明上一級的title是什麼。

  那麼,另外一個問題是 如果這裡的資訊層級太深怎麼辦?是否需要給出傳回首頁等按鈕或者更長的面包屑路徑,這裡需要考慮的是怎樣減少程式的資訊層級而不是一味地去将這裡的導航複雜化。

  iPhone提倡直接對界面元素進行操作,傳回上一級也是如此,無需通過其他實體按鍵來切換頁面,你所需要做的事情就是直接在螢幕上點選。

解讀iPhone平台的一些優秀設計思路

Navigation Bar

  4、穩定的界面結構——tab bar,toolbar的位置

  iPhone典型應用的界面結構很穩定,導航欄和頁簽欄的位置不會因為應用不同而發生變化,使用者能形成比較一緻的體驗。

解讀iPhone平台的一些優秀設計思路

  Android平台在規範性方面不如iPhone,比如:

  a) Andorid對标題的處理方式比較奇怪,有的程式有标題欄,有的地方沒有,不符合一緻性原則;另外,還存在大小兩種尺寸的标題欄。

解讀iPhone平台的一些優秀設計思路

  b) tab bar的位置。有的應用放在頂部,有的放在底部,體驗不一緻。

  另外,對手持裝置來說,關注焦點是從上而下的,tab bar的關注點沒有内容那麼高,其實隻是在需要的時候可以友善地進行切換就足夠了,放置于頂部對于手持裝置來說操作很不便。

  5、一次做一件事情,避免一個按鍵承載太多的功能

  Android的菜單鍵是一個全局按鍵,使用頻率比較高,根據不同的場景功能又各不相同,使用者較難形成一緻的體驗,系統級的菜單和上下文菜單也容易讓使用者混淆。

  蘋果的做法是将菜單裡的功能進行分解,重要操作使用者可直接操作(如通訊錄的添加聯系人,iPhone是直接放出來,Android是将其放到菜單裡面),其他操作或集中在設定或通過滑動等互動方式進行擴充。(tweetie 2是将針對目前聯系人的更多操作通過滑動的操作展示出來)

解讀iPhone平台的一些優秀設計思路

  6、增強使用者體驗

  iPhone在增強使用者體驗上有很多點值得學習。比如core animation提供了大量優雅的動畫可以直接使用,以實作華麗的動畫效果。

解讀iPhone平台的一些優秀設計思路

  為什麼用動畫?

  在整個界面轉換的過程中,蘋果會添加一些動畫元素,作用有三:

  a) 緩解使用者等待的焦躁情緒,如:經典的程式登入界面動畫。

  b) 暗示使用者目前界面的來源。如:有資訊層級關系的左右切換動畫。

解讀iPhone平台的一些優秀設計思路

  c) 增強使用者體驗

  用什麼動畫?

  界面常用的幾種動畫:

  a) 有資訊層級關系的采用左右切換動畫。

  b) 針對目前視圖内容的操作常用的采用model view的從下往上升起的動畫。如:寫郵件,action sheet。

  拟物化設計

解讀iPhone平台的一些優秀設計思路

  除此之外,還有聲音元素、透明設計等其他手段以提升使用者的使用體驗。

繼續閱讀