界面美不美,除了構(gòu)圖之外,另一個重要手段的就是如何處理留白,也可以理解成版率。留白就是為了凸顯層次、突出內(nèi)容。
手持設(shè)備屏幕較小,決定了信息顯示是有限的。用戶有效接受信息并不與界面內(nèi)提供的信息量成正比,有的時候提供的越多,用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。
讓用戶接受該接受的有效信息,是關(guān)鍵。
在設(shè)計界面的時候,因為內(nèi)容和頁面都比較多,為了保證頁面與頁面的統(tǒng)一性,首先需要設(shè)定頁面內(nèi)容四周的留白。在設(shè)定頁面的間距后相應(yīng)的內(nèi)容圖標(biāo),圖片等的安排就確定下來了。用這樣的方法能使調(diào)整出來的頁面更為條理化。
紅色色的部分就是內(nèi)容。在頁面中一般會有導(dǎo)航的存在,那么內(nèi)容區(qū)的版面是從導(dǎo)航下面計算的。
界面四周增加留白。這樣的界面很容易集中用戶的視線到少數(shù)的內(nèi)容上去,突出了焦點,整體給人一種典雅高級的感覺。
反之,縮小留白或者不留白,頁面會顯得更豐富更充滿活力。而圖片的展示空間會增加,沖擊感增強,讓界面更顯得富更有張力。
根據(jù)頁面的內(nèi)容不同和功能點,適當(dāng)?shù)恼{(diào)整界面周邊的留白非常重要。一般圖片本身比較有意境,可以直接采用“出血”的方式,不留白或者少留白。
上面有兩點設(shè)計之外的功夫,推薦兩篇好文幫你理解:
什么才是關(guān)鍵信息:《重磅推薦!如何設(shè)計傳單才不會被人隨手扔掉?》
以美食為例,如何拍攝一張有格調(diào)的圖片:《吃貨設(shè)計師必備!那些給美食拍照的技巧》
下面介紹一些版面的小規(guī)律、小技巧。
一、取其精華,一塊顏色也能定天下!
提取主要的信息,通過對整個頁面的顏色進行調(diào)整,從而提高版面使用率。將一個或多個功能點作為主信息,提到首頁中進行設(shè)計,從達到想要的視覺效果。這樣處理后的界面設(shè)計不僅能顯得大氣有張力,而且展現(xiàn)出來的信息聚合度高。
在缺少圖像素材的情況下,如何讓界面顯得有張力,整體感強,呈現(xiàn)出來的版面率高。
單色背景留白,凸顯主要信息。要求圖標(biāo)或者文字,相對簡潔,能夠很好地和背景色融為一體。再通過線條和規(guī)則的圖形來分割留白區(qū)域,增加層次感。
做好這些的前提是,設(shè)計師要明確主要信息,以及它們之間的關(guān)系。
結(jié)合產(chǎn)品特點巧妙的運用大色塊,將變化的信息用顏色區(qū)分出來。讓用戶最直觀的感知信息的變化。
二、多色塊靈活分割,加強內(nèi)容使用率
圖片素材少,還可以采用多色塊進行分割,讓界面顯得不那么單調(diào)。
加強內(nèi)容使用率可以通過色塊(臨近色或是互補色)的延伸或是圖像的重復(fù)來組織頁面版式。將圖片和色塊進行統(tǒng)一化排版布局,整體基調(diào)能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統(tǒng)一性與簡潔性,色調(diào)的一致的統(tǒng)一性和連續(xù)性使頁面更為整體,這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點擊的區(qū)域也會增加,從而操作也變得便捷起來。
這個對配色要求蠻高的,推薦基礎(chǔ)不牢的同學(xué)來看阿里的范文:《色彩搭配速成!3個實用方法幫你全面搞定配色》
三、構(gòu)圖不拘一格,找到最合適的內(nèi)容版率
橫向和縱向分割,使界面顯得整齊、穩(wěn)定,而斜向分割讓界面沖擊感強。
使用不同的構(gòu)圖方式,穿插性地將少量的圖片整合在構(gòu)圖的形狀中,能讓界面變得活躍而富有活躍性。這樣的表現(xiàn)方式還能將產(chǎn)品的氣質(zhì)融入進去,淋漓盡致地展現(xiàn)。有節(jié)奏感的設(shè)計更為取巧地加強了版式率。在界面設(shè)計中,圖文的穿插可以引導(dǎo)用戶的視線,讓原本簡單的內(nèi)容變得有趣。在層次上,也可以區(qū)分內(nèi)容的主次性,讓閱讀更加的輕松。
四、簡約化桌面或主頁,讓界面越近越美
常用方式:圖標(biāo)、加大文案字號、序號、數(shù)字等來達到加強版式率的運用,提高視覺上的豐富性。
圖標(biāo)表達
人們越來越認同扁平化,一方面是因為扁平化的圖標(biāo)看上去清新簡潔,用戶理解快。另一方面,與圖標(biāo)搭配的背景更加單純,要么留白,要么炫簡,盡可能減少給用戶在視覺上干擾。好的扁平化圖標(biāo)不是簡單地刪減細節(jié),而是著重凸顯有效的信息。
圖標(biāo)是最為直接的表達方式,簡單明確的圖形,能讓用戶通過對圖標(biāo)的認識快速找到想要的功能和需求點。圖標(biāo)與文案的搭配有效的降低了閱讀時候的疲勞感。從而加強了界面內(nèi)容的節(jié)奏。運用圖標(biāo)的設(shè)計條理清晰,功能明確。
信息化圖標(biāo)能給產(chǎn)品增色。有趣的圖標(biāo)設(shè)計不僅能很好的將功能點進行區(qū)分,也能好的將軟件的特性和品牌展現(xiàn)出來。
把圖形融入到界面中,可讓內(nèi)容更為豐富,層次更加的分明。
五、突出重點文案,調(diào)整版面率,讓信息更清晰
調(diào)整文字大小將調(diào)整版式的使用率,使原本空的界面內(nèi)容顯示的更為飽滿,用戶閱讀起立更為直接。使用較大的字號進行加強頁面使用率能讓頁面顯得更為信息。突出重要的引導(dǎo)文案,加強了軟件的情景感和帶入感??焖僖龑?dǎo)了用戶對功能的理解,從而準確的使用。
在頁面中我們可以強調(diào)重點數(shù)據(jù)或功能詞等來區(qū)分界面中的層次感。讓用戶的視線更為集中。
特別插播一篇實用性極強的文案修煉手冊:《年度教程!7招教你寫出互聯(lián)網(wǎng)頂尖文案!》
六、串聯(lián)圖片,讓它們講故事,視圖化版面
這種設(shè)計方法更多的是將文案用圖形或插圖展現(xiàn)出來。在數(shù)據(jù)頁面和引導(dǎo)頁中最為常見。
一段文案一副插圖的引導(dǎo)頁更為有特色,給用戶的情懷感更強。這種設(shè)計手法也是最容易體現(xiàn)產(chǎn)品特質(zhì)和吸引眼球的。圖案的易讀性高,能在極其短暫的時間內(nèi)快速傳達給用戶信息。用圖像來講故事,是設(shè)計中最根本的表現(xiàn)方法,也更是最為受歡迎的表達方式。
圖在界面中的運用
三種方式:摳,邊界關(guān)系,殘缺
1. 切摳弄,制造純色留白!
在處理圖片素材的時候,常常會碰到圖片背景雜亂,產(chǎn)品不夠突出的問題。在設(shè)計之前我們可以對素材先進行處理,將產(chǎn)品直接摳出來。利用這種方式可以找到產(chǎn)品的形狀,越明確的形狀越能反映用戶對產(chǎn)品的認知度。產(chǎn)品的獨特性能快速明確的表達給用戶,用戶從潛意識第一時間的判斷到產(chǎn)品的類型和使用特性。
下面是一個曲奇餅干的網(wǎng)站,將主餅干的勾出來,進行層次感的區(qū)分。在產(chǎn)品介紹中采用了側(cè)面的實物摳圖,體現(xiàn)出了曲奇餅干最為真實的厚度。運用碎落的餅干塊虛化拉開產(chǎn)品的層次。深色的背景與餅干對比強烈,直接凸顯了實物的形狀。讓用戶一目了然,食欲大增。從而增了用戶的購買欲望。
在很多的電商APP中也常采用摳圖,去除多余雜亂的信息,利用產(chǎn)品的形狀直接體現(xiàn)不同商品的特點。這樣的界面用戶閱讀起來輕松愉悅。
2. 建立邊界,再打破邊界,破出重圍
如果需要展示的信息較多,采用分割區(qū)域的方法,可以使界面顯得整齊干凈。而當(dāng)信息較少時,設(shè)計師可以大膽選用“局部出血”的方式,建立邊界,再突破它,增加層次感和沖擊力,以凸顯主題。
一定要記得設(shè)定好的內(nèi)容范圍是為了讓頁面顯得整體化,而不僅僅是擺放和拼圖。
在
網(wǎng)頁設(shè)計中有時候會見到這種方式,其實在手機、平板等ui設(shè)計中我們完全可以套用。
運用圖片的穿插來區(qū)分背景和產(chǎn)品或形象的層次感,處理完的界面更加富有生命力。放大需要突出的主形象,把它作為第一焦點展現(xiàn)在用戶的眼前,有種強烈的“面對面”感受。
在APP中采用將圖片局部突出出來,能拉開信息的層次,將需要突出的圖片信息第一時間展示給用戶。一方面可以方便和引導(dǎo)用戶點擊,另一方面在上下滾動的長副瀑布流里,適當(dāng)?shù)卮蚱破胶?,可以豐富頁面的節(jié)奏感。
在ICON的設(shè)計中我們也常用到破圖的方法。在統(tǒng)一的圓角矩形中,將表達寓意的圖形局部超出,使圖標(biāo)更為有空間感和靈活性。
采用這種方式設(shè)計的圖標(biāo)空間感強,層次感強烈,能使產(chǎn)品形象顯得更為突出。
在字體中也經(jīng)常運用到破圖的方法,讓字體更為生動。在破字的過程中也能引發(fā)出不同的創(chuàng)意點。
大美青海字體設(shè)計我把數(shù)字9破出了方塊。而在優(yōu)車尚品字體的設(shè)計中,我通過品字的破圖找到了車的聯(lián)想,讓整個字體設(shè)計的更為貼切靈動。
3. 沖出畫面,只保留局部,讓產(chǎn)品再大一點!
有時候,我們拿到素材,在處理后發(fā)現(xiàn),圖片比較平常,用戶一眼就知道是什么。這個時候,可以考慮保留局部的方式,營造殘缺美,增加時尚感。不要小看用戶的的腦補能力,當(dāng)然,這種方案還是要與客戶或者產(chǎn)品經(jīng)理及時溝通,殘缺美不是所有人動能接受的。
我們將圖片進行放大,找出產(chǎn)品特點。選擇能撐起整個頁面構(gòu)圖的位置,切除不必要的圖形,讓圖片沖出畫面!這樣處理后,頁面顯得非常富有張力,激發(fā)了用戶想看到產(chǎn)品整個形象的欲望,起到產(chǎn)品預(yù)熱的效果。
在WATCH的預(yù)熱官網(wǎng)中,設(shè)計師將圖片放大,裁取有特點的部位進行展示,引導(dǎo)了用戶點擊觀看產(chǎn)品的整體形象,激發(fā)了用戶更多的去了解產(chǎn)品的特性。
從版面角度看,局部放大裁切圖片,增加了留白,增加了版式率,讓整個頁面顯得飽滿,微距的效果使用戶與產(chǎn)品更貼切。
這一篇主要理順了一下版面和圖形使用知識,并不全面,大家還是以欣賞為主??赐炅四苡袀€留白、破圖的印象就不算白看。
設(shè)計大方向上的東西終于絮叨得差不多了,我知道其實大家都懂,就是不知道從何下手而已,下一篇來點小方向的實用東西,歡迎大家留言。
關(guān)鍵詞:創(chuàng)新互聯(lián),成都品牌網(wǎng)站建設(shè)公司,網(wǎng)站制作公司,重慶網(wǎng)站建設(shè),網(wǎng)站設(shè)計,網(wǎng)站建設(shè),手機網(wǎng)站開發(fā)
文章標(biāo)題:界面設(shè)計教程
分享地址:http://m.rwnh.cn/news43/168343.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、網(wǎng)站收錄、面包屑導(dǎo)航、網(wǎng)站策劃、微信公眾號、App設(shè)計
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)