2012-5-9 藍藍設計的小編
轉(zhuǎn)載藍藍設計( m.91whvog3.cn )是一家專注而深入的設計機構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
來源：http://cued.xunlei.com/log-009
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
眼看移動互聯(lián)網(wǎng)之風吹遍祖國大地，各種移動應用接踵而來，作為互聯(lián)網(wǎng)設計師，若能掌握一些基本設計原則，將會對新平臺帶來的的挑戰(zhàn)輕松應對！今天就以iPhone為起點，讓咱們來分析一下iOS界面的設計方法～
開始前先整理下思路，目前移動互聯(lián)網(wǎng)的界面設計有2種：即移動webUI 和 移動客戶端UI 。
對于設計而言，移動web滿足人們快速的信息瀏覽，注重排版和信息整合； 而客戶端可以實現(xiàn)更加豐富的交互體驗，注重層級關系和操作引導。 思路捋順了，接下來就開始一層層把它們展開吧~
Web 設計
iphone擁有緊致的尺寸，目前有480×320 和 640×960兩種分辨率。它包含了完整的Safari瀏覽器，可以完整顯示HTML，XML網(wǎng)頁。利用多點觸摸可以做到跟桌面平臺一樣的網(wǎng)頁瀏覽體驗。
但受“ 屏幕小、觸屏操作、網(wǎng)速限制 ” 的限制，web的設計需要考慮諸如：精簡布局、降低圖片加載、減少輸入等等。具體辦法似乎可以這么做：
1、對原有信息進行整合重組，橫向排列、避免分欄。
2、動作傳感器可以感應用戶橫握手機時自動轉(zhuǎn)為橫屏顯示，因此信息排版要做到自適應寬度，橫屏480（960），豎屏320（640）
3、精簡精簡精簡！！在小小的顯示屏上，所有主元素都要盡量的“夠大”，因此頁面只需展示核心功能，去掉不必要的”設計元素”（使用色塊或簡單背景圖），使頁面易操作、瀏覽順暢。
客戶端UI設計
iphone中的AppStor提供上萬種應用下載，每個應用即有一套獨立的UI。包括：應用圖標、閃屏、功能界面等
1、圖標設計
圖標通常是傳達給用戶的第一視覺感受，它可以體現(xiàn)出產(chǎn)品風格 、功能，甚至品質(zhì)。iphone獨特的桌面展示方式，引領了"豆腐塊"圖標趨勢，即在一個圓角方形的區(qū)域內(nèi)創(chuàng)造各種可能。 分析眾多優(yōu)秀應用圖標發(fā)現(xiàn)，要設計一款精致醒目的圖標，大概可以遵循以下幾點：
a、圖形元素盡可能不超過2個，并且不可平均分布，突出主視覺
b、桌面極少使用淺色，因此配色盡量以明亮淺色為主，以免被背景吸收掉
c、為了讓圖標更加自然融合其中，符合ios平臺的透視標準，盡量使用正面垂直角度，光源自上而下。
輸出： iOS會為圖標自動生成圓角投影，可直接輸PNG：57x57px 114×114 512×512 90度直角（不要使用alpha透明度）
2、歡迎界面
歡迎界面（閃屏）像是應用的一道門，在使用前給用戶一個預示，它通常包含圖標、版本號、加載進度等信息。設計可以根據(jù)產(chǎn)品風格隨意發(fā)揮，與圖標呼應，強化產(chǎn)品的印象。
導航欄主要顯示“當前狀態(tài)、返回、編輯、設置”等基本操作。
工具欄作為熱點觸摸區(qū)域，用來展示主菜單。形式可以：文字、圖標、圖標+文字（不可超過5欄）
標簽欄是主要展示區(qū)，也是設計的重點。根據(jù)不同功能的界面、常見有以下幾種設計方式：
列表視圖—— 適合目錄、導航等多層級的界面。將信息一級級的收起，最大化的展示分類信息。
分層的界面—— 利用iPhone本身獨有的特性讓其固定，或垂直、水平滾動，節(jié)省空間。
擬物化設計—— 適合實現(xiàn)獨立功能的界面設計，界面的細節(jié)逼真寫實。以現(xiàn)實的元素和操作喚起用戶共鳴。
耶～本次分享完畢！