首頁

手機(jī)及小程序界面設(shè)計(jì)之三:從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

博博

Dribbble 平臺(tái)對(duì)于互聯(lián)網(wǎng) UI 界面設(shè)計(jì)有著舉足輕重的定位,對(duì) Dribbble 設(shè)計(jì)的研究會(huì)讓我們看清設(shè)計(jì)的方向。

為了保證這篇文章的質(zhì)量,Dribbble 年度的每個(gè)作品都超過 550 贊。在此原則下挑選了 828 件作品,作品總的大小為 2.2G。


總結(jié)


從挑選出的 828 件作品中,排名前十的作品中 9 件為 B 端設(shè)計(jì),另一件作品也是 B 端產(chǎn)品 C 端化的產(chǎn)物。其中:

  • B 端界面設(shè)計(jì)占比 476/828,57.4%;
  • C 端界面設(shè)計(jì)占比 180/828,21.7%;
  • 視頻動(dòng)效作品占比 223/828,26.9%;

明眼人都能看出其中的比重關(guān)系,B 端設(shè)計(jì)再次大火,為什么是再次?因?yàn)?B 端設(shè)計(jì)之前火過,只不過沒有趕上一個(gè)好的時(shí)代,在 C 端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著 C 端市場飽和與數(shù)字化的浪潮下,實(shí)體經(jīng)濟(jì)、ToB、ToG 的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過 C 端界面設(shè)計(jì),相信今年視頻動(dòng)效作品占比還會(huì)再次提升。


Dribbble 年度最佳作品


從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

Dribbble 年度最佳作品來自大家最熟悉的 UI8 團(tuán)隊(duì)中的 Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個(gè)贊。

為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢?既不是 C 端也不是純 B 端的作品,更像一個(gè)網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕,你可以理解它就是一個(gè)平面作品,一個(gè)字體加幾何形體構(gòu)建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標(biāo)題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標(biāo)題文字中脫穎而出,這種使用線條突出重要信息的設(shè)計(jì)也是今年Dribbble 設(shè)計(jì)流行趨勢之一。

MetroUI 是 Windows8 的界面設(shè)計(jì)語言,在 2010 年至 2013 年間曾經(jīng)風(fēng)靡一時(shí),那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年,現(xiàn)在國家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng) To B、To G 的發(fā)展元年,通過幾何色塊(MetroUI)實(shí)現(xiàn) B 端產(chǎn)品與 C 端設(shè)計(jì)風(fēng)格的傳承與銜接,你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng),毛玻璃的多彩高斯模糊漸變風(fēng),年度作品當(dāng)之無愧。

最后來看下按鈕的設(shè)計(jì),正常的按鈕要么文字加色塊,要么左圖標(biāo)加右文字,它設(shè)計(jì)成左文本加右圖標(biāo),更加注重信息的可讀性和易讀性,也體現(xiàn) B 端設(shè)計(jì)重功能和交互體驗(yàn),視覺點(diǎn)到為止的設(shè)計(jì)理念。

下面我們來欣賞年度最佳作品里面的流行趨勢吧。

1. 易讀性(停頓感)

字體三原則:可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章,肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上,不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān),因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí),不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感,更加適合用戶閱讀。

通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容,豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會(huì)輸入文本,“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”,哪個(gè)更加會(huì)有情感共鳴呢?不言而喻,相信你心中已經(jīng)有答案了。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 曲線

在標(biāo)題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一,第一個(gè)設(shè)計(jì)目的就是突顯文字,其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中,簽字的文本都是手寫體的感覺,手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息,也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。

除了突顯文本外,曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測試,通過真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. 多彩高斯?jié)u變風(fēng)

多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的,多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對(duì)比來制造畫面的沖突,需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。

多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上,為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢


B 端界面設(shè)計(jì)


1. 側(cè)邊欄 Sidebar

B 端設(shè)計(jì)的火爆帶動(dòng)了 B 端相關(guān)模塊設(shè)計(jì),更多的人也愿意嘗試 B 端相關(guān)模塊設(shè)計(jì),側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng),好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果,也是受限于 PC 屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì),而是一套實(shí)用美觀可落地的設(shè)計(jì)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 儀表盤設(shè)計(jì)

儀表盤設(shè)計(jì)是一個(gè)很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B 端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài),大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù),團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同,自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài),需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. 流程設(shè)計(jì)

復(fù)雜的事情簡單化,簡單的事情標(biāo)準(zhǔn)化,標(biāo)準(zhǔn)的事情流程化,流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù),可自定義的管理流程系統(tǒng)搭建也是 B 端產(chǎn)品設(shè)計(jì)的難點(diǎn),需要對(duì)業(yè)務(wù)高度抽象,讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

4. B 端 C 化

B 端 C 化是 B 端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往 C 端產(chǎn)品設(shè)計(jì)的視覺靠齊,國內(nèi) B 端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外,由于業(yè)務(wù)的發(fā)展,B 端產(chǎn)品也開始移動(dòng)化、智能化,國內(nèi)主流還是通過小程序、H5 來現(xiàn)實(shí) B 端產(chǎn)品 C 端化。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

5. 輕代碼化

輕代碼化是一種低代碼賦能無代碼的方式,彌補(bǔ)無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時(shí),又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng),輕松實(shí)現(xiàn)多元業(yè)務(wù)場景的數(shù)字化管理。

輕代碼化將功能進(jìn)行打包,升級(jí)成全局可以用的配置,技術(shù)人員配置好后,業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版,綁定對(duì)應(yīng)的變量即可使用。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢


界面設(shè)計(jì)技巧


1. 人文氣息

為什么人加色塊的組合方式能流行起來?還是 B 端行業(yè)流行帶動(dòng)的。B 端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外,還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。

當(dāng)然企業(yè)也需要進(jìn)行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。

這種風(fēng)格更適合大公司,國內(nèi)的一些手機(jī)廠商 OPPO、VIVO 等也會(huì)通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合,而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應(yīng)當(dāng)下 UI 扁平化的設(shè)計(jì)趨勢。蘋果 Mac OS Big Sur 系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素,界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術(shù)-C4D 創(chuàng)建彩色玻璃的 4 個(gè)技法”,完全能滿足 UI 設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是 Mac 用戶可以享有 OC 一年免費(fèi)的使用權(quán),具體安裝購買方法上某寶就可以輕松搞定,真香。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. 輕擬物

輕擬物這幾年一直流行,在 UI 設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物,其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡潔的畫面中,扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中,比如 B 端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma 軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

4. 簡潔設(shè)計(jì)

簡潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則,在 B 端產(chǎn)品界面中更加需要簡潔設(shè)計(jì),我們最熟悉的 Sketch 軟件界面已經(jīng)是相當(dāng)?shù)暮啙嵙??;氐浆F(xiàn)實(shí)當(dāng)需求功能不斷增加,產(chǎn)品界面的編排如何取舍,如何保證界面的簡潔是設(shè)計(jì)師需要深度思考的問題?如何與上級(jí)溝通?該功能是否可做可不做?是否需要埋點(diǎn)用數(shù)據(jù)說話?如果只是一味競品有我們就需要有,功能不斷累加只會(huì)讓界面越來越重。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

5. 幾何圖形

幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象,產(chǎn)品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個(gè)整體。B 端產(chǎn)品視覺設(shè)計(jì) C 端化的進(jìn)程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年Dribbble B 端產(chǎn)品的視覺設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

幾何圖形另一個(gè)場景化的地方就是品牌,作為一名 UI 設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程,品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主,至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

6. 暗黑設(shè)計(jì)

暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長增大,如何在夜晚這個(gè)特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。

在設(shè)計(jì)暗黑主題時(shí),不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design 給出了暗黑主題的設(shè)計(jì)準(zhǔn)則,即正文和背景之間的對(duì)比度應(yīng)至少為 15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì),可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”(Figma、Sketch、XD、Chrome 插件)用來測試界面的對(duì)比度。


從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

7. 模塊化(組件化)

為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面,但在 B 端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提,是否有從 0 到 1 搭建 B 端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一,它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。

產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分,也就是幾個(gè)模塊,每一部分都是具有獨(dú)立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產(chǎn)品族中可以重用和互換,相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置,就可以創(chuàng)建不同需求的產(chǎn)品,滿足客戶的定制需求 。


從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

8. 插畫

插畫作為設(shè)計(jì)的一大品類,不同的插畫師都有自己擅長的風(fēng)格,本質(zhì)是都有自己的個(gè)性,但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事,表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合,插畫不會(huì)過時(shí),而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。

9. 幾何插畫

幾何插畫算是插畫簡化的一種表現(xiàn)形式,人和物的形態(tài)不再寫實(shí),而是抽象成幾何圖形拼湊的感覺,同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn),傳達(dá)出簡潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上,平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

10. 線面插畫

線面插畫最近一兩年非常流行,準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來,這時(shí)候用線條簡單勾勒后,結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí),可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí),還能保持界面的干凈整潔。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢


動(dòng)效


1. 微交互

界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì),微交互和動(dòng)效設(shè)計(jì)是繞不開的,UI 界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情,所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒,取悅用戶。C 端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了,一部分功勞來自 iOS 系統(tǒng)原生自帶的效果。B 端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品,還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值,共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. Mg 動(dòng)畫

Mg 動(dòng)畫需要很好的節(jié)奏感、韻律,每一個(gè)場景動(dòng)畫都需要其中的元素進(jìn)行連接變化,讓轉(zhuǎn)場動(dòng)畫更加自然,MG 人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環(huán)會(huì)讓人更加印象深刻。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢


三維


1. 三維圖標(biāo)

MacOS Big Sur 系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行,三維圖標(biāo)的應(yīng)該場景還是需要有較大留白空間的界面,因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上?設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合,存在即合理。合適最重要,它們都會(huì)有適合自己的場景和設(shè)計(jì)價(jià)值。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 輕三維

為什么輕三維在界面設(shè)計(jì)中占有一席之位?一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容,并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素,比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等,這些都是用戶日常使用系統(tǒng)軟件常見的元素,通過簡單的幾何形體建?!驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角,結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加,特別是當(dāng)下流行的毛玻璃效果,玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光,局部的漸變色或環(huán)境光更加出彩。


從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. P4D(PS+C4D)

P4D 是 PS 加 C4D 的設(shè)計(jì)表現(xiàn)技法,也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié),通過 PS 對(duì) C4D 的渲染圖片進(jìn)行調(diào)色,利用 PS 的調(diào)色技巧可以很好的解決 C4D 打燈光的瑕疵,還可以利用 PS 強(qiáng)大的合成功能,將渲染圖片與圖片素材進(jìn)行合成,來表現(xiàn)畫面的視覺度,當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果,也可以通過 PS 的后期合成來實(shí)現(xiàn),這也是 P4D 的強(qiáng)大之處。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

4. 卡通 IP

卡通 IP 設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通 IP 也從傳統(tǒng)的純 PS 手繪技法,轉(zhuǎn)到 C4D 建模—角色綁定—MD衣服制作—OC渲染—PS(靜態(tài))/AE(動(dòng)態(tài))調(diào)色。

卡通 IP 火的本質(zhì)更適合做營銷,相比于品牌或 Slogan,卡通 IP 具有親和力和畫面感。隨著各種手辦行業(yè)大熱,受互聯(lián)網(wǎng)大廠影響下,卡通 IP 已經(jīng)是互聯(lián)網(wǎng) B 輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。

對(duì)于 UI 設(shè)計(jì)師來說學(xué)習(xí)是有成本的,暫時(shí)并不是必備技能,如果喜歡完全可以學(xué)習(xí),從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競爭力。


從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

5. 三維動(dòng)畫

C4D 三維場景動(dòng)畫通過構(gòu)建實(shí)物和場景模擬生活中的現(xiàn)實(shí)場景,會(huì)讓用戶體驗(yàn)真實(shí)感,三維軟件制作動(dòng)效的最大優(yōu)勢是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感,未來在 AR/VR 領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中 C4D 軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢


總結(jié)


上一次寫 Dribbble 流行趨勢還是兩年前了,通過兩年的沉淀對(duì)趨勢流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火,隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層,客觀的看待和理解這個(gè)真實(shí)的世界,曾經(jīng)的流行趨勢也需要慢慢的沉淀下來。

存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風(fēng)格才能更長久。但我們也不能不去關(guān)注,因?yàn)槟挠惺裁此^的創(chuàng)新,只不過是舊元素的重新組合,并符合當(dāng)下這個(gè)時(shí)代人的審美需求。香奈兒的“時(shí)尚易逝,風(fēng)格永存”大概就是這個(gè)意思吧。

