簡(jiǎn)而未減 結(jié)構(gòu)化消息專為大屏而設(shè)計(jì)

2017-2-2    資深UI設(shè)計(jì)者

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

隨著大屏幕高清分辨率的普及,我們?cè)诖蛴螒?、看電影、瀏覽美圖時(shí),總希望屏幕越大越好,這種視角上廣度與深度的享受以及和沉浸式、聚焦的體驗(yàn),是在小屏幕上完全給予不了的。

圖中可以看出5.5英寸以上屏幕可以稱Phablet,7英寸以上就是Tablet。這次案例以Tablet設(shè)備為主,Phablet設(shè)備為輔進(jìn)行體驗(yàn)設(shè)計(jì)。

在我們的社交平臺(tái)上,用戶消息在多個(gè)終端設(shè)備傳遞中,產(chǎn)品功能只是在原有基礎(chǔ)上簡(jiǎn)單粗暴放大而已,那么大屏手機(jī)/平板電腦存在的價(jià)值化為烏有。


案例分析:這種結(jié)構(gòu)化消息是目前國(guó)內(nèi)主流的一種設(shè)計(jì)形態(tài)。


1.以消息為主的結(jié)構(gòu)化設(shè)計(jì):

不論是資訊分享、音樂(lè)分享、視頻分享不以內(nèi)容區(qū)分而設(shè)計(jì),都在一種載體內(nèi)呈現(xiàn),這種結(jié)構(gòu)雖普適性強(qiáng),可以兼容多元化的場(chǎng)景。但因設(shè)計(jì)形態(tài)統(tǒng)一,導(dǎo)致在內(nèi)容辨識(shí)度上也有所下降,內(nèi)容設(shè)計(jì)上沒(méi)有各自特點(diǎn),用戶在瀏覽過(guò)程中容易忽略內(nèi)容本質(zhì)。



2.信息內(nèi)容碎片化:

用戶可以獲取到更多信息,但因內(nèi)容平均分布,所以畫(huà)面不夠聚焦。我們可以把這些內(nèi)容信息看成點(diǎn)的組合,點(diǎn)的基本屬性是矚目性,能形成視覺(jué)的中心.當(dāng)畫(huà)面中有3個(gè)以上的相同大小點(diǎn)時(shí),畫(huà)面就會(huì)顯的凌亂。當(dāng)畫(huà)面有不同面積的點(diǎn)時(shí),較大點(diǎn)會(huì)引起人們的注意 ,依次會(huì)關(guān)注較小的點(diǎn)。




3.以標(biāo)題文字為主進(jìn)行快速瀏覽:

在瀏覽過(guò)程中用戶通常以抓取關(guān)鍵詞為主,快速吸引到下一級(jí)信息。而圖片在大部分情況下會(huì)有被縮小,裁剪,因圖片尺寸較小,從圖中獲取不到更多的信息。
在原圖中可以清晰的看到電視劇領(lǐng)銜主演的演員,這也是吸引用戶的關(guān)鍵因素之一。但被縮小裁剪后,必須借助文字才能獲取到關(guān)鍵信息。


這種以消息為主的結(jié)構(gòu)化設(shè)計(jì)在iPhone7Plus設(shè)備顯示,相同信息可顯示約4-4.5條左右,有效提升屏幕利用率。但如果直接放大或拉伸到大屏幕中,這種設(shè)計(jì)體驗(yàn)顯的蒼白無(wú)力,沒(méi)有充分體現(xiàn)大屏幕沉浸感、聚焦、畫(huà)面感的優(yōu)勢(shì)。

 

1.以內(nèi)容為主進(jìn)行設(shè)計(jì):

用戶會(huì)更加關(guān)注內(nèi)容本身,不同的內(nèi)容采用不同圖片的尺寸和排版,有利于用戶快速區(qū)分和記憶。



2.以圖片為主進(jìn)行快速瀏覽:

首先圖片消費(fèi)已成為閱讀消費(fèi)中的一個(gè)大類(lèi),比文字而言,圖片更直觀,更具有視覺(jué)沖擊力,也更能適應(yīng)現(xiàn)代社會(huì)的快節(jié)奏。圖片對(duì)于文字的詮釋作用幫助個(gè)人加深文字理解和形象記憶,提高閱讀的有效性和趣味性。一張圖片勝千言萬(wàn)語(yǔ),可以有效傳達(dá)情緒,迅速和用戶建立起共鳴。



3.比例結(jié)構(gòu):

從布局結(jié)構(gòu)上盡量保證原始的攝影圖片和視頻比例不被過(guò)度裁剪。Flickr的一組數(shù)據(jù)顯示,隨著iPhone很大程度上替代單反成為主流拍照設(shè)備,4:3和16:9的圖片數(shù)量占比追上了傳統(tǒng)攝影的3:2。而16:9更接近美學(xué)比例,黃金分割。



4.突顯內(nèi)容,降低信息密度:

使用負(fù)空間讓重要內(nèi)容吸引用戶的注意力。很多人都說(shuō)設(shè)計(jì)師這樣會(huì)浪費(fèi)屏幕的空間,但是留白本身就是設(shè)計(jì)的基本元素之一。這樣更專注內(nèi)容展現(xiàn),通過(guò)放大內(nèi)容,降低頁(yè)面信息密度,內(nèi)容讀取更加舒適。


方案場(chǎng)景應(yīng)用:

用戶可以快速辨識(shí)出內(nèi)容類(lèi)型,畫(huà)面有了聚焦元素,而不是滿屏的文字,界面賦予了感染力和活力。但如果用戶快速轉(zhuǎn)發(fā)了很多內(nèi)容時(shí),在兼容小屏設(shè)備時(shí),屏幕利用率會(huì)有所下降。在iPhone7Plus設(shè)備上,同樣大小的信息在一屏內(nèi)展示2-2.5條。用戶需要在縱向滑動(dòng)多次才能抵達(dá)下一個(gè)信息類(lèi)別。所以針對(duì)提高屏幕利用率上進(jìn)行了方案2橫滑設(shè)計(jì)。


 

方案場(chǎng)景應(yīng)用,引入橫滑設(shè)計(jì)

打破屏幕界限,減少跳轉(zhuǎn),便于用戶獲得更多信息,在這個(gè)系統(tǒng)的基礎(chǔ)之上,構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)。



總而言之不去追求那些奇異的事物,而是從人們所“共有的特征”來(lái)提取價(jià)值,用最自然最合適的方法來(lái)重新審視,重新設(shè)計(jì)。

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