首頁

一款美麗的Admin后臺界面HTML模板源碼 Light Bootstrap Dashboard

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

今天為大家推薦的素材是一款admin系統(tǒng)后臺網(wǎng)站模板: Light Bootstrap Dashboard,這套后臺源碼界面十分好看,這也是小編為何推薦的原因之一。

后臺管理模板

該網(wǎng)站模板使用 Bootstrap 前端框架搭建,對于要兼容響應式手機網(wǎng)頁用戶推薦使用。此外,小編特喜歡左側(cè)面板設計,可以自由切換顏色,并且能更換背景,顏色與背景的處理非常 nice! 但不足之處就是后臺元素不夠強大,如果需要更多后臺模塊,可以購買作者的Pro版。但即使如此,這個免費版?zhèn)€人認為也值了。

下面一起看看這個免費的管理后臺模板源碼有什么組件、模塊:

Admin后臺首頁

后臺首頁的元素并不多,但用戶可以自行添加進去。

admin 網(wǎng)站模板

自定義側(cè)欄面板背景、顏色

也可以說是簡單的皮膚切換,主要有顏色和背景2種自定義皮膚選項。

用戶資料頁面

Table樣式

如果是Pro版本可帶有排序功能。

文字、段落排版

圖標

地圖頁面

提示 Tool Tips

總體元素雖然少了一些,但是漂亮的界面卻算是彌補這些不足,當然你也可以購買 Pro 版,也不貴。

藍藍設計www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

上億人使用的百度網(wǎng)盤是如何做品牌升級的?

資深UI設計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

文章包括品牌理念、品牌識別、APP大改版、品牌延伸。

△ 點擊查看完整視頻

一、項目背景

百度網(wǎng)盤是百度提供的個人云存儲服務,自2012年上線至今,通過強大的技術能力以及承擔高額的帶寬成本,為7億用戶提供文件存儲、備份、分享、共享等服務,成為行業(yè)領先位置。

這6年里,我們從滿足基礎存儲需求的一款工具,到現(xiàn)在越來越意識到高品質(zhì)和情感化的體驗對于用戶的重要性。

因此,團隊希望通過本次的品牌升級,能夠從視覺識別、產(chǎn)品體驗、線上線下推廣等多維度來傳遞品牌核心價值,同時遵從極簡克制的百度「高級感」設計理念,形成一套完整統(tǒng)一的設計語言,真正的做到像 slogan 所傳遞的:「讓美好永遠陪伴」。

二、品牌升級目標

本次品牌升級希望傳遞用戶3個核心點:更有溫度、更便捷、更年輕。

1. 為什么要「更有溫度」?

網(wǎng)盤一直以來存儲著用戶的美好回憶,比如:每一次難忘旅途的照片,寶寶成長記錄,家人團圓時的合影,激情工作時的陪伴。因此,它不僅僅是一款冰冷的工具,而是一個懂你的、有情感、有溫度的生活助手。

2. 為什么要「更便捷」?

過去幾年,網(wǎng)盤一直主打的品牌核心點是「安全」、「免費」、「大空間」,不可否認之前的品牌傳遞是成功的,因為通過這些核心點,在同行業(yè)的用戶占有率達到80%以上。

但是,未來除了最基礎的「安全」以外,還需要傳遞什么感受呢?我們深知產(chǎn)品體驗還有很大的提升空間,比如:如何讓產(chǎn)品更易用、存儲更便捷、查找更方便、瀏覽更沉浸等等。因此,「便捷」是接下來品牌需要傳達給用戶的核心價值。

3. 為什么要「更年輕」?

通過數(shù)據(jù)分析,網(wǎng)盤的用戶24歲左右占大多數(shù),也就意味著我們的主流群體是年輕人。除此之外,保持品牌的年輕化,也是每一個公司都希望做到的。

因此,本次品牌升級,我們希望不管是從視覺層面,還是文案互動,以及運營手法,都更加年輕化及趣味性。

三、品牌理念滲透

品牌升級不是虛喊口號,而是應該通過各個設計觸點的配合給用戶傳達融合、一致的感受和體驗。因此,我們從以下幾個場景進行滲透:品牌識別、APP設計、品牌延伸。

1. 品牌識別

在品牌識別滲透環(huán)節(jié),涉及到以下幾個方面進行優(yōu)化設計:品牌色、品牌標識、品牌字體。

品牌色

品牌色是用戶感知品牌最直觀的方式,比如:想到可口可樂就想到紅色,想到百事可樂就是藍色,想零度可樂就是黑色。對,好的品牌色能夠占領用戶心智,從而產(chǎn)生聯(lián)想,這就是品牌色的重要性。

那么百度網(wǎng)盤呢?網(wǎng)盤的品牌不是從0到1的小而美的創(chuàng)新設計,需要兼顧7億用戶量對品牌的已有認知,這是一個令人頭疼的挑戰(zhàn)。

因此在品牌色的選擇上,考慮到較大改動帶來的用戶認知成本的增加,所以經(jīng)過多輪嘗試和討論后,決定延續(xù)用戶已有認知的「紅藍」配色,在此基礎上,進行調(diào)整并滲透新品牌的理念。

同時,在品牌色上希望傳遞「更年輕」的品牌理念。我們大量收集體現(xiàn)「年輕」的場景進行多輪討論篩選,提取色調(diào),結(jié)合情緒板,最終提煉并定義了我們的品牌色。

品牌標識

在做品牌標識(LOGO)階段,大家發(fā)散了很多想法,嘗試了很多方案。

通過多維度思考以及利弊權衡,最后選擇在延續(xù)原有 logo 特征上,體現(xiàn)新品牌理念——「更有溫度」的感受。

那么,現(xiàn)實生活中什么場景,會給人「有溫度的」感受呢?我們想到了擁抱、愛心、陽光、火焰等等。最終覺得「微笑」更符合我們所傳遞的感受,同時也能更好的跟原有 LOGO 特征進行結(jié)合。

以下是 LOGO 的設計思路,用顏色體現(xiàn)「年輕」,微笑體現(xiàn)「溫度」。

LOGO的最終造型:

品牌字體

LOGO 確定后,還需要設計與之搭配的品牌文字,這個階段最主要是找到跟品牌性格以及圖形風格相契合的字體骨架。同時兼顧原有字體的認知,在此基礎上進行微調(diào)。比如:統(tǒng)一字體的粗細,以及切角的角度,使整體視覺更加協(xié)調(diào)。

LOGO和字體組合的最終版本:

2. APP設計—NA端9.0全新升級

不可否認,傳遞品牌理念最直接的方式,就是在用戶使用它時。因此,我們對產(chǎn)品 NA端進行9.0全新升級(這是自上線以來第一次大改版)。

品牌基因

在互聯(lián)網(wǎng)產(chǎn)品越來越同質(zhì)化的今天,做出有差異性和符合品牌調(diào)性的設計是我們面臨的挑戰(zhàn)。因此,在品牌基因方面,做了大量的嘗試。

經(jīng)過多輪討論,我們選擇以「積木」作為網(wǎng)盤的品牌基因。因為「積木」陪伴著我們成長,代表著我們的童年,給人溫暖的感受,同時,不同幾何形的積木看似單一,組合起來又有很多可能性,體現(xiàn)了年輕和趣味。

在圖形設計(ICON)時,提取「積木」中的幾何元素進行疊加處理,用色上更加鮮亮,突顯年輕化,形成網(wǎng)盤自己的圖形體系。

相比「尖銳」的直角,圓角給人柔和的視覺感受,同時經(jīng)過多輪的嘗試,最終確定圓角大小為8px。