6000 多字的設(shè)計(jì)流行趨勢,希望能幫助設(shè)計(jì)師度過互聯(lián)網(wǎng)裁員的寒春。最后希望以后每年堅(jiān)持輸出設(shè)計(jì)流行趨勢。為設(shè)計(jì)行業(yè)奉獻(xiàn)微薄之力。

作者:水手

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

手機(jī)及小程序界面設(shè)計(jì)之一:讓設(shè)計(jì)更有說服力的20條經(jīng)典原則:菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之六:讓設(shè)計(jì)更有說服力的20條經(jīng)典原則:菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之八:如何適配iPhone X?來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤!








后臺(tái)系統(tǒng)界面設(shè)計(jì)踩過的那些坑

博博

超實(shí)用的后臺(tái)設(shè)計(jì)避坑指南

源起


由于之前曾經(jīng)在后臺(tái)系統(tǒng)開發(fā)公司工作過的緣故,所以有些后臺(tái)管理系統(tǒng)界面的產(chǎn)出。后來雖然從那家公司離職,但也接到過一些后臺(tái)界面設(shè)計(jì)和優(yōu)化的項(xiàng)目,前前后后也快十來個(gè)了。

這里想分享下一些關(guān)于后臺(tái)界面設(shè)計(jì)的觀點(diǎn)(tucao)。





一,定義好表格規(guī)范強(qiáng)于為每個(gè)表格出設(shè)計(jì)稿


表格是構(gòu)成后臺(tái)使用界面的重要組成之一,聚合了眾多信息并提供操作入口。并且后臺(tái)系統(tǒng)中一般會(huì)需要數(shù)量眾多的表格。


這種情況下如果每張表格都出設(shè)計(jì)稿,是一件很費(fèi)時(shí)費(fèi)力的事情,更關(guān)鍵的是對(duì)開發(fā)落地不一定有什么實(shí)際意義。

所以這種情況下,定義好表格規(guī)范要遠(yuǎn)遠(yuǎn)強(qiáng)于為每個(gè)列表出設(shè)計(jì)稿。


下圖是在某系統(tǒng)設(shè)計(jì)中定義的表格規(guī)范,定義了不同信息之間的間距,信息塊內(nèi)部的浮動(dòng)間距等。




二,考慮未來頁面信息密度增高的情形,避免使用過大的組件。


2019年在某系統(tǒng)設(shè)計(jì)中,由于初期頁面內(nèi)容比較少,為了讓用戶擁有更大的點(diǎn)擊操作區(qū)域,利用頁面空間,所以讓下拉菜單,輸入框等控件略微大了一點(diǎn)點(diǎn)。


后來頁面內(nèi)容逐步增多,特別是篩選功能越來越多時(shí),就尷尬了。使用原有的控件,篩選區(qū)域就會(huì)臃腫不堪,擠占信息展示區(qū)域的空間。新設(shè)計(jì)控件又會(huì)與其他頁面不統(tǒng)一,修改工作量會(huì)很大。


所以即便頁面信息少,也要考慮頁面信息密度增高的情形,避免是使用過大的組件。




三,根據(jù)用戶常用的顯示器分辨率設(shè)計(jì)后臺(tái)


一般情況下我們會(huì)按1920px的寬度出設(shè)計(jì)稿,然后再交付給開發(fā)做自適應(yīng)。

但是后來發(fā)現(xiàn)頁面信息密度很高時(shí),簡單粗暴的自適應(yīng)難免會(huì)不盡人意。


并且實(shí)際工作環(huán)境中,很多后臺(tái)的使用者幾乎全部情形都是用筆記本,這種情形下使用筆記本的尺寸設(shè)計(jì)更為合適,或者使用1440px的寬度出設(shè)計(jì)稿,平衡對(duì)大小屏幕的設(shè)計(jì)考慮。


最好的方式當(dāng)然是與需求方充分溝通,商定設(shè)計(jì)稿寬度。很多需求部門的電腦都是統(tǒng)一采購的,顯示器分辨率是全部統(tǒng)一的。


2020年某ERP設(shè)計(jì)項(xiàng)目,一張表單以1920px寬度出了設(shè)計(jì)稿,后來應(yīng)甲方需要,另外單獨(dú)出了一版1200px版本。




四,與開發(fā)討論使用何種組件庫,基于組件庫提供界面優(yōu)化方案


在實(shí)際的后臺(tái)項(xiàng)目開發(fā)過程中,很多項(xiàng)目并不使用自己定制的組件庫,而是使用第三方框架。

這種情形下最合適的方式是與開發(fā)討論使用何種組件庫,基于組件庫提供界面優(yōu)化方案,基于組件庫提供高密度復(fù)雜頁面的編排,重難點(diǎn)頁面的設(shè)計(jì)。


設(shè)計(jì)的產(chǎn)出應(yīng)該以實(shí)際實(shí)現(xiàn)效果為導(dǎo)向,而不是止步于設(shè)計(jì)稿。



幾個(gè)常用的組件庫

https://www.iviewui.com/

https://element.eleme.cn/#/zh-CN/resource

https://ant.design/docs/spec/introduce-cn



五,嘗試考慮使用卡片展示列表信息


后臺(tái)頁面中經(jīng)常會(huì)存在大量列表的情形,如果某個(gè)列表字段不多并不會(huì)隨便增加,可以嘗試一排信息放在一張卡片上,使用卡片展示列表信息,改變頁面單調(diào)的版式。


不過字段,操作按鈕一旦增加,就比較麻煩了。




六,導(dǎo)航區(qū)不要過大,盡量給工作區(qū)留出空間。


如果使用固定寬度的導(dǎo)航區(qū),過寬的導(dǎo)航區(qū)會(huì)擠占工作區(qū)的空間,在筆記本等小屏幕電腦上會(huì)更加明顯。所以需要合理控制大小。




七,靈活使用不同板塊樣式,分隔方式區(qū)分高密度頁面中的信息


后臺(tái)設(shè)計(jì)中經(jīng)常會(huì)遇到一個(gè)頁面需要顯示很多不同類型信息的需求,可以使用不同底色,卡片,不同層級(jí)的分隔線來分割版面,實(shí)現(xiàn)不同類型信息的區(qū)別顯示。


應(yīng)客戶需要,這張客戶詳情頁面只能以彈窗形式出現(xiàn)。反復(fù)使用底色分割,在盡可能簡潔的同時(shí)將不同信息區(qū)分開來。




結(jié)語


以上的觀點(diǎn)僅代表個(gè)人的看法,可能有一些無法令人接受,歡迎各位一起探討,或者給出更好的解決方案。


感覺有幫助的話點(diǎn)個(gè)贊喲~


作者:目醒設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

十分鐘認(rèn)識(shí)界面設(shè)計(jì)中卡片式設(shè)計(jì)技法

