大數(shù)據(jù)時(shí)代，到處都是信息的載體 - 屏幕。設(shè)計(jì)師們將信息整合后，通過(guò)視覺語(yǔ)言適配各種大小的移動(dòng)端屏幕，讓信息準(zhǔn)確的傳達(dá)給用戶。

為了讓用戶能在不同的場(chǎng)景中合理的使用，設(shè)計(jì)師就需要針對(duì)不同場(chǎng)景用戶會(huì)使用到的不同尺寸屏幕進(jìn)行不同設(shè)計(jì)。設(shè)計(jì)方向包括功能、交互、已經(jīng)視覺展現(xiàn)，從而讓產(chǎn)品能夠更友好的被用戶使用。

屏幕的大小不同，所能承載的信息數(shù)量自然也不同。為了保持不同分辨屏幕下，設(shè)計(jì)風(fēng)格的一致。設(shè)計(jì)師可以通過(guò)合理合并功能按鈕、十字交互、增加可關(guān)閉容器、規(guī)整排列等等視覺語(yǔ)言進(jìn)行信息傳達(dá)。

合理合并功能按鈕

設(shè)計(jì)來(lái)源于生活，移動(dòng)端的設(shè)計(jì)靈感也可以從生活中領(lǐng)悟。

來(lái)回想下身邊小家電，因?yàn)轶w積的限制，小家電的操作按鈕少而精，通常將很多按鈕合并。

比如，時(shí)間控制器、溫度控制器、流量控制器等等，他們的共同點(diǎn)就是，合理的把相同功能按鈕合并為一個(gè)，以節(jié)省空間。

同樣的設(shè)計(jì)方式，我們也可以用于設(shè)計(jì)中。

如圖，相同位置，不同狀態(tài)的按鈕，讓按鈕在不增加占位面積的前提下，增加了頁(yè)面承載內(nèi)容，滿足了更多的功能需求。

十字交互

這樣的交互方式雖然能夠幫助我們更好的利用“屏幕外”的空間，但卻存在誤操作的可能。所以，運(yùn)用時(shí)一定要注意功能使用的區(qū)域間隔和可操作空間。

可關(guān)閉、隱藏內(nèi)容

想一想各大Web站與Wap站的菜單區(qū)別，Wap站用一個(gè)“漢堡Icon”將多個(gè)跳轉(zhuǎn)鏈接隱藏收起，大大減少了界面占位的同時(shí)，保留了原有的菜單內(nèi)容。

除此之外，可關(guān)閉提示氣泡、新手引導(dǎo)、下拉菜單、上浮菜單、選擇器等，都是常見的可關(guān)閉、隱藏內(nèi)容的容器。

規(guī)整排列

大家有沒有遇到過(guò)，隨著產(chǎn)品功能的不斷增加，或是需要將大屏設(shè)備功能，整合到小屏界面上時(shí)可涉及區(qū)域太小的問題呢？

移動(dòng)設(shè)備設(shè)計(jì)中，九宮格、刪格、區(qū)域劃分等，就可以解決空間不夠的問題，并增加可操作內(nèi)容排列的靈活性和可變性（一般會(huì)通過(guò)icon+文字的方式進(jìn)行呈現(xiàn)）。

現(xiàn)，很多應(yīng)用都將此排列方式與可編輯功能相結(jié)合，制造為可自定義界面，大大增加了用戶體驗(yàn)度。

總結(jié)

以上只是數(shù)據(jù)整合展現(xiàn)方式中的一小部分，但無(wú)論是那種整合方式都離不開數(shù)據(jù)篩選匯總，也就是前期的準(zhǔn)備工作。

我們?cè)谑褂靡曈X語(yǔ)言完成移動(dòng)端屏幕信息傳達(dá)的同時(shí)，也要注意不要脫離了用戶需求的本質(zhì)，這也是我們將信息進(jìn)行可視化處理的基礎(chǔ)。

原創(chuàng)： Quines·QQQ

公眾號(hào)： 海鹽社