同時在空白頁上延續(xù)圖形風格,能夠更好的統(tǒng)一視覺語言,傳遞更加一致的品牌感。

動效上,采用了符合「積木」運動特征的物理屬性。因此,運動節(jié)奏上利落的不拖泥帶水。比如,積木受到一個力,由于摩擦力會快速停止,而并非很Q 的彈性動效。

下圖中,「藍球」代表目前網(wǎng)盤中元素的運動方式,「紅球」代表了市面上常見的彈性運動方式。

下圖,是將這種運動規(guī)則使用在產(chǎn)品界面中時:

同時底部 tab 在運動節(jié)奏上,也采用相同的運動規(guī)律,賦予產(chǎn)品年輕活力的視覺感受,同時又不會喧賓奪主過度搶戲。

下拉刷新,是增強品牌記憶的最好體現(xiàn)。本次提取 logo 基本元素,同時強調(diào)「微笑」,加深用戶對品牌的印象。

功能設計

前面有提到,百度網(wǎng)盤保存著用戶非常多美好回憶的照片,或許那些回憶,用戶都已經(jīng)忘記,但往往這些才是最大的驚喜和感動。

因此,9.0版本新增「故事」模塊,讓美好回憶與你不期而遇。通過技術對優(yōu)質(zhì)、精彩照片的篩選,生成故事卡片,推送給你,給你帶來溫暖。

為了節(jié)省用戶時間,傳遞品牌「更便捷」的理念,本次改版我們優(yōu)化「分類」模塊,將「分類」外置于首頁頂部,減少用戶操作步長,輕松查找自己的文件。

同時在首頁新增「最近」功能,方便用戶便捷查找歷史操作,而不是像以前,反復點擊層層相套的文件夾去瀏覽與查找。

排版布局

文件列表是用戶使用網(wǎng)盤最高頻的路徑,針對這個場景,我們遵循視覺服從功能,極簡克制的百度「高級感」設計理念,通過視覺手段區(qū)分信息層級,讓用戶瀏覽時「更便捷」。

因此,本次對文件列表排版布局,從以下幾個維度進行優(yōu)化:大小、重量、間距。

大小

改版前,用戶打開文件列表,首先看到的是滿屏黃色的文件夾,而這些并不能幫助用戶進行瀏覽或篩選,反而會造成視覺干擾。

因此,本次對文件圖標大小,縮略圖尺寸,以及標題信息大小,進行整體調(diào)整,從而提升瀏覽效率。

重量

對于文件列表,信息層級重要性依次為:名稱>圖標>時間,因此,本次優(yōu)化了視覺重量對比。

通過視覺重量的處理(對標題字號加粗、顏色增強),讓用戶更加便捷的獲取有效信息。

間距

以下是舊版安卓端和改版后對比,去除頂部藍色雙導航的同時,通過縮小文件圖標,進而縮小列表間距。

同時,調(diào)研行業(yè)內(nèi)有代表性產(chǎn)品的列表行間距,綜合分析對比,最終確定列表行間距為「180px」,平衡體驗的同時,讓用戶在首屏看到更多內(nèi)容。

還對 NA端進行統(tǒng)一的柵格化布局,讓頁面富有統(tǒng)一的秩序感和韻律。讓元素、模塊、頁面間距有規(guī)律可循。

柵格化布局落地全部界面:

以上,是品牌理念滲透到 APP 設計中,進行9.0大改版的相關設計,從品牌基因、功能設計到排版布局,統(tǒng)一的傳遞全新品牌理念。

3. 品牌延伸

線上線下的活動和物料設計,也是品牌和用戶的觸點,在設計的時候需要延續(xù)整體的品牌調(diào)性,傳遞出統(tǒng)一的品牌感。

總結(jié)

以上,是百度網(wǎng)盤本次品牌升級背后的原因,以及相關體驗設計優(yōu)化。從前期定義品牌核心理念(更有溫度、更便捷、更年輕),到通過不同場景及接觸點進行滲透(品牌識別、APP設計、品牌延伸),線上線下多維度的傳達統(tǒng)一的品牌理念。所做的這一切,都是希望能為用戶提供更好的服務。

本次品牌升級,是百度網(wǎng)盤所有同學努力的結(jié)果,我們深知還有很多體驗需要提升,這次升級只是開始,會持續(xù)讓用戶感受到「讓美好永遠陪伴」。

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

從設計角度分析,騰訊這款新出的小眾音樂App 是如何大獲好評的!

資深UI設計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

一周前,為了聽《夢想的聲音》,我在APP Store 下載了QQ音樂,無意中發(fā)現(xiàn)「音樂」類APP里排行第9的 MOO音樂,它的預覽圖讓我聯(lián)想到這些關鍵詞:「小眾、獨特、歐美、Spotify、Apple Music」。

筆者之所以從品牌設計的角度分析這個鵝廠家族新成員,是因為一款新產(chǎn)品的品牌設計在產(chǎn)品從0-1過程中扮演非常重要的角色,它關系到用戶對新產(chǎn)品的認知與心智。

體驗完 MOO音樂,我發(fā)現(xiàn):移動產(chǎn)品品牌設計不僅要充分考慮視覺表現(xiàn)層,還要綜合考慮戰(zhàn)略、理念、內(nèi)容、交互等多個方面。

同時,品牌設計是一種「求同存異」,「同」是保持對戰(zhàn)略、內(nèi)容、用戶習慣的繼承性,而「異」是相比競品作出的差異化設計。本文就從繼承性和差異化,這兩個維度為你分享 MOO音樂的品牌設計。希望這種分析方法能夠為你的品牌設計提供幫助。

一、繼承性

1. 對新形象IP的繼承,培養(yǎng)了用戶心智

從啟動圖標和界面很容易看出,MOO音樂的品牌主色是黃色,背景色及輔助色基本是以黑白灰為主。

MOO音樂之所以采用這種配色方案,不僅是為了突出產(chǎn)品氛圍,讓人眼前一亮,還有可能是對騰訊新形象IP品牌的一種繼承和延續(xù)。

怪奇鵝IPENGOO,騰訊集團新一代形象IP品牌,代表著一種自我突破,不斷創(chuàng)新的精神狀態(tài)。

我們希望能像魔術師一樣,以經(jīng)典企鵝形象上提煉出的極簡鵝臉元素,為大家創(chuàng)造出充滿趣味、創(chuàng)新、時尚和腦洞的產(chǎn)品風格和內(nèi)容,能喚醒每個用戶自動發(fā)出好感電波是一件很棒的事情!——怪企鵝IPENGOO官微

每位音樂家都不是一顆孤獨的星球,他們保持獨立又彼此相連,在他們的探索下,音樂潮流才不斷推陳出新又一脈相承。

保持探索,對先鋒與經(jīng)典抱以同樣的敬意,所以我們創(chuàng)造了MOO:音樂即自由

MOO Music,Life is MOOO beautiful?!狝PP Store MOO音樂介紹

IPENGOO(怪企鵝)的理念是:

  • 優(yōu)質(zhì)內(nèi)容連接符號
  • 傳遞互聯(lián)網(wǎng)精神
  • 代表自我突破
  • 不斷創(chuàng)新的精神狀態(tài)

可見,「連接、傳遞、突破、創(chuàng)新」這些新形象IP理念在 MOO音樂的啟動圖標、品牌理念、交互手法、推薦歌單上都有所體現(xiàn)。

因此,MOO音樂很可能是騰訊新形象IP品牌影響力里的一種嘗試。