博博


    正確認(rèn)識(shí)卡片式設(shè)計(jì),什么是卡片、總結(jié)卡片優(yōu)勢、卡片正確設(shè)計(jì)知識(shí)通過設(shè)計(jì)兩個(gè)案例進(jìn)行講解,卡片在運(yùn)用時(shí)的技法,望能幫助大家

    好久沒有發(fā)文章了,今天順叔和大家一起聊一聊卡片式設(shè)計(jì),無論是WEB還是APP卡片式設(shè)計(jì)運(yùn)用的比較多,很多UI設(shè)計(jì)師比較偏愛這樣的表現(xiàn),卡片式設(shè)計(jì)會(huì)給人一種視覺上的享受,也能對(duì)于界面具有層次感。但往往在卡片設(shè)計(jì)中有一些技法還是需要了解,不能因?yàn)榭ㄆ皆O(shè)計(jì)而卡片式設(shè)計(jì),要能更好的應(yīng)用到界面場景中。希望在這次分享中一些知識(shí)點(diǎn)能幫助到大家,之后的幾篇系列文章中,順叔會(huì)從界面中比較趨勢的設(shè)計(jì)技法進(jìn)行分析,希望能幫助到一些設(shè)計(jì)的小伙伴。


    教程前的引言

    卡片式設(shè)計(jì)這幾年比較流行,同樣這樣的設(shè)計(jì)表達(dá)也是個(gè)趨勢,應(yīng)用在APP PC界面中至今還流行著,從事UI設(shè)計(jì)的都會(huì)知道卡片式設(shè)計(jì),具有把內(nèi)容整合模塊化,從視覺,個(gè)性化體驗(yàn)上進(jìn)行呈現(xiàn),是設(shè)計(jì)師在設(shè)計(jì)時(shí)常用的一種表現(xiàn),同樣也具有獨(dú)特的創(chuàng)新概念。

    在一些項(xiàng)目中,一些客戶會(huì)說這個(gè)設(shè)計(jì)的APP界面有點(diǎn)太白,沒有層次感怎么辦,那這時(shí)你應(yīng)該和客戶說在APP設(shè)計(jì)中運(yùn)用了現(xiàn)在比較流行的一個(gè)表現(xiàn)手法,卡片式設(shè)計(jì),可以解決在畫面中有個(gè)性化 、變化、 層次感的設(shè)計(jì)。那客戶又問什么是卡片式設(shè)計(jì)呢?


    一、什么是卡片

    無處不在的卡片設(shè)計(jì)具有個(gè)性的美感和很好的易用性,是以文字標(biāo)題,小標(biāo)題, 圖形或圖片組成的模塊化,以塊狀形式規(guī)整的整合內(nèi)容,讓內(nèi)容更規(guī)整化,視覺上更個(gè)性化,也是操作上快捷的內(nèi)容信息入口。更直觀的表達(dá)內(nèi)容信息和快捷跳轉(zhuǎn)操作。成為當(dāng)今在設(shè)計(jì)中一個(gè)比較流行趨勢,而卡片在設(shè)計(jì)中也占用一定的優(yōu)勢,讓整體更加的有層次感,在運(yùn)用起來也比較方便,從視覺、體驗(yàn)、交互都具有不錯(cuò)的優(yōu)點(diǎn)


    設(shè)計(jì)效果圖展示

    順叔為了這個(gè)文章特意設(shè)計(jì)了兩個(gè)案例,通過這兩個(gè)案例進(jìn)行一些講解。請(qǐng)見下圖:


    二、卡片設(shè)計(jì)優(yōu)勢

    1.趨勢

    無論是大平臺(tái) 還是小平臺(tái)的產(chǎn)品都會(huì)運(yùn)用這樣的卡片式,跟風(fēng)式設(shè)計(jì)趨勢,也讓卡片式設(shè)計(jì)成為了一個(gè)現(xiàn)在常用的優(yōu)勢,不過卡片式設(shè)計(jì)的確有很好的效果

    2. 層次感

    具有一定的層次感,能在頁面版式中起到設(shè)計(jì)上的不同,個(gè)性化變化,頁面層次感區(qū)分強(qiáng)烈,能更好的體現(xiàn)提煉出內(nèi)容

    3. 規(guī)整化

    卡片式設(shè)計(jì)以圖片、 圖標(biāo) 、LOGO、 標(biāo)題、 整合到一起 以塊狀的形式在界面中展示,更規(guī)整的排版呈現(xiàn)。雖然內(nèi)容多會(huì)導(dǎo)致頁面亂,一個(gè)模塊包含內(nèi)容之后就會(huì)規(guī)整不少,也給頁面設(shè)計(jì)上帶來了更好的視覺

    4. 視覺體驗(yàn)

    卡片式給整個(gè)頁面會(huì)增加視覺上的體驗(yàn),特別那種大圖片卡片式更具有視覺上的沖擊力,背景襯托出前景卡片式設(shè)計(jì)。同樣對(duì)卡片式也感覺到舒適感??ㄆ皆O(shè)計(jì)還是需要根據(jù)整個(gè)布局、 產(chǎn)品需求 、功能進(jìn)行設(shè)計(jì)。以達(dá)到最好的用戶體驗(yàn)、視覺體驗(yàn)。

    不要為了卡片設(shè)計(jì)而卡片設(shè)計(jì)。

    5. 易用性

    卡片式設(shè)計(jì)在易用性和靈活性上比較高,在響應(yīng)式設(shè)計(jì)中同樣應(yīng)用的也比較多一些。能更好的有序排列。

    6.簡約設(shè)計(jì)

    簡約設(shè)計(jì)會(huì)更顯得品質(zhì),不需要過多的進(jìn)行裝飾,哪怕就是一個(gè)白色的色塊,上面點(diǎn)綴有色彩的圖標(biāo)和標(biāo)題 副標(biāo)的變化,也會(huì)覺得顯得高大上,就算是一個(gè)帶有顏色的色塊卡片,也無須過多的設(shè)計(jì) 內(nèi)容上的標(biāo)題 、圖標(biāo)、 按鈕就足以支撐起卡片

    7. 交互效果

    在卡片式的設(shè)計(jì)中會(huì)有一些動(dòng)效交互,比如整體卡片放大、 縮小 、左滑、 右滑,可以整模塊化滑動(dòng) 縮放。整體效果增加了不錯(cuò)的視覺交互體驗(yàn)


    三、卡片正確設(shè)計(jì)知識(shí)

    一般在界面設(shè)計(jì)中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢,下面為大家舉例了幾種常用的正確的設(shè)計(jì)表達(dá)姿勢。希望小伙伴在設(shè)計(jì)的同時(shí)有所靈感和參考,把一些表現(xiàn)手法加入到自己的設(shè)計(jì)中,適合才最重要??ㄆ皆O(shè)計(jì)還是要根據(jù)整個(gè)風(fēng)格和整個(gè)布局而進(jìn)行展示,在做進(jìn)一步的對(duì)比和布局中以最好的效果為最終展示方式,總結(jié)分析幾個(gè)常見代表例子,如有不全請(qǐng)討論補(bǔ)充,下面就是一些例子


    1.卡片式形式一

    以色塊為主體并用現(xiàn)在比較流行的漸變色組成,其中四邊為圓角,同樣色塊下邊陰影襯托出主題,這個(gè)是在卡片中設(shè)計(jì)比較常見的運(yùn)用手法,卡片的長高在設(shè)計(jì)中也是根據(jù)結(jié)構(gòu),內(nèi)容功能而進(jìn)行設(shè)定。正方形,長方形都是一個(gè)表現(xiàn)得手法,在色塊上面標(biāo)題文字,圖標(biāo),圖形是整個(gè)卡片的布局的形式,無非就是左右布局和上下布局

    應(yīng)用場景:卡包、天氣、類別、入口、優(yōu)惠劵,卡劵

    此圖片來自于網(wǎng)絡(luò)

    2. 卡片式形式二

    這種形式共同點(diǎn)都是在頭部C位出現(xiàn)的卡片式設(shè)計(jì),其中承載著標(biāo)題,副標(biāo)題,以及圖文版式,不難發(fā)現(xiàn),如果圖片有顏色,那么下面是白色底,這樣在白底上面色塊的出現(xiàn)還是比較簡約凸顯卡片,如果背景有顏色,卡片也有顏色那么卡片的凸顯程度就不會(huì)那么強(qiáng),圖二很多在會(huì)員卡設(shè)計(jì)中常用的比較多,也比較簡約,另外兩個(gè)共同特點(diǎn)背景有顏色,一般底部背景顏色就是整個(gè)界面的主色調(diào),背景有色塊,上面就用白色卡片,卡片上方標(biāo)題、 文字、 圖片呈現(xiàn)。只不過排版的方式有所不同而已,在很多APP設(shè)計(jì)中,這樣的表達(dá)也很多,通過主色調(diào)可以很融合的把上面的狀態(tài)欄,導(dǎo)航欄融為一體視覺上統(tǒng)一性,底部背景顏色延續(xù)下來,上面凸顯白色卡片,這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾,更能體現(xiàn)的上面的文字和圖片。

    應(yīng)用場景:會(huì)員卡,滑動(dòng)卡片,圖文標(biāo)題,入口

    此圖片來自于網(wǎng)絡(luò)

    3. 卡片式形式三

    這種形式上圖下文字,或者是上標(biāo)題,下圖片的形式,這種形式特別在圖片素材的選擇上尤為重要,有視覺效果好的圖片通過剪切,處理,合成,攝影,插畫等等方式,出現(xiàn)的圖片質(zhì)量上好的話可以帶動(dòng)整個(gè)設(shè)計(jì)的逼格,通過有效的圖片傳達(dá),文字傳達(dá),讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多,同樣也能體現(xiàn)出整體化和視覺化

    應(yīng)用場景:滑動(dòng)卡片,圖文標(biāo)題,入口,列表

    此圖片來自于網(wǎng)絡(luò)

    4. 卡片式形式四

    大圖卡片式,一般以攝影圖片,插畫形式,文字壓與圖片之上,這樣的效果更具有沖擊力,也能顯得出比較潮流。體驗(yàn)也很不錯(cuò),放大視覺,展示內(nèi)容,圖片相結(jié)合,讓瀏覽者更愿意多看一會(huì)。表達(dá)的圖片與文字內(nèi)容相符,做到圖文交融的程度。一般這樣對(duì)于圖片的選擇上還是比較要求嚴(yán)格的。沒有質(zhì)量的圖效果會(huì)降低。

    應(yīng)用場景:列表,說明,入口,天氣


    此圖片來自于網(wǎng)絡(luò)

    5.卡片式形式五

    列表卡片設(shè)計(jì),這種形式一般白色的卡片,上面標(biāo)題,頭像,按鈕,扁平插畫形式體現(xiàn),更多應(yīng)用在一級(jí)頁面的下方內(nèi)容,以及二級(jí)頁面的列表頁或者集合頁,整體弱化背景以白色為主,給予圓角及陰影承托出層次感同時(shí),體現(xiàn)上面內(nèi)容部分。每個(gè)模塊的單元體具有統(tǒng)一的視覺。

    應(yīng)用場景:列表,集合頁,入口

    此圖片來自于網(wǎng)絡(luò)

    6. 卡片式形式六

    大卡片式設(shè)計(jì),表現(xiàn)為一塊特大的卡片式,上面會(huì)有標(biāo)題,按鈕等信息,同樣表現(xiàn)出突出層次感,個(gè)性化設(shè)計(jì)的特質(zhì)。體現(xiàn)出內(nèi)容,一般背景有顏色上面卡片為白色,如下面背景為白色,那么卡片的形式也可色塊,在對(duì)比上有個(gè)反差,才能突出卡片的作用性。

    應(yīng)用場景:提示,說明,優(yōu)惠劵,劵,入口

    此圖片來自于網(wǎng)絡(luò)

    以上總結(jié)的幾種卡片的形式,在設(shè)計(jì)中可以根據(jù)情況而設(shè)計(jì),卡片多樣化,布局多樣化,適合自己產(chǎn)品的才最重要,雖然在界面設(shè)計(jì)中常用的設(shè)計(jì),但不要盲目的為了卡片而卡片套用設(shè)計(jì),這樣起不到作用反而效果達(dá)不到理想程度。希望幾個(gè)卡片形式總結(jié)能給大家?guī)硪恍╈`感和啟發(fā)。

    同樣在這些卡片中會(huì)有一些基本的共同的特點(diǎn)

    共同的特點(diǎn)是

    1. 四個(gè)角都是圓角

    2. 根據(jù)潮流漸變色或白卡片

    3. 色塊下的陰影,色塊下的陰影更能體現(xiàn)出層次

    4. 卡片上面組成部分,標(biāo)題,副標(biāo)題,圖形,按鈕,圖片,頭像

    5. 字體大小,字體顏色的變化

    6. 一般卡片應(yīng)用在會(huì)員,列表,說明,優(yōu)惠劵,分類,類別,集合頁,歡迎頁等場景常見


    三、卡片正確設(shè)計(jì)知識(shí)

    為了講解文章,順叔臨時(shí)構(gòu)思一個(gè)產(chǎn)品原型,而快速進(jìn)行了簡單的設(shè)計(jì),一個(gè)第一版,一個(gè)優(yōu)化版,主要為了講解一下這個(gè)卡片設(shè)計(jì)一些問題,

    以下此圖為構(gòu)思的原型圖

    經(jīng)過分析原型圖之后開始進(jìn)行設(shè)計(jì),首先設(shè)計(jì)一個(gè)版本的,如果這樣卡片布局設(shè)計(jì),這樣色彩搭配的情況下,會(huì)怎么樣呢,整體設(shè)計(jì)用了藍(lán)紫色為主色調(diào),首先鋪藍(lán)紫色的色塊作為背景,然后上面放白色卡片,以至于卡片上詳細(xì)的內(nèi)容,比如數(shù)字,圖形 能更好的豐富支撐卡片。同樣數(shù)據(jù)流也是比較重要的C位。也是比較重要的位置。接著根據(jù)原型圖下面有兩個(gè)卡片,通過扁平化設(shè)計(jì),以色塊為主設(shè)計(jì)一個(gè)藍(lán)色,一個(gè)橙色的卡片,上面并有圖標(biāo),頭像,以及標(biāo)題,兩個(gè)顏色的對(duì)比,更讓視覺有沖擊力,整體看這個(gè)設(shè)計(jì)并沒有什么,但有個(gè)問題在于單個(gè)模塊拿出來效果的確都不錯(cuò),但組成之后上面的卡片C位讓下面的兩個(gè)帶顏色的卡片搶了視覺,當(dāng)打開這個(gè)界面的時(shí)候視覺落點(diǎn)在彩色卡片上,那么這個(gè)整體設(shè)計(jì)上就出現(xiàn)了問題,上面的數(shù)據(jù),白色卡片其實(shí)是比較重要的,而且整個(gè)畫面都是卡片毫無設(shè)計(jì)上的變化,

    那么只能在這個(gè)基礎(chǔ)上在進(jìn)行優(yōu)化,其實(shí)大家在做設(shè)計(jì)的同時(shí)也這樣,在考慮功能模塊前提下,用戶體驗(yàn),也要考慮視覺體驗(yàn),那么視覺從哪方面來,色彩、層次、版式等等方面。那么能不能在進(jìn)行一下優(yōu)化呢,其實(shí)還是有空間在進(jìn)行優(yōu)化。以下圖為第一版

    設(shè)計(jì)第一版

    根據(jù)上面的設(shè)計(jì)在進(jìn)行優(yōu)化,同樣保留白色卡片部分元素,在卡片與卡片之間放一些顏色的圖標(biāo),這樣更好的給功能上快捷入口,也能給卡片設(shè)計(jì)增添了變化。使得整個(gè)畫面更靈活

    雖然白色卡片,但有一些色彩的點(diǎn)綴,也讓白色卡片活躍起來,把顏色的卡片改成白色卡片,從上到下的版式舒服多了,也沒有那么跳。整個(gè)風(fēng)格更簡約,同時(shí)功能也更全面。

    調(diào)整后

    從原型圖,在到設(shè)計(jì)第一版,在到優(yōu)化調(diào)整之后,證明一點(diǎn),卡片不要因?yàn)榭ㄆ自O(shè)計(jì),反而會(huì)失去效果,考慮功能模塊,用戶體驗(yàn),視覺體驗(yàn)也一定讓整體舒服。一直都說,繪畫中需要有主有次,設(shè)計(jì)中也一定要有主,有次的進(jìn)行設(shè)計(jì)。這樣層級(jí)關(guān)系才能更清晰。

    但這些條件一定是從,體驗(yàn)、色彩、布局、版式等方面進(jìn)行對(duì)比和研究的。設(shè)計(jì)不要先著急做設(shè)計(jì),前期的進(jìn)行思考,邏輯清楚了,在進(jìn)行設(shè)計(jì)的時(shí)候會(huì)更加的順暢??ㄆ皆O(shè)計(jì),大家都在應(yīng)用,希望這個(gè)文章能給大家?guī)硪稽c(diǎn)點(diǎn)知識(shí)點(diǎn),那就不枉費(fèi)我在熬夜寫這篇文章。

    不為別的,只是一個(gè)喜歡分享的肉團(tuán)子。這篇文章就寫到這里,如果喜歡請(qǐng)給個(gè)贊吧。如內(nèi)容有沒說到的地方,各位可以進(jìn)行補(bǔ)充,以上兩個(gè)圖你稀罕哪個(gè)呢?


    作者:張?jiān)鲰?/span>

    轉(zhuǎn)載請(qǐng)注明:站酷

    藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

    魏華的微信.png

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.

    免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

    UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


UI設(shè)計(jì)師必看!關(guān)于界面設(shè)計(jì)質(zhì)感提升的15個(gè)小技巧

博博

分享如何使用小技巧,提升設(shè)計(jì)質(zhì)感

在UI設(shè)計(jì)中,很多設(shè)計(jì)師都苦惱于自己的界面設(shè)計(jì)“沒有設(shè)計(jì)感”,感覺看起來“不高級(jí)”,到底是為什么呢?其實(shí)就是在一些細(xì)節(jié)的處理上略缺火候,掌握下面這15個(gè)小技巧,能讓你的UI界面質(zhì)感翻倍!


1、雙重陰影,突出立體感

設(shè)計(jì)師在設(shè)計(jì)時(shí),為了突出里按鈕的立體感,往往會(huì)使用陰影效果。但其實(shí)在陰影效果上再疊加一層精細(xì)的邊框,可以讓陰影效果顯得更清晰,而不會(huì)與原本的按鈕混為一體。

2、只用一種字體,保持視覺一致性

為了讓設(shè)計(jì)更美觀,許多設(shè)計(jì)師會(huì)在一個(gè)界面使用多種字體,但實(shí)際上,一個(gè)界面里只使用一種字體更為美觀,可以幫助界面產(chǎn)生統(tǒng)一的設(shè)計(jì)效果。


3、一種字體,不同字重

如果選擇一種字體進(jìn)行設(shè)計(jì)會(huì)稍顯單調(diào),那可以根據(jù)內(nèi)容的輕重優(yōu)先級(jí),來選擇不同的字重來做以區(qū)分。


4、適當(dāng)留白

當(dāng)內(nèi)容豐富時(shí),更需要適當(dāng)?shù)牧舭?,才能讓設(shè)計(jì)具有呼吸感,更加舒適。


5、提高文本與背景的對(duì)比度

很多過深或過淺的背景圖上添加文本,總會(huì)讓人閱讀有困難,可以采取加粗、添加漸變等方式來處理文本,讓字體更清晰。


6、交互按鈕需要著重突出

為了增加用戶選擇交互按鈕的可能性,應(yīng)該使用顏色對(duì)比、尺寸或標(biāo)簽,來確保該按鈕突出。


7、字號(hào)越小,行距應(yīng)該越寬

字號(hào)越小,閱讀起來障礙更明顯,增加行高留出空隙會(huì)讓它更易讀。


8、下載頁顯示進(jìn)度提醒

如果下載頁的軟件或其他安裝包有一定的下載等待時(shí)間,建議給出進(jìn)度提示,讓用戶可以隨時(shí)了解下載進(jìn)度,不會(huì)中途取消下載。

9、同個(gè)界面,文本長度盡量一致

基于人的閱讀習(xí)慣,研究總結(jié)出,單列頁面里,45到75個(gè)字符是被廣泛認(rèn)可的長度。


10、元素陰影不要太重

舒服的投影會(huì)增加你的設(shè)計(jì)的質(zhì)感,和透氣感。太重的投影會(huì)顯得你畫面比較臟。

11、使用遞進(jìn)分類加強(qiáng)對(duì)比度

加強(qiáng)對(duì)比度,可以明確突出所選元素。


12、標(biāo)題的行高不要太高

與長格式正文文本(需要足夠的行高以提高可讀性)不同,標(biāo)題通常要短得多,因此可以稍微縮小間距。標(biāo)題的建議行高通常是文本大小的1到1.3倍。


13、大寫標(biāo)題,提高字間距

當(dāng)標(biāo)題全部為大寫字母時(shí),增加字母間距可以提高可讀性,同時(shí)又增強(qiáng)了一絲設(shè)計(jì)感。


14、增添頁面動(dòng)態(tài)

可以在加載中添加一些提醒讓用戶理解當(dāng)前運(yùn)行狀態(tài),例如添加“緩沖”符號(hào)。

15、不要在下拉列表放置重要操作

用戶需要采取的基本操作(例如,注冊(cè)或登錄),應(yīng)該直接放在醒目位置,而非隱藏在菜單欄中。




作者:Pixso云設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

界面設(shè)計(jì)中的不完美之美

博博

有時(shí)我們傾向于將我們的設(shè)計(jì)視為藝術(shù)品。但如果我們用這種方式來思考它們,就意味著它們不會(huì)準(zhǔn)備好面對(duì)“現(xiàn)實(shí)世界”的不確定……

時(shí)我們傾向于將我們的設(shè)計(jì)視為藝術(shù)品。但如果我們用這種方式來思考它們,就意味著它們不會(huì)準(zhǔn)備好面對(duì)“現(xiàn)實(shí)世界”的不確定條件。但是,設(shè)計(jì)一個(gè)可以隨時(shí)改變的界面也很美 - 而且,讓我們承認(rèn)它,接口確實(shí)一直在變化。我最喜歡設(shè)計(jì)移動(dòng)應(yīng)用程序的一個(gè)方面是,從最初的概念到你對(duì)所有界面細(xì)節(jié)進(jìn)行微調(diào)和拋光的時(shí)候,這是一個(gè)包含許多步驟的過程。

我們是視覺思考者,擁有訓(xùn)練有素的眼睛。這就是為什么在開始一個(gè)新項(xiàng)目時(shí)有時(shí)會(huì)直接跳到可視化UI設(shè)計(jì)階段的原因,這也是我們可能對(duì)其他任務(wù)感到厭倦的原因之一。

這也意味著我們經(jīng)常推遲工作流程的其他重要部分:定義用戶需求和目標(biāo),草擬任務(wù)流程,處理信息的所有細(xì)節(jié)和交互設(shè)計(jì)等。這些是同樣重要的是,它們更抽象,更難以讓人想象它們將如何成為最終產(chǎn)品的有形部分。

當(dāng)我們正在進(jìn)行視覺設(shè)計(jì)時(shí),所謂的像素完美哲學(xué)可能是一個(gè)陷阱,使我們花費(fèi)更多的時(shí)間來制作細(xì)節(jié),直到最小的細(xì)節(jié)處于界面的“完美”位置。這導(dǎo)致一代設(shè)計(jì)師使用Dribbble和Behance主要顯示應(yīng)用程序和網(wǎng)站的精美屏幕,并且更關(guān)注外觀而不是設(shè)計(jì)實(shí)際工作方式。在現(xiàn)實(shí)世界中,事情往往不如我們期望的那樣好。

就個(gè)人而言,我認(rèn)為最好的設(shè)計(jì)(當(dāng)談到用戶界面設(shè)計(jì)時(shí))不僅外觀和感覺良好,而且還可以優(yōu)雅地響應(yīng)變化的條件甚至不可預(yù)測的情況。

在構(gòu)建產(chǎn)品的漫長道路上,設(shè)計(jì)師需要更多的協(xié)作,而不是專注于視覺設(shè)計(jì)。這正是我為了這篇文章專注的地方。在接下來的幾段中,我將向你提供一些提示和技巧,說明如何將你正在進(jìn)行的應(yīng)用程序設(shè)計(jì)用于測試,并了解它是否已準(zhǔn)備好發(fā)布到市場。

在不完美中尋找美

當(dāng)我在大學(xué)學(xué)習(xí)平面設(shè)計(jì)時(shí),他們教會(huì)了我們平衡,對(duì)齊,比例和張力的美感,以及如何在空間中定位元素,使它們和諧悅目。憑借這些知識(shí),我的生活發(fā)生了變化,我開始以不同的眼光看世界。后來,我開始設(shè)計(jì)界面,我試圖將相同的原則付諸實(shí)踐,屏幕上的所有信息都應(yīng)該形成一個(gè)非常令人滿意的視覺構(gòu)圖。

如果你將這些原則應(yīng)用于移動(dòng)應(yīng)用程序設(shè)計(jì),那么我們發(fā)現(xiàn)必須顯示適量的信息。例如,如果一個(gè)屏幕必須列出人們的姓名,設(shè)計(jì)師通常會(huì)選擇一些短而普通的名字,并將它們完美地排列在一起,沒有留下任何可能破壞設(shè)計(jì)或使其在以后崩潰的意外長名稱的空間。

這種方法基于這樣的假設(shè):在混亂和不完美中沒有美,盡管這兩個(gè)方面在現(xiàn)實(shí)世界中經(jīng)常出現(xiàn)。但是視覺界面并不是一件值得欣賞的靜態(tài)藝術(shù)品; 它們是動(dòng)態(tài)的,功能性的空間,可以改變和適應(yīng)每個(gè)人使用它們。我們不應(yīng)該屈服于純粹為美學(xué)設(shè)計(jì)的誘惑,因?yàn)槲覀冇肋h(yuǎn)無法控制界面必須呈現(xiàn)給人們的一切。

相反,我們必須設(shè)計(jì)變革!這就是日本人所說的wabi-sabi,一個(gè)“以接受短暫和不完美為中心的世界觀”。

因此,以不同的方式思考和設(shè)計(jì)是很重要的:

● 嘗試以多種方式在你的設(shè)計(jì)中呈現(xiàn)數(shù)據(jù);

● 盡可能使用真實(shí)數(shù)據(jù)。

當(dāng)你嘗試以幾種方式呈現(xiàn)數(shù)據(jù)時(shí),包括一些不可預(yù)測的數(shù)據(jù),你將能夠測試界面是否已準(zhǔn)備好處理超出設(shè)計(jì)“舒適區(qū)”的這些情況。此外,為極端情況做好準(zhǔn)備。

如果你已經(jīng)推出了該產(chǎn)品,這將更容易,因?yàn)槟憧梢躁P(guān)注實(shí)際數(shù)據(jù)并將其用于你正在進(jìn)行的設(shè)計(jì)過程中作為參考。但是如果你正在研究一些新的東西,那么你將不得不深入挖掘,做一些研究,并嘗試了解以后如何信息。你還可以與后端團(tuán)隊(duì)的開發(fā)人員討論此問題,他們將能夠更好地向你解釋將存儲(chǔ)和呈現(xiàn)的數(shù)據(jù)類型。

 

我給你一個(gè)更具圖形的例子,我的開發(fā)者朋友稱之為“漂亮的朋友綜合癥”。當(dāng)我們?cè)O(shè)計(jì)一個(gè)包含人物圖片的屏幕時(shí),如用戶檔案,我們傾向于使用在設(shè)計(jì)中看起來很好并且很漂亮的人的照片。然而,當(dāng)他看到這樣的設(shè)計(jì)時(shí),我的朋友說:“我希望我有朋友這么帥?!?

因此,“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機(jī)照片。這樣,你就可以測試重疊元素在不同背景下的外觀,讓你可以看到對(duì)比度和易讀性是否仍然完好無損。

不要過于樂觀

對(duì)于應(yīng)用程序的工作方式,我們天生就是樂觀主義者。我們認(rèn)為一切都會(huì)快速順利地進(jìn)行,而且不會(huì)中斷,因?yàn)?.....為什么不呢?這就是為什么我們有時(shí)會(huì)忘記如何設(shè)計(jì)和處理用戶可能在以后遇到的一些可能不那么好的情況。

列舉幾例,如果突然互聯(lián)網(wǎng)連接中斷,會(huì)發(fā)生什么?或者,如果瀏覽器在執(zhí)行任務(wù)時(shí)嘗試連接到API時(shí)出錯(cuò)?如果連接速度太慢,是否會(huì)有加載指示器(例如微調(diào)器或進(jìn)度條),或者在加載實(shí)際數(shù)據(jù)時(shí)是否會(huì)有一些占位符填充顯示塊?那么刷新應(yīng)用程序的某些屏幕的可能性呢?什么時(shí)候(以及在哪種情況下)可能?

正如你所看到的,我不是在談?wù)撚脩羲傅腻e(cuò)誤(例如,在填寫表單時(shí)犯了錯(cuò)誤),而是關(guān)于不受其控制但仍然發(fā)生的錯(cuò)誤。在這種情況下,與開發(fā)人員交談,并了解不同屏幕上可能出現(xiàn)的問題,然后設(shè)計(jì)一種可以讓用戶輕松解決問題的方法,讓他們可以選擇稍后再試或者執(zhí)行不同的操作。

無論如何,確定觸發(fā)每個(gè)錯(cuò)誤的特定條件并為每個(gè)案例設(shè)計(jì)有用的錯(cuò)誤消息是一個(gè)好主意。這些有用的消息將幫助用戶在每種情況下做出適當(dāng)?shù)捻憫?yīng),并知道下一步該做什么來解決問題。即使它有點(diǎn)麻煩,也不惜一切代價(jià)避免使用通用錯(cuò)誤消息。

理解流程

界面包括許多元素,它們一起形成應(yīng)用程序的整個(gè)布局。然而,當(dāng)我們把重點(diǎn)放在用戶界面上的一個(gè)整體,我們往往忘記了一些元素也有較小的任務(wù)來執(zhí)行的總體目標(biāo)做出貢獻(xiàn)。

如果有一個(gè)觸發(fā)某種交互的按鈕或項(xiàng)目,那么請(qǐng)向前看并考慮下一步:在執(zhí)行操作時(shí)是否會(huì)顯示加載狀態(tài)?它可以因某種原因被禁用嗎?如果用戶按住按鈕一段時(shí)間該怎么辦?會(huì)有任何反饋意見嗎?就像整個(gè)屏幕有不同的狀態(tài)一樣,同樣也適用于單個(gè)元素。

此外,請(qǐng)考慮產(chǎn)品的邏輯如何與用戶的心智模型相匹配,幫助他們準(zhǔn)確有效地實(shí)現(xiàn)目標(biāo)并以有意義和可預(yù)測的方式完成他們的任務(wù)。

我要做的就是解決所有這些問題,就是停止我正在做的事情,暫停,退后一步,查看整個(gè)多屏幕流程的大局,并了解一系列步驟和動(dòng)作。我將尋找導(dǎo)致該點(diǎn)的多條路徑,以及遠(yuǎn)離它的多條路徑。

你可以在使用原型時(shí)做同樣的事情,慢慢地,認(rèn)真地,謹(jǐn)慎地執(zhí)行動(dòng)作。如果這對(duì)你來說太具有挑戰(zhàn)性,因?yàn)槟阒翱赡芤呀?jīng)多次這樣做了,現(xiàn)在它變成了一種自動(dòng)化的任務(wù),并問同事,朋友或活躍用戶看看設(shè)計(jì)或原型??吹狡渌耸褂貌⑴c你的設(shè)計(jì)進(jìn)行互動(dòng)可能很有啟發(fā)性,因?yàn)槲覀兺^于接近并且過于熟悉它,因此可能會(huì)忽略一些事情。

為您的屏幕設(shè)計(jì)

當(dāng)我在設(shè)計(jì)時(shí),我通常會(huì)將手機(jī)放在我旁邊,以便我可以預(yù)覽我的工作并實(shí)時(shí)進(jìn)行調(diào)整。

我認(rèn)為這是一個(gè)很好的做法,但這種方式也很容易忘記所有其他手機(jī)與人們可能使用的手機(jī)不同。有很多不同的屏幕尺寸(特別是在Android平臺(tái)上); 試著考慮所有可能的變化。

知道從哪里開始的一種方法是檢查你的實(shí)際用戶擁有哪種類型的設(shè)備。

在為各種屏幕尺寸和方向準(zhǔn)備設(shè)計(jì)時(shí),不僅僅是拉伸盒子和重新定位元素。仔細(xì)考慮如何充分利用每種情況,以及如何進(jìn)行必要的調(diào)整,即使它意味著偏離原始設(shè)計(jì)。

在這些情況下,我們之前討論過的相同原則仍然適用:不可預(yù)測的情況,不同類型的內(nèi)容,可變數(shù)量的信息,缺少數(shù)據(jù)等等。你必須針對(duì)各種可能的場景進(jìn)行設(shè)計(jì)。不要陷入將屏幕設(shè)計(jì)為產(chǎn)品的單獨(dú)部分的陷阱,它們都是相互連接的。

這不僅對(duì)你有用,而且對(duì)開發(fā)人員也有幫助,他們需要了解許多可能的場景才能編寫代碼并準(zhǔn)備界面來解決這些問題。

今天你需要什么,明天你可能需要

你可能已經(jīng)注意到,本文中許多要點(diǎn)的目標(biāo)是減少意外情況。即便如此,在很多情況下你也無法得到明確的答案。開發(fā)人員經(jīng)常會(huì)問,“那么,如果我這樣做會(huì)發(fā)生什么呢?”指出你以前沒有考慮過的潛在結(jié)果。

如果發(fā)生這種情況,那么你只需要針對(duì)一個(gè)案例和一個(gè)屏幕來解決該特定問題。但總是嘗試全局思考,并考慮如何將該特定問題的答案設(shè)計(jì)為以靈活的方式工作,以便你以后可以重用它。

畢竟,這就是我們UI設(shè)計(jì)師所做的 - 我們?cè)O(shè)計(jì)和定義適應(yīng)未預(yù)料到的狀態(tài),條件和流程的靈活系統(tǒng)。將你的界面視為移動(dòng),更換智能部件的生動(dòng)生態(tài)系統(tǒng),而不是單個(gè)像素塊的集合。

在此過程的這一部分中,你需要與團(tuán)隊(duì)中的開發(fā)人員密切合作,主要是為許多不同情況定義一組行為規(guī)則。但保持良好的平衡 - 盡量不要過度設(shè)計(jì)。用一點(diǎn)常識(shí)來設(shè)定自己的極限。你需要在功能和一致性之間取得良好的平衡。請(qǐng)記住,良好的設(shè)計(jì)系統(tǒng)是靈活的,并且在某些情況下為規(guī)則的某些例外做好準(zhǔn)備。

另一方面,想一想你已經(jīng)設(shè)計(jì)過的元素如何調(diào)整以適應(yīng)新的情況。如果你創(chuàng)建一個(gè)設(shè)計(jì)組件庫,你將會(huì)看到更好的結(jié)果,因此,只需快速瀏覽一下庫,你就會(huì)知道是否需要從頭開始設(shè)計(jì)某些東西,或者你可以使用現(xiàn)成的東西。

結(jié)論

基于設(shè)計(jì)系統(tǒng)的優(yōu)雅解決方案具有明確定義的問題將使我們工作中的視覺設(shè)計(jì)更加有趣,因?yàn)槲覀兛梢詫W⒂诮缑娴母倪M(jìn),拋光和愉悅,而無需無休止地迭代。當(dāng)我們過早地跳到視覺效果時(shí),我們必須同時(shí)解決問題并制作界面,這通常會(huì)導(dǎo)致沮喪和倦怠。

改變你的工作流程可能在一開始就具有挑戰(zhàn)性,但過了一段時(shí)間你會(huì)喜歡在限制范圍內(nèi)工作。這也將改變你的思維方式,并希望幫助你擺脫對(duì)視覺細(xì)節(jié)的關(guān)注。你將成為一個(gè)更加完善和有能力的用戶體驗(yàn)設(shè)計(jì)師,使用適當(dāng)?shù)目山桓冻晒?,而不僅僅是生成無窮無盡的視覺模型和組合。


作者:視覺設(shè)計(jì)_小強(qiáng)哥

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

如何在界面設(shè)計(jì)中融入品牌元素

博博

這篇文章,主要以常見界面為案例,粗淺聊聊品牌元素如何融入到界面設(shè)計(jì)中。

直播是2020年到2021年移動(dòng)互聯(lián)網(wǎng)的重要賽道,在以百度APP為核心的移動(dòng)生態(tài)之下,缺少一個(gè)獨(dú)立的直播APP去承載整個(gè)百度直播體系和被直播所吸引的用戶。為了讓用戶“有出有進(jìn)”,促成了這次的產(chǎn)品設(shè)計(jì)。


在這樣的產(chǎn)品孵化階段,我們希望產(chǎn)品在具有直播特性的同時(shí),能夠與其他泛娛樂類的直播產(chǎn)品打開差異化,并且有足夠的記憶點(diǎn)讓它在眾多直播產(chǎn)品中被人們所記住并喜歡,那么品牌的塑造和品牌的融合就尤為重要。


所以,產(chǎn)品的設(shè)計(jì)圍繞著泛娛樂直播進(jìn)行,進(jìn)行功能的設(shè)計(jì)和梳理,其中視覺設(shè)計(jì)便以品牌為中心。


上述的內(nèi)容,準(zhǔn)備以上下兩篇文章來做闡述和展示。


這篇文章,主要以市場上的界面案例,來粗淺地聊聊品牌元素如何融入到界面設(shè)計(jì)中。


下一篇正在準(zhǔn)備中,將以我剛來到百度時(shí)設(shè)計(jì)的一個(gè)獨(dú)立直播產(chǎn)品為例,盡可能完整地呈現(xiàn)以強(qiáng)化品牌、IP應(yīng)用為核心的產(chǎn)品設(shè)計(jì)過程。




百度網(wǎng)盤

在網(wǎng)盤團(tuán)隊(duì)去年的改版中,將積木的品牌概念,融入到icon的設(shè)計(jì)中,取得了巨大的成功和市場反響,蘇大牙的那篇復(fù)盤文章,一直在產(chǎn)品設(shè)計(jì)上影響著我的思路。



2.谷歌系A(chǔ)PP圖標(biāo)

谷歌如今統(tǒng)一了谷歌系產(chǎn)品的圖標(biāo)風(fēng)格,充分地在顏色和風(fēng)格上體現(xiàn)了谷歌的品牌意識(shí),如今我們一見到此類的圖標(biāo),第一反應(yīng)便是,這是不是谷歌的APP?



3.映客直播

映客直播在啟動(dòng)頁、tabbar,都把貓頭鷹的元素融入進(jìn)來,在運(yùn)營設(shè)計(jì)中,也更多的使用貓頭鷹剪影作為主體畫面的承載。


4.最右

最右在登錄相關(guān)的頁面,使用IP+品牌色的方式,強(qiáng)化品牌意識(shí),在下拉刷新中,融入IP進(jìn)行趣味性的設(shè)計(jì),很好地詮釋了娛樂性、年輕化的產(chǎn)品應(yīng)如何做情感化設(shè)計(jì)。



5.快手電丸

快手電丸在個(gè)人主頁默認(rèn)圖、頭像默認(rèn)圖、加載、頁面中的功能引導(dǎo),都加入了IP形象強(qiáng)化品牌。



5.躺平

躺平是在我最近的產(chǎn)品體驗(yàn)中,IP運(yùn)用和品牌塑造最完整的產(chǎn)品,它成功的把“躺平”這個(gè)概念,應(yīng)用到了IP形象上,再由IP形象對(duì)界面中的各處進(jìn)行應(yīng)用,延伸這個(gè)品牌概念。而且應(yīng)用范圍并不僅僅局限于彈窗、啟動(dòng)頁、刷新等常規(guī)IP應(yīng)用點(diǎn),更是在界面之中做到了自然合理的應(yīng)用。




小結(jié):

在界面設(shè)計(jì)中,對(duì)于品牌的強(qiáng)化,除了將品牌理念抽象化進(jìn)行icon等圖形的設(shè)計(jì),更多地產(chǎn)品喜歡采用具象的IP形象進(jìn)行合理植入來進(jìn)行品牌概念的傳達(dá)。


在IP的應(yīng)用中,啟動(dòng)頁、加載動(dòng)畫、下拉刷新、彈窗裝飾、默認(rèn)圖片等是常規(guī)的應(yīng)用場景,除此之外,在卡片標(biāo)題、功能入口、內(nèi)容頁裝飾等地方出現(xiàn)IP的應(yīng)用,更加能給用戶帶來驚喜感。


品牌在界面中的植入,在于小而有趣,而不在于多少,在合適和驚喜的地方出現(xiàn),才能向用戶傳遞出情感。同時(shí)可以看出,在界面中應(yīng)用的IP形象,基本不會(huì)出現(xiàn)3D化的情況,在年輕化、娛樂向的產(chǎn)品中,IP本身也沒有明顯的性別傾向。


總結(jié)下,無描邊、扁平、2D、無性別等特征,更加適合在界面中應(yīng)用。少配色、輕漸變、結(jié)構(gòu)簡單、應(yīng)用場景尺寸越小,IP使用比例越小,這些原則也更有利于IP應(yīng)用的合理性。





作者:靈感大王NinE

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

UI界面設(shè)計(jì)中的顏色基礎(chǔ)

博博

獲得專業(yè)配色方案的簡單規(guī)則

Color是眼睛從光中感知到的感官印象,它以各種形式的概念和情感進(jìn)行翻譯。對(duì)于藝術(shù)家來說,正確的操作非常重要,因此在整個(gè)歷史中,它已經(jīng)以多種方式和不同的方法得到了理論化。


繪畫,印刷,攝影,圖形設(shè)計(jì)和界面設(shè)計(jì)使用色彩理論來喚起特定的思想和觀念,并利用色彩的非語言能力,而不是其他較慢的交流形式。

在界面設(shè)計(jì)中,從增強(qiáng)品牌知名度到在購買按鈕上產(chǎn)生更多點(diǎn)擊,色彩心理被用來影響用戶可能擁有的感知。其他重要結(jié)果,例如改進(jìn)的可用性,也可以是良好的顏色掌握能力的結(jié)果。

在本文中,我將介紹設(shè)計(jì)界面時(shí)經(jīng)常用于顏色選擇的六個(gè)注意事項(xiàng)。


鏈接

特定的顏色與某些情感相關(guān),但并非總是如此。自從我們出生以來,我們的眼睛就了解現(xiàn)實(shí)世界的色彩,隨著時(shí)間的流逝,記憶會(huì)將這些色彩與某些體驗(yàn)和元素相關(guān)聯(lián)。這種熟悉程度可以為用戶提供有關(guān)界面目標(biāo)的一些上下文。

當(dāng)然,這不是絕對(duì)的,因?yàn)槿祟悓?duì)現(xiàn)實(shí)的理解是非常不同的,并且不能以其所有形式進(jìn)行概括。德國藝術(shù)家約瑟夫·阿爾伯斯在他有條不紊的書,彩色的互動(dòng),指出色的主強(qiáng)的特點(diǎn)就是相對(duì)論。西方國家的紅色可能代表著危險(xiǎn)和邪惡,但在中國,紅色代表著幸福,歡樂和慶祝。盡管如此,他還指出,許多人以相同的方式感知某些顏色,例如與生態(tài)相關(guān)的綠色或粉紅色代表著女性氣質(zhì)。


和諧

和諧的色彩使元素具有邏輯感。有很多方法可以創(chuàng)建色彩和聲。其中之一是通過使用類似的顏色,即在色輪中彼此接近的顏色。

為什么類似的顏色具有吸引力?因?yàn)檫@是自然產(chǎn)生的色彩行為。日落使天空從橙色變成紫色,海洋從藍(lán)色變成綠松石,彩虹將所有七種顏色融合在一起。我們可以得出結(jié)論,視線會(huì)以類似的顏色找到自然的愉悅感。


由于溫度也會(huì)產(chǎn)生相當(dāng)大的協(xié)調(diào)性,因此建議僅在暖色或冷色之間保持此顏色范圍。還可以利用這些顏色的飽和度和亮度來創(chuàng)建類似物的使用深度。這完全取決于您要?jiǎng)?chuàng)建的效果以及界面顯示的內(nèi)容。


對(duì)比

色彩對(duì)比使界面更具動(dòng)感。色彩補(bǔ)充的另一種形式是通過使用補(bǔ)色來實(shí)現(xiàn)的,補(bǔ)色是在色輪中彼此面對(duì)的補(bǔ)色。通過使用互補(bǔ)色元素,可以在設(shè)計(jì)中產(chǎn)生對(duì)比和動(dòng)態(tài)效果。

對(duì)比顏色的好處包括,可以賦予界面能量和運(yùn)動(dòng)效果,以及增強(qiáng)一些我們希望用戶注意的相關(guān)點(diǎn)。要使這些顏色和諧相處并不容易,因?yàn)樗鼈兊臑E用會(huì)造成視覺混亂,并使眼睛不適。比例是關(guān)鍵。


要了解有關(guān)色彩對(duì)比的更多信息,我推薦瑞士人Johannes Itten撰寫的《色彩的藝術(shù)》一書,其中介紹了七種對(duì)比類型的理論:色調(diào),溫度,明暗,互補(bǔ),飽和度,同時(shí)和定量。無論我們選擇哪種顏色對(duì)比,都應(yīng)在整個(gè)Web /應(yīng)用頁面中進(jìn)行維護(hù),以確保設(shè)計(jì)的一致性。


規(guī)模

色階可減輕認(rèn)知負(fù)擔(dān)。保持色調(diào),但將閃電修改為不同的水平有助于分離元素,而不會(huì)使組合物過載。

UI設(shè)計(jì)中的色階也受自然影響,不僅受樹木葉子,天空或海洋等元素的影響,而且受物體和陰影的影響。人眼會(huì)感覺到相同顏色的許多變化,具體取決于照明,深度甚至紋理。人們期望UI顏色像他們?cè)诂F(xiàn)實(shí)世界中一樣就不足為奇了。


可以說,使用色標(biāo)的目的是避免添加大腦必須處理和不必要理解的新顏色或色調(diào)。界面設(shè)計(jì)越容易理解和越快,它將為用戶帶來更多的樂趣。


比例

定義顏色比例可平衡組成。越來越多地使用顏色可以使樣式更清晰,并避免不必要的顏色沖突。

顏色層次結(jié)構(gòu)對(duì)于定義一種氛圍非常重要,同時(shí),它也是構(gòu)成網(wǎng)絡(luò)中所有元素的主要色彩。在當(dāng)前的UI設(shè)計(jì)趨勢中,白色是最受歡迎的顏色,因?yàn)榘咨梢员3纸缑娓蓛簦怀鲲@示交互顏色并提高可讀性。但是,如果要在特定頁面上創(chuàng)建更具沉浸感和藝術(shù)感的效果,則選擇更飽和的顏色確實(shí)會(huì)很好。


相互作用

交互顏色在執(zhí)行過程中必須清晰且在界面中保持一致。號(hào)召性用語必須相對(duì)于背景具有足夠的對(duì)比度,并且相對(duì)于其他組件必須具有足夠的視覺重量,以便用戶可以輕松識(shí)別它們。

但是,交互色并不總是以最飽和或最亮為特征,而是以其色調(diào),形狀,大小或?qū)Ρ榷仍谄聊簧吓c其他元素脫穎而出。因此,交互顏色的有效性將通過用戶識(shí)別交互區(qū)域并以較少的思想執(zhí)行任務(wù)的速度來衡量。


另一方面,次要行動(dòng)號(hào)召力更輕,并且在視覺上更接近信息元素。在我們的耐克應(yīng)用示例中,配置和聲音按鈕指示這些是交互作用,原因是形狀而不是顏色。按鈕的這種層次結(jié)構(gòu)很重要,因此用戶可以對(duì)元素進(jìn)行自然排序,并避免在每個(gè)屏幕上使用多個(gè)主要的號(hào)召性用語的不良做法。




總之,顏色是事物的重要影響者,它影響事物對(duì)環(huán)境的感知,并直接影響其他顏色甚至自身。盡管對(duì)其理論的深入研究可以改善我們對(duì)設(shè)計(jì)的掌握,但是創(chuàng)建專業(yè)配色方案的過程很大程度上取決于我們的視覺體驗(yàn)和對(duì)現(xiàn)實(shí)世界的感知。讓我們開始訓(xùn)練我們的眼睛。


作者:美膩膩nii

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


未來情感化界面設(shè)計(jì)

博博

情感化設(shè)計(jì)在我們的決策過程中起著至關(guān)重要的作用



情感化設(shè)計(jì)在我們的決策過程中起著至關(guān)重要的作用,因?yàn)榧尤肭楦谢脑O(shè)計(jì)可以改變與產(chǎn)品交互的人的整體現(xiàn)實(shí)。


人類是一種情緒驅(qū)動(dòng)的物種,我們選擇某些產(chǎn)品并不是因?yàn)樗鼈冇幸饬x,而是因?yàn)槲覀冋J(rèn)為它們會(huì)讓我們感受到不一樣的感覺。也正因如此,在未來的界面將在產(chǎn)品設(shè)計(jì)的基礎(chǔ)上使用情感的概念,人們使用的經(jīng)驗(yàn)將基于智商(IQ)和情商(EQ)。


本文試圖展望未來,看看我們將在未來十年內(nèi)設(shè)計(jì)哪些接口。我們將仔細(xì)研究三種情感化界面設(shè)計(jì)的互動(dòng):


  • 語音

  • 增強(qiáng)現(xiàn)實(shí)(AR)

  • 虛擬現(xiàn)實(shí)(VR)


未來情感化界面的實(shí)際例子


界面如何?即使我們還沒有回答這個(gè)問題,我們也可以討論接口可能具有哪些特性。在我看來,我確信我們最終將擺脫充滿菜單,面板,按鈕的接口,并轉(zhuǎn)向更“自然的界面”,也就是情感化的界面。未來的界面不會(huì)被鎖定在物理屏幕上,而是會(huì)集合五種感官的力量。因此,他們需要較少的學(xué)習(xí)曲線,理想情況下,根本沒有學(xué)習(xí)曲線。


情商情緒在商業(yè)中的重要性


除了使體驗(yàn)更自然并減少學(xué)習(xí)曲線之外,為情感設(shè)計(jì)還為產(chǎn)品創(chuàng)造者帶來了另一個(gè)好處:它提高了用戶對(duì)產(chǎn)品的采用率??梢岳萌祟悓?duì)情緒的行動(dòng)能力來創(chuàng)造更好的用戶參與度。


真實(shí)的語音界面


使用語音作為主要界面的產(chǎn)品正變得越來越流行。我們中的許多人使用Amazon Echo和Apple Siri進(jìn)行日?;顒?dòng),例如設(shè)置鬧鐘或預(yù)約。但是,目前市場上可用的大多數(shù)語音交互系統(tǒng)仍然具有自然的局限性:它們不會(huì)考慮用戶的情緒。因此,當(dāng)用戶與Google Now等產(chǎn)品進(jìn)行互動(dòng)時(shí),他們對(duì)與機(jī)器進(jìn)行通信具有強(qiáng)烈的溝通感 - 而不是真正的人。系統(tǒng)可預(yù)測地響應(yīng),并且他們的響應(yīng)是腳本化的,與這樣的系統(tǒng)進(jìn)行有意義的對(duì)話是不可能的。


但是目前市場上有一些完全不同的系統(tǒng),其中一個(gè)是Xiaoice,一個(gè)社交聊天機(jī)器人應(yīng)用程序。這個(gè)應(yīng)用程序的核心是情感計(jì)算框架,該應(yīng)用程序的基礎(chǔ)是,首先與用戶建立情感聯(lián)系。Xiaoice可以動(dòng)態(tài)識(shí)別情緒,并在與相關(guān)響應(yīng)的長時(shí)間對(duì)話中吸引用戶。結(jié)果,當(dāng)用戶與Xiaoice交互時(shí),就像是與真人交談一樣。


Xiaoice的局限在于它是一個(gè)基于文本的聊天應(yīng)用程序。很明顯,你可以通過基于語音的交互來實(shí)現(xiàn)更強(qiáng)大的效果(人聲具有不同的特征,例如可以傳達(dá)強(qiáng)大的情感譜的音調(diào))。


我們中的許多人已經(jīng)在電影“她”(2013)中看到了基于語音的互動(dòng)的力量。Theodore愛上了Samantha(一個(gè)復(fù)雜的操作系統(tǒng))。這也使我們相信,未來基于語音的系統(tǒng)的主要目的之一將是用戶的虛擬伴侶。這部電影最有趣的事情是西奧多沒有薩曼莎的視覺形象,他只有她的聲音。要建立這種親密關(guān)系,必須產(chǎn)生反映一致性格的回應(yīng)。這將使系統(tǒng)既可預(yù)測又值得信賴。


技術(shù)離Samantha這樣的系統(tǒng)還有很長的路要走,但我相信語音優(yōu)先的多模式接口將是語音接口發(fā)展的下一章。這樣的接口將使用語音作為主要交互方式,并在創(chuàng)建和建立連接感的上下文中提供附加信息。


為Brain.ai設(shè)計(jì)的語音界面示例(圖片來源:Gleb Kuznetsov)


AR體驗(yàn)的演變


增強(qiáng)現(xiàn)實(shí)(AR)被定義為現(xiàn)實(shí)世界之上的數(shù)字覆蓋,并將我們周圍的對(duì)象轉(zhuǎn)換為交互式數(shù)字體驗(yàn)。我們的環(huán)境變得更加“智能”,用戶對(duì)手指尖上的“有形”物體產(chǎn)生幻覺,從而在用戶和產(chǎn)品(或內(nèi)容)之間建立了更深層次的聯(lián)系。


使用AR重新構(gòu)想現(xiàn)有概念


AR的獨(dú)特之處在于它為我們提供了與數(shù)字內(nèi)容進(jìn)行物理交互的非凡能力。它允許我們看到以前無法看到的東西,這有助于我們更多地了解我們周圍的環(huán)境。此AR屬性可幫助設(shè)計(jì)人員使用熟悉的概念創(chuàng)建新的關(guān)卡體驗(yàn)。


例如,通過使用移動(dòng)AR,可以創(chuàng)建新級(jí)別的飛行體驗(yàn),允許乘客查看有關(guān)其班級(jí)或當(dāng)前航班進(jìn)度的詳細(xì)信息:


AR在空中客車A380的飛行體驗(yàn)中。(圖片來源:Gleb Kuznetsov)


AR幫助我們找到通過空間的方式,并一目了然地獲得所需的信息。例如,AR可用于為您當(dāng)前的位置創(chuàng)建豐富的上下文提示。被稱為技術(shù)SLAM(小號(hào) imultaneous 大號(hào) ocalization 甲 ND 中號(hào) apping)非常適合此。SLAM允許實(shí)時(shí)映射環(huán)境,并且還可以將多媒體內(nèi)容放入環(huán)境中。


為用戶提供價(jià)值的機(jī)會(huì)很多。例如,用戶可以將他們的設(shè)備指向建筑物,并在其屏幕上了解更多信息。它可以顯著減少工作量,并通過允許導(dǎo)航和訪問實(shí)現(xiàn)輕松的情感體驗(yàn)。


在上下文中提供其他信息(圖片來源:Gleb Kuznetsov)


我們周圍的環(huán)境(例如墻壁或地板)可以成為交互場景,過去僅限于我們的智能手機(jī)和計(jì)算機(jī)。


你在下面看到的概念正是如此; 它使用物理對(duì)象(白墻)作為通常使用數(shù)字設(shè)備傳送的內(nèi)容的畫布:


交互式墻的概念 - 在現(xiàn)實(shí)世界之上的數(shù)字覆蓋。(圖片來源:Gleb Kuznetsov)


避免信息過載


我們中的許多人都看到了名為“超現(xiàn)實(shí)”的視頻。在這段視頻中,物理和數(shù)字世界已合并,用戶被大量信息所淹沒。



技術(shù)允許我們同時(shí)顯示幾個(gè)不同的對(duì)象。當(dāng)它被誤用時(shí),很容易造成過載。


信息過載是一個(gè)嚴(yán)重的問題,對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響,避免它將成為AR設(shè)計(jì)的目標(biāo)之一。精心設(shè)計(jì)的應(yīng)用程序?qū)⑹褂肁I的強(qiáng)大功能過濾掉與用戶無關(guān)的元素。


高級(jí)個(gè)性化


當(dāng)系統(tǒng)實(shí)時(shí)地根據(jù)用戶的需求和期望來管理內(nèi)容或功能時(shí),就會(huì)發(fā)生數(shù)字體驗(yàn)的個(gè)性化。許多現(xiàn)代移動(dòng)應(yīng)用程序和網(wǎng)站使用個(gè)性化概念來提供相關(guān)內(nèi)容。例如,當(dāng)您訪問Netflix時(shí),您看到的電影列表會(huì)根據(jù)您的興趣進(jìn)行個(gè)性化。


AR眼鏡允許創(chuàng)建新的個(gè)性化水平,即“高級(jí)”個(gè)性化水平。由于系統(tǒng)“看到”用戶看到的內(nèi)容,因此可以利用此信息提出相關(guān)建議或在上下文中提供其他信息。想象一下,你很快就會(huì)戴上AR眼鏡,轉(zhuǎn)移到你視網(wǎng)膜的信息將根據(jù)你的需要量身定制。



從增強(qiáng)現(xiàn)實(shí)走向虛擬現(xiàn)實(shí),創(chuàng)造沉浸式體驗(yàn)


AR體驗(yàn)具有自然的局限性。作為用戶,我們?cè)趦?nèi)容和內(nèi)容之間有明確的界限; 這條線將一個(gè)世界(AR)與另一個(gè)世界(現(xiàn)實(shí)世界)分開。這條線引起了AR世界顯然不真實(shí)的感覺。


您當(dāng)然可能知道如何解決這個(gè)限制,即使用虛擬現(xiàn)實(shí)(VR)。VR并不是一種新的媒介,但只是在過去的幾年里,技術(shù)已經(jīng)達(dá)到了允許設(shè)計(jì)師創(chuàng)造身臨其境體驗(yàn)的程度。


沉浸式VR體驗(yàn)消除了現(xiàn)實(shí)世界與數(shù)字之間的障礙。當(dāng)你戴上VR耳機(jī)時(shí),你的大腦很難處理你收到的信息是否真實(shí)。關(guān)于VR體驗(yàn)如何在最近的將來看起來的想法在電影“Ready Player One”中有很好的解釋:



以下是設(shè)計(jì)人員在創(chuàng)建沉浸式虛擬環(huán)境時(shí)需要記住的內(nèi)容:


1.寫一個(gè)故事


有意義的VR有一個(gè)強(qiáng)大的故事的核心。這就是為什么在你開始設(shè)計(jì)VR環(huán)境之前,你需要為用戶旅程寫一個(gè)敘述。一個(gè)稱為“故事板”的強(qiáng)大工具可以幫助您。使用故事板,可以創(chuàng)建故事并檢查所有可能的結(jié)果。當(dāng)您檢查故事時(shí),您將看到何時(shí)以及如何使用視覺和音頻提示來創(chuàng)建身臨其境的體驗(yàn)。


2.與角色建立更深層次的連接


為了讓用戶相信VR中的所有內(nèi)容都是真實(shí)的,我們需要?jiǎng)?chuàng)建與用戶所扮演的角色的連接。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這種表示應(yīng)該是實(shí)際的手 - 而不僅僅是一個(gè)操縱的復(fù)制品。考慮不同的因素(如性別或膚色)至關(guān)重要,因?yàn)樗鼤?huì)使交互更加真實(shí)。


用戶可以看到他或她的手,看他們看起來像一個(gè)角色。(來源:leapmotion)


也可以將現(xiàn)實(shí)生活中的一些對(duì)象帶到VR環(huán)境中以創(chuàng)建此連接。例如,一面鏡子。當(dāng)用戶查看鏡像并在反射中看到他們的角色時(shí),它可以在用戶和虛擬角色之間實(shí)現(xiàn)更真實(shí)的交互。


虛擬現(xiàn)實(shí)用戶會(huì)查看虛擬鏡像,并將自己視為VR環(huán)境中的角色。致謝:businesswire。


3.使用手勢代替菜單


在設(shè)計(jì)沉浸式VR體驗(yàn)時(shí),我們不能依賴傳統(tǒng)的菜單和按鈕。為什么?因?yàn)橥ㄟ^顯示菜單來打破沉浸感相對(duì)容易。用戶會(huì)知道他們周圍的一切都不真實(shí)。設(shè)計(jì)師不需要使用傳統(tǒng)菜單,而是需要依賴手勢。設(shè)計(jì)界仍然在定義使用手勢的通用語言,參與這項(xiàng)活動(dòng)是有趣和令人興奮的運(yùn)動(dòng)。棘手的部分是讓用戶熟悉并可預(yù)測手勢。


Hovercast VR菜單試圖將現(xiàn)有的交互概念重用于VR體驗(yàn)。不幸的是,這個(gè)概念可以打破沉浸感。新媒體需要新的互動(dòng)模式。


4.與VR環(huán)境中的元素交互


要?jiǎng)?chuàng)建一個(gè)感覺真實(shí)的環(huán)境,我們需要讓用戶能夠與該現(xiàn)實(shí)中的對(duì)象進(jìn)行交互。理想情況下,環(huán)境中的所有對(duì)象都可以以允許用戶觸摸和檢查它們的方式進(jìn)行設(shè)計(jì)。這些物體將充當(dāng)刺激,并將幫助您創(chuàng)造更加身臨其境的體驗(yàn)。觸摸對(duì)于探索環(huán)境非常重要; 嬰兒在頭幾天獲得的最重要信息是通過觸摸獲得的。


5.VR


VR中分享情感有一個(gè)真正的機(jī)會(huì),成為一個(gè)新的社會(huì)體驗(yàn)水平。但為了實(shí)現(xiàn)它,我們需要解決一個(gè)重要問題,即將非語言線索帶入交互中。


當(dāng)我們與其他人互動(dòng)時(shí),我們獲得的信息的重要部分來自肢體語言。驚喜,厭惡,憤怒 - 所有這些情緒都在我們的面部表情中,在面對(duì)面的互動(dòng)中,我們從眼睛區(qū)域推斷信息。當(dāng)人們?cè)赩R環(huán)境中進(jìn)行交互以創(chuàng)建更真實(shí)的交互時(shí),提供此信息非常重要。


好消息是頭戴式設(shè)備(HMD)將很快涵蓋情感識(shí)別。幾乎任何人與人之間的互動(dòng)都將受益于VR中的面部表情。


在VR空間分享情感(來源:MITReview的 Rachel Metz )


6.為VR環(huán)境設(shè)計(jì)聲音和音樂適合


音頻是沉浸式體驗(yàn)的重要組成部分。如果不為環(huán)境設(shè)計(jì)聲音,就不可能創(chuàng)造出真正身臨其境的體驗(yàn)。聲音既可以用作背景元素(即風(fēng)的環(huán)境聲音),也可以用作方向性的。在后一種情況下,聲音可以用作提示 - 通過播放方向性(聲音來自哪里)和距離(可以將用戶的注意力集中在特定元素上)。


在為VR設(shè)計(jì)音頻時(shí),制作聲音3D至關(guān)重要。2D聲音不能很好地用于VR,因?yàn)樗挂磺卸继健?D聲音是您可以在周圍的各個(gè)方向聽到的聲音 - 前方,后方,上方和下方 - 遍布整個(gè)地方。您不需要專門的耳機(jī)來體驗(yàn)3D聲音; 可以使用HMD的標(biāo)準(zhǔn)立體聲揚(yáng)聲器來創(chuàng)建它。


頭部跟蹤是良好聲音設(shè)計(jì)的另一個(gè)重要方面。讓聲音以逼真的方式表現(xiàn)至關(guān)重要。這就是為什么當(dāng)用戶移動(dòng)他的頭部時(shí),聲音應(yīng)該根據(jù)頭部運(yùn)動(dòng)而改變。


7.預(yù)防暈車


動(dòng)是VR的主要痛點(diǎn)之一,這是一種在視覺感知運(yùn)動(dòng)和前庭系統(tǒng)的運(yùn)動(dòng)感之間存在分歧的情況,而讓用戶在體驗(yàn)VR時(shí)保持舒適至關(guān)重要。


有兩種流行的理論導(dǎo)致VR中的暈動(dòng)?。?


  • “感覺沖突”理論:根據(jù)這一理論,暈動(dòng)病的發(fā)生是由于預(yù)期的運(yùn)動(dòng)和實(shí)際經(jīng)歷的運(yùn)動(dòng)之間的感覺上的不一致。

  • “眼動(dòng)”理論:在“ VR書:虛擬現(xiàn)實(shí)的以人為本設(shè)計(jì) ”一書中,杰森杰拉德提到暈動(dòng)病的發(fā)生是因?yàn)楸3謭鼍皥D像在視網(wǎng)膜上穩(wěn)定所需的不自然的眼球運(yùn)動(dòng)。


以下是一些提示,可以幫助您防止用戶接觸到病箱:


  • 身體運(yùn)動(dòng)應(yīng)與視覺運(yùn)動(dòng)相匹配。有時(shí)即使是小的視覺抖動(dòng)也會(huì)對(duì)體驗(yàn)產(chǎn)生巨大的負(fù)面影響。

  • 讓用戶在移動(dòng)場景之間休息(這在VR體驗(yàn)非常動(dòng)態(tài)時(shí)尤為重要)。

  • 減少虛擬旋轉(zhuǎn)。


結(jié)論


當(dāng)我們考慮產(chǎn)品設(shè)計(jì)的現(xiàn)代狀態(tài)時(shí),很明顯我們只是處于冰山一角,因?yàn)槲覀儍H限于平面屏幕。


我們正在目睹人機(jī)交互(HCI)的根本轉(zhuǎn)變 - 重新思考數(shù)字體驗(yàn)的整體概念。在接下來的十年中,設(shè)計(jì)師將打破玻璃(我們今天所知的移動(dòng)設(shè)備時(shí)代)并轉(zhuǎn)向未來的接口 - 復(fù)雜的語音接口,先進(jìn)的AR和真正的沉浸式VR。當(dāng)談到創(chuàng)造一種新的體驗(yàn)時(shí),必須要明白我們唯一的邊界是我們的大腦告訴我們它必須始終如一。


如果您想了解更多的前瞻信息和權(quán)威專家普修的專業(yè)性建議,就留言聯(lián)系我們吧!


來源:Gleb:Designing Emotional Interfaces Of The Future

https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/


<p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
    <img src="https://img.zcool.cn/community/0186295d26b093a801214837432998.jpg" style="margin:22px auto 0px;padding:0px;outline:none;box-sizing:inherit;display:inline-block;vertical-align:top;max-width:100%;" /> 
</p>
<p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
    用戶調(diào)研 丨 HMI設(shè)計(jì) 丨 UE/UI設(shè)計(jì) 丨 HMI培訓(xùn) 丨 HMI評(píng)測 丨 體驗(yàn)咨詢
</p>


作者:Pursuer設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


原文鏈接:https://mp.weixin.qq.com/s/wOCLrT2bdBe_wx4usB8pvQ

大數(shù)據(jù)可視化界面設(shè)計(jì)總結(jié)

博博

項(xiàng)目可以簡單得理解為是氣象災(zāi)害等級(jí)地圖展示系統(tǒng),主要展示了圖表、表格、災(zāi)害等級(jí)五色圖分布地圖


設(shè)計(jì)需求

1、逐步確認(rèn)

項(xiàng)目的需求分析是通過客觀的業(yè)務(wù)數(shù)據(jù)逐步展開,逐步確定的。首先根據(jù)常用的業(yè)務(wù)邏輯來把需要展示的內(nèi)容做一個(gè)排序,比如:餅狀圖、柱狀圖、趨勢圖等,決定可視化圖表與數(shù)據(jù)的結(jié)合。

2、從表格到一整張圖

由于產(chǎn)品經(jīng)理角色空缺,項(xiàng)目并沒有原型線框圖。所以為了項(xiàng)目有效開展,首先將數(shù)據(jù)展示的維度列出一個(gè)表格(內(nèi)容標(biāo)題、橫縱坐標(biāo)、有效信息等等),進(jìn)行合理化的分析, 其次將現(xiàn)有的數(shù)據(jù)內(nèi)容,結(jié)合表格中的橫縱坐標(biāo),套在一個(gè)可視化的板式中,做出一個(gè)初步的原型設(shè)計(jì)。


設(shè)計(jì)過程 

1、設(shè)計(jì)風(fēng)格

按照傳統(tǒng)大屏的設(shè)計(jì)配色,深藍(lán)色體現(xiàn)了豐富的科技感,倉儲(chǔ)式儀表盤的布局模式,體現(xiàn)了數(shù)據(jù)可視化的大氣。由于業(yè)務(wù)對(duì)象的原因,摒棄了太過花俏、復(fù)雜的邊框跟元素。


2、設(shè)計(jì)交互

交互的要點(diǎn)承接了業(yè)務(wù)需求的關(guān)系,整個(gè)大屏界面除了數(shù)據(jù)展示,還多了控制地圖展示的下拉界面、查看災(zāi)情發(fā)生時(shí)間維度的控制軸以及播放動(dòng)畫的按鈕等,是一個(gè)組合可交互的大屏展示,并不是只刷新數(shù)據(jù)那么簡單。


3、投入產(chǎn)品思維

由于沒有產(chǎn)品經(jīng)理的空缺,設(shè)計(jì)承擔(dān)了大部分產(chǎn)品思路,主要體現(xiàn)在重點(diǎn)內(nèi)容布局,頁面合理性邏輯性的一些考量。好在頁面只有幾張,不然整體的業(yè)務(wù)邏輯分析起來也增加了不少的思考時(shí)間。


4、改稿的心理素質(zhì)

數(shù)據(jù)展示的內(nèi)容與客戶期望存在一定的差異,當(dāng)客戶沒有需求提出時(shí),就要出不同的方案來驗(yàn)證客戶的需求,從最初的版本到開發(fā),中間經(jīng)歷了7-8次改稿,很虐吧……

總結(jié):

1、視覺與原型

從追求完美的角度出發(fā),設(shè)計(jì)流程上應(yīng)該有產(chǎn)品原型的體現(xiàn),但是往往業(yè)務(wù)對(duì)接人員僅提供需求文字本身的情況下,設(shè)計(jì)師也要具備一定的產(chǎn)品能力,把視覺稿當(dāng)成原型稿來做。


2、同質(zhì)化與調(diào)研

大屏展示可視化一直都是層出不窮,怎樣做到既能滿足業(yè)務(wù)需求又要有獨(dú)特感以及設(shè)計(jì)感,可以歸結(jié)到項(xiàng)目開始的設(shè)計(jì)定位上,風(fēng)格定位得越仔細(xì),調(diào)研得越多,那么對(duì)設(shè)計(jì)亮點(diǎn)的融入會(huì)起到很大幫助!


作者:沐嵐之城

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


iOS人機(jī)界面設(shè)計(jì)指南 #2 啟動(dòng)&啟動(dòng)頁

博博

翻譯iOS人機(jī)界面設(shè)計(jì)指南。譯文內(nèi)容有刪改,并增加了個(gè)人注解和案例補(bǔ)充說明, 僅供參考, 歡迎交流~

目錄


一、設(shè)計(jì)理念 (Design Themes)   

二、設(shè)計(jì)原則 (Design Principles) 

[點(diǎn)我]以上部分見《iOS人機(jī)界面設(shè)計(jì)指南 #1》

三、應(yīng)用框架(App Architecture)


    啟動(dòng) (Launching)

        -提供一個(gè)啟動(dòng)頁

        -考慮屏幕方向

        -不要提前詢問設(shè)置信息

        -不要顯示授權(quán)協(xié)議和免責(zé)聲明

        -重啟時(shí)恢復(fù)先前狀態(tài)

        -盡量不要讓用戶重啟

        -不要頻繁地讓用戶給你的App評(píng)分


    啟動(dòng)頁(Launching Screen)

        -設(shè)計(jì)一個(gè)與您的應(yīng)用的首頁幾乎相同的啟動(dòng)頁

        -避免在啟動(dòng)頁上包含文本

        -弱化啟動(dòng)頁

        -不要做品牌展示

        

        (原指南將“啟動(dòng)頁”放到視覺設(shè)計(jì)中, 因與本節(jié)關(guān)聯(lián)較大, 因此譯者整合到在此處)



-------------------------------------


啟動(dòng) (Launching)


啟動(dòng)體驗(yàn)很大程度影響用戶對(duì)APP的感受。 無論使用什么設(shè)備,無論自從上次打開APP過了多久,啟動(dòng)體驗(yàn)都應(yīng)該是快速,無縫銜接的。


提供一個(gè)啟動(dòng)頁

應(yīng)用啟動(dòng)時(shí), 顯示啟動(dòng)頁,然后迅速變?yōu)閼?yīng)用的首頁。 啟動(dòng)頁的作用是在加載時(shí)給用戶一種印象——該APP響應(yīng)迅速. 為確保從啟動(dòng)頁無縫過渡,請(qǐng)將啟動(dòng)頁設(shè)計(jì)成與首頁相似的、不會(huì)吸引關(guān)注的簡單頁面。


考慮屏幕方向

如果您的應(yīng)用同時(shí)支持縱向和橫向模式,則應(yīng)使用設(shè)備的當(dāng)前方向啟動(dòng)。 如果您的應(yīng)用僅以一種方向運(yùn)行,則應(yīng)始終以該方向啟動(dòng),并在必要時(shí)讓人們旋轉(zhuǎn)設(shè)備。 除非有令人信服的理由,否則無論設(shè)備向左還是向右旋轉(zhuǎn),處于橫向模式的應(yīng)用程序都應(yīng)正確定位自己的方向。


不要提前詢問設(shè)置信息

人們期望應(yīng)用程序能夠正常運(yùn)行。 為大多數(shù)用戶設(shè)計(jì)您的應(yīng)用程序,讓少數(shù)需要不同配置的用戶調(diào)整設(shè)置以滿足他們的需求。 盡可能從設(shè)備設(shè)置和默認(rèn)設(shè)置,或通過同步服務(wù)(例如iCloud)獲取設(shè)置信息。 如果您必須詢問設(shè)置信息,請(qǐng)?zhí)崾救藗冊(cè)谑状未蜷_應(yīng)用程序時(shí)提供該信息,并讓他們稍后在應(yīng)用程序設(shè)置中對(duì)其進(jìn)行修改。


不要顯示授權(quán)協(xié)議和免責(zé)聲明

在App Store顯示授權(quán)協(xié)議和免責(zé)聲明,以便人們可以在下載應(yīng)用之前閱讀它們。 如果您必須在應(yīng)用程序中包含這些內(nèi)容,請(qǐng)注意不要破壞用戶體驗(yàn).


重啟時(shí)恢復(fù)先前狀態(tài)

避免讓用戶手動(dòng)返回之前的位置。保存和恢復(fù)APP的狀態(tài),讓用戶可以從他們上次的地方繼續(xù)。


盡量不要讓用戶重啟

重啟需要花費(fèi)時(shí)間,并且會(huì)讓你的APP顯得不可靠且難用。如果你的APP有內(nèi)存或其他問題使其難以運(yùn)行,你需要解決這些技術(shù)問題。除非是手機(jī)系統(tǒng)原因. 


不要頻繁地讓用戶給你的App評(píng)分

安裝后或在用戶使用你的APP時(shí)過于頻繁地彈出評(píng)分提示是很煩人的,你收到的有用反饋可能會(huì)反而因此減少。為了鼓勵(lì)用戶給出合理的反饋,你應(yīng)該給用戶一些時(shí)間讓他們對(duì)你的應(yīng)用形成自己的看法。并始終提供一種選擇退出評(píng)分提示的方法,永遠(yuǎn)不要強(qiáng)迫用戶對(duì)你的應(yīng)用進(jìn)行評(píng)分。


-------------------------------------


啟動(dòng)頁(Launching Screen)


當(dāng)你的APP啟動(dòng)時(shí),啟動(dòng)頁會(huì)立即出現(xiàn),并很快被應(yīng)用程序的首頁取代,給人一種APP響應(yīng)迅速的印象。啟動(dòng)頁不是一個(gè)藝術(shù)表達(dá)的機(jī)會(huì)。它只是為了增強(qiáng)你的APP快速啟動(dòng)和立即準(zhǔn)備使用的感覺。每個(gè)APP必須提供一個(gè)啟動(dòng)頁。




不要在啟動(dòng)頁面上使用靜態(tài)圖像。 如果您需要了解各種屏幕尺寸的尺寸以幫助您進(jìn)行設(shè)計(jì)布局,請(qǐng)參見設(shè)備屏幕尺寸和方向。在iOS 14及更高版本中,啟動(dòng)屏幕限制為25 MB。



設(shè)計(jì)一個(gè)與您的應(yīng)用的首頁幾乎相同的啟動(dòng)頁


如果您添加的元素在應(yīng)用程序完成啟動(dòng)時(shí)看起來有所不同,則人們可能會(huì)在應(yīng)用程序的啟動(dòng)屏幕和第一個(gè)屏幕之間遇到不愉快的閃爍。 還要確保您的啟動(dòng)屏幕與設(shè)備的當(dāng)前外觀模式(淺色/深色)匹配.




避免在啟動(dòng)頁上包含文本

由于啟動(dòng)頁中的內(nèi)容不會(huì)更改,因此任何顯示的文本都不會(huì)本地化。


弱化啟動(dòng)頁

人們重視是否讓他們快速訪問內(nèi)容并執(zhí)行任務(wù)。 設(shè)計(jì)類似于應(yīng)用程序界面的啟動(dòng)頁會(huì)給用戶帶來“應(yīng)用程序立即啟動(dòng)了”的錯(cuò)覺。 快速的啟動(dòng)時(shí)間,結(jié)合這種設(shè)計(jì)方法, 會(huì)使您的應(yīng)用程序響應(yīng)迅速。對(duì)于游戲,啟動(dòng)頁應(yīng)正常過渡到游戲顯示的首頁。


不要做品牌展示

啟動(dòng)頁不是品牌機(jī)會(huì)。不要設(shè)計(jì)得看起來像品牌刊登頁或“關(guān)于”窗口。 除非品牌標(biāo)志或其他品牌元素在應(yīng)用首頁也固定出現(xiàn),否則請(qǐng)勿包含徽標(biāo)或其他品牌元素。 如果您的游戲或其他沉浸式應(yīng)用在過渡到第一個(gè)屏幕之前顯示純色,則可以創(chuàng)建僅顯示該純色的啟動(dòng)屏幕。


//然而事實(shí)是, 幾乎所有應(yīng)用都會(huì)在啟動(dòng)頁展示品牌logo. 只有apple官方的應(yīng)用將“快速響應(yīng)”的思路堅(jiān)持到底. 我的看法是, 可以適當(dāng)融入一些品牌元素, 但依然要考慮與首頁過渡, 避免閃爍感和等待焦慮,  盡量簡單、不引起注意, 從而帶來“快速響應(yīng)”的啟動(dòng)體驗(yàn). 



----------------------------------------


下篇預(yù)告       

 3.2 新手教程 (Onboarding) & 加載(Loading)


作者:子胖

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


原文鏈接:https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/launching/

日歷

鏈接

個(gè)人資料

存檔