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

項(xiàng)目背景：為了配合世界杯做的H5活動(dòng)，主題是DIY你的世界杯時(shí)刻                                      

玩法：選擇自己看世界杯的場(chǎng)景，可以在畫(huà)面當(dāng)中添加食物和自定義的小元素，另外根據(jù)場(chǎng)景的變換人物的腿也可以選擇哦                                                 

項(xiàng)目周期大概半個(gè)月，和團(tuán)隊(duì)的小伙伴一起完成的，感謝@珊，@暖暖，@明明   

使用工具包括sketch、ps、手繪板                                                                    

ps：做H5真的是很累，工作量大，畫(huà)的手疼，不過(guò)也積累了很多的經(jīng)驗(yàn)，上線(xiàn)了好開(kāi)心!

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

2018年UI設(shè)計(jì)趨勢(shì)概覽

嗨兔科技 2018-06-11 10:41:59

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

互聯(lián)網(wǎng)產(chǎn)品的用戶(hù)界面設(shè)計(jì)趨勢(shì)是根據(jù)用戶(hù)的不同需求而不斷變化的。在仔細(xì)分析了過(guò)去幾年用戶(hù)界面設(shè)計(jì)的趨勢(shì)和創(chuàng)新之后，我們可以發(fā)現(xiàn)其背后的一些規(guī)律，2018年UI界面設(shè)計(jì)的趨勢(shì)如下。

漸變色

在過(guò)去的幾年里，越來(lái)越多的設(shè)計(jì)師在設(shè)計(jì)作品時(shí)采用了色彩漸變的方法，今年的流體漸變更是風(fēng)靡全球。即使你只選擇了一種顏色，也可以在色彩漸變和不同圖片的幫助下，營(yíng)造出出豐富的層次結(jié)構(gòu)感，繪制出一幅令人賞心悅目的畫(huà)面。因此，色彩漸變的流行之風(fēng)不僅在席卷了2017年整年，還將會(huì)在2018年繼續(xù)流行下去。

icon由線(xiàn)轉(zhuǎn)面、刻畫(huà)細(xì)節(jié)

現(xiàn)在的ios12中，采用了面性圖標(biāo)，未選中和選中狀態(tài)只有顏色上的區(qū)分，并且圖標(biāo)更加圓潤(rùn)。目前很多用戶(hù)界面已經(jīng)給頁(yè)面底部標(biāo)簽欄的icon加上微動(dòng)效底部標(biāo)簽欄icon不僅有微動(dòng)效，十分有意思，符合當(dāng)下95后00后的用戶(hù)心態(tài)。同時(shí)細(xì)節(jié)的設(shè)計(jì)帶給用戶(hù)的感受也會(huì)上一個(gè)檔次。

透明度+重疊

字體、圖形以及顏色的重疊，不僅可以使界面看上去更加醒目鮮明，還可以營(yíng)造出一種空間感。 相同元素的重疊，再輔以陰影，也會(huì)使整個(gè)APP界面的設(shè)計(jì)產(chǎn)生更多的奇妙感，牢牢抓住用戶(hù)眼球，給他們留下深刻印象。因此，用戶(hù)體驗(yàn)設(shè)計(jì)中，不同元素的重疊將會(huì)成為2018年的趨勢(shì)。

卡片+投影相結(jié)合

ios12中采用了大圓角卡片設(shè)計(jì)，它不再像過(guò)去MD中的小圓角那樣呆板，大圓角讓設(shè)計(jì)更加輕快大氣。相信大家已經(jīng)看到了很多卡片都使用了投影這一手法，輕微的、似有似無(wú)的投影，不會(huì)被用戶(hù)立即察覺(jué)，但是會(huì)給設(shè)計(jì)增加深度，形成層疊的關(guān)系，更加醒目，可以更好的抓住用戶(hù)的注意力。

插畫(huà)風(fēng)格

插畫(huà)風(fēng)格運(yùn)用的越來(lái)越廣泛，適用于app當(dāng)中的啟動(dòng)頁(yè)、缺省頁(yè)、banner圖、專(zhuān)題頭圖、彈窗插畫(huà)、icon等等，UI界面有各式各樣的插畫(huà)風(fēng)格——如手繪風(fēng)格、簡(jiǎn)約風(fēng)格、MBE風(fēng)格、剪紙風(fēng)格和孟菲斯風(fēng)格等。這些插畫(huà)風(fēng)格的使用不僅使APP更加有趣和與眾不同，同時(shí)也賦予了用戶(hù)界面?zhèn)€性，這就在界面設(shè)計(jì)層出不窮的當(dāng)下能夠給用戶(hù)留下更為深刻的印象。