此外,MOO音樂的品牌色也很有可能是對騰訊旗下年輕娛樂產(chǎn)品品牌色的一種繼承。

2. 對音樂元素的繼承,提升了產(chǎn)品的同理心

Sympathize(體察和同理心),可以幫助我們?nèi)ダ斫馐挛锉砻姹澈蟮谋举|(zhì),得到和理解設計的微妙細節(jié),這些本質(zhì)自然的元素不只是邏輯上的,更是可以被感受的?!顫芍比?

說到音樂本質(zhì)、自然的元素(不是曲風),我們會聯(lián)想到黑膠、唱片、專輯、音波、調(diào)音臺、樂器、Live、樂譜、Launchpad等。這些音樂元素能拉近 APP 與用戶之間的距離,營造沉浸式的聽歌體驗,從而提升產(chǎn)品的同理心。

比如專輯封面的輕擬物化設計,播放時音波的、背景圖片和短視頻等等。

3. 對用戶行為的繼承,降低了學習成本

當我們在為一款新產(chǎn)品設計交互時,需要充分考慮目標、場景、用戶這些基本因素。我們通常會考慮并兼顧多數(shù)目標用戶的使用行為和習慣,為新產(chǎn)品設計交互方式。

所以當用戶看到熟悉的元素時,會很自然地知道如何去使用,降低了新產(chǎn)品的學習成本,這就是我們所熟悉的「Don’t make me think」。

MOO音樂的首頁PLAY頁,采用的是音樂+短視頻(有時候是圖片)的方式,當很多用戶看到這種熟悉的界面形式時,已經(jīng)本能的去上下翻頁、單擊播放/暫停,左右滑動調(diào)整進度更是再熟悉不過。

另外,MOO音樂的歌單在產(chǎn)品初期功能里占據(jù)了很大篇幅,因為最契合用戶聽歌行為場景的是歌單。

二、差異化

說完 MOO音樂在品牌設計方面保持的繼承性,下面來說說它不同于競品的差異化設計,主要表現(xiàn)在品牌理念、視覺氛圍、交互手法。

1. 品牌理念

從 APP 的這4張歡迎頁就可以看出 MOO音樂的品牌理念和調(diào)性了:經(jīng)典、創(chuàng)新、前衛(wèi)、獨立。

從目前的版本來看,MOO音樂還是一款滿足小眾口味、專注聽歌的音樂APP,但 APP 通過4張有代表性的歡迎頁,將 APP的「小眾」設計得「出眾」,很好地表達了產(chǎn)品的品牌理念。

2. 視覺氛圍

說到產(chǎn)品品牌的差異化,不得不說視覺層面的設計,畢竟視覺表現(xiàn)層是用戶體驗5要素里最具體的。

MOO音樂提供兩套視覺風格,默認是品牌黃色+BLACK,另一套則是品牌黃色+WHITE,筆者覺得默認的 BLACK 更有特色和沉浸感。

字體風格方面,標題類文字(PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST)都是大寫的非襯線英文字體,歐美范十足。

3. 交互手法

調(diào)整進度的交互

主流音樂APP,是通過一個進度條和一個圓點來調(diào)整播放進度,而 MOO音樂將播放頁面下方聲波區(qū)域作為調(diào)整進度的熱區(qū),通過明暗的對比來表現(xiàn)播放進度。

雖然這種交互方式在騰訊自家短視頻微視APP 中也存在,但 MOO音樂還是作了細節(jié)上的處理。

切歌的交互

通常情況下,在音樂APP 播放頁面的其他頁面,都有一個控件讓你隨時可以切歌,甚至是收藏,查看播放列表。

MOO音樂將切歌控件設計成了黑膠+滑塊,切歌時只需向右滑動,而且 iOS系統(tǒng)還會伴隨震動反饋。這個微交互設計得蠻有意思,這讓我聯(lián)想到膠卷相機拍完一張,然后撥動卷片扳手的機械反饋感。

三、幾點建議

目前 MOO音樂在 APP Strore 里才第2個版本,細節(jié)上的體驗不可能一步到位。

筆者借此機會向開發(fā)者提一點個人的建議,僅供參考。

1. 歌曲播放

希望當前播放的歌曲與背景短視頻或圖片有一定的關系,比如系統(tǒng)可以根據(jù)歌曲的曲風、類別等標簽,自動推薦匹配相關短視頻和圖片,讓歌曲與背景環(huán)境更協(xié)調(diào)。當然,也可以讓用戶自己設置推薦或隨機。

在 PLAY頁面切下一首歌時,希望顯示歌曲正在加載的狀態(tài),底部的音波區(qū)域好像可以作一些文章。

2. 視頻評論

(iOS)歌曲評論頁里的評論輸入框常駐在頁面底部,但視頻評論頁的評論輸入框沒有常駐,而且滑到底部時,不太容易滑到頂部,可能是小BUG。

3. 切歌控件

(Android)輕觸切歌控件里的暫停按鈕后,黑膠旋轉(zhuǎn)的角度被重置了。希望能與 iOS版一樣,暫停后黑膠旋轉(zhuǎn)的角度不被重置。

4. 開通會員

APP 默認的會員價格是18元/月,若勾選了到期自動續(xù)費,則價格是15元/月。

雖然這2個價格都不便宜,但相對來說,自動續(xù)費的價格更有吸引力,但這個相對有吸引力的價格卻需要用戶主動勾選「自動續(xù)費」才能看到。筆者建議將這2種價格都顯示出來,通過單選按鈕的形式去交互。這樣,用戶很容易就會發(fā)現(xiàn)自動續(xù)費的價格優(yōu)勢,畢竟與18元相比,15元就不怎么貴了。

總結(jié)

MOO音樂于11月初發(fā)布在 APP Store,網(wǎng)絡上比較多的評價是「抄抖音、抄樂趣、抄Spotify、鵝廠又抄了……」。

但作為設計師,筆者希望我們將關注點放在設計層面,去客觀的評價一款APP,不要因為別人的評價而忽略了一些有品質(zhì)的設計。

當我們仔細體驗交互和視覺的細節(jié)后,會發(fā)現(xiàn)鵝廠的設計是有很多地方值得我們學習的。

最后,面對主流音樂APP、短視頻APP、Spotify、Apple Musici、樂趣……MOO音樂既做到了對騰訊新形象IP、音樂元素、用戶習慣的繼承性,又做出了一些不同于競品的差異化設計。這套「組合拳」已經(jīng)打出了這款音樂APP 的品牌形象,希望這些內(nèi)容對你有啟發(fā)。

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

 

版式設計

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


版式設計中編排類型繁多,這里介紹常用的10種編排類型。運用好這10種編排類型,快速完成設計任務同時,可達到最佳的傳播效果



藍藍設計www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

什么是高級感的設計?看這里

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


設計師們,經(jīng)常聽到需求方說:「我想要那種很有高級感的設計」,看到T臺上的超模,你可能會忍不住說:「嘖嘖,這張臉真高級」……

但是,每個人對「高級感」定義不同,它會受到個人審美、教育水平、成長環(huán)境、文化價值等因素影響。那么,這個被人們天天掛在嘴邊兒的「高級感」到底如何定義,標準又是什么呢?

今天就跟大家分享下,我最近的相關思考。

一、什么是高級感?

關于「高級感」,百度百科上并沒有這個詞條,在一定程度上可以說明,這個詞本身就是很難定義的。

我嘗試著換個思維方式,看看什么是低級?低級意味著:多欲求的、簡單的、盲目的。那么,反過來看「高級感」,大概可以解讀為:克制的、的、特立獨行的。

