首頁(yè)

網(wǎng)易新聞安卓客戶(hù)端MATERIAL DESIGN實(shí)戰(zhàn)

用心設(shè)計(jì)

光說(shuō)不練假把式,聊了這么多的Material design技巧,是時(shí)候來(lái)看看國(guó)內(nèi)APP怎么跟上這股潮流了。今天網(wǎng)易的同學(xué)分享了新聞客戶(hù)端的Material design改版過(guò)程,來(lái)感受下 >>>

wy20150419 (2)

全面的移動(dòng)端尺寸基礎(chǔ)知識(shí)科普指南

用心設(shè)計(jì)

初涉移動(dòng)端設(shè)計(jì)和開(kāi)發(fā)的同學(xué)們,基本都會(huì)在尺寸問(wèn)題上糾結(jié)好一陣子才能摸到頭緒。我也花了很長(zhǎng)時(shí)間才弄明白,感覺(jué)有必要寫(xiě)一篇足夠通俗易懂的教程來(lái)幫助大家。從原理說(shuō)起,理清關(guān)于尺寸的所有細(xì)節(jié)。由于是寫(xiě)給初學(xué)者的,所以不要嫌我啰嗦。

現(xiàn)象

首先說(shuō)現(xiàn)象,大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多,碎片化嚴(yán)重。尤其是Android,你會(huì)聽(tīng)到很多種分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且還有傳說(shuō)中的2K屏。近年來(lái)iPhone的碎片化也加劇了:640×960, 640×1136, 750×1334, 1242×2208。

不要被這些尺寸嚇倒。實(shí)際上大部分的app和移動(dòng)端網(wǎng)頁(yè),在各種尺寸的屏幕上都能正常顯示。說(shuō)明尺寸的問(wèn)題一定有解決方法,而且有規(guī)律可循。

界與面-移動(dòng)網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)談

用心設(shè)計(jì)

移動(dòng)端網(wǎng)站是指運(yùn)用HTML技術(shù)運(yùn)行在手機(jī)瀏覽器或內(nèi)置瀏覽器內(nèi)的webAPP。很多人現(xiàn)在口中總說(shuō)“H5, 適配站”,其實(shí)這種叫法是不準(zhǔn)確的。

移動(dòng)產(chǎn)品的典型設(shè)計(jì)思路總結(jié)

用心設(shè)計(jì)

1、終端設(shè)備

傳統(tǒng)互聯(lián)網(wǎng):主要的接入終端是計(jì)算機(jī)。計(jì)算機(jī)是高度標(biāo)準(zhǔn)化的設(shè)備,無(wú)論是Mac陣營(yíng),還是PC陣營(yíng)(其他的架構(gòu)不討論了)。具體體現(xiàn)在:

  • 絕大部分個(gè)人計(jì)算機(jī)使用的硬件是標(biāo)準(zhǔn)化的,并且功能強(qiáng)大多樣
  • 絕大部分屏幕的分辨率在1024px及以上,尺寸較大
  • 軟件終端比較統(tǒng)一,都是瀏覽器(暫時(shí)不考慮客戶(hù)端產(chǎn)品),并且由于Web標(biāo)準(zhǔn)的存在,不同的瀏覽器(或者說(shuō)不同的內(nèi)核)對(duì)于前端的解析相差不大
  • 技術(shù)標(biāo)準(zhǔn)相對(duì)統(tǒng)一,比如用HTML寫(xiě)結(jié)構(gòu);用CSS寫(xiě)表現(xiàn);用JS寫(xiě)前端行為;用PHP、JSP等寫(xiě)后端;用MYSQL等管理數(shù)據(jù)庫(kù)等。做出來(lái)的東西基本上認(rèn)為是跨平臺(tái)的

圖標(biāo),文字,還是圖標(biāo)加文字?

用心設(shè)計(jì)

圖標(biāo)是界面的基本組成部分之一,然而在很多時(shí)候,圖標(biāo)本身也在破壞著界面的清晰性。

象形圖出現(xiàn)在人類(lèi)早期,我們可以將其視為最初的文字形式。如今,在某些文明群體中,象形圖依然是人們進(jìn)行溝通的主要媒介。

01-icon-design-text-ui-ux-design.jpg

產(chǎn)品需求確定后,這五步助你設(shè)計(jì)出合理界面

用心設(shè)計(jì)

1 邏輯分類(lèi)

將對(duì)象按照一定的現(xiàn)實(shí)邏輯進(jìn)行分類(lèi)組織。例如,在生活中,要買(mǎi)一個(gè)洗衣機(jī),在百貨商城中依次找到家電賣(mài)場(chǎng)→大家電類(lèi)→洗衣機(jī)品類(lèi)→(品牌、容量、是否智能、缸數(shù)等)。相應(yīng)地,一個(gè)電子商務(wù)網(wǎng)站的信息組織形式類(lèi)似設(shè)計(jì)。

日歷

鏈接

個(gè)人資料

存檔