淺析iOS界面設(shè)計(jì)方法

2012-5-9    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(  sillybuy.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)  、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、  網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://cued.xunlei.com/log-009

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,          請點(diǎn)這里

 

 

眼看移動互聯(lián)網(wǎng)之風(fēng)吹遍祖國大地,各種移動應(yīng)用接踵而來,作為互聯(lián)網(wǎng)設(shè)計(jì)師,若能掌握一些基本設(shè)計(jì)原則,將會對新平臺帶來的的挑戰(zhàn)輕松應(yīng)對!今天就以iPhone為起點(diǎn),讓咱們來分析一下iOS界面的設(shè)計(jì)方法~ 

開始前先整理下思路,目前移動互聯(lián)網(wǎng)的界面設(shè)計(jì)有2種:即移動webUI 移動客戶端UI

對于設(shè)計(jì)而言,移動web滿足人們快速的信息瀏覽,注重排版和信息整合; 而客戶端可以實(shí)現(xiàn)更加豐富的交互體驗(yàn),注重層級關(guān)系和操作引導(dǎo)。 思路捋順了,接下來就開始一層層把它們展開吧~

 

Web 設(shè)計(jì)

 

iphone擁有緊致的尺寸,目前有480×320 和 640×960兩種分辨率。它包含了完整的Safari瀏覽器,可以完整顯示HTML,XML網(wǎng)頁。利用多點(diǎn)觸摸可以做到跟桌面平臺一樣的網(wǎng)頁瀏覽體驗(yàn)。

但受“ 屏幕小、觸屏操作、網(wǎng)速限制 ” 的限制,web的設(shè)計(jì)需要考慮諸如:精簡布局、降低圖片加載、減少輸入等等。具體辦法似乎可以這么做:

1、對原有信息進(jìn)行整合重組,橫向排列、避免分欄。

 

2、動作傳感器可以感應(yīng)用戶橫握手機(jī)時自動轉(zhuǎn)為橫屏顯示,因此信息排版要做到自適應(yīng)寬度,橫屏480(960),豎屏320(640)

  

 

3、精簡精簡精簡??!在小小的顯示屏上,所有主元素都要盡量的“夠大”,因此頁面只需展示核心功能,去掉不必要的”設(shè)計(jì)元素”(使用色塊或簡單背景圖),使頁面易操作、瀏覽順暢。

 

 

客戶端UI設(shè)計(jì)

iphone中的AppStor提供上萬種應(yīng)用下載,每個應(yīng)用即有一套獨(dú)立的UI。包括:應(yīng)用圖標(biāo)、閃屏、功能界面等

 

1、圖標(biāo)設(shè)計(jì)

圖標(biāo)通常是傳達(dá)給用戶的第一視覺感受,它可以體現(xiàn)出產(chǎn)品風(fēng)格 、功能,甚至品質(zhì)。iphone獨(dú)特的桌面展示方式,引領(lǐng)了"豆腐塊"圖標(biāo)趨勢,即在一個圓角方形的區(qū)域內(nèi)創(chuàng)造各種可能。 分析眾多優(yōu)秀應(yīng)用圖標(biāo)發(fā)現(xiàn),要設(shè)計(jì)一款精致醒目的圖標(biāo),大概可以遵循以下幾點(diǎn):

a、圖形元素盡可能不超過2個,并且不可平均分布,突出主視覺

b、桌面極少使用淺色,因此配色盡量以明亮淺色為主,以免被背景吸收掉

c、為了讓圖標(biāo)更加自然融合其中,符合ios平臺的透視標(biāo)準(zhǔn),盡量使用正面垂直角度,光源自上而下。 

輸出: iOS會為圖標(biāo)自動生成圓角投影,可直接輸PNG:57x57px    114×114    512×512     90度直角(不要使用alpha透明度)

 

2、歡迎界面

歡迎界面(閃屏)像是應(yīng)用的一道門,在使用前給用戶一個預(yù)示,它通常包含圖標(biāo)、版本號、加載進(jìn)度等信息。設(shè)計(jì)可以根據(jù)產(chǎn)品風(fēng)格隨意發(fā)揮,與圖標(biāo)呼應(yīng),強(qiáng)化產(chǎn)品的印象。

 

3、功能界面
遵守IOS的交互習(xí)慣,功能界面的結(jié)構(gòu)通常自上而下,分別是“導(dǎo)航欄、標(biāo)簽欄、工具欄”

 

導(dǎo)航欄主要顯示“當(dāng)前狀態(tài)、返回、編輯、設(shè)置”等基本操作。

 

工具欄作為熱點(diǎn)觸摸區(qū)域,用來展示主菜單。形式可以:文字、圖標(biāo)、圖標(biāo)+文字(不可超過5欄)

 

標(biāo)簽欄是主要展示區(qū),也是設(shè)計(jì)的重點(diǎn)。根據(jù)不同功能的界面、常見有以下幾種設(shè)計(jì)方式:

列表視圖—— 適合目錄、導(dǎo)航等多層級的界面。將信息一級級的收起,最大化的展示分類信息。

分層的界面——  利用iPhone本身獨(dú)有的特性讓其固定,或垂直、水平滾動,節(jié)省空間。

擬物化設(shè)計(jì)—— 適合實(shí)現(xiàn)獨(dú)立功能的界面設(shè)計(jì),界面的細(xì)節(jié)逼真寫實(shí)。以現(xiàn)實(shí)的元素和操作喚起用戶共鳴。

 

 

耶~本次分享完畢!cool

有句話說吃進(jìn)去的是糧食拉出來的是思想,更確切的說法應(yīng)該是“吃進(jìn)去的是積累,拉出來的是經(jīng)驗(yàn)。"   方法論終究是給自己的小小啟發(fā)和指引,希望以后通過積累能有更高質(zhì)量的產(chǎn)出~~爭取吃的更營養(yǎng)拉的更精美~

分享本文至:

日歷

鏈接

個人資料

存檔