什么是界面布局樣式?
界面布局樣式是指用于區(qū)分信息內(nèi)容,層次的板式設(shè)計(jì)的具體方式。
總結(jié)和了解目前常用的界面布局樣式,可以讓設(shè)計(jì)師快速?zèng)Q策,選擇合適的設(shè)計(jì)方式。
界面布局樣式有哪些?
一.卡
利用「卡」設(shè)計(jì)界面,對(duì)應(yīng)的是現(xiàn)在流行的「卡片式設(shè)計(jì)」,比如:APP Store 的 Today 頁(yè)面。
大海將從以下 3 點(diǎn)描述卡片設(shè)計(jì)的優(yōu)勢(shì):
-
靈活性
-
信息區(qū)分
-
操作性和趣味性
靈活性
示例如下,分別是 Instagram,知乎,微博的首頁(yè)。
Instagram 的「推薦用戶」模塊,知乎的「知乎書(shū)店」模塊,微博的「問(wèn)答」模塊,都利用了可以橫向滑動(dòng)的卡片設(shè)計(jì),打破了訂閱流信息垂直展示的限制,從而展示更多的信息。
信息區(qū)分—信息類(lèi)型
示例如下,分別是天貓,嚴(yán)選,微信讀書(shū)的個(gè)人中心截圖。
這三個(gè)「?jìng)€(gè)人中心」的設(shè)計(jì),都利用卡片設(shè)計(jì),對(duì)不同類(lèi)型的信息進(jìn)行了區(qū)分和歸整。
-
天貓:第一張卡片式用戶個(gè)人信息,以及用戶自己收藏的內(nèi)容和足跡數(shù)據(jù);第二張卡片都是訂單數(shù)據(jù);第三張卡片是運(yùn)營(yíng)卡片,用于專(zhuān)門(mén)的大型活動(dòng)的內(nèi)容展示;
-
考拉:第一張卡片是用戶個(gè)人信息,以及用戶自己收藏的內(nèi)容和足跡數(shù)據(jù);第二張卡片都是訂單數(shù)據(jù);第三張卡片是用戶相關(guān)的其他信息;第四張卡片是卡拉提供的服務(wù)。
-
微信讀書(shū):第一張卡片是用戶個(gè)人信息;第二張卡片是用戶賬戶的基本數(shù)據(jù);第三張卡片是用戶自己生成的相關(guān)內(nèi)容;
信息區(qū)分—時(shí)間
示例如下,分別是 APP Store,微信公眾號(hào),微博的截圖。
這三個(gè)設(shè)計(jì),都把復(fù)雜的內(nèi)容信息,用卡片設(shè)計(jì)的形式,按照時(shí)間維度進(jìn)行了整理和排序。
操作性和趣味性
示例如下,分別是支付寶,ZUO,探探的截圖。
-
卡片是一種模擬物理世界的設(shè)計(jì)形式,擁有可操作隱喻,可以被覆蓋、堆疊、移動(dòng)、劃去。
-
支付寶卡包:模仿物理世界真實(shí)的銀行卡設(shè)計(jì),利用用戶已有的銀行卡查看習(xí)慣,讓用戶快速理解和查看已綁定的銀行卡
-
ZUO:「ZUO」是一款小眾的,有趣新鮮創(chuàng)意的內(nèi)容分享產(chǎn)品。主打追尋更美好的可能,產(chǎn)品設(shè)計(jì)別具特色。左滑卡片可以切換內(nèi)容的設(shè)計(jì),讓產(chǎn)品體驗(yàn)更加靈動(dòng)有趣。
-
探探:一款陌生人社交軟件,廣告主打:左滑不喜歡,右滑喜歡的體驗(yàn),凸顯自己在同類(lèi)型軟件中的體驗(yàn)差異化,用戶的感受更加新鮮有趣。
卡片設(shè)計(jì)的反例
自從 iOS 11 之后,卡片設(shè)計(jì)的趨勢(shì)就被推向了高潮。設(shè)計(jì)網(wǎng)站上有很多卡片式設(shè)計(jì)作品出現(xiàn)。
卡片設(shè)計(jì)經(jīng)常會(huì)呈現(xiàn)出比較好的視覺(jué)效果,但是卡片設(shè)計(jì)用的不好,會(huì)導(dǎo)致浪費(fèi)空間,降低效率。
示例如下:是大海從 dribbble 上找來(lái)的設(shè)計(jì),通訊錄的設(shè)計(jì)利用了卡片設(shè)計(jì)。
當(dāng)用戶需要尋找聯(lián)系人時(shí),呈「Z字型」閱讀曲線,遠(yuǎn)沒(méi)有微信通訊錄的「直線型」閱讀效率高。
二.線
「線」指的是 APP 設(shè)計(jì)中最常見(jiàn)的「分割線」,在分割線當(dāng)中可以分為兩類(lèi):
貫穿式
「貫穿式」是指,線長(zhǎng)度貫穿屏幕,左右邊距為零。貫穿式分割線可以讓被分割的信息的獨(dú)立性變強(qiáng)。
示例如下:分別是豆瓣的首頁(yè),網(wǎng)易云音樂(lè)的動(dòng)態(tài)截圖。
兩者的共同點(diǎn)是,每一塊信息的內(nèi)容較多,關(guān)聯(lián)性弱。需要用貫穿式分割性,讓每一個(gè)信息內(nèi)容,更加獨(dú)立。
內(nèi)嵌式
「內(nèi)嵌式」是指,線的左右邊距留有空隙。內(nèi)嵌式分割線,可以有助于信息閱讀的流暢性。
示例如下:分別是 APP Store 今日主題的列表頁(yè),36Kr 的個(gè)人中心頁(yè)面。
貫穿式和內(nèi)嵌式經(jīng)常是同時(shí)使用的,如下圖:網(wǎng)易嚴(yán)選的填寫(xiě)訂單頁(yè)面
圖中列表「商品合計(jì)」「運(yùn)費(fèi)」是相對(duì)關(guān)聯(lián)性較強(qiáng)的,因此這兩者之間用了內(nèi)嵌式分割線?!肝乙_(kāi)發(fā)票」和它們之間是相對(duì)獨(dú)立的,因此使用貫穿式分割線。
分割線設(shè)計(jì)的反例
分割線設(shè)計(jì)是界面當(dāng)中最常用的元素,大??戳诉@么多APP,截了這么多圖,都沒(méi)有發(fā)現(xiàn)界面中一根線都沒(méi)有使用的產(chǎn)品。
分割線設(shè)計(jì)要注意是否應(yīng)該使用,以及使用時(shí)線的顏色,粗細(xì)。
下圖中:知乎的「?jìng)€(gè)人中心」,來(lái)源于網(wǎng)絡(luò)的日歷設(shè)計(jì)。
知乎:線的顏色用的過(guò)重,導(dǎo)致當(dāng)看到這個(gè)頁(yè)面時(shí),會(huì)感受到滿眼都是線。改進(jìn)方法有兩種:把線改細(xì),改淡;把列表文字改重??偨Y(jié)下來(lái)就是拉開(kāi)文字和線的對(duì)比。
日歷:日期本身的排版已經(jīng)把信息區(qū)分的比較明顯,此時(shí)不需要使用分割線。假設(shè) 「親密」 「對(duì)比」 「重復(fù)」 足以讓信息得到區(qū)分,不使用分割線,可以讓你的設(shè)計(jì),更加透氣簡(jiǎn)潔。
三.間距
利用「間距」設(shè)計(jì)界面,對(duì)應(yīng)的是現(xiàn)在流行的「無(wú)框設(shè)計(jì)」,不用分割線,純粹用間距實(shí)現(xiàn)信息的排版。
大海將從以下 2 點(diǎn)描述其適用性:
-
圖片為主
-
內(nèi)容少且有規(guī)律
圖片為主
示例如下:分別是 Instagram,愛(ài)彼迎,紅板報(bào)的界面截圖。這些頁(yè)面中,均以圖片為主。圖片本身的邊緣具備分隔作用。
內(nèi)容少且有規(guī)律
示例 1:愛(ài)彼迎的「故事頁(yè)面」和「搜索結(jié)果頁(yè)」,兩者都只有 2 中信息板式。內(nèi)容少且有規(guī)律。
示例 2:輕芒的「分類(lèi)頁(yè)」和「類(lèi)別首頁(yè)」,分類(lèi)頁(yè)只有一種板式,并橫向排版展示。類(lèi)別首頁(yè)只有一屏信息。
總結(jié):卡,線,間距都是頁(yè)面當(dāng)中基礎(chǔ)元素,希望本篇文章可以幫助設(shè)計(jì)師掌握和了解這 3 個(gè)基礎(chǔ)元素的適用性。在設(shè)計(jì)執(zhí)行中,更加風(fēng)馳電掣,如沐春風(fēng)。