1. 克制的

說到克制,我想到了德國工業(yè)設計師 Dieter Rams,他的「設計十戒」中有提到「好的設計是盡可能的無設計」,體現(xiàn)出簡潔、克制的重要性。

比如:無印良品,在「性冷淡風」的背后充滿了對欲望的克制。

產(chǎn)品設計以更親近自然的棉、麻、羊毛的材質(zhì)配上木本、黑、白、灰色。不管是從造型,還是從用色上都極度的克制,但是給人高品質(zhì),很舒服的感受。

反而下圖,高飽和度和純度的配色設計,給人有一種反自然的,人工造的顏色的感覺,顯得服裝比較廉價。

那么,品及時尚圈的設計,又是怎么考慮呢?

可以看出,他們服裝從簡單利索的剪裁,到高級灰(莫蘭迪色)的配色,正是我們所說的「克制」,給人一種奢華且高級的感受。

為什么克制的用色,給你高級的感受呢?因為,這樣會削弱色彩對人情緒的影響,反而有治愈的能量,有一種頹廢的性感。

下面這幅畫,是意大利20世紀著名的版畫家,油畫家喬治莫蘭迪的(莫蘭迪色也是根據(jù)他的名字而來)。在他的畫里,所有的色彩都滲入了灰色和白色調(diào),失去了原本或艷麗或凝重的本色,柔和優(yōu)雅,而又統(tǒng)一的混合在一起。用現(xiàn)在的話來說就是:克制、留白、極簡。

目前很多服裝設計、室內(nèi)設計都在效仿這種配色方式,顯得更有品質(zhì)。

比如,今年熱播的《延禧攻略》,一改以往流量電視劇那種高飽和度,艷麗的配色,猶如一股清流,讓人眼前一亮,感覺把整部劇都帶的高級了很多。

以上可以看出,克制的造型及用色、適當?shù)牧舭?、極簡的畫風,反而顯得更加自信,從而給人傳遞出高級的視覺感受。

2. 的

人們常說,細節(jié)決定成敗。其實,讓人們感到「高級」的事物,都有一個共性:對細節(jié)追求。

比如,前段時間看快樂大本營,里面對《延禧攻略》中演員服飾的刺繡細節(jié)進行講解,當時何炅用「很高級」夸贊。

我就在想,是什么觸發(fā)了他評價「高級」。

后來發(fā)現(xiàn),是因為劇中人物服裝上的刺繡全是純手工的。針法多樣,包括復雜的手推繡、打籽繡、磐金繡、珠繡……而且,團隊都是曾經(jīng)參加過故宮文物翻修的匠人們。

為了無條件的貼近歷史,這一件皇上的衣服花費了8個工人半年的時間進行制作。

因此,讓何炅潛意識里感到「很高級」的,正是因為僅僅為了一部電視劇,在演員服裝上耗費這么大的功夫,這種對細節(jié)的追求。

再拿科技產(chǎn)品舉例,比如:iPhone,由于「對稱設計」可能是人們能感知到的最原始的美,很多情況下手機受限于內(nèi)部設計,很難在表面做到對稱。

但是 iPhone 為了遵循「對稱式」設計,投入非常多的人力去解決(上面),而對比三星Galaxy S6 的設計(下面),看起來就略顯尷尬。

它們對產(chǎn)品每一個方面都精雕細琢,盡管用戶不一定能注意到,這種工匠精神,讓人們覺得蘋果手機不僅僅是一款產(chǎn)品,更像是一件藝術品,同樣給人高級的感覺。

3. 特立獨行的

人類本能習慣于盲目追隨、容易妥協(xié)。因此,獨立思考、特立獨行且自信的人或事物,常給人很感級的感覺。

比如,在網(wǎng)紅臉盛行的今天,隨便逛個街,都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑,但是總覺得不夠高級。比如,柳巖就評價過自己屬于「低級臉」。

為什么超模那樣高冷的臉蛋會給人一種高級感呢?

因為,她們有特色的五官長相,意味著不向大眾主流審美屈服和妥協(xié),而且非常自信。同時,高級感也意味著,在 TA身上看不到欲望、諂媚和討好。

再比如,日本的服裝設計大師——山本耀司。在人們都追求時尚和潮流,偏愛女性婀娜的曲線和靚麗的色澤的時候,他卻以反時尚設計而著稱。

他大膽發(fā)展日本傳統(tǒng)服飾文化的精華,具有獨立思考,形成一種反時尚風格。這種與西方主流背道而馳的新著裝理念,不但在時裝界站穩(wěn)了腳跟,還反過來影響了西方的設計師。

總的來說,高級感是克制的,它極簡、低調(diào)、且優(yōu)雅;高級感是的,對細節(jié)的完美追求、具有匠心精神;高級感是特立獨行且自信的,不盲目追逐潮流、不討好、不妥協(xié)。

二、高級感的接受度?

雖然我們認為「克制的」、「的」、「特立獨行的」給人以高級的感受。但是,真的是所有人都能接受嗎?

不可否認,有的人就是覺得花里胡哨的東西很高級,比如:在美甲上鑲一些比吊燈上還大的鉆;穿一雙松糕鞋,鞋底恨不得比自己小腿肚還高。

因此,我就在思考兩個問題:影響審美的因素;大眾對「高級感」的接受度。

1. 影響審美的因素

不管是個人審美、教育水平、成長環(huán)境,還是價值觀,我覺得決定審美的背后,是「經(jīng)濟」這只無形的手。

不知道你有沒有發(fā)現(xiàn)一個規(guī)律,越落后貧窮的國家,卻喜歡艷麗的、繁雜的設計。

而相反,越發(fā)達的國家,反而更青睞簡約、淡色。

原因是經(jīng)濟落后的國家,人們?nèi)鄙俚氖恰肛S富」,想要的更多色彩,更多花樣。

而經(jīng)濟發(fā)達的地方,人們已經(jīng)擁有足夠多,因此,內(nèi)心中追求更多的是:我需要什么?我是誰?什么對我不重要?

人們對過于爆炸多樣的商品會感到「焦慮」,「害怕」因為選擇的太多,反而想要抽離。

因此,像無印良品這類克制的、做減法的、回歸本質(zhì)的物品,反而受到人們喜愛。

2. 大眾對「高級感」的接受度

這里的「大眾」就先指我們中國大眾吧,他們能接受「高級感」的克制,極簡嗎?

我們從消費時代進行分析,目前日本處于第四消費時代,它的特征就是上面所說的,不再盲目的追求品帶來的滿足感,而是追求除了物質(zhì)以外什么才能讓人變得幸福。

而中國呢?

大多數(shù)人認為,中國正處于第二、第三、第四消費時代共存期。在偏遠的農(nóng)村,處于第二消費時代,他們的觀念是「大的就是好的」,「繁瑣是好的」;三四線城市,處于第三消費時代,他們的觀念是「個性化、品牌化」追求與眾不同,喜歡名牌貨;一二線城市,處于第四消費時代,更加崇尚無品牌,休閑傾向,整個社會趨于共享。

但是,我認為,隨著中國經(jīng)濟近幾年迅猛發(fā)展,互聯(lián)網(wǎng)的快速普及,大家接受信息的程度慢慢趨同,就算非一二線城市,大家的消費觀念及審美水平也在隨之改變。

比如:抖音里,很多四五線城市的小姐姐們,穿衣及化妝風格都很ins風;同時,越來越多不因為取悅男性,而是突顯獨立女性的打扮。

越來越多的北歐極簡裝修風的流行……

