他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

UI設計如何選擇界面布局樣式?

2018-6-30    博博

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

一起學設計 2018-03-15 17:32:59

什么是界面布局樣式?

界面布局樣式是指用于區分信息內容,層次的板式設計的具體方式。

總結和了解目前常用的界面布局樣式,可以讓設計師快速決策,選擇合適的設計方式。

界面布局樣式有哪些?

UI設計如何選擇界面布局樣式?

一.卡

利用「卡」設計界面,對應的是現在流行的「卡片式設計」,比如:APP Store 的 Today 頁面。

大海將從以下 3 點描述卡片設計的優勢:

  • 靈活性

  • 信息區分

  • 操作性和趣味性

靈活性

示例如下,分別是 Instagram,知乎,微博的首頁。

UI設計如何選擇界面布局樣式?

Instagram 的「推薦用戶」模塊,知乎的「知乎書店」模塊,微博的「問答」模塊,都利用了可以橫向滑動的卡片設計,打破了訂閱流信息垂直展示的限制,從而展示更多的信息。

信息區分—信息類型

示例如下,分別是天貓,嚴選,微信讀書的個人中心截圖。

UI設計如何選擇界面布局樣式?

這三個「個人中心」的設計,都利用卡片設計,對不同類型的信息進行了區分和歸整。

  • 天貓:第一張卡片式用戶個人信息,以及用戶自己收藏的內容和足跡數據;第二張卡片都是訂單數據;第三張卡片是運營卡片,用于專門的大型活動的內容展示;

  • 考拉:第一張卡片是用戶個人信息,以及用戶自己收藏的內容和足跡數據;第二張卡片都是訂單數據;第三張卡片是用戶相關的其他信息;第四張卡片是卡拉提供的服務。

  • 微信讀書:第一張卡片是用戶個人信息;第二張卡片是用戶賬戶的基本數據;第三張卡片是用戶自己生成的相關內容;

信息區分—時間

示例如下,分別是 APP Store,微信公眾號,微博的截圖。

UI設計如何選擇界面布局樣式?

這三個設計,都把復雜的內容信息,用卡片設計的形式,按照時間維度進行了整理和排序。

操作性和趣味性

示例如下,分別是支付寶,ZUO,探探的截圖。

UI設計如何選擇界面布局樣式?

  • 卡片是一種模擬物理世界的設計形式,擁有可操作隱喻,可以被覆蓋、堆疊、移動、劃去。

  • 支付寶卡包:模仿物理世界真實的銀行卡設計,利用用戶已有的銀行卡查看習慣,讓用戶快速理解和查看已綁定的銀行卡

  • ZUO:「ZUO」是一款小眾的,有趣新鮮創意的內容分享產品。主打追尋更美好的可能,產品設計別具特色。左滑卡片可以切換內容的設計,讓產品體驗更加靈動有趣。

  • 探探:一款陌生人社交軟件,廣告主打:左滑不喜歡,右滑喜歡的體驗,凸顯自己在同類型軟件中的體驗差異化,用戶的感受更加新鮮有趣。

卡片設計的反例

自從 iOS 11 之后,卡片設計的趨勢就被推向了高潮。設計網站上有很多卡片式設計作品出現。

卡片設計經常會呈現出比較好的視覺效果,但是卡片設計用的不好,會導致浪費空間,降低效率。

示例如下:是大海從 dribbble 上找來的設計,通訊錄的設計利用了卡片設計。

當用戶需要尋找聯系人時,呈「Z字型」閱讀曲線,遠沒有微信通訊錄的「直線型」閱讀效率高。

UI設計如何選擇界面布局樣式?

二.線

「線」指的是 APP 設計中最常見的「分割線」,在分割線當中可以分為兩類:

UI設計如何選擇界面布局樣式?

貫穿式

「貫穿式」是指,線長度貫穿屏幕,左右邊距為零。貫穿式分割線可以讓被分割的信息的獨立性變強。

示例如下:分別是豆瓣的首頁,網易云音樂的動態截圖。

UI設計如何選擇界面布局樣式?

兩者的共同點是,每一塊信息的內容較多,關聯性弱。需要用貫穿式分割性,讓每一個信息內容,更加獨立。

內嵌式

「內嵌式」是指,線的左右邊距留有空隙。內嵌式分割線,可以有助于信息閱讀的流暢性。

示例如下:分別是 APP Store 今日主題的列表頁,36Kr 的個人中心頁面。

UI設計如何選擇界面布局樣式?

貫穿式和內嵌式經常是同時使用的,如下圖:網易嚴選的填寫訂單頁面

UI設計如何選擇界面布局樣式?

圖中列表「商品合計」「運費」是相對關聯性較強的,因此這兩者之間用了內嵌式分割線。「我要開發票」和它們之間是相對獨立的,因此使用貫穿式分割線。

分割線設計的反例

分割線設計是界面當中最常用的元素,大海看了這么多APP,截了這么多圖,都沒有發現界面中一根線都沒有使用的產品。

分割線設計要注意是否應該使用,以及使用時線的顏色,粗細。

下圖中:知乎的「個人中心」,來源于網絡的日歷設計。

UI設計如何選擇界面布局樣式?

知乎:線的顏色用的過重,導致當看到這個頁面時,會感受到滿眼都是線。改進方法有兩種:把線改細,改淡;把列表文字改重。總結下來就是拉開文字和線的對比。

日歷:日期本身的排版已經把信息區分的比較明顯,此時不需要使用分割線。假設 「親密」 「對比」 「重復」 足以讓信息得到區分,不使用分割線,可以讓你的設計,更加透氣簡潔。

三.間距

利用「間距」設計界面,對應的是現在流行的「無框設計」,不用分割線,純粹用間距實現信息的排版。

大海將從以下 2 點描述其適用性:

  • 圖片為主

  • 內容少且有規律

圖片為主

示例如下:分別是 Instagram,愛彼迎,紅板報的界面截圖。這些頁面中,均以圖片為主。圖片本身的邊緣具備分隔作用。

UI設計如何選擇界面布局樣式?

內容少且有規律

示例 1:愛彼迎的「故事頁面」和「搜索結果頁」,兩者都只有 2 中信息板式。內容少且有規律。

UI設計如何選擇界面布局樣式?

示例 2:輕芒的「分類頁」和「類別首頁」,分類頁只有一種板式,并橫向排版展示。類別首頁只有一屏信息。

UI設計如何選擇界面布局樣式?

總結:卡,線,間距都是頁面當中基礎元素,希望本篇文章可以幫助設計師掌握和了解這 3 個基礎元素的適用性。在設計執行中,更加風馳電掣,如沐春風。


日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