較強(qiáng)的顏色或字體大小對(duì)比

強(qiáng)烈的顏色或字體對(duì)比也可以幫助設(shè)計(jì)師設(shè)計(jì)出優(yōu)秀的用戶(hù)界面來(lái)吸引用戶(hù)的注意。例如，添加不同樣式、類(lèi)型、大小的字體，也可以傳遞層次和空間的感覺(jué)。而不同類(lèi)型和風(fēng)格的配色也會(huì)形成鮮明的對(duì)比，使整個(gè)設(shè)計(jì)更加豐富多彩和引人注目。

3D效果正流行

今年C4D大熱，相信大家已經(jīng)感受到了，今年雙十一很多商家都使用了3D效果，有的還加上了動(dòng)效，可以讓你全方位、多角度、更加真實(shí)的觀(guān)察商品。目前還不會(huì)C4D的設(shè)計(jì)師們，為了提升你的競(jìng)爭(zhēng)力，有必要學(xué)起來(lái)了，畢竟技多不壓身。

交互動(dòng)效

給APP的圖標(biāo)、字體、照片和按鈕添加動(dòng)畫(huà)或交互總是對(duì)用戶(hù)有著積極的影響，因?yàn)樗軒в脩?hù)更多愉快的體驗(yàn)。它的幾點(diǎn)特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺(jué)效果。所以這一趨勢(shì)在2018年還將繼續(xù)流行下去。

動(dòng)態(tài)視頻

一般小視頻使用在啟動(dòng)頁(yè)多用于第一次打開(kāi)app的場(chǎng)景，對(duì)用戶(hù)的代入感較強(qiáng)再如由動(dòng)態(tài)圖片轉(zhuǎn)變成動(dòng)態(tài)視頻，圖片中有少量的動(dòng)態(tài)元素，仿佛賦予圖片生命，比較唯美和貼近現(xiàn)實(shí)。手機(jī)banner設(shè)計(jì)上也會(huì)采用動(dòng)態(tài)視頻進(jìn)行展現(xiàn)，方便360度的查看商品，刺激你剁手的欲望。

VR/AR/VUI是未來(lái)的大趨勢(shì)

眾所周知，現(xiàn)在VR（虛擬現(xiàn)實(shí)）和AR（增強(qiáng)現(xiàn)實(shí)）VUI（語(yǔ)音交互設(shè)計(jì)）大火，它們的核心都是計(jì)算機(jī)視覺(jué)和聽(tīng)覺(jué)。VR目前在娛樂(lè)領(lǐng)域被使用，而AR將會(huì)真正影響我們的工作和生活，多用于多媒體、市場(chǎng)營(yíng)銷(xiāo)、教育等方面。VUI在醫(yī)療和戶(hù)外活動(dòng)方面會(huì)發(fā)揮出前所未有的用戶(hù)超級(jí)體驗(yàn)。

---

我們?yōu)閯?chuàng)造者和變革者而生，我們幫助企業(yè)制定用戶(hù)體驗(yàn)策略，為用戶(hù)創(chuàng)造精彩的數(shù)字體驗(yàn)，并通過(guò)品牌設(shè)計(jì)與用戶(hù)建立情感的連接，用設(shè)計(jì)驅(qū)動(dòng)商業(yè)策略的成功。

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

IT之家6月28日消息 今天微軟推送了的Windows 10 RS5快速預(yù)覽版17704系統(tǒng)，在該版本中，微軟刪除了Sets窗口管理功能，這是一種全新的任務(wù)型分組的Windows UI多窗口。被譽(yù)為Windows 95以來(lái)最大窗口UI變動(dòng)。

當(dāng)我們?cè)诰W(wǎng)上購(gòu)物，提交我們個(gè)人信息都需要用到按鈕。網(wǎng)頁(yè)UI設(shè)計(jì)的增長(zhǎng)很快，風(fēng)格似乎也是一個(gè)月一變。最近幾年，我們經(jīng)歷過(guò)從文 本鏈接到擬物化設(shè)計(jì)再到扁平化瀑布流設(shè)計(jì)。導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中最重要的元素，并且按鈕是最重要的行為工具。

前方山高水長(zhǎng)，我們都在路上。