總的來說,大眾的審美水平和消費觀念會受經(jīng)濟的影響,而中國大眾的消費觀念正在往第四消費時代慢慢轉(zhuǎn)變,對真正「高級感」的事物,接受度越來越高。

三、互聯(lián)網(wǎng)產(chǎn)品中高級感設計

上面舉了很多傳統(tǒng)行業(yè)案例,其實互聯(lián)網(wǎng)產(chǎn)品設計中,也在往「高級感」方向走,踐行著「極簡」和「克制」的理念。

比如:年初的谷歌「ALL-White」風。眾所周知,谷歌的設計師是極簡主義界面的忠實粉絲。

下面是優(yōu)化前后對比,移除大面積的色塊,采用大面積留白,體現(xiàn)現(xiàn)代、簡約的感覺。

移除多彩的圖標,采用極簡的線性表現(xiàn)方式。

再比如,百度的設計,一年前也在「高級感」的設計理念上進行深挖和落地。

從以下兩個維度可以看出:克制的配色;的細節(jié)。

1. 克制的配色

拿「簡單搜索」舉例,它是百度的一款搜索APP,以簡潔清爽的視覺體驗,簡單的操作交互,吸引了大量用戶,而且零廣告。

在界面的用色上,非??酥?,采用以「黑、白、灰」為主,目的是為了讓用戶聚焦內(nèi)容本身,而不是為了設計而設計。

包括 icon 的處理,以純色的線性為主,更加現(xiàn)代、簡約。

2. 的細節(jié)

大家都知道,黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農(nóng)神廟等都應用了該比例設計。

其實,在看似普通的百度搜索首頁,同樣遵循著這個比例,讓有規(guī)則的美,嚴謹?shù)娜谌肫渲小?

包括柵格系統(tǒng)在設計中運用,這種來源于數(shù)學的美學,將有助于用戶,更有效和愉悅的閱讀及獲取內(nèi)容。

以上可以看出,不管是傳統(tǒng)行業(yè)還是互聯(lián)網(wǎng)行業(yè),亦或者是未來的人工智能的設計,都在往「克制」、「」的方向發(fā)展,讓人人都能享用到優(yōu)質(zhì)、高級的設計。

總結(jié)

總的來說,「高級感」意味著對設計保持克制的、對細節(jié)追求、擁有獨立思考的產(chǎn)物,而且,隨著經(jīng)濟的發(fā)展,人們的審美和接受程度也發(fā)生著改變,追求真正高品質(zhì)的設計。同時,不僅傳統(tǒng)行業(yè)在踐行「高級感」的設計,互聯(lián)網(wǎng)的產(chǎn)品設計也在朝著這個方向發(fā)展。


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

汽車UI界面怎么做?來看特斯拉和Apple Carplay等高手的案例!

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


現(xiàn)在市面上的汽車大部分都是過時的,沒有吸引力的用戶界面,正因為如此,很多設計師都在思考未來的汽車用戶界面將會如何改善我們的駕駛體驗。今天這篇譯文,一起來學習特斯拉和Apple Carplay 是怎么設計的!

汽車行業(yè)似乎每天都有著新的發(fā)展。很多證據(jù)都表明在接下來的20年里我們將會看到比上個世紀都要劇烈的變革。因此,頂尖的數(shù)字設計師們應該把重點放在對這個行業(yè)的關注。那么,到底什么才是車輛用戶界面的未來?它能從根本上改變我們和汽車之間的關系么?

下面是我收集的一些由全世界不同的設計師設計的美麗和未來的汽車抬頭顯示器、用戶界面交互、第三方app控制器。這些設計想法,有一些是真實存在的,有一些還正在發(fā)展中。

特斯拉移動控制中心原型

uisdc-car-201610133

它為什么會讓人震驚?

當你想確定你是否已經(jīng)鎖好車,關上燈,或者把你的車鑰匙交給剛考完駕照的小屁孩的時候,你是否覺得自己是個偏執(zhí)狂?

這個移動app可以讓你在不離開座位的時候檢查這一切,有一個柴油混合動力車?你甚至可以在你吃早餐的時候啟動引擎。直觀的動畫會反饋你這個動作是否已經(jīng)完成。

車載控制面板用戶界面

uisdc-car-201610134

它為什么會讓人震驚?

這個用戶界面看起來是一個用肌肉記憶和手勢驅(qū)動的通用控制模型,不同數(shù)目的手指可以觸發(fā)不同事件,你可以通過iPad面板,無線鼠標等控制它。你可以通過動作來控制數(shù)值的大小等等。

這個用戶界面去掉了所有需要用戶記憶的小控件和視覺元素,從而你可以使用相同的手勢或者它的變體,來完成多個不同種類的任務。

你可以在這里查看整個案例研究:A New Car UI

特斯拉儀表界面概念版

uisdc-car-201610135

它為什么會讓人震驚?

汽車將會變得更加的智能,為我們的公共場所騰出更多的空間,并且汽車的功能也將變得越來越互相關聯(lián)起來。隨著這些發(fā)展,數(shù)據(jù)在我們面前將會變得勢不可擋,試想一下不久之前,我們的手機和其它東西一樣還是一個單一功能的設備。我們在我們看到什么和如何看上有我們的控制權,它應該變得更加自然和方便使用。人工智能和機器學習將會采取直覺控制。這個由Bureau Oberhaeuser制作的原型讓我們提前看到了這一切的到來。

你可以在這里查看整個案例研究:Behance

遠程車輛健康測試與控制

uisdc-car-201610139

它為什么會讓人震驚?

當汽車所有的零部件都變成電子系統(tǒng)時,你想拿起扳手就能發(fā)現(xiàn)問題變得越來越不可能了。這個移動app原型試圖用一種你能理解的語言去描述汽車當前的健康狀況,讓你知道你是否有必要在開啟你的海岸線之旅前修一下它。

輪胎壓力和氣候的用戶界面

uisdc-car-201610131

它為什么會讓人震驚?

當進行輪胎檢查時,這個界面將會告訴你每個輪胎的壓力范圍并且告訴你它們的極限在哪里。這個用戶界面提供了如此重要的反饋,我覺得它應該被納入常用標準中去。

Hudway增強現(xiàn)實顯示器

uisdc-car-201610138

它為什么會讓人震驚?

不用說大家都知道司機應該保持視線在路上,但是現(xiàn)在的手機導航都需要司機把注意力來回切換在手機屏幕和路面之間,這個叫Hudway的app把你的第二塊屏幕跟擋風玻璃很好的結(jié)合了起來。你面前的那塊擋風玻璃很有可能就是未來的顯示界面。

你可以在這里查看整個案例研究:Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市導覽汽車應用

uisdc-car-201610132

它為什么會讓人震驚?

這個用戶界面對于勇敢的探險家來說非常完美,如果你想快速的知道你周圍有什么,這個用戶界面可以讓你在有限的路線里來一段自發(fā)的旅行。

Apple Carplay

uisdc-car-2016101310

它為什么會讓人震驚?

每個人都在關注它的到來,想都不要想,如果你已經(jīng)有了一堆蘋果的產(chǎn)品,你也會在你的汽車上裝上它的。Apple Carplay將會是下一代的第二塊屏幕。

數(shù)字儀表板集群顯示器

uisdc-car-201610136

它為什么會讓人震驚?

沒有什么能和發(fā)動引擎點亮儀表,汽車轟鳴猶如巡游樂隊組成的和旋一樣。身邊的一切,聲音和延遲的視覺互動,都給與你感官的反饋。儀表會通過動畫直觀的告訴你,合適講切入下個轉(zhuǎn)彎,油量是否變低,以及胎壓是否過低。

