UI界面設(shè)計的目的在于給用戶視覺沖擊力的同時,也能給予用戶良好的操作體驗和服務(wù)享受,所以一個優(yōu)秀的UI界面設(shè)計,要仔細思考界面上功能按鈕、程序跳轉(zhuǎn)等基本要素,還要從視知覺的構(gòu)成方面去考慮用戶的視覺辨析和記憶,通過不同的秩序編排形式,達到減輕用戶負擔的目的。今天AAA教育小編姐姐帶你看看UI設(shè)計都有哪些風格?
相對于視覺傳達設(shè)計而言,交互界面更加注重用戶與界面的互動,用戶對界面的理解將直接關(guān)系到用戶能否順利操作并達到自己的目的。通過對秩序感理論的闡述,說明秩序感對交互界面設(shè)計非常重要,并以實例總結(jié)常見的交互界面布局,分析其中的秩序感及其作用。
首先要能夠做到視覺吸引。接觸到交互界面時首先映入眼簾的肯定是整體的用色和布局,類似于服務(wù)的宣傳。獨特的知覺形式能吸引用戶眼球,并產(chǎn)生深入了解的意愿,于無形中與用戶建立信任可靠的關(guān)系。
其次是可以尋找到信息。當一個用戶使用某個交互界面時,首先是想找到與自己期待的服務(wù)相關(guān)的信息。這就要求交互界面的設(shè)計可以有個性化元素,但也必須有內(nèi)在的秩序感,如音樂播放軟件,用戶最需要的歌曲搜索、播放、暫停等一定要出現(xiàn)在適當位置,讓用戶把注意力集中在重要的地方。
再是要有辨識度。這要求UI交互界面的信息要適量,信息布局有其秩序性和規(guī)律性,減少用戶識別的負擔。此外,信息描述和內(nèi)容布局也極為重要,信息量過大、信息分布不合理等都會對用戶注意力產(chǎn)生影響。用戶操作過程中發(fā)現(xiàn)設(shè)備顯示的信息與與其目標一致,便會根據(jù)提示進行下一步操作。這就要求輔助信息在適當時刻呈現(xiàn)出來,如用戶在點擊按鈕的時候,按鈕應(yīng)該通過色彩的變化和聲音提示等方式給予用戶反饋。
最后界面設(shè)計要有秩序感,UI交互界面設(shè)計同平面版式設(shè)計有很多共同之處,需要按照一定的科學與藝術(shù)的原理進行文字、圖形的布局設(shè)計,在有限的屏幕空間上將用戶所需要的服務(wù)和信息綜合呈現(xiàn)出來,將理性思維通過個性化的方式表現(xiàn)出來。秩序感就是在這些元素的排列組合中產(chǎn)生了,不但要符合人眼視覺的一系列規(guī)律,還要符合形式美的法則。
秩序感在一定程度上決定了UI交互界面的總體格調(diào)是簡潔有序還是豐富多變,通常不同類型的交互界面會選擇不同的秩序感,來滿足不同用戶的視覺心理需要。利用人們與生俱來的對“秩序感”的認同和欣賞以及適應(yīng)和選擇進行交互界面設(shè)計,不失為一條發(fā)展交互界面設(shè)計的有效途徑。在未來的交互界面設(shè)計發(fā)展中,只有做到內(nèi)容與形式、視知覺經(jīng)驗與心理定向的統(tǒng)一,才能促進人與設(shè)備的情感交流,進而獲得更好的用戶體驗。
以下是一些UI設(shè)計比較明顯的風格:
點陣式
這種形式將設(shè)備的主要功能圖標如點陣般排布在頁面上,當圖標較多時,用戶大多可以創(chuàng)建文件夾,將功能用途相近的圖標放在一起,這一形式的靈活性較大,可以讓用戶按照自己的需要排版界面,不僅用戶自由度高,而且有強烈的秩序感,極易識別和使用。這類秩序感的UI界面常用于手機、掌上電腦等移動設(shè)備。
居中式
居中布局方式的優(yōu)點是展示的信息內(nèi)容量大,信息結(jié)構(gòu)屬于寬而淺類型,盡可能將信息呈現(xiàn)到主頁,一覽無余的供用戶選擇,所以比較適用于公共服務(wù)系統(tǒng)界面和局部系統(tǒng)交互界面等。但是這樣的信息多而密,易產(chǎn)生視覺疲勞和接收錯誤;尤其是界面左右兩邊都有操作鍵時,用戶反而會感到有些混亂。
整體式
整體布局更加的隨意,相比較前幾種形式而已,其秩序感相對較弱,反而更加強調(diào)個性化的表現(xiàn),所以適合于信息展示型界面。這一類的交互界面常用精致的背景、藝術(shù)化的圖案裝飾等元素,這些元素的排布非常自由,因而顯得比較活潑靈動,畫面也會比較均衡協(xié)調(diào),可以一下子吸引用戶的眼球。但是這一形式的缺點在于操作性UI界面功能區(qū)塊劃分不夠清晰,易引起信息混亂,所以用戶要花上一些時間才能夠?qū)W會并記憶操作方式
功能性極簡主義
不少移動端APP和網(wǎng)站開始基于極簡主義設(shè)計風來設(shè)計,而極簡主義本身并非關(guān)注所有的信息,而是通過減少非關(guān)鍵信息來突出特定的內(nèi)容,它是有著極強的功能性和偏向的。簡單明晰、富有表現(xiàn)力的視覺層次、對比明顯的比例控制、每個元素都有功能、大量的留白、對核心細節(jié)的高關(guān)注度、優(yōu)秀的排版設(shè)計、去除非功能性的裝飾元素是它的一些特征。
帶動效的首圖banner
在網(wǎng)頁中,首圖Banner 是最為吸引用戶的內(nèi)容,他們不僅在視覺上足夠突出,而且能夠傳遞信息,傳達情緒,強化主題。動效的加入,讓首屏的Banner圖更加吸引人,富有更強的吸引力
粗野主義風格
粗野主義設(shè)計在2017年非常火爆,采用這種風格的UI設(shè)計,致力于使用更加明亮的色彩,質(zhì)樸甚至原始的設(shè)計元素,借助復雜的布局和反模式的排版,還原早期網(wǎng)頁設(shè)計的特征,甚至制造出上世紀八九十年代的質(zhì)感。它有著非常明顯的獨創(chuàng)性,不管你喜歡不喜歡,它都是無法被忽略的一種流行設(shè)計風格。
自定義主題的插畫
插畫有著極強的可定制性,這也使得它越來越多地出現(xiàn)在UI和網(wǎng)頁設(shè)計中,它不僅更容易被用戶所感知,可以更好地承載創(chuàng)意,也可以帶來更加可控的風格和調(diào)性。此外,優(yōu)秀的插畫還能干刪用戶體驗,提高可訪問性。
字體和圖片的融合
大膽地將虛擬的字體和真實的圖片融為一體的設(shè)計也是去年流行的設(shè)計手法,這種設(shè)計手法讓字體擁有了融入真實場景的視覺體驗,協(xié)調(diào)而賞心悅目。
全屏式布局
如果你仔細觀察,會發(fā)現(xiàn)許多設(shè)計師都熱衷于使用全屏式的布局,讓圖片和視頻等視覺元素不再受到邊框的限制,這樣的布局更加寬敞,不會 有打破界限的感覺。
多樣的UI動效
在動效設(shè)計這件事情上,在2017年越來越成熟了,融入交互的動效越來越圓融,用戶體驗引人入勝的APP也越來越多了。接下來,UI動效還會越來越優(yōu)秀。
卡片式布局元素
卡片式布局的優(yōu)勢在于它的自由度,它足以承載各種類型不同功能的元素和模塊,擁有著統(tǒng)一的美學特征和易于閱讀、易于交互的特點,為更為協(xié)調(diào)的設(shè)計作出了不小的貢獻
單色UI
為了讓UI和產(chǎn)品的功能性更強,不少設(shè)計師傾向于使用單色配色方案,這樣設(shè)計出來的UI確實看起來更加時尚,最關(guān)鍵的是單色配色之下,內(nèi)容更加突出,用戶更不容易被分心。不過,設(shè)計師需要投入更多的時間來打磨設(shè)計,避免整個UI變得乏味。深色系的背景通常能夠創(chuàng)造出更加優(yōu)雅、更具有形式感的設(shè)計,也能讓設(shè)計出來的實際效果在不同的環(huán)境下有更加一致的體驗。相比之下,采用這樣設(shè)計的大多是數(shù)字產(chǎn)品頁面,而非以文本為主的網(wǎng)站。
字體搭配
越來越多的新字體進入設(shè)計師的視野,許多經(jīng)驗豐富的設(shè)計師都特別重視字體的搭配。在2017年我們看到了許多優(yōu)秀的襯線體+非襯線體的字體組合,它們不僅創(chuàng)造了良好的對比度,而且讓整個排版設(shè)計的層次感更加顯著。
視差設(shè)計視差滾動依然在流行,滾動畢竟是最省心最自由地交互方式,視差滾動本身能夠促進用戶持續(xù)不斷地交互,這也使得多樣而富有創(chuàng)意的視差在網(wǎng)頁和移動端APP中大規(guī)模地使用。
扁平化設(shè)計風格
相信接觸過UI設(shè)計相關(guān)工作的小伙伴對于扁平化設(shè)計并不陌生,其實扁平化的設(shè)計風格是指在設(shè)計過程中使用較為簡單的特效,或者根本無須使用視覺特效,以簡單的形體去完成整個設(shè)計。這種設(shè)計風格會給人一種輕便、整潔、親切的感覺,同時可以更好地實現(xiàn)用戶的需求。 擬物化設(shè)計風格
顧名思義,擬物化設(shè)計風格也就是指設(shè)計師借助生活中存在的實體進行設(shè)計,并且將實物真實的觸感和質(zhì)感真實地反映出來,然后在設(shè)計
中加入一些更具情感化的元素,這種真實的實物感會帶給用戶更多的親切感和依賴感,便于用戶更快更好地掌握產(chǎn)品的操作和使用方法。
原質(zhì)化設(shè)計風格
原質(zhì)化的設(shè)計風格具有與物理世界相近的觸感,是指在扁平化的設(shè)計風格上加以真實的物理世界的觸感,是介于擬物化設(shè)計與扁平化設(shè)計風格之間的一種設(shè)計風格。目前,原質(zhì)化的設(shè)計風格還處于發(fā)展初期,在未來的發(fā)展過程中這種設(shè)計風格會成為一種熱門的UI設(shè)計視覺語言風格。
填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc