雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

app ui界面設(shè)計布局風(fēng)格有哪些,你喜歡哪一種

Time: 2021-06-28

app是現(xiàn)在使用最多的軟件類型之一,尤其是智能手機的廣泛運用,讓很多的app成為使用頻率很高的軟件。這也讓app ui界面設(shè)計成為ui設(shè)計的重點之一。想設(shè)計好app ui界面,就需要了解app ui界面設(shè)計布局風(fēng)格。今天就讓faceui為大家介紹。

  app ui界面設(shè)計布局風(fēng)格

  1、單色調(diào)

  為什么我們要定義一個界面多種顏色?僅僅用一個主色調(diào),是不是就能夠很好的表達界面層次、重要信息,并且能展現(xiàn)良好的視覺效果?事實上也正是如此,我們看到越來越多唯一主色調(diào)風(fēng)格的設(shè)計,會采用簡單的色階,配套灰階來展現(xiàn)信息層次,但是絕不采用更多的顏色。

  可以說唯一主色調(diào)設(shè)計手法,是真的做到了移動端APP的最小化設(shè)計,減少冗余信息的干擾,使用戶專注于主要信息的獲取。

  2、多色彩

  而與唯一主色調(diào)形成對照關(guān)系的,就是Metro引領(lǐng)的多彩色風(fēng)格,為什么我一定要給我自己的產(chǎn)品定義一種主色調(diào),多彩色就不能是主色調(diào)嗎?于是出現(xiàn)了不同頁面、不同信息組塊采用撞色多彩色的方式來設(shè)計的風(fēng)格,甚至同一個界面的局部都可以采用多彩撞色,也產(chǎn)生了不少優(yōu)秀的設(shè)計。

  可是對于一些內(nèi)容型的APP,也許并不適用,比如GoogleKeep的多彩卡片,確實是在內(nèi)容閱讀上會起到反效果。百度云記事本第一版設(shè)計也是多彩色的,但是后來考慮到文字記事比較多,為提供良好的文字閱讀體驗,還是把多彩色改成灰白色微質(zhì)感的設(shè)計。

  3、信息數(shù)據(jù)可視化

  至于對信息的呈現(xiàn),越來越多的APP開始嘗試數(shù)據(jù)可視化、信息圖表化,讓界面上不僅僅是列表,還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達方式。表面上看起來也不是很難的事情,但是若真想實現(xiàn),背后的復(fù)雜程度也不容小窺。

  Nice Weather用曲線圖來表達溫度的變化,Jawbone UP用柱狀圖來表達每天的完成情況,PICOOC用折線圖來表達每天體重、體脂的變化。移動APP利用數(shù)據(jù)可視化,可以在更小的屏幕空間內(nèi),更立體化的展示內(nèi)容。

app ui界面設(shè)計

app ui界面設(shè)計(圖片來與網(wǎng)絡(luò))


  4、卡片化設(shè)計

  卡片也是一種采用較多的設(shè)計語言形式,無法考究這種卡片的設(shè)計,是從Metro的tiles流行起來的,還是從Pinterest的瀑布流流行起來的??傊覀兛梢园l(fā)現(xiàn),Google的移動端產(chǎn)品設(shè)計已經(jīng)全面卡片化了,甚至Web端也沿用了這種統(tǒng)一的設(shè)計語言,據(jù)說是Google搜索的體驗負(fù)責(zé)人引領(lǐng)的設(shè)計語言統(tǒng)一升級。

  5、閱讀類設(shè)計

  APP產(chǎn)品的發(fā)展,最終的路徑勢必會跟web產(chǎn)品一樣,突出內(nèi)容,內(nèi)容為王,當(dāng)繁華褪盡,纖塵不染,再重新去看APP存在的意義,不外乎是給用戶提供更好的服務(wù)。與內(nèi)容相比,所有的設(shè)計和包裝,都不外乎是一種表現(xiàn)手法,而真正具有價值的APP,一定是內(nèi)容取勝的。

  6、圓形與多邊形妙用

  原形是最容易讓人覺得舒服的形狀,尤其是在充滿各種方框的手機屏幕內(nèi),增加一些圓潤的形狀點綴,立刻就會增加活潑的氣息,徒增好感。一個有意思的現(xiàn)象是,iPhone的撥號數(shù)字鍵盤,一開始都是矩形設(shè)計,迭代到iOS7,均變成了圓形,可以說是對傳統(tǒng)電話的致敬,也可以說是增強了界面的柔和感。當(dāng)然相應(yīng)的,也要處理圓形的實際點觸區(qū)域,不要因為設(shè)計成圓形點擊區(qū)域也變小了,導(dǎo)致點擊準(zhǔn)確率下降了,美觀度提升易用性受到了影響。

app ui界面設(shè)計

app ui界面設(shè)計(圖片來與網(wǎng)絡(luò))

  7、大視野、立體、透視等效果背景圖運用

  用通欄的圖片作為背景,也成為今年的一個流行趨勢,或者是作為整個APP的背景,或者是作為內(nèi)容區(qū)塊的背景,既提升了視覺表現(xiàn)力度,又豐富了APP情感化元素。一些信息或操作,浮動在圖片上。這種設(shè)計方法,對字體和排版設(shè)計要求更高,難度也更多,但極容易渲染出氛圍。

  大視野背景圖風(fēng)格也分為兩種,一種像Secret、The Whole Pantry這樣的,內(nèi)容區(qū)塊中采用大視野背景圖,好處是可以利用圖片做區(qū)塊分割,難度是圖片拼接后的效果不一定好看,所以可能還需要配合描邊、留白等設(shè)計手段優(yōu)化拼接。

  另外一種就是想Vsco、Flink、Mindie、Soundwave這樣的,全屏背景圖甚至打通狀態(tài)欄,前景做內(nèi)容排版、導(dǎo)航、操作。好處是設(shè)計非常具有生命了,所有有朋友把這種風(fēng)格也叫有計劃設(shè)計,說的就是回歸大自然的設(shè)計手法。但風(fēng)險也是很明顯的,就是前景的信息排布設(shè)計其實是有很大挑戰(zhàn)的,必經(jīng)花花綠綠的背景太過于干擾注意力,導(dǎo)致前景的文字內(nèi)容可讀性會變?nèi)酢K孕枰阎匾僮饔妹鞔_的按鈕區(qū)隔出來,閱讀型文字跟背景圖要用明顯的反色,還是不行的話就把文字浮在半透明蒙層上,解決可讀性問題。

  app ui界面設(shè)計經(jīng)過哪些步驟

  界面的設(shè)計大致需要經(jīng)過目標(biāo)人群確定、用戶需求調(diào)查交互式流程設(shè)計、界面風(fēng)格定位功能icon的設(shè)計、整體視覺效果的優(yōu)化和應(yīng)用icon的設(shè)計幾個階段。

  其中目標(biāo)人群確定、用戶需求調(diào)查和交互式流程設(shè)計需要軟件開發(fā)人員和設(shè)計人員共同完成。同時,App產(chǎn)品的UI設(shè)計需要對相應(yīng)的功能需求有清晰的把握。

  以上就是faceui為大家介紹的關(guān)于app ui界面設(shè)計的相關(guān)內(nèi)容。現(xiàn)在的app ui設(shè)計越來越豐富,伴隨而來的ui界面設(shè)計也越來越多,對于ui設(shè)計者來說,這是機會,也是挑戰(zhàn)。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開