然而,用數(shù)字型號在方方面面代替模擬型號也會開始令人擔憂,因為無法人工手動介入賬款車子,當保險絲熔斷,或者電子儀器故障時,汽車很快會失控。

特斯拉 iWatch UI 原型

uisdc-car-201610137

它為什么會讓人震驚?

當可穿戴設備成為我們設備的一部分時,它很明顯會幫助我們的手持設備分擔掉一部分的操作功能。這個原型很好的說明了它是如何將這一切展示到手腕上來的。



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

UI設計中為什么插畫設計越來越流行 ?

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

在過去幾年當中,插畫開始以一種堅挺的姿勢,站在設計趨勢的最前列。不止是原本身處各個領域的畫手和插畫師開始越來越受追捧,而且連網(wǎng)頁、UI和動效設計師都紛紛學習插畫設計。當然,更顯著的變化,是插畫在網(wǎng)頁和UI中的使用越來越多,越來越頻繁,甚至越來越多樣。


多年來,插畫被廣泛地運用在雜志、圖書、報紙、海報、傳單等不同的傳統(tǒng)載體之上,新的工具和技術使得它更加輕松地植根于數(shù)字化媒體當中。


作為設計中,最具有表現(xiàn)力的元素,一張插畫所傳遞的信息比文字更多更豐富。在UI和網(wǎng)頁中,使用插畫來輔助傳達信息,無疑更加直接到位。而插畫的可定制性之強,猶在圖片之上。



插畫在UI界面中的運用,可以說相當廣泛了,它更清晰,更時尚,也可以更加精準,甚至更有表現(xiàn)力,為什么不用呢?就適用范疇而言,我們可以觀察到,它可以運用到這些地方:


  • 頁面主題圖

  • 網(wǎng)頁首圖和Banner

  • 吉祥物和形象插畫

  • 博客文章配圖

  • 新用戶引導教程

  • 工具提示

  • 獎勵頁面和成就頁面

  • 游戲化設計的頁面

  • 通知和系統(tǒng)消息

  • 聊天表情

  • 講故事的輔助配圖

  • 信息圖

  • 營銷和廣告圖

  • 圖標和裝飾性內(nèi)容

  • 社交媒體頁面

  • 支持性內(nèi)容的頁面


插畫的適用范圍之廣,這些總結(jié)出來的使用場景,并不是全部。插畫本身的屬性很有意思,它連接了設計,作為內(nèi)容呈現(xiàn),還帶著明顯的藝術化的屬性。今天的文章,我們總結(jié)一下在設計中使用插畫的10個理由和注意事項。



1. 插畫是設計的原創(chuàng)性和藝術性的基礎


無論是印刷品、品牌設計還是UI界面,更加風格化的插畫能夠?qū)⒉煌娘L格和創(chuàng)意加入其中,在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉(zhuǎn)化。



同樣的,在博客、新聞和Banner 中使用插畫,也是看準了插畫可以根據(jù)內(nèi)容進行深度定制的優(yōu)勢,這種微調(diào)能讓內(nèi)容更加統(tǒng)一一致,更加符合產(chǎn)品目標,借助色彩、角色、環(huán)境甚至暗藏的隱喻,來吸引特定的用戶。


2. 插畫是視覺觸發(fā)器,瞬間傳達大量信息


我們常說「一圖勝千言」不是沒有道理的。人的視覺感知能力很強,看到圖片的一瞬間,也許還沒有來得及進行邏輯思考,但是大腦已經(jīng)接收到大量的信息和內(nèi)容。


  • 心理學研究表明,人類只需要大概1/10秒就可以感知到場景中絕大多數(shù)的元素和基本視覺信息。

  • 視覺信息可以更快傳遞到大腦,而重要的信息,人類也通常會被固化為視覺圖像,而非文本化的記憶。

  • 文本需要依托可讀性設計,而圖片和插畫則會被直接識別。

  • 圖片和插畫更容易打破文化和語言隔閡,傳遞內(nèi)容含義。

  • 對于視障用戶、閱讀障礙用戶和兒童,圖片插畫更容易被理解。

 

3. 插畫是標題和文本的重要支撐


雖然圖片一瞬間傳遞的信息很多,但是圖片在很多時候是無法提供精準而詳細的內(nèi)容。用戶依然需要文本來呈現(xiàn)清晰而可以被閱讀和記錄的內(nèi)容,所以文本依然是不可或缺的。在另外一方面,文本和標題已經(jīng)具備的情況下,經(jīng)過定制的插畫能夠輔助用戶理解,更清晰的記憶。



在很多特定的領域,舉個例子比如說金融,插畫能夠借助色彩、圖形和形象來講述故事,讓用戶更清晰的理解復雜的金融功能,甚至強化信任感,而這是文本所不具備的。插畫能帶來強烈的情感連接。


4. 插畫更適宜呈現(xiàn)故事

故事是最令人難忘的內(nèi)容,劇情的走向和起承轉(zhuǎn)合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來,無論是在網(wǎng)頁、UI設計還是內(nèi)容和體驗上,都有著足夠突出的體現(xiàn)。



營造氛圍,渲染情緒,描摹環(huán)境,呈現(xiàn)角色,插畫讓故事更加鮮活、易于理解。在內(nèi)容制造上,有著難以替代的作用。



5. 插畫獨有的情感吸引力


人是情感動物,看似理性的皮囊之下,幾乎每個決定都是在情感和情緒的驅(qū)動下完成的。如果某個設計除了能夠幫你達成某個目標,還能讓你感到愉悅,會心一笑,那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設計因素當中,插畫在撬動用戶情緒這一點上,有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效,都在竭盡全力地為你闡述故事,營造氛圍,將你拉到故事和場景當中去。



6. 插畫賦予設計以美學價值,更容易被接受


即使所有人都在分析和爭論產(chǎn)品的可用性和易用性,大家在對美的追求上,始終保持著一致的態(tài)度。一個設計是否具備可取性,是否能夠通過甲方、客戶和實際用戶,是每個設計人都需要面對,都力求做到最好的事情。精心設計的插畫在美學和風格上更加扎實,風格化的設計不弱于現(xiàn)成設計素材所提供的價值。



7. 插畫能讓品牌識別度更高


和文本相比,插畫的視覺化屬性無疑是更強的。圖片插畫所提供的定制化內(nèi)容能夠從各個方面來貼合品牌的需求,更加到位地表達品牌所需呈現(xiàn)的信息。這也使得插畫不僅僅在品牌宣傳的時候,運用在廣告、海報等顯而易見的地方,而且也成了品牌 APP 中新用戶引導和教程中必不可少的元素。



就像 Perfect Recipes 這個應用的新用戶引導屏中,就借助插畫來呈現(xiàn)。而 Toonie 這個可愛的鬧鐘應用當中,甚至借助游戲化的設計,集成了大量有趣的表情和貼紙,當然,它們都是使用定制化的插畫來呈現(xiàn)的。



8. 數(shù)字插畫還能強化交互,應用在短視頻中


數(shù)字化的好處就在這里,通過不同的數(shù)字軟件,合理的處理之后,不僅能夠變成動態(tài)的,運用于視頻當中,還能夠作為微交互,強化產(chǎn)品的整體體驗。


一旦涉及到的動效和短視頻,整個數(shù)字插畫就開始具備更多的可能性了,不同的動效能帶來截然不同的感覺和體驗,更不用說這種玩法正貼合時下的流行趨勢。