隨著特斯拉智能電動(dòng)汽車(chē)憑借其全新的電動(dòng)能源和智能化的大屏操作系統(tǒng)在全球的走紅。在中國(guó)也引起了強(qiáng)烈的蝴蝶效應(yīng)，小鵬汽車(chē)，蔚來(lái)汽車(chē)和威馬汽車(chē)等主打互聯(lián)網(wǎng)智能的汽車(chē)應(yīng)運(yùn)而生。在新的一年汽車(chē)UI可能會(huì)成為下一個(gè)設(shè)計(jì)熱點(diǎn)。

說(shuō)起nubia，很多人的印象當(dāng)中就是硬件很不錯(cuò)，但是系統(tǒng)很渣，自己也是4年的老牛仔了，對(duì)于Nubia的系統(tǒng)，是看著它一點(diǎn)一點(diǎn)成長(zhǎng)的，咱們先談?wù)凬ubia UI 的歷史：

端午節(jié)到了，阿里巴巴TXD的小伙伴們準(zhǔn)備送你只'口味粽'，祝大家假期玩的開(kāi)開(kāi)心心，點(diǎn)擊圖片識(shí)別二維碼便可生成你專(zhuān)屬的‘口味粽’。

01

—

項(xiàng)目背景

阿里對(duì)待中秋節(jié)會(huì)更加的濃重，每年中秋節(jié)所有的員工都會(huì)收到精美的月餅和祝福。相比之下我們的端午節(jié)就過(guò)得比較平淡了，于是咱們團(tuán)隊(duì)的小伙伴們準(zhǔn)備做一個(gè)H5，用我們的自己的方式送大家以及自己一枚口味粽。

整個(gè)項(xiàng)目的初衷有兩個(gè)，一個(gè)是代表TXD送給大家端午節(jié)的祝福，另一個(gè)就是用團(tuán)隊(duì)協(xié)作的方式在極短的時(shí)間里面設(shè)計(jì)一款H5。

02

—

項(xiàng)目思路

對(duì)于我們來(lái)說(shuō)最大的挑戰(zhàn)是時(shí)間。距離端午假期僅剩一周不到的時(shí)間，而大家都有自己的業(yè)務(wù)工作，難道放棄？既然已經(jīng)立下了flag，怎么也得完成。我們制定了項(xiàng)目的節(jié)點(diǎn)，并且通過(guò)多枚成員分工協(xié)作去完成它。

大部分項(xiàng)目是需要協(xié)作完成的，一旦協(xié)作不好，項(xiàng)目進(jìn)度則事倍功半。所以最考驗(yàn)大家的是怎么進(jìn)行更的協(xié)作。通過(guò)有效的決策，我們讓協(xié)作變得順利。

我們通過(guò)小組會(huì)議確定玩法后，分配人員進(jìn)行文案和交互設(shè)計(jì)。由主設(shè)計(jì)師定下設(shè)計(jì)風(fēng)格，其他設(shè)計(jì)根據(jù)風(fēng)格繪制UI以及其他場(chǎng)景素材。所有素材實(shí)時(shí)同步在項(xiàng)目群里，確保保持統(tǒng)一的風(fēng)格。

03

—

項(xiàng)目介紹

首先我們的粽子不是一般的粽子≧ω≦，我們粽子的餡兒都采用各種珍稀的食材。

這些“珍稀”食材通過(guò)我們神秘的構(gòu)造機(jī)做成不同的神奇粽子！

更多不一樣的粽子，通過(guò)我們的機(jī)器定制屬于自己的神奇粽子。

本次的項(xiàng)目屬于我們的團(tuán)隊(duì)成員通過(guò)空閑時(shí)間在短時(shí)間里面完成的。只是想送給端午節(jié)的童鞋們一個(gè)小小的祝福。

Android和iOS在過(guò)去幾年里，APP界面的UI設(shè)計(jì)變化很大，從擬物到扁平，蘋(píng)果目前為iOS8，而谷歌最近推出了全新的Material Design風(fēng)格。隨著界面風(fēng)格的迅速演變，很多移動(dòng)應(yīng)用也跟著更新，并使用新界面的一些新特性。

一、當(dāng)前背景

今天聊些設(shè)計(jì)基礎(chǔ)部分。

