旗下產業: A產業/?A實習/?A計劃
沈陽區咨詢熱線:024-31048731
首頁 > 今日必讀 > 卡片設計、分割線、無框設計哪個好?來看高級設計師的分析!
卡片設計、分割線、無框設計哪個好?來看高級設計師的分析!
時間:2018-01-25來源:www.aaa-cg.com.cn點擊量:
時間:2018-01-25點擊量:

每年都會有一波又一波的設計趨勢流行起來,被設計師們追隨和模仿著。大家總覺得迎合著趨勢做的設計肯定不會差。

比如,之前流行的卡片設計,很多設計師都采用這種形式,來區隔內容模塊。今年流行的無框設計,一窩蜂的開始去分割線、去邊框,做大面積留白的設計。

然而,你有沒有反問自己是在被趨勢牽著鼻子走,還是真正深思熟慮后,選擇更符合自己產品定位和內容傳達的表現形式?

最近我也在思考這個問題,對不同產品界面的布局樣式進行分析和梳理,下面分享給大家。



一. 界面布局樣式有哪些?

在做界面設計時,我們為了區分信息結構及層次,通常采用以下3種布局樣式:卡片式設計、分割線、無框設計。


二. 卡片式設計

自從Android4.1上Google Now登臺亮相之后,卡片式這種設計思路/風格慢慢就流行了起來,被大家所關注和使用。

Google將它稱之為“Inside Out design(由內而外式)”,它的本質是更好的處理信息集合,那么卡片式設計適合運用在什么地方呢?

  • 增加空間利用率。
  • 區分不同維度內容。
  • 提升可操作性。

1. 增加空間利用率

相比于傳統列表式布局,卡片式設計能更好的打破原有的框架。

比如,在傳統列表下,內容一般為縱向滾動操作,展示的內容有限。而采用卡片式的布局,在縱向的內容流里,還可以很好的增加橫向滑動的內容區域,而且看起來很整體。

比如,知乎feed流里增加知乎live的橫向滑動內容。

2. 區分不同維度內容

卡片,其實比較像一個容器,你可以把不同維度的內容放入不同的卡片中,使其在內容區分的同時,還能保持界面的統一性。

比如:淘寶采用卡片處理信息的層級。第一個卡片承載著:個人信息及偏好;第二個卡片:購買操作后的所有關鍵流程;第三個卡片:一些淘寶內使用率不高的功能聚合;第四個卡片,是對支付寶和理財產品的一種推廣;等等。

每個卡片都是不同維度,相對獨立的,但通過不同大小的卡片歸納后,比起傳統列表項 + 分割線 + 標題的視覺效率要高很多,顯得更有秩序。

再比如:荔枝FM、微信讀書,也是采用卡片式設計,來歸納不同維度的信息內容。

還有,微信公眾號和appstore,同樣是采用這種處理方式,把繁雜的信息以時間維度,歸納到不同卡片中。

3. 提升可操作性

卡片是一種擬真元素,可以被覆蓋、堆疊、移動、劃去,這樣能更好的拓展內容塊的視覺深度和可操作性。

比如:iPhone自帶的「提醒事項」APP,就是采用卡片堆疊的方式。用戶可按照標題快速查找目標備忘錄,同時進行點擊操作,打開卡片內容。

探探,運用卡片式設計,實現左右滑動代表感不感興趣的操作,從而增加產品的趣味性。

但是,卡片也有它的弊端。如果不在合適的場合下,盲目的使用卡片設計,也會使你的設計變得低效和空間浪費。

舉個例子,下面這種效果圖,設計師們應該都不陌生,因為是在各大設計網站上經常看到的。

但是,你認真分析下,好好的一個通訊錄,明明只有簡單的頭像和名字的元素,非要包裹在卡片里,而且卡片與卡片之間還要留出間距。為了視覺效果,空間這么浪費,并且影響效率。

如果按照微信的策略,好友可以加到5000,那么找個人不得向上滑動很久么?

 

三. 分割線設計

在UI設計中,最傳統也是最常見的分隔方式是「線」。它能起到分隔、組織、細化的作用,幫助用戶了解頁面層次,賦予內容組織性。

而「線」,可以分為以下兩種:

  • 全出血分隔線。
  • 內嵌式分割線。



1. 全出血分隔線

