安卓UI設(shè)計系列知識(二)(2)

來源:站酷 作者:chan奕迅 學(xué)習(xí):11951人次

 

 

談到“觸摸反饋”我們不得了解“控件的幾種狀態(tài)”,在我們下載的Android_Design_Stencils_Sources.psd中可以看到:

安卓UI設(shè)計系列知識(二)(原創(chuàng))


 

對于一個控件,andoridUI規(guī)范了有5中狀態(tài),從上往下通俗的說:常規(guī)狀態(tài),按下狀態(tài),獲得焦點狀態(tài),不可用狀態(tài),不可用狀態(tài)下獲取焦點狀態(tài)。其中說明了:“不可用”狀態(tài)即為“常規(guī)”狀態(tài)的30%不透明度;“不可用狀態(tài)下獲取焦點”狀態(tài)即為“獲得焦點”狀態(tài)的30%不透明度。對于一個嚴格的項目來說,這5中狀態(tài)都是得設(shè)計的,有一種狀態(tài)是大家不太熟悉的,即focused狀態(tài)(獲得焦點狀態(tài)),這種狀態(tài)針對一種比較古老的設(shè)備,如下圖:

安卓UI設(shè)計系列知識(二)(原創(chuàng))

 

 

在這種設(shè)備中,會有一個控制方向的滑輪,像我們學(xué)生時代用的滾輪鼠標一樣,手指控制這個小球,滑動到需要控制的控件上,但不按下。那么這個時候,控件就有一個focused狀態(tài)(獲得焦點狀態(tài))

 

 

 

Logo:andoridUI的一個細小的獨特的風(fēng)格

安卓UI設(shè)計系列知識(二)(原創(chuàng))

 

圖中的g+和Howz都是應(yīng)用的logo,將它們放在操作欄的左邊,就是一個非常好的展示場所。

值得一提的是在這種情況下的觸摸反饋,通俗的說就是將操作圖標連同logo看作一個整體,進行觸摸反饋的表達,如下圖:

安卓UI設(shè)計系列知識(二)(原創(chuàng))

 

當然,你不一定非得像上面這樣做,如果你不打算放上你的APP logo,你還可以用以下的方式表達:

安卓UI設(shè)計系列知識(二)(原創(chuàng))

 

將 標題 直接置于 返回圖標 后面,在這一點上,ios的表達方式大多數(shù)是將 標題文字 放在操作欄的中間。這種情況下的觸摸反饋應(yīng)該是:

 

安卓UI設(shè)計系列知識(二)(原創(chuàng))

 

這兩種方式是andoridUI的一種很特別有的表達方式,算是一種“個性”,大家參考視情況使用吧。

 

 

圖標

 

安卓UI設(shè)計系列知識(二)(原創(chuàng))

如圖中所描述的。圖標的使用也要做到風(fēng)格的統(tǒng)一,你可以直接使用安卓自帶的圖標,下載地址:http://developer.android.com/design/downloads/index.html

安卓UI設(shè)計系列知識(二)(原創(chuàng))

當然。你會發(fā)現(xiàn),有可能你需要的圖標,并不在這些御用圖標里,或者說你覺得這些圖標真的太丑,比如它們:

安卓UI設(shè)計系列知識(二)(原創(chuàng))

 

真心覺得這是要吃人的節(jié)奏嗎?

那么,你自己有自己畫啦~~

 

 

字體問題

在官網(wǎng)的“字體”一欄,是針對英文版本下的UI設(shè)計所用字體的說明。個人的看法是:你在設(shè)計稿中的字體并不會使用在程序里,你做的僅僅是“效果圖”,所以你用什么字體完全沒有限制。我們設(shè)計的效果圖是應(yīng)該和最終的程序在效果上高度相同的,所以我們建議選擇一些類似于安卓系統(tǒng)字體的字體作為一個替代,你甚至可以用“黑體”“微軟雅黑”,當然,還是專業(yè)點兒吧,我才開始使用“文泉驛微米黑”,后來一直用DroidSansFallback.ttf,下載地址:http://www.zcool.com.cn/gfx/ZMjk0MjUy.html

 

-------------------------------------------------------------------------------------------------------------

 

我們一起閱讀并理解了官網(wǎng)上對于andoridUI風(fēng)格一模塊的描述,也分享了我的一些工作經(jīng)驗給大家。我們常常聽到或者被自己的領(lǐng)導(dǎo)要求“這個界面要做成Holo風(fēng)格”。Holo風(fēng)格是什么呢,到底怎樣做holo風(fēng)格呢?在解開這個問題之前,我們先看幾個優(yōu)秀的App,它們的界面設(shè)計。

上周非常幸運得搶到了紅米手機一臺,撒花并得瑟一下~~作為一名UI設(shè)計師,如果你還沒有玩過MIUI,那你是時候去了解一下了。以下是我截取的界面并在圖片上做了適當?shù)拿枋觯?/p>

 

安卓UI設(shè)計系列知識(二)(原創(chuàng))

第一:我們是不是可以在我們的設(shè)計中參考MIUI的表達方式,將操作欄設(shè)計為圓角,這樣一來,比起用直角,會更加親切一些,柔和一些。

第二:如果一個保守的交互設(shè)計師,或者說一個保守的GUI設(shè)計師,他會老老實實的保留操作欄,并在操作欄上描述這一個頁面的名字叫做“設(shè)置”,然后將這個頁面中的內(nèi)容分類,分出的類別在正文中用tab切換顯示,從交互上來說,用戶是通過“設(shè)置”圖標進入這一個頁面的,那么這里的所有操作都與設(shè)置相關(guān),用不著再在操作欄上總述一下當前頁面的名字,從視覺上來說,將操作欄直接用于tab切換,在高度上也節(jié)省了不少,以至于一頁上能顯示下面更多的列表項。

 

 

安卓UI設(shè)計系列知識(二)(原創(chuàng))

正文的背景,我們往往使用純色,而MIUI則將正文背景用漸變色處理,這樣一來更加有層次感,不是嗎?所以,如果你覺得不錯,也可以在你的設(shè)計中參考著這樣做。

 

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!