Android 4.0設(shè)計(jì)初體驗(yàn)

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

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(  sillybuy.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(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://www.54xiaomeng.com/?p=621

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

 

Android系統(tǒng)是目前智能移動(dòng)設(shè)備中增長(zhǎng)速度最快的平臺(tái),但App的設(shè)計(jì)卻沒有形成自己的風(fēng)格,絕大都數(shù)都是ios風(fēng)格的移植適配。Google 在去年的10月份發(fā)布了Android 4.0 的界面規(guī)范,在樣式、控件上都做了非常個(gè)性化的革新,但由于Rom的多樣化,設(shè)備的不統(tǒng)一,新的4.0設(shè)計(jì)規(guī)范并沒有得到廣泛的普及。但以移動(dòng)設(shè)備更新?lián)Q代的速度,Android 4.0將會(huì)是趨勢(shì),與ios的差異性也會(huì)越來越明顯。由于博主的性格屬于典型的喜新厭舊,所以打算結(jié)合手上的項(xiàng)目做一個(gè)吃螃蟹的人…

先看看目前 Play 市場(chǎng)上有哪些原生的android 4.0應(yīng)用:

部分應(yīng)用界面截圖: 目前按4.0規(guī)范設(shè)計(jì)的大都數(shù)是google自家的應(yīng)用,國(guó)內(nèi)的好像只有百度應(yīng)用在做初步的嘗試。由于博主接受的任務(wù)是針對(duì)國(guó)外買家的應(yīng)用,在國(guó)外4.0的界面普及程度相對(duì)好一些,所以這次嘗試用4.0的規(guī)范來設(shè)計(jì),一是由于4.0的界面體驗(yàn)非常優(yōu)秀;二是因?yàn)?.0的界面是向下兼容的,只是有部分系統(tǒng)組件顯示效果不太一樣,但可以用自定義的方法做到呈現(xiàn)效果一致。

  • 先了解一下案例的大概需求:

第一步,制作導(dǎo)航:

Android 4.0遵循的是重內(nèi)容輕導(dǎo)航的設(shè)計(jì)理念,起初我也很質(zhì)疑Android的導(dǎo)航設(shè)計(jì),認(rèn)為切換頁面不如ios方便快速。但換個(gè)角度想,設(shè)計(jì)的目的應(yīng)當(dāng)優(yōu)先任務(wù)流程和閱讀深度,快速的跳轉(zhuǎn)并不是我們的主要目的,所以android 4.0并不提倡使用傳統(tǒng)的Tab Bar:

舍棄了Tap Bar,那需求中的根標(biāo)簽該如何體現(xiàn)呢?Android 4.0有自己的下拉導(dǎo)航。(原型稿截圖,非視覺稿)

我們可以將所有一級(jí)的頁面理解為同級(jí)的視圖,利用下拉的方式切換視圖,這和ios的底部Tab Bar功能是差不多的。

這樣的導(dǎo)航設(shè)計(jì)一方面加強(qiáng)了自身平臺(tái)的識(shí)別性,另一方面也釋放了更多的屏幕空間。

第二步,遵循新的界面布局:

  • Action Bar 主要元素包括:1.程序圖標(biāo)(如果不是第一級(jí)頁面,需要添加向上的符號(hào));2.標(biāo)題(允許添加下拉導(dǎo)航);3.優(yōu)先級(jí)比較高的操作按鈕(用符號(hào)表示);4.優(yōu)先級(jí)低的操作和通用的設(shè)置操作(等同于2.3的Menu菜單)。
  • 表單的樣式        1.分割線
    使用分割線把列表里的內(nèi)容分割成組,便于瀏覽。向下滑動(dòng)時(shí),分割線和檢索字母會(huì)浮動(dòng)于頂部,直到下一組的分割線出現(xiàn)。
    2.行內(nèi)項(xiàng)目
    列表可以容納很多不同類型的內(nèi)容,包括單行條目,多行條目,帶圖標(biāo)的條目,復(fù)選框和操作按鈕。android的表單視覺風(fēng)格都是敞開式的,不同于ios包裹在圓角方框內(nèi)。
    3.不要出現(xiàn)向右的箭頭
  • 底部操作欄 不要將底部做成ios端的tab bar, Android的底部是為當(dāng)前頁面的常用操作預(yù)留的。底部只用圖標(biāo)表示,不需要添加文字說明,這對(duì)icon的設(shè)計(jì)提高了更釋義的符號(hào)化要求。
  • 按鈕位置
  • android 4.0 改變了按鈕的位置,將確定操作統(tǒng)一放置在右側(cè)。而4.0之前是統(tǒng)一在左邊的位置。
  • Menu菜單 4.0將徹底弱化實(shí)體menu鍵,所有的通用設(shè)置將收納在圖中的菜單中。

第三步,使用Android獨(dú)有的組件和交互方式:

  • 1.下拉框 4.0的界面大量使用下拉框的樣式,包括界面視圖的切換,分享操作,內(nèi)容分組。下拉框中的內(nèi)容也可以顯示部分和全部: 如果調(diào)用官方的API,2.3和4.0的下拉框顯示效果會(huì)不同: 為保障不同設(shè)備的顯示效果一致,下拉框的樣式最好用自定義的方法來實(shí)現(xiàn)。
  • 2.選項(xiàng)卡
    選項(xiàng)卡可以運(yùn)用在同級(jí)視圖間的切換,優(yōu)勢(shì)就是減少了層級(jí),并讓用戶的注意力集中在內(nèi)容上。大量?jī)?nèi)容的分類之間的橫向?qū)Ш浇o人一種隨意瀏覽的體驗(yàn),而不是很強(qiáng)的導(dǎo)航步驟的感覺,選項(xiàng)卡的數(shù)量最好控制在7個(gè)以內(nèi)。效果預(yù)覽 tabs_scrolly 4.0的選項(xiàng)卡和Windows Phone的樞軸視圖基本上是同一個(gè)概念,都支持點(diǎn)擊和滑動(dòng)的操作,而ios平臺(tái)只能使用分段器或列表+新頁面的方式。
  • 3.情境操作欄CAB 在長(zhǎng)按操作下,原有的action bar會(huì)變成編輯欄,提供批處理等操作;這樣的操作雖然方便直觀,但長(zhǎng)按全局的操作只有3.0以后的版本才能用,考慮到向下兼容的問題,這樣的方式目前不推薦使用。

第四步,界面風(fēng)格

  • 平面化
  • 符號(hào)化
  • 棱角分明

總結(jié)

Android的開發(fā)現(xiàn)狀是設(shè)備多,Rom多,發(fā)布平臺(tái)多,屏幕尺寸難適配,所以很多公司做同一個(gè)應(yīng)用都會(huì)優(yōu)秀考慮ios平臺(tái),然后直接移植到Android設(shè)備,所以Android的設(shè)計(jì)規(guī)范與標(biāo)準(zhǔn)很難執(zhí)行下去。但不可否認(rèn)Android 4.0有很多方便的創(chuàng)新,通知欄,選項(xiàng)卡,情境操作欄等交互方式是完勝ios的,而且以Android的發(fā)展速度,4.0設(shè)備的普及也會(huì)很快到來,作為設(shè)計(jì)師,應(yīng)該是最需要提前準(zhǔn)備的角色。

文中如有錯(cuò)誤,歡迎指出…

分享本文至:

日歷

鏈接

個(gè)人資料

存檔