「出血」是一種平面印刷中的概念,而「全出血」指的是分隔線橫向貫穿整個頁面,一般為了區分更加獨立性的內容信息。

比如:知乎的「想法」feed流里,就是采用全出血分隔線的形式,讓信息分隔的更明顯,更加獨立性。


比如:google photo,用全出血分隔線,來區分上面的默認分類和下面相冊的模塊內容。
 



2. 內嵌式分割線

內嵌式分割線,不同于前者,它一般會在「線」的前面留有缺口,來區分統一模塊下的相關內容,目的是為了讓用戶瀏覽大量相關內容時,更加高效。

比如:知乎的「更多」頁面,卡片內采用內嵌式分割線,來區分同一維度下有關聯的內容。

比如第二個模塊里,我的創作、我的收藏、我的關注、我的邀請回答,都是「我」操作后的內容信息。而第三個模塊,已購內容、我的私家課、我的Live等等,都是跟「錢」或「付費」相關的。

所以,采用內嵌式分割線,比較適合這種劃分有關聯性的內容,同時能提升瀏覽效率。

其實,采用「線」的分割方式,相對其它兩種(卡片式設計、無框設計)是比較保守的解決方案,但是,前提是要處理好「線」的間距、粗細、顏色等問題。



四. 無框設計

無框設計是近兩年流行起來的一種新的趨勢,是去除界面中的邊框,分割線,用間距來區分內容。

它適合運用于:

  • 大圖為主。
  • 內容有規律。
  • 小眾且垂直產品。



1. 大圖為主

大圖為主指的是以圖片為主的產品,每張圖片本身就可以起到分割的作用,因此,不需要采用多余的線或邊框進行分割。

比如:instagram,發布圖片前,用戶被強制對圖片進行正方形截取,才能保證圖片在feed流里的寬度,撐滿全屏,從而看起來很整體。

可能有的同學會問,為什么國外的產品就這么高大上,微博怎么就不能去分割線,做減法,搞得洋氣一些呢?

那么大牙來帶你分析一下。instagram只支持發送固定尺寸的圖片和視頻,而微博支持發送圖片、文章、視頻、純文字、簽到、點評等等的內容。

同時微博feed流里的圖片,支持1張-9張不同情況的排版。而且1張圖片時,為了更好的呈現出用戶的原圖比例,還要處理成4:3,16:9,正方形,以及特殊尺寸的縮略樣式,同時還有gif圖的情況,還支持你在自己狀態下添加不同話題。那么你想只用間距留白來區分?場面會像剛地震完的樣子……

所以現在想,微博用卡片形式來承載這些內容信息,還是有一定的原因的。

2. 內容有規律

內容有規律指的是,留白間距上下的內容,最好是相對一致的、重復的、親密的,這樣用戶會下意識的將其分為一組。

比如,Airbnb采用的無框設計,原因是它們的信息元素很統一、重復,才給人營造出比較整體的感覺。同時,合理的運用大標題也起到關鍵性作用。

而同樣采用無框設計的「下廚房」APP,首屏由于每個模塊信息元素不一致,而且模塊內元素的左右間距也不一樣,字號種類過多,導致界面看起來相對有些雜亂。

3. 小眾且垂直產品

小眾且垂直的產品,一般情況下目標用戶聚焦,功能簡潔。因此,能夠比較好的運用無框設計,跳出傳統的規范做出創新的設計。

比如:輕芒雜志,采用無框設計的同時打破傳統的移動端瀏覽體驗,更符合它們自己的產品調性。

下面是FOOTAGE,一款小眾且文藝的產品,由VUE的團隊設計的。他們采用無框設計的前提是,每個界面元素有限,功能內容簡潔。

但如果你是像微博,淘寶,微信等體量的產品,用戶群體廣,內容繁雜且層級較深。那么,你需要找到一個效率更高的信息呈現和交互的基礎隱喻,無框設計可能就不太適合了。



五. 總結

總的來說,任何表現形式都應該是為了更好的呈現功能及內容,而不是盲目的追隨趨勢。

自成一派的優秀設計師并不需要受到任何風格的局限,因為他知道風格并無好壞之分,而是探索更適合自己產品的處理方式。

?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

沈陽漫動者計算機培訓學校 備案號:遼ICP備14015306號-1郵箱:bjaaa@aaaedu.cc

芭比直播app_芭比barbie官网_芭比直播app官方下载地址ios