設(shè)計(jì)工作中，我們總會(huì)接到不同場(chǎng)景、不同目標(biāo)用戶(hù)的業(yè)務(wù)需求，需要不同風(fēng)格的設(shè)計(jì)方案支持，但無(wú)論是什么風(fēng)格的設(shè)計(jì)，用戶(hù)都會(huì)有一個(gè)共同訴求——「品質(zhì)感」。

二、什么是品質(zhì)感？

所謂品質(zhì)感其實(shí)就是產(chǎn)品給人的一種嚴(yán)謹(jǐn)、專(zhuān)心對(duì)待的態(tài)度。同樣一本書(shū)的封面，粗糙紙的封面和細(xì)心打磨的小羊皮封面就是不同的概念。

例如無(wú)印良品和愛(ài)馬仕，兩者都會(huì)傳達(dá)給用戶(hù)一種「品質(zhì)感」，雖設(shè)計(jì)方向不同，但他們有一個(gè)共同的特性——對(duì)細(xì)節(jié)的深度打磨。其實(shí)品質(zhì)感就是來(lái)源于產(chǎn)品對(duì)細(xì)節(jié)的深度考究與打磨。

一款有品質(zhì)感的設(shè)計(jì)，隨之帶來(lái)的是用戶(hù)使用中的舒適度、好感度、信賴(lài)感。

三、界面中的品質(zhì)感

界面設(shè)計(jì)也是一樣，也會(huì)帶給用戶(hù)一種品質(zhì)感，其同樣是源于設(shè)計(jì)師對(duì)界面的每處細(xì)節(jié)的深度考究。

界面的品質(zhì)感主要來(lái)源于界面四個(gè)維度、界面中的結(jié)構(gòu)、界面中的圖形、界面中的顏色和界面中的動(dòng)態(tài)，今天說(shuō)如何通過(guò)結(jié)構(gòu)提升界面品質(zhì)感。

四、界面中的結(jié)構(gòu)

界面的結(jié)構(gòu)在用戶(hù)體驗(yàn)中起著重要作用，其相當(dāng)于界面設(shè)計(jì)中的「骨」，界面結(jié)構(gòu)中的細(xì)節(jié)更是會(huì)直接影響到整體設(shè)計(jì)的品質(zhì)感。那么具體結(jié)構(gòu)中的細(xì)節(jié)體現(xiàn)在哪里？

1. 關(guān)系

信息關(guān)系包含界面中的組合、層級(jí)、分割等。

組合

「物以類(lèi)聚」，界面內(nèi)需明確傳達(dá)各元素間的關(guān)系。

輔助信息服務(wù)于主體信息：輔助信息為主體內(nèi)容的延續(xù)說(shuō)明或補(bǔ)充操作，作用為服務(wù)于主體內(nèi)容。同一組合內(nèi)，信息間需有明確的關(guān)系與合理的順序，且輔助信息不能搶鏡。例如朋友圈，清晰傳達(dá)關(guān)系的同時(shí)，以?xún)?nèi)容為主的閱讀方式不會(huì)被頭像內(nèi)容干擾。

關(guān)系越緊密的內(nèi)容距離應(yīng)越近：形式不變的基礎(chǔ)上，元素之間的距離越近，越易被視為同一組合。距離相同時(shí)，橫向排列的內(nèi)容接近度相對(duì)更高。

層級(jí)

界面的層級(jí)關(guān)系主要體現(xiàn)在主次、優(yōu)先級(jí)、層數(shù)。

主次分明、避免層級(jí)混亂：清晰的層級(jí)結(jié)構(gòu)，能讓用戶(hù)更快的獲取重要內(nèi)容，同一組合下其信息一定有主要展示和次要展示。可以通過(guò)位置、面積、顏色三個(gè)維度建立主次層級(jí)的對(duì)比度。

• 位置。在中國(guó)，用戶(hù)的閱讀習(xí)慣為從左上至右下，所以用戶(hù)對(duì)左上區(qū)域的觀(guān)察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱(chēng)為「最佳視域」。
• 面積。信息內(nèi)容在界面內(nèi)的占比面積越大，信息越是突出。
• 顏色。白色背景下，明度越低/飽和度越高，信息越是突出。

同一組合下，有且僅能有一個(gè)最重要的內(nèi)容：當(dāng)所有的內(nèi)容都重要，也就等于所有內(nèi)容都不重要，信息的優(yōu)先級(jí)不取決于主要信息是否夠大，而是主要信息和次要信息的對(duì)比度。