Whizzly 這個動態(tài)圖標就是基于插畫,給一個創(chuàng)意分享社區(qū)所準備的。


9. 插畫的獨特性來自于其中的隱喻和引人入勝的視覺


和藝術一樣,設計中同樣需要借助隱喻來傳達一些相對更有趣、更深刻、更有意思的信息。插畫的獨特性也是借此來構成,包含的隱喻使得其中的價值更加復合,值得反復咂摸,而不是一眼就可以完全看穿。



在這個約會應用的網(wǎng)頁當中,插畫無疑傳遞出了多重的信息,暗含的隱喻告知了用戶產(chǎn)品的功能和屬性。而下面這幅插畫則是為一篇如何找到原創(chuàng)風格的文章所準備的,圖中的金魚指代的則是難以被抓住的靈感和風格。



10. 插畫讓用戶可以更快理解和操作


無論是圖標還是大幅的插畫,都能幫助用戶理解,更加直觀地知道要看哪里,要做什么。面對如今的數(shù)字界面,用戶的注意力持續(xù)的時間越來越短,而插畫則讓用戶更快、更直接地獲取信息,并且決策下一步要做什么。如果插畫或者圖標內(nèi)容不能被用戶一眼看出來,那么用戶就只能借助文本標簽來了解功能是什么。設計師可以通過測試來測試圖標和插畫的可用性和識別度。

值得思考的問題

當然,插畫的設計是沒有門檻的,在設計的時候,要求也是比較高的。在使用和設計插畫的時候,需要考慮以下的幾個方面:

  • 目標受眾(身體能力,年齡,文化背景,教育水平等)

  • 產(chǎn)品的使用環(huán)境

  • 產(chǎn)品和內(nèi)容的在全球范圍內(nèi)和當?shù)氐膫鞑ニ?/span>

  • 所選圖形的隱喻以及是否容易被識別

  • 插畫是否會讓人分心

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

為什么如今的APP UI設計如此的趨同?這也許是件好事!

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里




現(xiàn)在,當你打開 Instagram、Airbnb、Apple Music、Twitter、Dropbox 這些應用的時候,乍一看很難區(qū)分清楚彼此的區(qū)別:帶有圓潤邊緣、現(xiàn)代感極強的非襯線字體大標題,極簡的黑白色調(diào)為主的界面,大量的留白,少量的提亮色甚至沒有提亮色。

這種現(xiàn)代的界面設計風格,乍一看很簡陋。而具有諷刺意味的地方在于,它們出自于最大的公司,是也是受眾最廣的產(chǎn)品,在視覺觀感上,讓人覺得幾乎沒有被設計過。

Instagram 的深藍的頁頭怎么變了?Lyft 中經(jīng)典的亮粉色元素怎么不見了?這些有著深厚底蘊的品牌是否已經(jīng)放棄了標識性的設計?又或者是它們開始共享相同的模板了?

問題在于,這不止是 Instagram 和 Lyft 這樣了,有跡象表明,Google 這樣的大廠也有類似的傾向。比如Gmail 中標志性的紅色大幅度減少,白色的背景,白色的交互按鈕,白色的輸入框,其他的Ui控件都很精準到位地保持了這種簡約而一致的風格。

身在硅谷的大型企業(yè),互相之間的借鑒學習是常有的事兒,但是至少保持了足夠的差異化。但是現(xiàn)在的局面則不同,這種高度趨同的趨勢,讓整個事情看起來非常反直覺。

到底是怎么回事?

好吧,我們認為產(chǎn)品設計的一致性是好事情,這里有幾個值得注意的原因。


讓用戶更加關注內(nèi)容和結(jié)果

對于大量APP 的視覺和信息疲勞是誰都無法忽略的真實存在,絕大多數(shù)人已經(jīng)厭倦了在太多應用之間來回切換,每一次下載新的應用都要花費大量的時間來重新了解界面的設計

調(diào)研表明,超過四分之一的應用,在首次下載之后,用戶只用過一次就卸載了。絕大多數(shù)人日常使用的APP 其實是非常固定的,它們中絕大部分,核心在于幫助人們節(jié)省時間和金錢(或者兼而有之),讓生活更輕松。

對,讓生活更輕松。而這需要數(shù)字產(chǎn)品具備良好的一致性,而設計師也越來越多地將注意力投注在這一個點上。

正如同我們熟知的UX設計專家唐納德·諾曼所說的:「很多用戶界面所存在的真正的問題,在于它僅僅只是用戶界面。很多用戶界面的設計阻礙了功能。我想努力達成某個目標,而不是將精力耗費在界面上?!?/span>


更一致意味著更好的可用性

所有的電商網(wǎng)站基本上都遵循著類似的交互邏輯和視覺元素,你不會搞錯購物車的圖標,也不會錯過任何環(huán)節(jié)。這些約定俗成的慣例,意味著用戶不再需要重新學習在某個新的平臺上購物,降低學習成本。

絕大多數(shù)約定俗成的規(guī)則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規(guī)則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。

以 Snapchat 為例,今年早些時候曾經(jīng)發(fā)布過一個版本,其中包含有一些比較有爭議的設計。這個版本當中,被重新修改過的導航和幾乎隨意堆砌的功能模塊,讓用戶活躍度幾乎立刻下降了73%,甚至直接導致了用戶流失和股票下跌。

正如同 Snapchat 所證明的那樣,新穎的設計是有風險的。一致的設計,確實有一定的機率降低用戶在面對新興事物時候的不安感。


設計不應止步于視覺

明白用戶的需求和意圖,在不斷探索解決方案的過程中,才能真正創(chuàng)造出偉大的用戶體驗。相比于獨特的外觀,差異化的體驗是更有價值的。

當然,樣式和風格很重要,它們也確實會影響到體驗,當人們感知到有視覺吸引力的設計的時候,即使有一些混亂和無效的設計,也是可以忍受的。

但是設計師的精力是有限的,用戶的也是如此,相比于在色彩和花哨的動畫上反復嘗試,幫助用戶找到更好完成任務的方式,無疑更有價值。設計好的產(chǎn)品,最終能夠給用戶帶來價值的東西,是需要看似無限的測試和迭代,來向著可用和易用的產(chǎn)品更進一步。

奧巴馬、喬布斯和扎克伯格每天穿著相同的衣服,他們的衣服和這種行為同樣出名。心理學家將這種現(xiàn)象稱之為「決策疲勞」,它們每天需要用有限的能量來做大量的決定,而為了給更重要的事情留下足夠的精力,他們穿相對固定的衣服,就可以省心很多。

設計師面對的是同樣的局面。隨著界面設計的趨同化,設計師可以花費更少的時間來決定用什么色彩,而可以將更多的精力投注在更為深入的設計當中,比如更有效的布局,反思為什么要這樣設計,等等。


趨同的設計是否會扼殺創(chuàng)造力

我想你一定在思考這種設計趨勢之下的缺點,比如這樣的設計是否會顯得缺乏創(chuàng)新,甚至會扼殺創(chuàng)造力。老實說,我覺得這樣的影響是存在的。

但是,即使每個產(chǎn)品設計師都參與到極簡主義設計的運動當中來,仍然有大量的設計工作有待完成,設計的范疇太廣泛了,需要設計的東西遠超用戶界面本身。

事實上,界面中的趨同化在近期看來是頗為有益的,對于長期的影響也是非常巨大的。

首先,最重要的一點,VR、AR 和人工智能的逐漸普及,用戶和數(shù)字設備之間的互動可能會變得更加隱形,小屏幕同樣在普及,手勢操作將會成為最基本的交互語言,我們將會越來越多地參與到無屏幕的交互當中去。