同一頁(yè)面，信息層級(jí)不宜過(guò)多：過(guò)多的信息層級(jí)會(huì)讓頁(yè)面變得復(fù)雜，增加用戶(hù)的理解成本。冗余的信息展示會(huì)讓界面變的凌亂瑣碎，一定程度上干擾用戶(hù)使用體驗(yàn)。一般情況下界面應(yīng)控制在3層信息以?xún)?nèi)。

主次分明、優(yōu)先級(jí)明確、層級(jí)適當(dāng)會(huì)讓界面的信息傳達(dá)更清晰明確，進(jìn)而增加用戶(hù)的使用中的舒適度。

分割

分割是用于區(qū)分不同信息的方法，大概可以分為距離分割、線(xiàn)性分割、面性分割（背景色分割）、顏色分割。

距離分割：增大兩模塊的距離達(dá)到內(nèi)容分割內(nèi)容作用，元素間的距離越遠(yuǎn)，越不易被視為同一組合。其好處是可以省去分割元素，減少視覺(jué)層級(jí)，讓界面更干凈、明快。

線(xiàn)性分割：線(xiàn)性分割是目前界面中最常用的分割方式，其優(yōu)勢(shì)是線(xiàn)自身「較輕」，不易干擾用戶(hù)。值得注意的是線(xiàn)本身不重要，不宜過(guò)度強(qiáng)調(diào)，應(yīng)點(diǎn)到為止，所以線(xiàn)的顏色不宜過(guò)重。

面性分割/背景色分割：當(dāng)處理多層級(jí)、信息復(fù)雜的場(chǎng)景，在單個(gè)模塊里已經(jīng)用了線(xiàn)性分割的情況下?？赡苄枰鼜?qiáng)一點(diǎn)的分割方式來(lái)表明模塊與模塊間的關(guān)系，這時(shí)我們可能需要面性分割方式。這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達(dá)兩組內(nèi)容的分割感，但其缺點(diǎn)是會(huì)較明顯的增多界面層級(jí)。

顏色分割：當(dāng)信息的表現(xiàn)形式重復(fù)性較高，容易被看混的情況下，顏色分割是更為合適的選擇。

能起到分割作用的前提下，分割方式越輕，越不會(huì)干擾閱讀、界面越干凈。

以上可以總結(jié)為

• 界面中的組合能讓信息關(guān)系更縝密。
• 層級(jí)能讓用戶(hù)更快的獲取重要內(nèi)容。
• 分割能讓用戶(hù)更清晰的區(qū)分不同模塊間關(guān)系。

2. 字體

文字字體是界面結(jié)構(gòu)中重要組成部分，文字也是多數(shù)場(chǎng)景下信息傳達(dá)最為準(zhǔn)確的方法。合理的字體能夠增加用戶(hù)的閱讀體驗(yàn)，提升用戶(hù)在產(chǎn)品使用中的舒適度。合理的字體包含字體的可讀性、對(duì)比度、間距。

可讀性：可讀性是字體在界面中需考慮的基礎(chǔ)因素，也是首要因素。字體的信息傳達(dá)需精準(zhǔn)、明確。字形選擇包括其場(chǎng)景適應(yīng)和字形的適度性。

字形的場(chǎng)景適應(yīng)：由于不同的字形會(huì)帶給用戶(hù)不同的感覺(jué)。由于場(chǎng)景需要，我們一定情況下會(huì)選擇自定義字體。當(dāng)我們選擇不同的字體時(shí)，需要考慮字體在產(chǎn)品內(nèi)不同模塊下是否易于閱讀。

字形的適度性：字體本身不宜搶鏡。隨意的、搶眼的字體一定場(chǎng)景下上能夠帶來(lái)足夠的氛圍感，但是長(zhǎng)期使用會(huì)出現(xiàn)「視覺(jué)疲勞」，其原因是字體本身的設(shè)計(jì)搶走了用戶(hù)正常在該場(chǎng)景下閱讀或使用的內(nèi)容和信息。

對(duì)比度

字號(hào)：用于區(qū)分不同層級(jí)的信息內(nèi)容，為保證信息的快速傳達(dá)，不同層級(jí)的字體需有一定的優(yōu)先級(jí)順序。