即使我們在iPhone 上,人工智能加持下的 Siri 越來越好用,越來越多的用戶開始習慣使用類似的語音助手來創(chuàng)建待辦事項,選擇音樂,發(fā)送消息,查看天氣,簡單的功能它們已經(jīng)可以很好地完成了,復雜的功能和需求也會通過機器學習逐步習慣、越做越好。

在諸如人工智能、機器學習這樣相對高深的概念背后,是軟硬件正在更好地幫助人類完成任務,做對事情。設計師的角色需要更進一步,更深入地參與到產(chǎn)品當中。

如果設計師要改進 Siri 的設計,那么要做的工作遠不止設計界面,已經(jīng)有很多相關領域的專家討論過這個問題了,設計師所需要了解、掌控的維度越來越多,設計正在變得更加深入和復雜。更通俗的講,設計師需要考慮新的方式,更加富有創(chuàng)造力的策略來吸引用戶的注意力,甚至要深入到情感和感知當中去,而不是單純的視覺。

如果我們僅僅將優(yōu)秀的設計局限于我們在屏幕上看到的內(nèi)容,未來更多的可能性,可能就止步于此了。

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

UI設計中如何配色?

用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


顏色跟其他事物一樣,使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色,您將獲得更好的效果。將顏色應用于設計項目中,要保持色彩平衡,您使用的顏色越多,越難保持平衡。


顏色不會增加設計品質(zhì) - 它只是加強了設計的品質(zhì)感

                                      --皮埃爾·波納德(Pierre Bonnard)




60–30–10 規(guī)則


室內(nèi)設計規(guī)則是一種永恒的裝飾技術,可以幫助您輕松地將配色方案放在一起。 60%+ 30%+ 10%的比例是為了保持顏色平衡。這個公式非常有用,因為它創(chuàng)造出一種平衡的感覺,并允許眼睛從一個焦點到另一個焦點舒適地移動。 使用也非常簡單。


60%是主色調(diào),30%是副色和10%用于強調(diào)色。


e1f458de0ea5a801219c77abf06a.jpg


墻面漆(60%),家具(30%),配飾(10%)


顏色的含義


幾個世紀以來,科學家已經(jīng)研究出某些顏色的生理效應。 除了美學,顏色也是情感交流的創(chuàng)造者。 顏色的含義可能因文化差異而不同。這就是為什么你看到時裝店鋪的設計是黑白配色。 他們希望看起來優(yōu)雅而高貴。


a18858de0ebca801219c77eecdb0.jpg


Asos采用純黑白配色搭配綠色按鈕設計,這種配色是有原因的。


  • 紅色:激情,愛,危險

  • 藍色:平靜,負責,安全

  • 黑色:神秘,優(yōu)雅,邪惡

  • 白色:純凈,沉默,清潔

  • 綠色:新生,新鮮,自然


首先考慮單色設計


在項目設計初期,我們通常傾向于嘗試不同的顏色進行調(diào)整,但這種行為會很快違背你的初衷,當你發(fā)現(xiàn)的時候,已經(jīng)花費了3個小時調(diào)整基礎色...這確實很誘人,但你應該學會避免這種態(tài)度。

相反,你應當專注于元素的間距和整體布局。它會節(jié)省你很多時間。 這種約束是非常有成效的。從另一方面講,它看起來并不乏味。如果你想讓整個作品看起來更好,嘗試不同的顏色選擇。


43da58de08aaa801219c7791a8c3.jpg


我在追波(dribbble)上的作品之一。簡約單色處理,專注于元素之間的使用。


避免使用灰色和黑色


我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現(xiàn)實生活中,純灰色幾乎不存在。 黑色也是如此。

b6d358de08d0a801219c7750613e.jpg

這張圖片最黑的顏色不是#000,而是#0A0A10


始終記著給你的顏色增加飽和度。潛意識里會顯得更自然,為用戶所熟悉。


667258de08f5a801219c77147ee4.jpg


相信自然


最好的顏色組合來自大自然。 他們看起來總是很自然。 尋找顏色設計的解決方案,最好的辦法是調(diào)色板總是發(fā)生變化。


為了得到設計靈感,我們只需環(huán)顧四周。


975d58de0910a801219c7714bed0.jpg


保持對比


一些顏色相互融合,而其他顏色一起使用會發(fā)生沖突。 有一個明確的規(guī)則,想要了解不同顏色之間如何融合,最好的辦法是觀察一個色輪。 你應該知道這個方法,但是沒有必要動手操作。


f09d58de095fa801219c77f5485c.jpg


獲取靈感


當我們在談論UI參考時,dribbble是最佳選擇。它還具有通過顏色搜索的工具,所以當你想對其他設計師使用特定顏色進行視覺研究時,然后去這里:dribbble.com/colors


5ce458de097ba801219c77aa763e.jpg


視頻,平面廣告設計,室內(nèi)設計,時裝......有這么多鼓舞人心的地方可供收集。如果說根本就沒有配色參考,那一定是懶惰的原因,把那些調(diào)色板保存下來,一切看起來都非常有趣。


通常我喜歡從KPOP(韓國流行音樂)視頻剪輯中選取顏色,他們看起來很華麗。


配色工具推薦


為了方便起見,我搜集了一些最好的配色工具可供選擇,在2017年獲取調(diào)色板,他們會為您節(jié)省大量的時間。



Coolors.co


這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色并按空格即可生成調(diào)色板。 Coolors還可讓您上傳圖像并從中調(diào)出調(diào)色板。 很酷的事情是,你不僅僅是一個結(jié)果,而是有一個選擇器,允許你修改參考點。


a68a58de0c65a801219c77885e56.jpg



Kuler


這款Adobe旗下的配色工具已經(jīng)和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本,則可以將配色方案導出到Photoshop中。


296e58de0c83a801219c77fbb98e.jpg


Paletton


它類似于Kuler,但不同的是,您不僅限于5個色調(diào)。 當您擁有原色并希望使用其他色調(diào)時,您可以使用這款很棒的工具。


92ba58de0c94a801219c77d2592b.jpg




Designspiration.net


試想一下,你有自己的配色的想法,但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色,并搜索符合您的查詢的圖像。 真的很好,不僅用于找到具有特定調(diào)色板的圖像,還可以在設計中實現(xiàn)它們。


52a358de09e9a801219c774d8bb5.jpg


ShutterstockLab Spectrum


你可能會問:如果我想用我所選擇的顏色搜索照片? 那么,Shutterstock有一個叫做Spectrum的工具,你可以用特定的語氣搜索照片。 您甚至不需要訂閱,因為具有水印的小預覽圖像將足以生成調(diào)色板。


cc6c58de0a22a801219c77af34c9.jpg


Tineye Multicolr


但是,如果你想搜索照片中的顏色混合,甚至指定每個顏色的數(shù)量,那么Tineye會幫助你。 本網(wǎng)站使用了來自Flickr千萬張共享圖像的數(shù)據(jù)庫。

64dd58de0aa0a801219c77382a00.jpg



最后的想法


掌握配色技巧是一件苦差事,特別是在數(shù)字時代。 上面提到的技巧將會減輕工作中尋找正確顏色方案的困難度。 學習創(chuàng)造令人驚嘆的配色方案,最佳方法是練習,讓自己有所幫助,用玩的心態(tài)去使用顏色。


以上是本篇文章全部內(nèi)容,感謝您的閱讀,希望對您設計產(chǎn)生幫助。



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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