界面內(nèi)的主文案/一級(jí)文案應(yīng)精簡(jiǎn)明確。假設(shè)用戶(hù)只會(huì)在這個(gè)界面停留3、4秒，能夠吸引用戶(hù)繼續(xù)瀏覽界面的就是一級(jí)信息。當(dāng)一級(jí)信息文案字?jǐn)?shù)過(guò)多，會(huì)增加用戶(hù)剛進(jìn)入頁(yè)面時(shí)的閱讀成本，進(jìn)而降低閱讀體驗(yàn)。

另外，移動(dòng)端小于24px的字號(hào)應(yīng)慎重使用，雖然小的字號(hào)會(huì)讓版式更加的精致，但當(dāng)同一場(chǎng)景下，小于24px的文案字?jǐn)?shù)偏多時(shí)，會(huì)影響用戶(hù)的正常閱讀。但可用于弱化的文字鏈、標(biāo)簽等字?jǐn)?shù)少的場(chǎng)景。

加粗：字號(hào)相同，字體加粗也是區(qū)分不同層級(jí)信息的一種方法，當(dāng)兩信息區(qū)分度不大、界面層級(jí)過(guò)多需要減少層級(jí)的場(chǎng)景下，可以選擇加粗部分內(nèi)容建立輕度對(duì)比。

字色：我們畫(huà)畫(huà)的時(shí)候，時(shí)常會(huì)聽(tīng)到老師說(shuō)「要注意畫(huà)面的黑白灰」。在界面設(shè)計(jì)中，也是一樣，我們需注意各層級(jí)字體間的黑白灰關(guān)系。明確的畫(huà)面黑白灰關(guān)系會(huì)讓界面變得更干凈清晰。另外，當(dāng)不同明度切換時(shí)應(yīng)保持色相/飽和度不變。

間距：在界面設(shè)計(jì)中，字間距和行間距會(huì)直接影響用戶(hù)閱讀效率。過(guò)于緊密的間距會(huì)讓字體間失去「透氣性」，根據(jù)我們正常的閱讀順序來(lái)講，字間距要小于行間距以便于每一行更易被視為一組，進(jìn)而給用戶(hù)帶來(lái)更好的閱讀體驗(yàn)。我們可根據(jù)文案長(zhǎng)短，字號(hào)大小制定更適合閱讀的間距。

字體的可讀性是字體的基礎(chǔ)，明確的字體對(duì)比度能夠讓信息層級(jí)更加清晰干凈，而合理的字間距能夠無(wú)形的提升用戶(hù)的閱讀體驗(yàn)。

3. 信息對(duì)齊

對(duì)齊是界面結(jié)構(gòu)中的一部分，合理的對(duì)齊方式能夠使界面內(nèi)的信息變得更規(guī)整，內(nèi)容傳達(dá)更明確。讓元素間的關(guān)系更具節(jié)奏感。

聯(lián)系性

同一組合內(nèi)的不同元素間需有明確的對(duì)齊關(guān)系，其關(guān)系能夠清晰表達(dá)不同元素間的親密性。

元素間的居左對(duì)齊：當(dāng)文案的字?jǐn)?shù)偏多一些的場(chǎng)景下，居左對(duì)齊更符合用戶(hù)的閱讀習(xí)慣。

元素間的居中對(duì)齊：當(dāng)內(nèi)容信息較少、或由于對(duì)齊元素形狀等因素，居中對(duì)齊可能會(huì)帶來(lái)意外的收獲與效果。

元素間的居右對(duì)齊：界面內(nèi)一般不會(huì)用居右對(duì)齊的方式來(lái)建立兩元素間的關(guān)系，但是界面內(nèi)會(huì)存在和屏幕建立右對(duì)齊關(guān)系的元素，與屏幕右對(duì)齊的元素一般為主體的解釋說(shuō)明以及輔助操作等。一般情境下，當(dāng)用戶(hù)閱讀完主要內(nèi)容信息后才會(huì)對(duì)操作類(lèi)的功能有需求，如查看購(gòu)買(mǎi)、關(guān)注、查看更多、進(jìn)入下一頁(yè)面等。

統(tǒng)一性

另外，不同組件間也需要合理的建立對(duì)齊關(guān)系，同時(shí)為保持界面的簡(jiǎn)潔性，同一界面內(nèi)建立的對(duì)齊模式不要過(guò)多。

總結(jié)

界面的結(jié)構(gòu)是提升界面品質(zhì)感的關(guān)鍵，而合理的信息關(guān)系、字體、對(duì)齊方式能夠讓界面的結(jié)構(gòu)更加完整，精致。也希望每個(gè)設(shè)計(jì)師的作品都更加的美而精致。