首頁

設(shè)計靈感與素材的極限管理

純純


這些年里,這款工具進行了快速的迭代和更新,響應設(shè)計師們的需求,不斷完善功能,成為設(shè)計行業(yè)推薦率(NPS)最高的軟件之一。

尤其是作為一款優(yōu)秀的買斷制軟件,不僅定價合理,甚至 5 年來 ¥199 的售價分文未漲。 

而我同期開始用的 Ulysses(用它寫了兩本書,寫過的公眾號內(nèi)容超100W字)、MindNode、Notability 等,全都在這期間從買斷制改成訂閱制,甚至訂閱價格還逐年上漲??







我從來不吝嗇于贊美優(yōu)秀的軟件工具,尤其是保持初心以純粹的產(chǎn)品功能來服務用戶的那種更甚。五年前我作為最早就推薦它的人之一,五年后我不介意再夸它一次。 

它就是 —— Eagle。 

Eagle官網(wǎng):https://cn.eagle.cool/











前面說過,Eagle 是一個設(shè)計資源管理器,它可以做的事情非常多,但我不是要在這里寫功能介紹的,而是來分享一下,我都用它做了什么。







2.1 圖片采集 

圖片采集是我使用 Eagle 的核心目的,他包含豐富的采集形式完美覆蓋我的實際使用需要。 

第一類采集形式就是通過瀏覽器插件或截圖工具,將網(wǎng)頁中看見的圖片下載到本地。 





第二類采集形式,則是通過粘貼花瓣或 Pinterest 的畫板地址,批量采集該畫板的所有圖片。這是我最喜歡的功能,沒有之一。







花瓣和 Pinterest 這類網(wǎng)站,真正的精華是優(yōu)質(zhì)用戶自己收錄的圖庫,而不是直接搜索出來的結(jié)果。批量采集,就是讓我在找到優(yōu)質(zhì)圖庫后,用最簡單的方式下載這些被精挑細選出來的圖集。 

2.2 篩選排序 

因為批量下載很方便,我可以很快的針對同一類目收集出成千上萬的內(nèi)容。但同一個類目下載那么多圖片或素材有意義嗎? 

數(shù)量從來不是我追求的目標,我會將任何類目的內(nèi)容數(shù)量進行精簡,只保留其中最精華的一小部分,即使它們是由一批最優(yōu)秀的設(shè)計師收藏的圖庫,我也只取精華中的精華。 

但是,光靠一張張圖看過去打星再篩選,會把我累死。于是,我就會利用 Eagle 的篩選與排序功能,快速剔除劣質(zhì)內(nèi)容,縮小選擇范圍。 







比如之前我分享過的 UI 配圖的素材,包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張,是我從上百個攝影畫板里批量采集下來的。







應用到大小、尺寸排序,色彩篩選,星級篩選等多種手段配合,幫助我快速篩選出各自質(zhì)量最好的 100 張圖片。而這前后大概只用了兩小時的時間。

2.3 資源管理 

通過前面兩個功能,我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置,需要根據(jù)一定的規(guī)律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。 

Eagle 的資源管理包含三個方向: 

1. 普通文件夾:類似電腦文件夾的邏輯,可以進行排序和上下級設(shè)置,收納 

2. 智能文件夾:通過一定條件設(shè)置,篩選出對應圖片和素材的動態(tài)文件夾 

3. 分類標簽:即可以作為分類來使用的標簽系統(tǒng),可以為一張圖片或素材打上多個分類標簽

我的資源管理方法論一直崇尚的是極簡主義,能用普通文件夾管理的情況我就一定不用智能和標簽。不是說這些功能不好,而是因為它們需要對素材進行二次的處理和維護,只有在必要條件下才會使用。 

我的素材資源管理是首先構(gòu)思我會用到的幾個大類,每個大類下會包含幾個二級分類,即 Eagle 中的1級文件夾,然后再創(chuàng)建對應的文件夾并命名和添加色彩,比如下面示例。





不要奢望一開始規(guī)劃分類能做到盡善盡美,只要大的方向上確定了,然后再根據(jù)日常收集的需要慢慢去添加下級文件夾,而這一級就沒有那么嚴格的限定,用到哪加到哪。







只有在一些非常特殊類目下,我才會去為圖片和素材增加標簽,而不是為了打標簽而打標簽。比如我收集的學員作業(yè)也存在 Eagle 中,會包含課程期數(shù)、作業(yè)類型兩個維度,我就需要用標簽進行管理,方便我后續(xù)進行跨文件夾的查看與篩選。 

2.4 素材預覽

除了基礎(chǔ)的靈感圖片外,我還往里面存了很多其它文件素材,包括但不限于下面這些種類。 







Eagle 能作為一個設(shè)計資源管理工具,并不是因為可以添加文件夾和標簽,再實現(xiàn)一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預覽。 

它比 Mac 自身的快速預覽更高效(后面會解釋),同時作為雙系統(tǒng)用戶,我得以在 Windows 系統(tǒng)下如下圖快速查看素材預覽,而不是安裝格式支持零碎的插件(或流氓軟件)來實現(xiàn)。







尤其是 Sketch、XD、Mindnode 文件,有了縮略圖,就不用通過打開源文件來查看內(nèi)容。并且字體文件支持在目錄中直接啟用和停用,可以非常方便的實時管理本地字庫,保證我在設(shè)計軟件中只會出現(xiàn)必要的字體,而不會全部顯示出來。

2.5 網(wǎng)址記錄 

Eagle 還有個特別的功能 —— 網(wǎng)址記錄,這也是我最常用的功能之一。 

早前有先用 Pocket 然后轉(zhuǎn)移 InstaPaper 和 Cubox 來收錄網(wǎng)上看到的優(yōu)質(zhì)設(shè)計文章,方便我需要引用原文和整理思緒的時候回看。







雖然最后采用的 Cubox 也是一個優(yōu)秀的稍后閱讀工具,但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以,自然而然的,我還是把網(wǎng)址全部遷移回 Eagle 中。 

只要安裝 Eagle 瀏覽器插件,我就可以快速收集網(wǎng)址到 Eagle 目錄中,之后隨時進行查看。 

可能有的同學喜歡用網(wǎng)頁整頁截圖來收集文章,只是我不太喜歡用圖片格式查看文本,所以這個根據(jù)個人喜好即可。

2.6 項目管理 

同時,我不止拿 Eagle 管理靈感和素材,也直接拿來做項目管理。 

在 Eagle 庫文件進行團隊同步以后,針對每個項目創(chuàng)建獨立的項目文件夾,用來收錄相關(guān)的文檔、靈感圖、情緒版、配圖和設(shè)計文件。





尤其是項目前期收集靈感圖和情緒板的階段,多人共同收集和編輯的結(jié)果可以最方便的查看和進行評價,非常好的優(yōu)化我們的協(xié)作流程和效率。 

2.7 作業(yè)評審 

作為一個設(shè)計講師,要觀察學生的作業(yè)和進行點評。自然而然,我也會優(yōu)先將所有作業(yè)添加到 Eagle 中去。 

通過對每份作業(yè)前期的打分,標注,來進行后面點評課程的分享和講解。





同時,這些收集的作業(yè),需要在后續(xù)其它場景中作為正、反面的案例。所以對作業(yè)的評級和標簽就變得必要起來,在相關(guān)場景下通過創(chuàng)建智能文件夾快速篩選出范圍內(nèi)的圖例。 

以上就是我使用 Eagle 最重要的 7 個場景,雖然實際應用還遠遠不止它們,但因為篇幅關(guān)系就先介紹到這里。













Eagle 作為一款被我長期使用和推薦的工具,不僅僅是因為上面的使用場景,它們是結(jié)果。所以,我要從更底層的角度,來解釋它的不同之處和特點。

3.1 獨立的 Eagle 庫文件 

從上線以來,Eagle 有一個飽受誤解和詬病的底層設(shè)計,就是它的 “素材包” 文件 .eaglepack 。用戶需要先創(chuàng)建一個 “庫“,之后添加的所有素材、文件,都會被保存到這個庫文件中去。







換句話說,相當于 Eagle 在你的電腦中創(chuàng)建了一個特殊的文件夾,用來保存你置入的文件。即使你添加的素材是已經(jīng)下載到本地,它也會再 “復制” 一份到這個庫中。 

很多設(shè)計師對這個邏輯感到很費解,為什么本地存的好好的,Eagle 要再復制一份,完全就是浪費系統(tǒng)資源和時間的做法。如果無法理解這個邏輯,就是不具備 ”產(chǎn)品思維“ 的特征之一。 

我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。







它們的運作機制,是通過運行該軟件,來讀取你的硬盤目錄和對應文件。使用它們并不會額外復制文件出來,即使你在軟件中置入素材,它們也只是幫助你正常保存到硬盤的對應位置。 

為什么這類工具會被我們放棄,有下面這些原因: 

第一,它們的核心一直都不是全領(lǐng)域的設(shè)計資產(chǎn)管理,而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理,尤其是攝影相關(guān)項目。 

第二,就像對比 Photoshop 相較與 XD 一樣,龐大的軟件體積和功能,對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響,降低操作的效率。 

第三,就是比較值得深入思考的地方,那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中,多出大量非必要的目錄和文件,嚴重增加我們的決策成本和管理成本。 

范圍太大或自由度太高并不是什么好事,就像 iOS 的相冊一樣,它是個封閉的圖片庫,不像安卓一樣讀取其它硬盤文件夾,從而讓相片的管理更簡單明了。 

自由雖然可以做更多事,但這些沒有必要的可能性增加就只會變成決策和行為中的負擔。簡潔明了,才是高效的前提條件。 

第四,就是設(shè)計文件的 ”預覽效率“ 問題。不管電腦的性能怎么提升,大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件,還是高達幾億像素的超清圖片,加載都是需要等待的。 

比如下方目錄中的作業(yè)文件,因為很多同學導出畫布不考慮圖片質(zhì)量尺寸,所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。





當這么多大型位圖聚集在一起,Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了,這個功能的代價是生成了大量的 ”緩存”,即這些縮略圖會暫時保存到緩存文件夾中。







緩存文件都只是過客,在你格式化系統(tǒng),換另一臺電腦打開,或者緩存超過了上面設(shè)置的 50G,那么舊的文件就會被刪除,你還是要重新加載該文件的縮略圖。相信我,超出緩存容量是非常容易的事,即使你加到 100G 也一樣。 

Eagle 的庫特性,是在添加素材進庫之前,會生成一個對應的縮略圖文件,之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件,而不是解析原圖。 

這種策略帶來的幫助除了在文件夾之間切換高效自如,也對本地內(nèi)存的壓力有非常大的緩解。 

在一般資源管理中,一個文件夾內(nèi)有幾千張高清圖片時,持續(xù)滾動到目錄底部就會發(fā)現(xiàn)越來越卡,因為占用的內(nèi)存越來越多,直至達到臨界點釋放掉上方列表加載的內(nèi)容(上滾會重新加載)。相信有用相機的同學一定很了解這種感受。 

綜合各種問題和影響,自建庫,并為每個素材生成不會被刪除的縮略圖就是最好的選擇。 

這不僅僅是 Eagle 一個工具的做法,即使 Adobe 也在 Lightroom 應用了相同的策略,新 LR 導入圖片素材到它的自建庫中進行管理,同時生成縮略圖用于列表加載(降低高像素調(diào)節(jié)延遲)。而老版的 LR 雖然還沒下架,但為它增加 Classic(古典) 的后綴,所以它們認為哪種做法更有潛力,你們自己也能判斷了對吧?







3.2 為什么不能聯(lián)網(wǎng) 

今天我們使用的絕大數(shù)軟件都是 SaaS(微軟:基于web的軟件服務),自帶聯(lián)網(wǎng)備份和同步,但是 Eagle 只能保存本地卻不符合我們的 “習慣”,這是為什么? 

因為成本是沒辦法控制的,重度用戶成百上千 G 的硬盤占用,是不可能輕易使用云服務來實現(xiàn)同步的。這些動輒幾 G 的 PSD 文件或其它大型設(shè)計文件,會讓整個同步過程充滿不確定性和沖突。 

同時,云同步是一種成本特別高的服務類型,和一般的云存儲空間不是一種概念,想要大容量又要免費,是不可能的。Adobe 同步盤 1T 容量港區(qū)售價 68 港幣,蘋果 iCloud 同步盤是 2TB 68 元/月。 





算起來他們的價格并不貴,但一定要清楚 Adobe 和蘋果云都是為了自家生態(tài)服務的,而且作為軟件業(yè)巨頭有自己的大型數(shù)據(jù)中心,降低云服務成本。類似 Eagle 這樣的初創(chuàng)團隊是不具備這種條件的,即使推出了,價格也不會便宜。 

可能還有人會對比花瓣 Pro,它就支持云同步。但是,花瓣 Pro 只是官方網(wǎng)站的本地客戶端,更方便的訪問自己的官網(wǎng)個人中心,無法收集和整理圖片以外的其它素材,所以同步起來容易。





Eagle 的數(shù)據(jù)就只能保存本地,或者保存在笨拙的移動硬盤內(nèi),隨身帶著嘛?肯定也不是。 

庫文件的另一個管理好處,就是方便做備份。在今天同步盤服務逐漸成熟的環(huán)境下,你可以選擇購買類似 Dropbox、堅果云這類同步網(wǎng)盤,通過它們實現(xiàn)備份和多設(shè)備同步。



或者,可以購買群暉、威聯(lián)通、極空間為主導的個人云盤硬件,實現(xiàn)空間更大、更靈活的使用體驗。





如果有同學不知道怎么同步的,我會在后面分享。 

3.3 ARM 硬件的適配 

最后一點,就是對蘋果 ARM 架構(gòu)的適配了。在 Eagle 2.0 版本中,快速適配了 Mac 的新硬件架構(gòu),從而讓軟件的運行、讀取效率遠遠高于上一個版本,做到了絲般順滑的地步。





對軟件本身的優(yōu)化也是速度的保障之一,相信 Bridge 用的多的同學一定忽略不了它無處不在的延遲與卡頓。













4.1 Eagle 庫的同步方法 

Eagle 如果要進行網(wǎng)絡(luò)的備份和同步,那么一定要分清楚同步盤、網(wǎng)盤、移動硬盤的區(qū)別。 

其中,網(wǎng)盤和移動硬盤基本上是一樣的,它們的使用特點就是我們要主動把要保存的東西,拖拽進硬盤目錄內(nèi)。移動硬盤備份速度還好點,網(wǎng)盤的備份就要非常久的時間。 

如果你有兩臺電腦,使用移動硬盤的方案就得一直隨身帶著,用哪臺插哪臺上。非常容易在第二天忘記拔掉,然后回公司的時候沒庫可用。使用網(wǎng)盤的方案,那就更不可能的頻繁的備份和在另一臺電腦中下載。 

類似 Dropbox 或 同步盤工具,就是用來解決這類問題的。簡單點說,同步盤的原理就是本地安裝一個同步軟件和云端的服務器進行通信,這個同步軟件會綁定相關(guān)的本地文件夾。于是,這個文件夾內(nèi)有任何文件的變更,同步軟件就會自動把變更的軟件傳輸?shù)椒掌魃稀?nbsp;

而同步盤的特點并不是只能客戶端和服務器一對一傳輸,而是可以多對一同步。如果服務器內(nèi)容更新,它就會把更新的數(shù)據(jù)實時推送給其它客戶端,更新它們本地的文件。







通過這種模式,就能實現(xiàn)自己多臺設(shè)備,或者團隊多個成員設(shè)備的文件夾實時同步,無需你手動進行操作。 

當然,同步盤對服務器的資源占用與消耗遠遠大于一般網(wǎng)盤,所以基本只有付費的工具,而這種帶給我們生產(chǎn)力的提升和數(shù)據(jù)安全的預算是有絕對必要的。 

如果使用蘋果的同學,可以通過將 .eaglepack 保存到關(guān)聯(lián) iCloud 的文件夾即可(最好“文稿”里)。蘋果系統(tǒng)就會自動開始同步,其它 Mac 電腦就能實時接收。 默認的空間肯定不夠用,建議開通 200G 容量的服務。





如果用專業(yè)同步云軟件,以堅果云舉例,下載完客戶端,只要完成關(guān)聯(lián)包含 .eaglepack 的文件夾,那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云,就可以把該文件夾下載下來并自動同步。







4.2 靈活使用網(wǎng)頁采集

我收集靈感素材是非常有目的性的,比如一個項目需要的配圖素材,我會一口氣去收集幾十張覺得合適的圖。

Eagle 有一個瀏覽器的采集插件,這個插件非常好用。只要拖動瀏覽器的圖片,就會出現(xiàn)對應的采集彈窗,把鼠標移動到對應目錄上就可以完成采集。





如果你覺得整個頁面的圖片都想保存,也可以在插件圖標中使用批量收藏按鈕(或快捷鍵),就可以采集整個頁面中的所有圖片,以及通過尺寸篩選對應尺寸。





應對日常看到的優(yōu)質(zhì)作品、靈感圖,也可以非常快速的實現(xiàn)采集。可以最方便的收納我們自己的采集資料。

4.3 UI 靈感庫的搭建模式 

作為移動端 UI 設(shè)計師來講,收集日常見過的優(yōu)秀 APP 界面,是必要的職業(yè)素養(yǎng)。而使用 iPhone + MacOS 再結(jié)合 Eagle 的話,這個過程就會變得非常的簡單。 

首先以完整頁面收集為例,之前看過不少人推薦使用 iOS 的跨設(shè)備復制圖片到 Mac 中黏貼的操作,是完全沒有必要的,因為一次只能復制一張截圖。 

你要做的就是開啟相冊的云同步,日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間,在電腦的相冊中打開 ”截屏“ 相冊,就有你這段時間收集的所有截屏??蜻x相關(guān)內(nèi)容,拖進 Eagle 對應文件夾中就完成收集,然后再刪除原圖。 





而且因為相冊特殊的機制,直接拖拽出的圖片是壓縮后的版本,讓截圖的文件的體積大幅度縮小,從3M 變成 300K(完全夠看),非常好的降低硬盤占用量。 

除了收集頁面,更重要的 UI 靈感是頁面中的 ”組件“,我們需要根據(jù)組件為目標去收集相關(guān)的案例。直接拖進整頁截圖的方式就不太合適,比如下面的瓷片區(qū)案例區(qū)。







所以,我們要開啟 Eagle 的自帶截圖功能,并設(shè)置好你覺得順手的快捷鍵。





記得打開第一個選項 ”彈出分類“,就可以每次截圖后選擇指定的文件夾。不管是你的截圖,還是網(wǎng)上的其它案例,你都可以用最高效的方式收集這些組件樣式,輕易搭建自己的組件靈感系統(tǒng)。





4.4 文件的自動導入

前面講過,我會用 Eagle 來放 Mindnode 這類思維導圖文件。但是,Mindnode 先創(chuàng)建保存,再拖進 Eagle 的步驟太麻煩了。 

所以,我正常新建并保存 Mindnode 思維導圖會到它默認文件夾中,然后使用 Eagle 的文件夾檢測功能關(guān)聯(lián)它,之后所有保存的文件就會出現(xiàn)在 Eagle 的目錄中。



之后,我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處,還可以讓我使用 Windows 系統(tǒng)的時候能夠正常預覽思維導圖。 

4.5 高效的字體的管理

Eagle 是可以管理字體的,我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。



可能你們會有疑問字體丟進字庫就行了,還管理它們干什么?或者說有字由之類的字體軟件,用 Eagle 干什么。 

一方面是我會盡量精簡使用工具的數(shù)量,另一方面,就是使用團隊同步盤的時候,我們的團隊字庫是統(tǒng)一的,隨時可以找到啟用的,最快解決其他人的設(shè)計文件字體缺失問題。 

同時,當我在使用 UI 軟件設(shè)置字體覺得選擇起來太困難時,就會去關(guān)閉掉大多數(shù)最近不會用的字體。實現(xiàn)這個操作非常的簡單,只要新建 ”智能文件夾“,并添加選項 ”字形文件“ 和 ”已安裝“,那么啟用的字體就會全部出現(xiàn)在這個列表中。







用一兩分鐘的時間就可以批量選擇你想要停用的字體,右鍵停用即可,它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾,每次清理只需要一兩分鐘時間。 













目前上方截圖中的很多案例還不是最終的完整版,最近上海疫情居家隔離,大多數(shù)工作暫停中,我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西,所以這次我把整體素材都導出后重新進行整理中,也是為什么會寫這篇內(nèi)容的原因。





Eagle 帶給我最大的價值,就是為我和團隊節(jié)省了海量的時間,讓我有可以更快的找到參考素材,更快的整理分類,更好的同步項目文件。 

上面分享的很多體驗和總結(jié),都是在 5 年來長期使用中一點點摸索,適應,并形成習慣的。任何工具的使用與自己工作學習的結(jié)合,都是漸進磨合的,每個人都可以在這個工具中挖掘出適合自己的用法。 

但依舊要給大家一個建議,不要為了收集而收集,也不要沉迷與堆積素材的數(shù)量,讓它為我們服務,恰到好處的出現(xiàn)在我們的實踐過程中。

作者:酸梅干超人   來源:站酷

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

ui投影原理分析及常用投影制作方法

資深UI設(shè)計者

通過分析投影制作原理,讓我們更全面的了解投影及常用投影制作方法

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

作者:陳亞    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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

如何讓我們的設(shè)計變得更精致

資深UI設(shè)計者




什么是形式呢,就是組件在相同的功能和元素下,排版、視覺的呈現(xiàn)方式。形式的對比,就是在一個頁面中,不同組件的呈現(xiàn)方式上是否能形成差異化,讓頁面看起來更豐富多元。


分析上方的案例,組件之間并沒有拉開差異性,尤其在詳情頁中,劇情簡介和觀眾影評,影人和劇照,設(shè)計形式接近一致,這就是一個不好的開端。


再看看一些擁有相同問題的設(shè)計案例:


仔細點觀察就會發(fā)現(xiàn),作為飛機稿,不是圖片、顏色用得花哨就夠了的,組件缺少差異性,設(shè)計感就完全無法體現(xiàn)。如果還沒法理解,就再看看下面幾個案例,是不是就沒有形式強行重復的尷尬,表現(xiàn)得更合理:


所以針對作業(yè)中的問題,我們在這個基礎(chǔ)上進行完善,第一步要做的就是在形式上做出區(qū)分。所以我們可以通過以下幾個思路來調(diào)整第一頁:

    - 頭部分頁器和下方的上映/即將上映過于近似,控件形式上需要作出區(qū)分

    - 圖片太多,模塊左右邊緣都是圖片,導致看上去呆板,要減少圖片出現(xiàn)的面積

    - 底部新聞部分不能繼續(xù)使用大圖模式要作出調(diào)整


第二頁的調(diào)整上,主要在下半部分

    - 演員和劇照應該有更加明顯的差異

    - 評論和上方的簡介這兩個不同的組件,形式上卻看起來完全一致


通過原型上的調(diào)整,就可以得到一個初步改版的樣式,各個組件之間保證足夠的差異化和識別性,可以觀察看看是不是比原來的頁面更合理了。


色彩對比是很關(guān)鍵的對比,色彩決定作品給人的第一印象。那么如何為色彩做出對比呢?無非就是鮮艷對比淺色、暗色對比亮色、暖色對比冷色,不用特意套用配色的理論,用比較直觀的感受判斷就可以。

開始配色的過程中,我們首先需要確定主色和背景色,原圖中的主色棕色和背景色白色,搭配起來的效果給我們的感受并不強烈,所以我對原色的棕色做一定范圍的調(diào)整。


然后把主色添加到原型中,并為相關(guān)的一些元素添加合適的輔助色。先看第一頁添加后的效果。


然后我們再為原型增加配圖,這里要重點關(guān)注,以 “作品” 角度切入的話,配圖也是整個界面元素的一部分,包括它使用的色彩。如果一個界面中出現(xiàn)了多處需要應用配圖的地方的話,那么不同的模塊所使用配圖的風格和色彩,也應該有一定的對比,而不是一種風格擼到底的。比如還是之前的這個錯誤的案例:

所以根據(jù)這個原則,我們加入配圖后再看看效果:


如果頭部我們用了色彩主體比較強烈的配圖,那么在下方就應該用比較平淡簡約的,做出明確的對比。


在第二頁中也應用一樣的方法,那么思路如下:

    - 頭部作為權(quán)重最高的組件顏色要更突出

    - 頭部背景和封面的顏色應該具有更大的對比,并能讓文字更容易識別

    - 頭部、劇照圖片較豐富,所以在影人和用戶頭像中應該使用更簡單的配圖


整體增加配圖后的效果:


到這里已經(jīng)有了大致的設(shè)計效果,已經(jīng)可以明顯感覺到比之前的設(shè)計有更好的提升,但是,對比不是到這里就結(jié)束了,我們接著往下做。


文字對比是最容易被忽視的細節(jié),很多設(shè)計師都認為文字只要看得清就行,樣式變化越少越好,這是非常錯誤的思路。


文字樣式的多少主要取決于文字段的類型和需要重點體現(xiàn)的內(nèi)容數(shù)量,而不是沒有理由的精簡到最少。例如看一篇排版成熟的期刊或是論文,其中標題、副標題、正文、引用、標注等作用不同的文字段,都會有不同的樣式來幫助我們?nèi)^(qū)分,如果從頭到尾出現(xiàn)的所有文字都應用一樣的格式,那么就毫無可讀性。


文字的對比,主要通過以下幾個屬性表現(xiàn):

    - 字號

    - 字重

    - 色彩


即:越重要的文字字號越大、字重越高、色彩越深,權(quán)重越低的則反之。


回到我們的案例,在原型階段,其實我已經(jīng)對文字做出了簡單的對比處理,下面我們要進一步細化這個步驟。


修改的分析大致如下:

    - 分頁器作為權(quán)重最高的文字段,所以模塊標題不應該比它更顯眼

    - 多段文本比標題類文字權(quán)重低一級,可以統(tǒng)一它們的樣式并比標題稍弱

    - 注釋類文字比多段文本再弱一級,用較低的灰度

    - 為評分、點贊數(shù)、展開等有“特殊性質(zhì)”的文本增加色相


然后我們可以看看下面修改前后的對比:


通過正確細化文字的對比以后,就能真正讓頁面精致起來,具備豐富的細節(jié)。當然,對于文字權(quán)重的安排和思考會根據(jù)不同的思路和產(chǎn)品需求得到不同的樣式結(jié)果,但絕對不能忽略這個過程。




通過正確細化文字的對比以后,就能真正讓頁面精致起來,具備豐富的細節(jié)。當然,對于文字權(quán)重的安排和思考會根據(jù)不同的思路和產(chǎn)品需求得到不同的樣式結(jié)果,但絕對不能忽略這個過程。


投影的使用既是視覺樣式,也是一個用來制造景深的技巧。只要在一個扁平的界面中,為任何一個元素添加了投影,那么這個界面就存在了上下的空間關(guān)系,處于上方的元素就會得到凸顯,例如蘋果官方應用中的案例:


既然是空間關(guān)系,就要有前后的落差對比,我們要為最重要的元素增加投影,而不是把它當成設(shè)計風格進行統(tǒng)一的添加。所有元素都帶上了投影,就沒有了對比,可看性也會大打折扣。


所以,在這些頁面中,需要突出的元素分析如下:


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

作者:酸梅干超人    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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



UI元素的尺寸到底該怎么定?

資深UI設(shè)計者



一、官方規(guī)范


對于剛開始思考 UI 元素尺寸的新人,通常第一反應都是去看官方規(guī)范,新人都以為官方設(shè)計規(guī)范的作用就是告訴你們元素的大小和怎么設(shè)置,只要看完了就能懂得如何設(shè)計 iOS 或 Android 應用。而實際上,這些規(guī)范并不能幫助你們解決這個問題,因為設(shè)計規(guī)范涵蓋的內(nèi)容遠遠比這些復雜,比如我們之前翻譯過的 iOS 規(guī)范。



我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸,最好的方法就是去下載它們的官方 UI-Kits,如下圖的安卓組件庫所示。



官方并不會提供一個列表,逐一羅列每個元素的長寬和其它參數(shù),所以想要弄明白參數(shù)的問題,要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個按鈕,我們就能看見它的各項屬性:寬 359pt、高 57pt、圓角 14pt;右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。



因為 iOS 組件庫下載下來的都是 dmg 格式的文件,很多 windows 用戶不知道該怎么打開它,這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。


在初期,我們想要設(shè)計出符合官方規(guī)范的界面,就可以嚴格照搬官方的元素設(shè)置。但是,即使官方的源文件所包含的元素及字體已經(jīng)非常多了,在實際設(shè)計過程中,還是會出現(xiàn)它們無法覆蓋的元素類型,需要依靠我們自己去給出尺寸。


還有如字體的應用,官方源文件使用的語言是英文,光是官方應用的兩種 SF 字體,就包含了十幾種字重,所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設(shè)計場景下,我們是不可能照搬這種規(guī)范的!



所以每一個學習UI設(shè)計的新手,都必須要明白,官方的規(guī)范終究只是一種建議,我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容,我們是無法設(shè)計出有趣個性化的界面的,比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計 ”的應用。


官方的參數(shù)決定我們設(shè)計的下限,當你不知道該怎么做,或者設(shè)計的目標就是以系統(tǒng)原生的體驗和視覺為準,那么照搬就行了!后面文章要說的,就是脫離開這些束縛之后,該怎么自定義 UI 元素的尺寸。



二、尺寸設(shè)置原則


UI 和平面不一樣的地方,就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報或畫冊,使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品,無需緊盯著其中出現(xiàn)的每個元素的長寬高的數(shù)值。而 UI 的設(shè)計中,無論字體、圖標還是按鈕,都需要我們嚴謹?shù)囟x它們的長寬高,如下圖設(shè)計一個按鈕的操作:拖拉出矩形之后,我們依然需要到屬性設(shè)置的對話框中去輸入精確到1pt的數(shù)值。


這么做是因為在電子屏幕中,圖像的呈現(xiàn)是由屏幕中的像素點來完成的,像素點是最小的顯示單位,一個像素只能顯示一個顏色,所以如果設(shè)置了帶有小數(shù)點的數(shù)值,那么這個元素的邊緣就會虛化。所以為了避免這種情況的出現(xiàn),我們就得用整數(shù)來定義元素的長和寬。


這當中還涉及到不少比較復雜的屏幕顯示原理問題,尤其是和像素倍率相關(guān)的基礎(chǔ)知識,我會在另外的文章里分享。


需要注意的是,文章中出現(xiàn)的所有尺寸數(shù)值的單位,默認以 iOS 官方規(guī)定的邏輯像素單位「pt」為準,即 XD 和 Sketch 默認畫布的單位,若在 PS 中設(shè)計需要在這個基礎(chǔ)上乘以 2。


只有分隔線,是唯一可以不使用整數(shù)的特例。因為 1pt 的分隔線看起來會非常粗,一點也不精致,感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔,再導出到手機里觀看效果。即使是官方應用,也主要使用 0.5pt 的線條做分隔。


無論是在 iOS 還是在 Android 的規(guī)范中,都提到過使用 8 x 8 的網(wǎng)格做輔助,這導致網(wǎng)上有很多片面的文章會反復強調(diào)對元素的尺寸使用 8 的倍數(shù)。


  • iOS: 使用 8px 網(wǎng)格系統(tǒng):網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰,無需太多的修飾和銳化。將圖形邊界對齊到網(wǎng)格上,減少按比例縮小圖像時出現(xiàn)的半像素和內(nèi)容模糊的情況。

  • Android:所有組件都與間隔為 8dp 的基準網(wǎng)格對齊。排版/文字與間隔為 4dp 的基準網(wǎng)格對齊。在工具中的圖標同樣與間隔為 4dp 的基準網(wǎng)格對齊。


實際上,我們在真實的設(shè)計環(huán)境中,建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可,如 8、12、16、20、24……等,它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要,如:多 4pt 太大,少 4pt 太小,那么我們就可以使用一般的偶數(shù)如18、22、26 等。


以上就是我們一開始要建立的元素尺寸原則,精簡完即:


使用整數(shù),只有分隔線可以使用 0.5 的小數(shù) 

使用 4 的倍數(shù),根據(jù)實際情況可以切換成一般偶數(shù)。


有了這樣的原則,并養(yǎng)成習慣,我們就能在每次設(shè)計前對元素尺寸有個大致判斷,然后再根據(jù)需要按 4 的倍數(shù)調(diào)整


開始我使用 280pt 寬,44pt 高的尺寸,但是覺得有點僵硬,太正式了!這時候反思認為應該是輸入框太矮導致的,所以高度上改成 44+(4x2)=52pt 。這時候又覺得太高了,實際輸入內(nèi)容也沒那么寬,于是再對高減 4,寬減 40,獲取最終結(jié)果。


所以,因為這樣的操作原則,決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的(拖動效率太低),而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計過程就是一個不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。



這里要聲明,在我的描述體系中,控件指的是:界面中最基本的交互單位,如按鈕、滑塊、開關(guān)、分頁控件等,更復雜的如動態(tài)卡片,功能快速入口等,就歸入組件中,便于我們理解。


下面,我會根據(jù)前面定義的基礎(chǔ)原則,分別講解控件應該使用的尺寸范圍。



一、按鈕 ( Buttons )



按鈕是界面交互操作中使用最頻繁的控件了,當然按鈕呈現(xiàn)的形式也多種多樣,比如可以是文字、圖片、圖標、卡通形象等等。在這里,我們只聚焦于矩形的基礎(chǔ)按鈕。


在進入具體參數(shù)的講解前,要先理解一點,按鈕實際上是所有控件中最復雜的一個。并不是因為在設(shè)計樣式上復雜,而是因為按鈕承載了最多的產(chǎn)品訴求,權(quán)重差異極大,例如看下面的案例。



在上圖里,可以點擊的東西不少,我們只說外觀是標準樣式的按鈕,就有 9 個。而這里面,權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的,則是前往新品頁。


要定義按鈕尺寸,我們首先需要整理清楚不同的按鈕在界面或整個應用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當然,顏色也是對重要性表現(xiàn)的關(guān)鍵因素,不過不在這里展開。



按鈕高度


當我們設(shè)計按鈕時,優(yōu)先從高度入手,再去定義寬。為了便于新手理解,我首先從高度上來匹配權(quán)重,分成高、中、低三類:


    - 高權(quán)重:40-56pt

    - 中權(quán)重:24-40pt

    - 底權(quán)重:12-24pt


高權(quán)重的按鈕,類似登錄頁的注冊、登錄,購物詳情頁的購買,流程頁中的下一步,它們的最小高度應該從 40pt 開始遞增。低于這個數(shù)值,那么按鈕就很難在頁面中起到視覺支撐的作用,因為會感覺到它太細了。



中權(quán)重的按鈕,類似個人主頁的關(guān)注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高的交互頻次,所以我們必須得保證它易于點擊。24pt 是在我經(jīng)驗中便于點擊得最小尺寸了。這種按鈕通常是組件中的一部分,不像層級最高的按鈕常常是處于一個孤立的空間,所以高度如果超出 40pt,就會對當前模塊產(chǎn)生直觀的破壞。



低權(quán)重的按鈕,就類似查看更多、標簽、詳情等類型,相對于交互屬性,這類按鈕具備更多的提示屬性,只要讓用戶能看見,又不需要太顯眼。尺寸不大于 24pt,能容納內(nèi)部文字或圖形元素即可。




按鈕寬度


主流的按鈕都是橫向的長方形,正方形的也有,但就是不能變成縱向的矩形。



按鈕的寬度主要和內(nèi)容掛鉤,內(nèi)容數(shù)量越多,按鈕自然也就越寬。唯一的例外,只有高權(quán)重的按鈕,可以無視內(nèi)容的長度。因為它們需要更多的區(qū)域,往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的,可以特殊處理。


普通按鈕,左右邊界與內(nèi)容的距離過大,就會讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設(shè)置按鈕的寬。左右間距的大小,應該小于或等于上下間距的 2 倍。




按鈕圓角


最后,按鈕尺寸還有一個屬性,就是按鈕的圓角。矩形的四角有三種類型,即直角、圓角和半圓。



為矩形設(shè)置圓角,是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利,這種圓角的數(shù)值要給得更加謹慎,只要超出了一定的范疇,就會對視覺的和諧產(chǎn)生影響,我習慣稱呼為——半圓不圓,如下圖右側(cè)的錯誤案例。



所以,我們在設(shè)計圓角的過程中,一定要仔細感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍,小于等于高度的 1/4。例如,一個 24pt 的圓角矩形,圓角的尺寸就應該不大于 6pt。


以上就是按鈕相關(guān)尺寸定義的說明,當然,在真實的設(shè)計需求中可能遇到很多無法滿足的情況,這就需要大家多做嘗試了。



二、輸入框 ( Text Fields )



輸入框也是比較常用的控件之一,它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框,以及首頁上方的搜索欄了。


輸入框的高度,常規(guī)在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠,比如我用下面學生的案例做個演示。




三、步進器 ( Steppers )



常見的步進器,就是輸入框和按鈕的結(jié)合。左右有兩個用來增加數(shù)量的按鈕,中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上,它也介于兩者之間,高度在 28-40pt 之間。下面我再用學員的作業(yè)做次演示,當?shù)陀?28pt 以后,就會發(fā)現(xiàn)在屏幕中的占比實在太小了。



步進器中常見的錯誤,是在我們在繪制左右兩個按鈕,設(shè)置外框的圓角時,并沒有合理的去掉內(nèi)側(cè)的圓角,這是絕對不應該忽略的細節(jié)。




四、下拉菜單 ( Dropdown Menus ) 



下拉菜單要注意它具有多種狀態(tài),默認、展開和選中。默認狀態(tài)與輸入框類似,主流的高度也使用 36-56pt。但是,當菜單展開后,下方多出來的選項菜單,就值得注意了。


菜單的寬度正常情況下與默認狀態(tài)相同,而高度根據(jù)里面包含的選項數(shù)量決定。單行選項的高度,不大于默認的選項框。但也不能過小,新手很容易在彈出菜單中設(shè)定過小的高度,使個控件看起來會非常的別扭。




五、開關(guān) ( Switches )



開關(guān)也是按鈕的一種形式,通常出現(xiàn)在設(shè)置頁的列表中,上方就是它主流的幾種樣式。在設(shè)計開關(guān)的時候,要先確定一個矩形區(qū)域,高度使用 24-32pt,寬度則用 1:2 的比例。如高度使用 28pt,那么寬大致可以使用 56pt,之后再將其他細節(jié)填入。




六、滑塊 ( Sliders )



滑塊形式接近開關(guān),通常在中間有一個操作節(jié)點,下面有一個用來表示區(qū)間的線條。實際上我們該做的就是分別決定它們的尺寸。


節(jié)點如果做的太小,不僅會顯得難看,而且會讓人覺得很難操作。它的直徑應該在 16-28pt 之間。而下方的橫線,寬度由所在內(nèi)容區(qū)域的寬決定,高度一般在1-4pt 之間。



七、頁面指示器 ( Page Controls )



指示器用來展示元素序列,雖然在 APP 中沒有太重要的作用,但既然我們加進去,就要讓它看起來和諧。大多數(shù)人在定義指示器時,不是太大,就是太小。可以只從后面提供的尺寸中選擇,就能保證指示器的尺寸不會出錯。


指示器主要是圓形和矩形兩種形式:


    - 圓形:8、10、12pt ( 直徑 )

    - 矩形:14×2 pt、16×2 pt、20×3 pt



八、提示紅點 ( Badges )



提示紅點也是大多數(shù)應用會使用的一個控件,它的大小應該在 24-32 pt 之間。作為一個圓形,這個控件設(shè)計起來很容易,但設(shè)計師往往忽略一件事,那就是如果中間的數(shù)值超過 10 變成 2 位以后,要怎么處理。


在設(shè)計這樣的元素時,我們要用一個矩形元素來表現(xiàn),即畫一個正方形,然后將圓角設(shè)成最大,那它看上去就是一個圓形。那么每增加一位字符,我們就需要為這個矩形增加該字符的寬度,可以用左右間距判斷。


因為相同字號下,不同英文、數(shù)字的寬度都是不一樣的,所以我們要根據(jù)實際輸入的字段長度去決定圓角矩形的寬度。




九、分頁控件 ( Tabs )



后一個控件,就是分頁控件了,安卓中的 Tabs。這個元素在設(shè)計時也受到排版空間的影響。較為寬松的排版風格,高度就比較大,若擁擠則反之。下面是高度的取值:


    - 高權(quán)重:40-48pt

    - 低權(quán)重:28-36pt


分頁控件主要應用在頭部和頁面中部的組件中,如下方的案例:



雖然很多時候分頁器沒有背景色,但是背景的矩形框是必須畫出來的,即隱藏填充和描邊,這樣我們就可以通過垂直居中的方式,來確定中間文字的位置。



一個完整的分頁控件,里面會包含兩個或以上的選項,所以定義每個選項的寬是必要的。通常,我們有兩種定義方法,一種是選項少時,直接進行均分顯示,另一種是選項較多,采取定寬模式,寬度最小建議在 64pt以上,才不會顯得過度擁擠。



分頁控件選項處于選中狀態(tài)時,有的設(shè)計是修改背景色,有的是修改文字屬性,但今天最常見的就是加入下劃線。這個元素如果定義得不好,會讓整個控件看起來非常粗糙,它需要在樣式中能起到畫龍點睛的作用。



下劃線分為兩種,一種是貼在控件底部的,另一種是在文字下方懸浮的。兩種方式線條應該使用的高度都不應該大于 2pt。寬度的話,前者和每個選項背景區(qū)域相等,后者則可以在 8-16pt 間(小于文字總寬)。下面是正確設(shè)計效果:




十、尾聲


前面說到了不少控件的尺寸,那么真實應用的效果會如何呢?下面我就用原型的方式,不考慮樣式與色彩將它們組合到完整的頁面中去。


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

作者:酸梅干超人    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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



設(shè)計師如何提高自己審美?

資深UI設(shè)計者

關(guān)于比較


審美是一個宏大的話題,無論是文學、影視、視覺、時尚等我們都可以審視它們的 “美”。不同領(lǐng)域的 “美” 有不同的形式,不同的立場,不同的角度,不同的原則。


在這里,我們不談具體某個領(lǐng)域?qū)徝赖囊?guī)則和方式,我們來講講提升審美的具體做法。


講一個例子,在國內(nèi),我們普遍覺得女生在對穿衣打扮的審美上比男生更優(yōu),對于其它經(jīng)過設(shè)計的事物所展現(xiàn)的審美也比男生更好。這種差別在高中時期便逐漸放大,在大學中就能明顯得感覺出來這一點。


這是由于基因天賦論導致的嗎?


是也不是。女生愛美這點是一個既成的事實,有比較大的先天因素,而因為對美好事物的追求比男生更強烈,所以在審美上整體大于男性。


但大家要注意,這個因果關(guān)系的模型太過簡陋,我們要進一步來分析為什么對美好事物的追求就能導致審美上的差異,這就是我們提升審美的關(guān)鍵,先從衣品講起。



原因1:


基于對美的追求,女生往往會花更多的時間在穿衣打扮上,也就意味著要購物。無論是在商場還是淘寶,女生逛起來的熱情與時長都遠遠大于男生,這造成了女生在查看數(shù)量上也遠遠大于男生。



這就和很多設(shè)計前輩告訴你要 “多看” 的做法是一樣的,通過量變引起質(zhì)變,只要你看的夠多,審美自然就可以提升了。


這話說的頗有道理,但依舊在推理上站不住腳。因為,量變?yōu)槭裁匆欢ň湍墚a(chǎn)生質(zhì)變?這個變化的邏輯依據(jù)是什么?在青銅段位里打了一萬盤,也不代表一定能打進最強王者不是。


所以,這就是要引入第二個原因,關(guān)于對比。



原因2:


女生逛街能逛這么久,往往在除了看以外,還會做一件事,就是大量的試衣服(此處被我言中的女性同學可以點個贊讓我看見你們的雙手),經(jīng)常抱了一整籮筐的衣服進試衣間,在里面對著鏡子鼓搗擺 Pose 大半個小時,然后才能挑選一兩件自己喜歡的出來,或者干脆一件也不要。


嗯,不要問我是怎么知道的……


在這個過程里,就發(fā)生了提升審美中最重要的一環(huán) —— 對比。通過大量的對比,來找出好看的、高級的、適合自己的衣服。也因為對比,女生們就通過實踐來了解到,什么樣的衣服是好看的,什么樣的是丑的不適合自己的。


這個過程實際上收窄了選擇的范圍,比如一個個子比較高挑五官比較立體的女生,是很難在比較過后還會選擇那些可愛、少女、小鳥依人的設(shè)計。很可能會偏向運動、男友、中性等風格。


而在有了具體的偏向以后,她們依舊會深入到這個范圍,繼續(xù)觀察、嘗試、對比,然后再次提升對這些東西的理解和審美。


所以,看吧,審美的提升第一步就是這么簡單,通過大量的觀察,然后對比和篩選,就能非常直接的提升我們的審美,這個提升的過程完全依靠的是人的主觀能動性。


日常生活中我們遇到的絕大多數(shù)某些人審美比自己更好的人,都是因為他們在某些方面看過的,比較的比我們更多,而不是依靠天賦的加持,這個思路落實到創(chuàng)作中也一樣。


當然,我絲毫不懷疑人類的歷史長河里,有極少數(shù)人打娘胎里就因為染色體中某些基因片段神秘的律動,而獲得了獨特的審美與創(chuàng)作天賦,但那始終是一個可以忽略的概率。審美的提升是個人主動的行為,不要祈禱上帝在你身上投的骰子能得到你要的結(jié)果。



即使拋開這群有 “天賦” 的神仙,也依舊還有很多第二梯隊、第三梯隊的老法師們通過奮斗逼的經(jīng)歷功成名就不是。


所以別這么自戀總要搬達芬奇、畢加索、梵高等人舉例,每次忍不住想要把鍋甩給天賦前,就問問自己鑰匙配嘛?


什么?您配?


您配幾把……



具體案例


不正經(jīng)到此為止,正經(jīng)臉……


既然說了那么多關(guān)于比較的問題,空口白話難以令人信服,所謂沒圖我說個……錘子。因為很多新人都會說,你覺得大多數(shù)設(shè)計案例看起來都挺好,覺得挑不出什么毛病啊。


所以,下面我挑了幾個與設(shè)計有關(guān)的方向,并找了一些案例出來,你們來看看同類型中,哪一張圖是最優(yōu)的。


而沒被選上的那些,對于你選出來的圖而言,它們當然都是有 “問題的”。



人像攝影




美食攝影



室內(nèi)設(shè)計



產(chǎn)品設(shè)計




海報設(shè)計





管理界面





UI APP 界面





小結(jié)


審美提升的第一步,就是從對比開始,因為這個世界對所有事物的評判,都有不同方向的兩個極端。善惡、美丑、高矮、胖瘦,是對立而相互依存。


就像左拉的《陪襯人》中所講的:


“……另一個卻總是奇丑無比,丑得刺眼,使路人不禁要看她幾眼,并且拿她和她的同伴作個比較。要知道,你上了圈套。那個丑女子要是獨自走在街上,會嚇你一跳;那個相貌平常的,會被你毫不在意地忽略過去。但當她們結(jié)伴而行時,一個人的丑就提高了另一個人的美?!?








之前我們講了關(guān)于審美提升的第一步對比,但是我們留了一個疑問,為什么依靠對比我們可以提升,或者只靠對比我們就一定可以提升審美嘛?審美提升起來就如此容易?


當然不是!


對比的過程只是表象,我們還要追究深層次的原因,那就是“推理”。


在系統(tǒng)性提升審美的道路上,最大的敵人就是——主觀感受。因為無論我怎么解釋和審美提升相關(guān)的方法,總有人會覺得它就是依靠個人審美,不同人審美不一樣,總能找出有的人就喜歡網(wǎng)紅臉但看不上湯唯或者高圓圓的案例。


沒錯,每個人都有自己的審美,無論喜歡什么稀奇古怪的東西都可以,存在即合理。但是,設(shè)計師該擁有的審美是不能這么隨意的,因為作為專業(yè)人士,我們的審美就要符合 “專業(yè)” 的要求,即通過客觀標準來評價事物的內(nèi)在價值。


比如茶、酒、咖啡這類飲品,都已經(jīng)擁有非常成熟的市場,會根據(jù)產(chǎn)品的價值形成對應的價格。而有趣的是,這些飲品都不是甜的,都不符合我們本能的喜好。所以,還有很多人不接受它們,只喜歡帶有甜味的飲料。這種個人的選擇上,任何人都可以偏愛一杯 1 元不到的雀巢的速溶拿鐵,厭棄紅標瑰夏冰滴,但無論你怎么想,也無法改變它們價值不對等的事實,瑰夏手沖有遠遠超出速溶的口感和品質(zhì)。



但超出的部分在哪里?答不答得上來,就是內(nèi)行和外行的區(qū)別。


內(nèi)行經(jīng)過專業(yè)的訓練可以品嘗出其中蘊含的風味、口感,解釋它們與產(chǎn)地氣候的聯(lián)系,儲藏運輸?shù)臈l件,以及沖制過程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒有體系的評價。


如果設(shè)計師對設(shè)計相關(guān)的作品只能做到和外行一樣的水平,那么他也只能是設(shè)計師中的外行,并且缺乏成為優(yōu)秀設(shè)計師的必要基礎(chǔ)。


所以,接下來我們來探究一下,作品的評價為什么重要!


丹尼爾·卡尼曼的暢銷書《思考快與慢》中,將我們的思考方式簡單的劃分成了兩個部分,用了非常簡單粗暴的 “系統(tǒng)1”、“系統(tǒng)2” 命名。簡單概括它們的含義,就是系統(tǒng) 1 是聯(lián)想式思維,系統(tǒng)2是規(guī)則式思維,也可以看成是直覺與慎思的區(qū)別。


先說系統(tǒng)1,直覺是我們大腦對日常接受信息簡化處理的產(chǎn)物,我們的大腦就像處理器一樣,每天都要面對海量的信息通過視覺、味覺等五感導入,如果它沒有任何區(qū)別的對這些內(nèi)容進行深度、縝密的分析,那么它一定會超負荷運轉(zhuǎn)并最終自我毀滅。



所以生物的演化,讓我們的大腦進化出了一套可以對信息進行過濾和簡化的系統(tǒng),格式塔心理學中關(guān)于視覺對物體簡化、完形的理論,也是由其產(chǎn)生,這就是我們對很多事物下意識反應的來源。比如在走路的過程中,看見一輛自行車直挺挺的從遠處像你沖過來,那么你會馬上感覺到危險并往某個方向規(guī)避,整個過程會在不到1秒的時間內(nèi)完成。


而系統(tǒng)2,就是對事物進行邏輯推導的深入思考,如果用它來處理危險的事件,那么結(jié)果可能是我們先判斷這輛自行車行駛的軌跡并得出它前進的方向與我站立的位置相交,并且它的時速約為 40km, 在撞到我的時間還有3S,如果以這種速度撞在我們身上,大概率會發(fā)生……



“BONG~”


那就不用想可能會發(fā)生什么事情,你已經(jīng)被撞飛了,可以直接得到結(jié)果。類似的事情還有很多,無論是對與危險的,還是日常事務的作用,系統(tǒng)1都發(fā)揮出了極其重要的作用。也因為它的有效,而導致我們對它依賴過度。所以,很多人在對于美丑的審視上只依靠系統(tǒng) 1 來完成,而不會深入去思考各中原由。


系統(tǒng) 1 對美丑的判斷,是個人的,但它并沒有 “審” 的過程,專業(yè)的分析也就無從談起。斯洛曼和費恩巴赫所著的 《知識的錯覺》 里提到:


"直覺給予我們一個簡化的、粗略的,而且通常足夠好的分析,這讓我們產(chǎn)生錯覺,自以為所知甚廣。但是當我們慎思時,我們才意識到事物實際上何其復雜,我們真的只是略知皮毛。"


審美和品嘗美酒、咖啡一樣,需要通過了解專業(yè)的知識,培養(yǎng)系統(tǒng)的分析方式進行刻意練習,逐漸擺脫依靠我們直覺做出的不可靠的判斷。


因為任何優(yōu)秀的設(shè)計作品,在創(chuàng)作過程中都不可能是隨性而為的,都是經(jīng)過創(chuàng)作者深思熟慮后的產(chǎn)物,我們對優(yōu)秀作品的評價,就是通過專業(yè)的知識對其創(chuàng)作邏輯進行推導,哪里有亮點,哪些是敗筆,都是清晰可見的。


它不僅幫助我們判斷別人作品的優(yōu)劣,也可以分析我們自己作品的不足,從而得到改進的思路。所以為什么說審美要先于實踐,如果連什么是好的都不了解,自己設(shè)計出來的東西都不知道如何評價,又談何進步?


在我自己的教學經(jīng)驗中,這個問題所表現(xiàn)出來的差異就很有意思。如有一些審美能力較差的學生第一次設(shè)計 Banner ,花了非常多精力和時間,自我感覺不錯,但是作品質(zhì)量極差,會在得到否定的評價以后表示詫異和茫然,因為他們已經(jīng)預感應該得到贊美與肯定。而審美較好的學生則是在完成作業(yè)以后充分的發(fā)現(xiàn)自己設(shè)計的東西和較好的作品之間的差距,那么他希望在我這里獲取的,就是如何縮小這種差距的具體方式,而不是對其作品做出評價,因為他們自己也會覺得作品質(zhì)量差的沒評價的必要。


但不幸的是,在商業(yè)視覺設(shè)計的領(lǐng)域中,提升我們的專業(yè)評價的能力,并不如其它行業(yè)一般有固定的流程和教學,按筆者自己長期的經(jīng)驗來看,如果我們盲目的從藝術(shù)、設(shè)計、心理多個學科的基礎(chǔ)理論開始學起,那提升的速度太緩慢,需要的周期太長,而且有非常強烈的挫敗感,如果沒有好老師的引導,還容易鉆牛角尖誤入歧途。


所以,第一部分的對比,重要性才能體現(xiàn)出來。我們要通過實踐作為基礎(chǔ),來系統(tǒng)性的提升我們的專業(yè)審美能力,通過應用推理的能力,抑制我們無所不在的直覺。


前面扯了這么一大堆,都是在紙面上的探討,不太接地氣,只分析一通原因,和你該如何提升審美沒太多關(guān)系,這是最氣人的。所以,最后一部分,我們來講講具體實施的做法。

先聲明,審美提升是要通過刻意練習的步驟的,誰也不可能只通過區(qū)區(qū)幾篇文章就以為自己已經(jīng)明白了,所以需要執(zhí)行下面這個循環(huán)步驟:


    ? 采集:大量觀察和收集作品

    ? 對比:留下它們中最好的

    ? 分析:尋找優(yōu)劣差異的原因


開始前,還要解釋一件事,就是我們提升審美都要先從某個點開始突破,從你最感興趣的,或是工作關(guān)聯(lián)度最高的設(shè)計類型開始,而不是無差別的亂看。與美術(shù)學相關(guān)的所有設(shè)計中,底層的原則都是近似的,精通一種,就能更容易理解其它種類的作品。



1.采集


觀察的來源多種多樣,強烈建議初期只使用花瓣即可,不要分心到太多的平臺上,選擇太多往往不是好事,會增加干擾,讓我們疲于奔命,模糊一開始的目標。


例如首先要提升在 APP 方面的審美,我們先在花瓣中創(chuàng)建一個 APP 的畫板,然后搜索 APP 相關(guān)的關(guān)鍵字,但不需要關(guān)注第一頁彈出的采集結(jié)果,直接查看 “畫板” 選項。



畫板是別的用戶自己整理的采集合集,我們可以通過封面簡單篩選出你喜歡的,然后打開它們,瀏覽里面收集的作品。



然后盡量按自己最高的要求來找到能讓自己覺得滿意的作品,再將它們 “采集” 到自己創(chuàng)建的畫板中,并設(shè)定一個數(shù)量,比如采集到500張為止。



2.對比:


達到目標的數(shù)量就停下來,因為再采集下去能帶來的作用已經(jīng)非常有限了。雖然采集中已經(jīng)包含了選擇和對比的過程,但我們要更進一步,在自己的選出來的作品里進行比較。相信在完成這個步驟以后,你們已經(jīng)可以明顯感覺到最后 100 張收集的質(zhì)量是遠遠高于前 100 張的。在羅子雄 TEDX 的演講中就說過:你回頭看三個月前收集的作品,會發(fā)現(xiàn)它們都是垃圾……



更極端一點,那就是我們只在挑選的作品中留下最好的十分之一,聽起來是不是很刺激。


也就是我們要開始在自己選出來的作品中,你要刪掉其中的 450 張作品 (最好有留底),即使當中有一些你非常喜歡,而且它們都是你的勞動果實。但就因為這樣,你才會更慎重的進行比較。因為多數(shù)人的采集只是走馬觀花,后面根本就不會看這些東西。


當然,這個過程推薦用 Eagle 或者 花瓣 PRO 客戶端,操作起來會更順手一點。



3.分析:


在上一步操作里,我們會動用我們腦海里所有關(guān)于理性的分析方法來解釋它們的優(yōu)劣,并得出結(jié)論,雖然這些想法可能很幼稚或漏洞百出,但不要擔心,最后一步就是用來解決這個問題的。


我們捉對挑選一些作品出來,在剩下的作品中和已經(jīng)被你否決掉的作品各選一張,然后將它們排列到一起,對比它們的優(yōu)缺點,比如下圖是我從我自己畫板中找出的近期和早期的采集作品。


專業(yè)的分析是怎么得出的?當然不像朱熹提出的 “格物致知” 一般盯著它們思考,就能把設(shè)計的理論給格出來,這條路是走不通的,所以才有王陽明 “知行合一” 的教誨。


我們要把對比的內(nèi)容進行細化,把一套作品看成若干細節(jié)的合集,明確比較的目標,這樣才能得到理想的結(jié)果,比如:


    ? 字體

    ? 配色

    ? 布局

    ? 配圖

    ? ……


比如我們挑文字出來分析,這時候局勢已經(jīng)比較明朗了,上側(cè)的設(shè)計中文字是能被清晰識別的,在不同的字段類型中字重有對應的調(diào)整,主次有序。而下側(cè)的文字應用則缺乏對比,部分文字甚至和背景都無法做出區(qū)分,且字重幾乎沒有變化,使用了多種字體沒有整體性,導致最后的閱讀感受極差。


同理,你可以再試試分析其它幾個細節(jié),是不是簡單多了。如果這時候你再覺得手足無措,完全分析不出什么具體的東西怎么辦?


學?。?


如對比到配色,我們解釋不出為什么右圖的配色不行,那就針對配色去了解相關(guān)的配色技巧、理論,網(wǎng)上可以搜索的分享就一大堆了,比如關(guān)于色彩對比、用色比例等等,將你學到的知識現(xiàn)學現(xiàn)用套進這兩張作品中,也就可以很快的得到驗證。


后面每出現(xiàn)這樣的問題,就現(xiàn)學現(xiàn)賣,不僅可以直接提升我們對作品的理解能力,還能鞏固我們學過的理論知識。多分析幾組對比,你就會發(fā)現(xiàn)對于這類作品的審美和理解已經(jīng)得到了質(zhì)的飛躍,這時候,你就可以以留下的這幾十張作品作為你接受的下限,去收集新的作品,完成下一次循環(huán)。


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

作者:酸梅干超人    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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



脈脈產(chǎn)品拆解丨1.1億職場人士為什么使用脈脈?

seo達人


脈脈,作為職場社交行業(yè)的獨角獸,在他們的產(chǎn)品更新日志里,這段話已經(jīng)使用快2年。相信大家都使用過或聽過脈脈。在脈脈,你可以通過人脈探索去認識眾多互聯(lián)網(wǎng)大廠的高端人才,也可以認識很多創(chuàng)業(yè)公司的CEO。它的「職言版塊」甚至被人比喻為互聯(lián)網(wǎng)大廠的茶水間、紀檢委,你可以在那里獲取到很多互聯(lián)網(wǎng)大廠的八卦信息。本期「設(shè)計大偵探」的職場產(chǎn)品專題,讓我們一起拆解脈脈,看看這個產(chǎn)品到底是如何設(shè)計的。

圖片

 

一、導讀

1.、內(nèi)容結(jié)構(gòu)

全文10396字,分為六個部分,分別是導讀、產(chǎn)品畫像、內(nèi)容服務、求職服務、會員服務和結(jié)束語。

「導讀」可以幫助你快速了解這篇文章是否適合你閱讀;「產(chǎn)品畫像」從商業(yè)模式、用戶角色到迭代記錄,讓你對脈脈有一個全面的了解;「內(nèi)容服務」是實現(xiàn)用戶留存的關(guān)鍵,主要拆解了社區(qū)、人脈和消息三個版塊的內(nèi)容;「求職服務」是商業(yè)變現(xiàn)的重要方式,主要拆解了求職端、招聘端和企業(yè)空間等內(nèi)容;「會員服務」主要拆解了用戶中心和脈脈的會員VIP體系。

圖片

 

2、適合人群

產(chǎn)品拆解是一個知識點比較密集的分析形式,主要適合三類人群。第一類,UI/交互設(shè)計師,可以跳出執(zhí)行層,去思考脈脈的產(chǎn)品設(shè)計策略,提升產(chǎn)品分析能力;第二類,產(chǎn)品經(jīng)理/運營,通過全面的產(chǎn)品設(shè)計拆解、策略推導,獲取產(chǎn)品設(shè)計參考;第三類,網(wǎng)絡(luò)招聘及社交行業(yè)從業(yè)者,通過對脈脈的全面拆解,獲取競品設(shè)計參考。

圖片

 

3.、分析模型

我們主要運用三種模型對產(chǎn)品的功能、設(shè)計進行拆解,由于沒有權(quán)威的官方數(shù)據(jù),所以我們更多以推導的形式去思考脈脈為什么這樣設(shè)計。

第一個,增長模型。由戴夫·麥克盧爾提出,包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦,分別對應用戶生命周期中的5個重要環(huán)節(jié),主要用于分析產(chǎn)品的功能價值。

第二個,上癮模型。由尼爾·法埃爾提出,通過對上千種習慣類產(chǎn)品的調(diào)研,總結(jié)出一款產(chǎn)品如果要讓用戶習慣、上癮,可以按照觸發(fā)、行動、多變的酬賞和投入四個步驟去設(shè)計,主要用于分析產(chǎn)品的功能價值和推導產(chǎn)品的策略設(shè)計。

第三個,社會心理學。主要結(jié)合西奧迪尼的社會心理學《影響力》六大說服力原則——互惠、承諾和一致、社會認同、喜好、權(quán)威和稀缺,去推導產(chǎn)品設(shè)計的用戶心理設(shè)計,主要用于推導產(chǎn)品的策略設(shè)計。

圖片

 

二、產(chǎn)品畫像

1.、產(chǎn)品介紹

脈脈是一款職場社交的APP,首個版本于2013年10月上線,在國內(nèi)首次提出了“真實職業(yè)形象”與“人脈共享”概念,致力于利用科學算法打通“同事、同學、同鄉(xiāng)、同校、共同的朋友”五同關(guān)系,助力中國職場人塑造個人職業(yè)形象,拓展人脈機遇;助力企業(yè)打造雇主品牌,通過脈脈平臺的人才銀行長期獲取并儲備中高端人才。

圖片

 

2.、商業(yè)模式

脈脈以“成就職業(yè)夢想”為價值主張,深耕職場社交行業(yè),目前穩(wěn)居行業(yè)第一。用戶群體主要分為C端職場人士和B端企業(yè)。脈脈打造了社區(qū)、求職招聘、脈課堂等核心業(yè)務,吸引了3000萬+互聯(lián)網(wǎng)中高端人才;脈脈的盈利模式主要依靠會員服務、求職招聘業(yè)務以及廣告服務。

圖片

 

3、用戶角色

脈脈作為一個社交平臺,用戶角色主要分為C端用戶和B端企業(yè)用戶。

C端用戶根據(jù)需求可以分為兩類,第一類是普通用戶群體,這類職場人士主要包含基層職員、中層職員、高管、總監(jiān)和CEO等,他們的需求很簡單,了解行業(yè)氛圍、獲取分享經(jīng)驗以及拓展人脈;第二類是特殊用戶群體,包含獵頭、HR以及各類銷售,他們的需求是通過脈脈認識更多的職場人士,建立好友關(guān)系后,嘗試銷售公司的產(chǎn)品或服務。

B端企業(yè)用戶主要通過脈脈建立企業(yè)脈脈主頁,提高企業(yè)知名度和形象,其次也可以通過脈脈招募人才。

圖片

 

4、用戶畫像

脈脈的核心用戶人數(shù)以男性為主,占比77.36%;24-35歲年齡段的用戶居多,占比55.6%;用戶的消費力很強,中等和中高消費者加起來占比67.97%;用戶主要分布在一線、新一線和二線城市,其中以廣東和北京最多。

圖片

 

5、信息結(jié)構(gòu)

「脈脈」主要分為社區(qū)、人脈、職位/招人、消息和用戶中心五大版塊。「社區(qū)」是脈脈最核心的內(nèi)容,包含了「推薦」、「熱榜」和「同事圈」三塊內(nèi)容;「人脈」提供好友管理,人脈探索,還有查看朋友動態(tài);「職位」是求職服務,用戶可以上傳簡歷找工作;如果是一個招聘者,可以在職位切換到招人狀態(tài),發(fā)布崗位后就可以招募人才;「用戶中心」就是用戶的管理中心,儲存了用戶在產(chǎn)品使用的各種數(shù)據(jù),比如影響力、好友數(shù)等。

圖片

 

6、重要迭代記錄

根據(jù)官方數(shù)據(jù),脈脈首個版本發(fā)布于2013年10月。截止到9月1日,脈脈APP已經(jīng)更新到V6.2.22版本,近一年版本更新次數(shù)達到39次(來自七麥數(shù)據(jù))。

版本迭代重要記錄

2013年10月,發(fā)布V1.0版本,正式推出脈脈,包含人脈管理、職場交流、求職招聘等功能;

2015年10月,發(fā)布V4.0.0版本,界面全新升級,推出「人脈辦事」等功能;

2019年2月,發(fā)布V5.0.4版本,主界面全新改版,升級企業(yè)Logo形象;

2021年2月,發(fā)布V6.0.10版本,產(chǎn)品全新升級;

圖片

 

7、產(chǎn)品生命周期

目前脈脈官方公布用戶數(shù)已經(jīng)超過1.1億,從易觀千帆2022年5月份平臺數(shù)據(jù)顯示,脈脈的活躍用戶人數(shù)547.53萬,行業(yè)獨占率31.68%,是職場社交細分行業(yè)的老大,目前產(chǎn)品已經(jīng)進入產(chǎn)品生命周期的成熟期。

圖片

 

三、內(nèi)容服務

作為一款社區(qū)類產(chǎn)品,「內(nèi)容服務」是實現(xiàn)用戶留存和傳播拉新的關(guān)鍵。脈脈作為一款職場社交產(chǎn)品,為用戶提供了一個內(nèi)容豐富的社區(qū),包含了「職言」、「職業(yè)圈」、「行業(yè)」等熱門分類,而且采用UGC的模式實現(xiàn)內(nèi)容由用戶共創(chuàng),其次為用戶提供了豐富的人脈探索和管理工具,甚至像微信一樣,提供群聊、發(fā)送文件、加入黑名單等功能。最終幫助用戶在社區(qū)找到自己感興趣的話題,和有興趣的朋友建立關(guān)系,成為產(chǎn)品的忠實粉絲。

圖片

 

1、社區(qū)

脈脈「社區(qū)」的設(shè)計,采用了信息流的推薦方式,千人千面,根據(jù)每個用戶的興趣進行推薦內(nèi)容。在內(nèi)容設(shè)計方面,根據(jù)話題熱度設(shè)計了「推薦」和「熱榜」;根據(jù)人際關(guān)系設(shè)計了「同事圈」、「職業(yè)圈」和「好友圈」;根據(jù)發(fā)布類型,設(shè)計了「動態(tài)」、「職言」、「提問」、「創(chuàng)作模版」、「視頻」和「文章」六個類型。

1.1 推薦

1.1.1 全部

「全部」就是脈脈的首頁,采用千人千面的信息流方式設(shè)計,用戶進入脈脈后,可以從這個欄目看到平臺根據(jù)你的興趣、職業(yè)標簽推送的最熱門和最新發(fā)布的內(nèi)容。

圖片

1.1.2 職言

「職言」主要是和職場相關(guān)的內(nèi)容,這個欄目被喻為互聯(lián)網(wǎng)大廠的茶水間、紀檢委,你可以在那里獲取到很多互聯(lián)網(wǎng)大廠的八卦信息。為了鼓勵用戶大膽發(fā)言,脈脈設(shè)計了社區(qū)匿名身份發(fā)帖的形式,這樣無論你寫什么內(nèi)容,其他人也不知道你的真實身份,有效提升了用戶參與度和活躍度。但外界對這個欄目的評價其實褒貶不一,甚至也為脈脈惹了不少大廠的官司,追賠名譽損失。

圖片

1.1.3 門道

「門道」的內(nèi)容主要來自KOL、知名媒體和社區(qū)優(yōu)質(zhì)創(chuàng)作者,質(zhì)量高,以商業(yè)、互聯(lián)網(wǎng)和職場內(nèi)容為主。這個欄目的設(shè)計,主要提升社區(qū)的內(nèi)容質(zhì)量,提升用戶使用產(chǎn)品的時間。其次通過對優(yōu)質(zhì)內(nèi)容的精選,也可以鼓勵用戶嘗試高質(zhì)量的創(chuàng)作,進一步豐富社區(qū)的內(nèi)容。

圖片

1.1.4 職業(yè)圈

「職業(yè)圈」是根據(jù)用戶的職業(yè)標簽來進行分類,目的是為用戶提供更專業(yè)的話題,提高用戶活躍度。目前脈脈的「職業(yè)圈」只有后端研發(fā)、設(shè)計、運營等6個小圈子,其他的暫未開放。

圖片

1.1.5 行業(yè)

「行業(yè)」的內(nèi)容非常垂直,主要聚合了某個行業(yè)的話題動態(tài),從而了解這個行業(yè)就職的基本情況,同時也支持用戶切換其他行業(yè)。

圖片

1.2 熱榜

「熱榜」分為熱帖、話題和行業(yè),「熱帖」每天精選社區(qū)30篇帖子,「話題」每天精選10個話題,「行業(yè)」每天精選15篇帖子。這個欄目的設(shè)計不僅可以精選出社區(qū)優(yōu)質(zhì)和熱門的話題,還可以給用戶帶來社交酬賞,吸引用戶創(chuàng)作優(yōu)質(zhì)的話題內(nèi)容。

圖片

1.2.1 話題廣場

「話題廣場」目前入口很深,在用戶中心的社區(qū)服務才能進入,這個欄目主要聚合了社區(qū)的熱門話題,引導用戶參與創(chuàng)作,最終提高用戶的創(chuàng)作參與度。

圖片

1.3 同事圈

「同事圈」主要為公司的員工提供一個私密交流的版塊,用戶需要實名認證,公司也同步開通同事圈以后才能使用這個功能,目前顯示有字節(jié)跳動、百度、騰訊等互聯(lián)網(wǎng)大廠都開通了同事圈。不過,這個版塊的設(shè)計從用戶真實的角度去思考,有點雞肋,誰都不愿意在下班以后還要去談論工作。

圖片

1.4 搜索

「搜索」是社交平臺一個非常重要的功能,它可以幫助用戶快速檢索到用戶想查找的公司、朋友信息。

1.4.1 引導頁

「引導頁」包含了搜索歷史、搜索推薦、熱門搜索、公司榜和找人榜。不僅為用戶提供豐富的內(nèi)容,還為社區(qū)的熱門話題進行引流,比如熱門搜索,可以告訴用戶今日熱點,吸引用戶訪問。

圖片

1.4.2 結(jié)果頁

「搜索結(jié)果頁」分為綜合、找人、社區(qū)、職位、實時、問員工和話題,顆粒度非常細。這樣的設(shè)計,可以幫助用戶檢索到比較精準的內(nèi)容。

圖片

1.5 發(fā)布

脈脈作為一個UGC社區(qū),內(nèi)容由用戶生產(chǎn)。用戶發(fā)布的內(nèi)容又分為動態(tài)(實名身份發(fā)布)、職言(社區(qū)身份發(fā)布)、提問(可以邀請大廠大佬回答)、創(chuàng)作類型(提供Offer比較和面試經(jīng)歷分享模版)、視頻和文章。

1.5.1 發(fā)布功能

用戶在內(nèi)容發(fā)布頁面,可以選擇參與各種熱門話題,用戶還可以創(chuàng)建投票,分享微博、頭條、公眾號等熱點資訊鏈接。

圖片

1.5.2 職言話題

「職言」是脈脈社區(qū)最核心的一個內(nèi)容版塊,當用戶點擊發(fā)布職言后,系統(tǒng)會提醒用戶采用社區(qū)身份進行發(fā)帖。脈脈的「職言話題」設(shè)計得很豐富,這主要是引導用戶,提高用戶參與度。話題分為熱議話題、找工作、能力進階、職場關(guān)系、趣味現(xiàn)象、生活交友、解壓互助和節(jié)假日8大類型,每個類型下面還包含了數(shù)十種話題類型,這些話題組成了脈脈社區(qū)的核心內(nèi)容。

圖片

 

2、人脈

當用戶之間相互關(guān)注、添加好友以后,就建立了關(guān)系,形成了人脈?!溉嗣}」是實現(xiàn)用戶留存的關(guān)鍵,只有用戶認識了他想認識的朋友,才能形成強關(guān)系鏈接的社區(qū)。

2.1 好友管理

在人脈頁面,用戶可查看已添加的好友、最近的申請、對我感興趣的人和待處理的請求。其次平臺還會根據(jù)你的標簽、職業(yè)、學校、地區(qū)等維度進行深入的人脈挖掘。

圖片

2.1.1 用戶主頁

①頭部展示用戶的詳細信息,包含頭像、姓名、公司、職位、家鄉(xiāng)等信息,其次會統(tǒng)計用戶之間的共同好友,有效拉近用戶之間的距離,吸引用戶建立關(guān)系;

圖片

②從第二屏開始,依次展示用戶動態(tài)、工作、項目和教育經(jīng)歷;在底部,設(shè)計了一個「看了他的人還看了」的好友列表,吸引用戶繼續(xù)深挖關(guān)系鏈接;

圖片

③添加好友的方式有兩種,第一種是「極速聯(lián)系」,用戶開通VIP以后可獲取好友的電話等聯(lián)系方式,快速聯(lián)系;第二種是普通的好友申請,需要好友審核通過后才能成為好友,其次普通用戶每個月只有5個免費的添加好友名額,超出5個以后,需要開通VIP會員才能添加。

圖片

2.2 人脈探索

「人脈探索」有七個維度,分別是根據(jù)職業(yè)標簽推薦、人脈發(fā)現(xiàn)、平臺推薦、同事、校友、同鄉(xiāng)和同行。用戶可以根據(jù)這七個維度進行人脈探索,找到你想認識的職場人士。

圖片

2.3 動態(tài)

「動態(tài)」類似于朋友圈,用戶可以參與社區(qū)的熱門話題,也可以發(fā)心情、問好友和發(fā)動態(tài)。其次用戶還可以把好友加入到「好友圈」,第一時間閱讀他們的動態(tài)和職位變動等信息。

圖片

3、消息

「消息」主要為用戶提供對話交流?!赶㈩愋汀怪饕譃閯討B(tài)提醒(邀請參與、評論和點贊)、主動溝通、好友消息和未讀消息。其次脈脈也提供建立群聊、加入黑名單等功能。

圖片

3.1 聊天對話框

①當用戶處于離線狀態(tài),脈脈會提供一個短信通知對方的功能。用戶需要購買商務會員VIP,才能使用。

圖片

②當用戶開始聊天后,會員可向好友申請「交換手機」號碼,而普通用戶也可以對廣告用戶設(shè)置「加入黑名單」,直接屏蔽用戶消息;

圖片

③脈脈還支持發(fā)起群聊,可以邀請多個好友建立群聊溝通。

圖片

 

4、小結(jié)

從社區(qū)內(nèi)容觀察,脈脈的內(nèi)容其實主要分為兩種類型,一種是「個人動態(tài)」,另一種則是「職場話題」?!競€人動態(tài)」?jié)M足了一個社區(qū)用戶最基本的社交需求,而「職場話題」才是脈脈實現(xiàn)用戶留存的關(guān)鍵。

從脈脈的「話題廣場」內(nèi)容設(shè)計可以看出,脈脈對職場人士關(guān)注的焦點都挖掘得十分精準。從找工作、能力進階、職場關(guān)系到解壓互助,脈脈都設(shè)計了開放、可傳播的話題,引導用戶參與社區(qū)的創(chuàng)建。

最后,為了提高社區(qū)的內(nèi)容質(zhì)量,增強用戶黏性,脈脈還設(shè)計了「門道」欄目,邀請頭部的KOL和知名媒體參與社區(qū)內(nèi)容建設(shè),滿足各類用戶的需求,形成內(nèi)容閉環(huán)。

從人脈拓展形式看,脈脈提倡的「五同關(guān)系」,是整個社區(qū)用戶形成關(guān)系鏈的核心。通過同事、同校、同鄉(xiāng)和同行這四個維度的鏈接,充分挖掘二度、三度人脈,最后成為共同的朋友。

 

四、求職服務

脈脈擁有1.2億職場社交實名用戶,吸引了眾多互聯(lián)網(wǎng)大廠企業(yè)加入。作為一個鏈接雙端用戶的平臺型產(chǎn)品,「求職服務」是脈脈的核心服務,是商業(yè)變現(xiàn)的一個重要方式,它為求職者提供工作推薦,為招聘者提供人才推薦。

圖片

 

1、求職者

脈脈為求職者提供了「在線簡歷」、「職位收藏」、「求職偏好」等功能。「在線簡歷」支持附件簡歷上傳,有效節(jié)省用戶創(chuàng)建簡歷的時間成本。

圖片

1.1 求職機會

「求職機會」是平臺根據(jù)用戶的求職偏好進行系統(tǒng)推薦,幫助用戶和招聘方建立更高效的溝通。

圖片

1.2 職位詳情頁

①頭部展示崗位的基礎(chǔ)信息和HR的聯(lián)系方式,用戶如果要想和HR溝通需要開通VIP會員;如果所在公司有好友,則會顯示擁有好友內(nèi)推機會。

圖片

②在展示完「職位詳情」以后,加入了「公司介紹」,目的是提升崗位的信任度,讓用戶進入企業(yè)的主頁進行更全面的了解;

圖片

③在底部,脈脈還提供了「職位真相」、「薪資揭秘」和「職場晉升路徑」的VIP服務,用戶可以購買該崗位的晉升空間和發(fā)展評估。

圖片

 

2、招聘者

脈脈沒有單獨為招聘者設(shè)計「招聘端」,在「求職」的右上角可以直接切換成招聘者的身份。脈脈為招聘者提供了「簡歷查收」、「職位互動」、「人才庫」等功能,略顯單薄,比較基礎(chǔ)。脈脈的招聘服務目前看上去更側(cè)重于定制化的人才解決方案為主,企業(yè)沒有免費發(fā)布職位的次數(shù),如果需要發(fā)布,就需要開通招聘會員VIP,798一個季度,相對其他求職產(chǎn)品來說,定價略高。

圖片

 

3、企業(yè)空間

脈脈的「企業(yè)空間」吸引了眾多行業(yè)的大廠入駐,比如像新媒體行業(yè)的字節(jié)跳動、社交行業(yè)的騰訊、電商行業(yè)的阿里巴巴等等,在企業(yè)空間,幾乎可以查詢到你所關(guān)注的互聯(lián)網(wǎng)大廠,從而獲取精準的信息。

圖片

3.1 企業(yè)空間主頁

①頭部介紹了企業(yè)的基礎(chǔ)信息,包括員工數(shù)量、職位數(shù)量和公司簡介等;其次還提供了公司的評分,用戶可以給公司打標簽,評分;

圖片

②脈脈為用戶提供了查詢「職級薪資」的功能,可以通過這個功能查看像字節(jié)、騰訊等公司的薪資體系;

圖片

③「企業(yè)號」由企業(yè)自己運營,主要向用戶對外展示企業(yè)的信息,包含了主頁、動態(tài)、職位、產(chǎn)品和相冊等信息,其次還可以查看該公司在脈脈的員工總數(shù);

圖片

④「求職揭秘」關(guān)聯(lián)了和公司相關(guān)的話題,而且像字節(jié)這樣的大公司,還會分部門展示內(nèi)容,滿足求職者的好奇心,也支持用戶直接發(fā)帖提問;「崗位招聘」則是展示企業(yè)對外招聘的所有崗位,用戶可根據(jù)自己的求職意向進行投遞簡歷。

圖片

3.2 職得去榜單

「職得去榜單」設(shè)計得非常有創(chuàng)意,這個榜單不僅可以作為企業(yè)空間的標簽之一,而且還增加了產(chǎn)品的樂趣,比如「脈有最愛投排行榜」,這樣的設(shè)計可以利用攀比心理,相互倒逼,提高用戶活躍度。

「職得去榜單」主要包含「脈友入職熱榜」、「脈友最愛投」、「薪資福利榜」、「大廠員工新去處」、「名校生最愛去」、「業(yè)務前景榜」、「最無年齡焦慮公司」、「團隊氛圍榜」、「個人發(fā)展榜」、「投遞極速響應榜」和「應屆生最愛去公司榜」11種榜單,另外還設(shè)計了「女性友好公司」、「創(chuàng)投機構(gòu)推薦企業(yè)」和「2021年度多維度優(yōu)質(zhì)雇主」。不過遺憾的是,這些榜單的權(quán)重比較低,入口很深,而且內(nèi)容略顯單薄,做得不夠深。

圖片

 

4、脈課堂

「脈課堂」是一個知識付費欄目,內(nèi)容主要包含同行精選、副業(yè)投資、技能提升等內(nèi)容,以錄播的系統(tǒng)課程為主,價格較低。這個欄目主要幫助求職者通過知識學習提升職場、技能方面的能力,增加商業(yè)變現(xiàn)手段。不過目前入口較深,權(quán)重較低。

圖片

 

5、職場福利

「職場福利」是一個充滿創(chuàng)意力和趣味性的欄目,雖然活動的數(shù)量少,活動頻率低,不過可以看出脈脈的用戶運營創(chuàng)新能力非常強。

圖片

5.1 健康加油站

「健康加油站」是脈脈聯(lián)合「中國職工發(fā)展基金會」為關(guān)愛職場人群身體健康策劃的一個欄目,用戶可以在這個欄目發(fā)布關(guān)于身體健康的話題,有健康專家專門為用戶解答,另外還為用戶提供健康科普、課堂講座等內(nèi)容。這個欄目以關(guān)愛用戶身心健康為主,有效提升了品牌服務的溫度。

圖片

5.2 最熱脈

「最熱脈」是一個特別有趣的欄目。它的內(nèi)容是以產(chǎn)品測評為主,比如OPPO的新款Find N折疊屏,通過和脈脈的合作,招募了一批不同職業(yè)的評測官,有產(chǎn)品經(jīng)理、開發(fā)、運營、設(shè)計師,他們從不同的角度去體驗產(chǎn)品,然后發(fā)表真實客觀的評測分享,最終有機會贏取企業(yè)贊助的大獎。這個欄目,增加脈脈運營的趣味性,比如還有一個評測是體驗面膜,這對女性用戶來說,實在是太受歡迎了。

圖片

5.3 職場關(guān)愛聯(lián)盟

「職場關(guān)愛聯(lián)盟」是由脈脈聯(lián)合企業(yè)一起打造的線上線下活動沙龍,主題多以關(guān)注職場人士健康為主,比如脈脈聯(lián)合了京東打造「職場健康關(guān)愛季」,還有聯(lián)合神州租車打造「出行旅游的解壓活動」。脈脈用戶均可以一鍵報名,無需任何門檻,這樣的運營設(shè)計有效提升企業(yè)服務的溫度,拉近和用戶的距離,提升品牌忠誠度。

圖片

 

6、職趣實驗室

「職趣實驗室」和「職場福利」的定位很相似,不過這個欄目更側(cè)重娛樂和解壓,通過設(shè)計一些創(chuàng)新的職場游戲,緩解職場人士工作壓力,提升用戶活躍度。

圖片

6.1 員工面對面

「員工面對面」是一個問答話題集合,以“找工作前,先問員工”的設(shè)計理念,脈脈會把求職者最關(guān)心的薪資、Offer等熱門問題搜集整合,為職場人士提供一份職場問答寶典。

圖片

6.2 人脈升遷名單

「人脈升遷名單」主要指離職好友的升遷名單,通過好友的人脈二度挖掘,用戶可以拓展更多的新人脈資源,結(jié)成好友。

圖片

6.3 好友印象墻

「好友印象墻」有兩種玩法,第一種,發(fā)送自己的印象給指定的好友,增強互動,比如朋友心中我最擅長的事情;第二種,回答好友的印象,比如“你覺得我是什么性格”等。這個內(nèi)容版塊的目的是提升好友之間的互動頻率,加強關(guān)系鏈接,最終提升用戶活躍度。

圖片

6.4 職場競爭力計算器

「職場競爭力計算器」的玩法比較簡單,用戶輸入自己的職級、地區(qū)、就業(yè)方向、工作年限、學歷和月薪后,系統(tǒng)會通過數(shù)據(jù)分析,為用戶生成一份職場競爭力報告,包含同行的流動情況、崗位競爭力對比、平均在職時長年限、同齡人職級晉升百分比和平均薪資數(shù)據(jù)。用戶還可以隱藏薪資,下載長圖分享到朋友圈。通過這種游戲化的設(shè)計,不僅可以全面幫助求職者獲取目前的職場狀態(tài),還可以增強產(chǎn)品的權(quán)威性和用戶活躍度。

圖片

6.5 硬核職場攻略

「硬核職場攻略」通過職場中最常見的12個場景,比如遇到暴力裁員怎么辦、如何在線獲取新客戶等,再結(jié)合脈脈的核心內(nèi)容,為求職者提供一份全面的職場難題解決攻略。這個內(nèi)容的設(shè)計,就像一份脈脈的用戶使用手冊,不僅可以幫助用戶解決實際的難題,還能提升用戶忠誠度。

圖片

6.6 被推薦數(shù)據(jù)分析

這個欄目目前正在公測中,每周統(tǒng)計發(fā)布一次,主要向用戶展示當周個人名片通過哪些場景、功能、標簽推薦給其他人。對于以職場服務、營銷為主的職場人士,這個數(shù)據(jù)統(tǒng)計價值很高,可以通過數(shù)據(jù)去針對性設(shè)計優(yōu)化,提升自己的曝光度。

圖片

6.7 藍月職場生存測試

「藍月職場生存測試」是一個基于脈脈職場發(fā)展模型(決策、感知、控制、協(xié)作、自取和信念)設(shè)計開發(fā)的H5游戲,主要對用戶進行情景式壓力評估,幫助測試者更清晰的理解自己的職場生存能力。這種結(jié)合職場設(shè)計的游戲,沉浸感非常強,再加上充滿了懸疑的劇情,可以極大提升用戶活躍度。

圖片

6.8 1024程序員鑒別挑戰(zhàn)賽

這個游戲的設(shè)計非常創(chuàng)新,為了致敬偉大的1024程序員,設(shè)計了一個程序員鑒別的挑戰(zhàn)賽。當用戶發(fā)起挑戰(zhàn)以后,需要根據(jù)照片和提示找出對應數(shù)量的程序員,當你提交答案,還會關(guān)聯(lián)到用戶的脈脈主頁,提升曝光度。這個游戲還設(shè)計了游戲難度,根據(jù)臉型、發(fā)型、衣服、背包、鞋子和眼神不斷提升游戲難度,讓用戶越玩越上癮,提高用戶活躍度。最后還設(shè)計了「我的戰(zhàn)績」這個內(nèi)容,統(tǒng)計用戶在這個游戲中的最佳戰(zhàn)績,找到的程序員,進一步吸引用戶添加好友,建立關(guān)系鏈。

圖片

 

7、小結(jié)

從求職端和招聘端的拆解可以看出,雖然網(wǎng)絡(luò)招聘已經(jīng)成為脈脈商業(yè)變現(xiàn)的核心手段,但「求職服務」還非常單薄。特別是招聘端,相比網(wǎng)絡(luò)招聘的頭部企業(yè)如前程無憂、智聯(lián)招聘和BOSS直聘,脈脈還有很長的路要走。

不過脈脈的產(chǎn)品運營創(chuàng)新力非常強。比如「最熱脈」,脈脈通過平臺高端的用戶資源,聯(lián)合其他品牌設(shè)計了非常創(chuàng)新的產(chǎn)品評測活動,不僅提升了用戶活躍度,還實現(xiàn)了商業(yè)變現(xiàn)。還有「藍月職場生存測試」這個國內(nèi)首部職場沉浸式互動測試游戲,不僅成為現(xiàn)象級互聯(lián)網(wǎng)行業(yè)營銷案例,也把脈脈的創(chuàng)新能力體現(xiàn)得淋漓盡致。

 

五、會員服務

「會員服務」主要包含了「用戶中心」和「會員VIP服務」,其中「會員VIP服務」是脈脈實現(xiàn)商業(yè)變現(xiàn)的重要手段,不僅包含了B端的招聘服務,還有C端各種權(quán)益服務,是脈脈的核心收入來源之一。

圖片

 

1、用戶中心

1.1 影響力

「影響力」就像積分,它是一種社交酬賞,用戶可以通過提問、評論、發(fā)布文章等行為獲取社區(qū)影響力。其次,通過每日做任務提升「影響力」的形式,進一步提升用戶活躍度,增強用戶黏性。最后,脈脈還設(shè)計了一個「影響力排行榜」,根據(jù)全國、地區(qū)、同行和好友的維度進行排名,進一步利用用戶的攀比心理,刺激用戶完成更多任務提升「影響力」。

圖片

1.2 創(chuàng)作者中心

作為一個UGC為內(nèi)容生產(chǎn)模式的社區(qū)平臺,為了鼓勵用戶創(chuàng)作,脈脈為用戶設(shè)計了「創(chuàng)作者中心」。用戶可以在創(chuàng)作者中心可以查看自己的創(chuàng)作等級,完成平臺每日設(shè)計的任務,參與社區(qū)熱門的話題。

圖片

1.2.1 內(nèi)容分析

「內(nèi)容分析」包含了「最近7天被閱讀總量」、「同行同工種的閱讀量」、「昨日獲得互動次數(shù)」等內(nèi)容,主要幫助職場創(chuàng)作者獲取全面的創(chuàng)作數(shù)據(jù)分析,提供一個強大智能的數(shù)據(jù)助手,從而提高用戶參與度。

圖片

1.3 勛章墻

「勛章墻」分為三類,第一類是「活躍成就」,分別是「社區(qū)主R」、「評論區(qū)區(qū)長」和「劃水的魚」;第二類是「達人認證」,分別是「行業(yè)老師傅」、「脈警長」、「反向背調(diào)者」和「offer收割機」;第三類是「創(chuàng)作勛章」,分別是「社區(qū)人氣王」、「頂峰見」、「神評王」和「評論區(qū)樓長」。通過如此多變性的勛章設(shè)計,可以利用社交酬賞提高用戶的社區(qū)活躍度。

圖片

1.4 人氣周報

「人氣周報」和「職趣實驗室」的「被推薦數(shù)據(jù)分析」很相似,未來不知道會不會合并。目前主要是根據(jù)用戶每周的曝光數(shù)據(jù)生成當周的數(shù)據(jù)報告,比如曝光次數(shù)、人脈推薦、機遇推薦等。

圖片

 

2、會員VIP

脈脈擁有眾多用戶角色,他們設(shè)計了5種會員VIP,滿足了不同用戶群體的需求,豐富了產(chǎn)品的變現(xiàn)形式,而且定價均不便宜,吸金能力很強。

2.1 商務會員

「商務會員」主要幫助用戶開拓精準人脈,購買后可享受12項特權(quán),包含影響力加速、5次極速聯(lián)系、30個添加好友機會、尊貴標識等服務,售價68元每月,屬于脈脈最基礎(chǔ)的會員服務。

圖片

2.2 VIP會員

「VIP會員」相比「商務會員」,價格翻了近3倍,售價198元每月,核心賣點是高端人脈的拓展,比如互聯(lián)網(wǎng)大廠的高管等。用戶購買后可以享受13項特權(quán)和更多權(quán)益,比如15次極速聯(lián)系、90個添加好友機會、聯(lián)系高端人脈等。

圖片

2.3 招聘個人會員

「招聘個人會員」主要面向企業(yè)招聘者,購買后可享受17項特權(quán),包含可發(fā)布5個職位、提供每月30次的及時溝通、批量職位職能邀約和解鎖招聘人才庫擴大搜索范圍等服務。目前這個服務以7天試用的形式吸引用戶開通,到期后價格定價798元一個季度,相比其他網(wǎng)絡(luò)招聘產(chǎn)品,價格略高。

圖片

2.4 銷售會員

「銷售會員」主要幫助有職場銷售場景的用戶挖掘商機拓客,購買后可享受18項特權(quán),包含動向智能追蹤潛在客戶、獲取平臺的精準線索推薦、專享定制化的線索高級搜索等服務。這個服務定價198元每月。

圖片

2.5 職業(yè)發(fā)展會員

「職業(yè)發(fā)展會員」主要是面向個人求職者,購買后可享受15項特權(quán),包含簡歷置頂、數(shù)據(jù)洞察、雙倍曝光、求職立即溝通等服務。這個服務定價58元每月,相比「商務會員」,更側(cè)重于求職的服務,幫助求職者提升求職效率。

圖片

 

3、小結(jié)

從會員體系看,脈脈的付費會員體系拆分成了「商務會員」、「VIP會員」、「招聘個人會員」、「銷售會員」和「職業(yè)發(fā)展會員」。這主要是因為脈脈有多種用戶群體,需求都不相同,這樣的設(shè)計可以滿足不同的用戶需求。比如對于一個普通的職場人士,他可能就只有求職的需求;而對于一個有HR、銷售人員,他們則需要添加更多的好友、更豐富的功能。

從商業(yè)變現(xiàn)能力看,脈脈以手握中高端職場人士資源為賣點,會員定價相比其他網(wǎng)絡(luò)招聘或社交產(chǎn)品都貴。比如智聯(lián)招聘,企業(yè)會員注冊后可以免費發(fā)布5個崗位,BOSS直聘甚至只需要開通一個每月50元的會員就能開始發(fā)起招聘,而脈脈的門檻則比較高。從用戶畫像也能看出,脈脈的用戶以中高等消費群體居多。

 

六、結(jié)束語

距離產(chǎn)品2013年首個版本上線時間已經(jīng)快九年,在拆解完脈脈后,我特意梳理了一下脈脈過去九年的價值主張的升級(數(shù)據(jù)以七麥數(shù)據(jù)為主)。

2013年10月,脈脈首個版本推出,價值主張打造“真實職業(yè)形象”。

2016年3月,脈脈的價值主張是打通職場人脈;

2017年5月,脈脈的價值主張升級到——職場人都在用的社交APP;

2018年4月,脈脈把自己定位成一個——職場社交神器;

2019年2月,脈脈全新升級,致力于打造一個職場社交平臺,成為職場人追捧的社交神器;

2020年8月,脈脈用戶數(shù)突破1億用戶,成為1億職場人士人脈拓展、求職招聘的平臺;

2021年9月,脈脈再次升級,以“成就職業(yè)夢想”為價值主張,并沿用至今。

可以看出,脈脈作為職場社交行業(yè)的后起之秀(Linkedin成立于2003年,天際網(wǎng)和若領(lǐng)網(wǎng)成立于2004年,Glassdoor成立于2007年),設(shè)計了一套適合中國職場人士的社交產(chǎn)品,經(jīng)過多年的努力,成為了中國職場社交的獨角獸。雖然很多人還會嘲笑脈脈其實只是互聯(lián)網(wǎng)的一個茶水間,以看八卦、嗑瓜子為主。但脈脈的產(chǎn)品團隊以“成就職業(yè)夢想”為企業(yè)愿景和產(chǎn)品目標,在這條路上不斷努力著。

就像脈脈創(chuàng)始人林凡對職業(yè)夢想的定義——中國正經(jīng)歷熟人社會向生人社會的轉(zhuǎn)型,脈脈正在堅持努力的,就是跟隨眾多有夢想的職場人士和優(yōu)秀企業(yè)一起探索出一條科學、高效并且緊跟時代步伐的職業(yè)成長之路,成就全球十億白領(lǐng)的職業(yè)夢想。

這個夢想,也許就是脈脈能吸引1.1億職場人士使用的動力之一。

 

參考文獻:

易觀千帆-脈脈APP數(shù)據(jù)分析

七麥數(shù)據(jù)-脈脈APP數(shù)據(jù)分析

脈脈官網(wǎng)


作者:廖慶

轉(zhuǎn)載請注明:學UI網(wǎng)》脈脈產(chǎn)品拆解丨1.1億職場人士為什么使用脈脈?

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


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


輕擬物設(shè)計解析 & 案例演示

資深UI設(shè)計者


在今天的 UI 設(shè)計領(lǐng)域,由扁平化設(shè)計風格占據(jù)主導地位,已經(jīng)是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外,對設(shè)計師而言就是設(shè)計的難度大大降低了。


一個界面的 UI 視覺元素,僅僅只需要圖片素材、矢量圖標、幾何、文字,UI 設(shè)計師的工作僅僅是對內(nèi)容進行組織和排版,涉及到原創(chuàng)的也僅僅只有少量的圖標(大多數(shù)人還畫不好)。


這種狀態(tài)持續(xù)了很多年,看起來歲月一片靜好。


但是,這兩年市場發(fā)出了一些不同的聲音,那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。


比如新擬態(tài)風格在年初炒了一波熱度,各大平臺和公眾號都鋪天蓋地的發(fā)文和介紹,介紹它的設(shè)計理念和設(shè)計方法。


還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標,引起設(shè)計圈的熱議。


首先講講新擬態(tài)設(shè)計,之所以之前只字不提,是因為我對這個風格實在沒什么好感,有種對純擬物借尸還魂的味道,且它的樣式對于信息密度高的應用是完全不適用的,只能活在飛機稿里。


而國內(nèi)大型應用開始在實際項目中上線擬物圖標,意義就不一樣了,證明這樣的設(shè)計是經(jīng)過幾個大廠團隊認可,且有共識的。


當然,這并不因為大廠用了就無腦推崇。而是純扁平的設(shè)計已經(jīng)越來越難滿足部分需要強視覺效果的頁面設(shè)計了。


今天的互聯(lián)網(wǎng)和過去不一樣,用戶的增長留存不再是過去一樣通過裂變和口碑完成,一個產(chǎn)品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的,而互聯(lián)網(wǎng)產(chǎn)品又層出不窮,佛系的等待用戶臨幸是沒有出路,這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場。


佛系不行,當舔狗更不行(成本太高),所以今天大型產(chǎn)品都在對待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來越高,運營活動越來越密集,廣告和強提示也越來越多。比如剛打開了三個應用,進入的首頁大家自己意會……


有點扯遠了,回到話題上。在這種掠奪用戶注意力的思路指引下,再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經(jīng)開發(fā)到極限以后,那么進一步在一些細節(jié)處應用擬物就成為必然的選擇。


而擬物的應用并不可能鋪設(shè)到整個應用中去,因為完全擬物化的設(shè)計降低信息瀏覽效率是必然的,所以它只適合做局部的視覺強化,來加強用戶對特定區(qū)域的感知。


最常見的需要被凸出的要素,就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區(qū)域長期受運營活動支配,相信大家已經(jīng)很習慣了。


只是,這些圖標開始在脫離運營活動的狀態(tài)下,也開始使用非扁平模式,那就不再是運營設(shè)計師的工作職責,而是 UI 設(shè)計師們繞不過去的檻了(知識盲區(qū))!


且除了 APP 外,其它領(lǐng)域?qū)τ跀M物設(shè)計的需求也會開始逐漸提升,尤其是目前越來越復(fu)雜(kua)的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。


作為新世代的 UI 設(shè)計師,多數(shù)人對擬物的設(shè)計可以說是完全空白的狀態(tài),所以是時候要重拾擬物設(shè)計這個傳統(tǒng)藝能了。







前面我有提到,擬物主要應用在關(guān)鍵的圖標上,但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物,而是經(jīng)過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。


首先我們看看,過去優(yōu)秀的擬物圖標和設(shè)計案例,它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造,甚至會非常完整的表現(xiàn)物體表面的材質(zhì)和肌理。


這種圖標單看起來確實很好看、細致。但是,把它丟進我們當前的頁面中是非常違和的,因為它們細節(jié)實在太多了,而且畫起來非常耗時間,不利于項目整體的推進。


所以為了符合畫面的質(zhì)感,又要考慮項目效率,輕擬物這個概念開始被提出和應用,作為一個折中的解決方案。


它和純擬物設(shè)計的共同點在于,也表現(xiàn)光影、結(jié)構(gòu)、透視,但它盡可能精簡了輪廓的復雜度、肌理和層級,呈現(xiàn)出更概念化、理想化、易于辨識的擬物圖形。


所以,我們主要去學習的內(nèi)容是輕擬物的設(shè)計方法,而不是徒手畫照片(這個可以緩緩)!


而輕擬物雖然 “輕”,但它依舊也還具備擬物的基本特征,是有實體質(zhì)感的。但是扁平從插畫到圖標設(shè)計經(jīng)過多年的改版,有各種嘆(hua)為(li)觀(hu)止(shao)的設(shè)計,應用大量的漸變、投影、模糊的效果,比如下圖案例。


這在我們之前圖標的系列干貨中有提過,這類設(shè)計是面性圖標的進階版,它們依舊屬于扁平風格的范疇之內(nèi),不能和輕擬物劃上等號。


對于這幾年才開始學習 UI 設(shè)計的新手來講,擬物已經(jīng)變成一個很陌生的事物,這對行業(yè)來說是比較悲哀的一件事。


因為擬物的設(shè)計不僅僅是畫圖標而已,對它的學習可以全方位的提升設(shè)計師的基礎(chǔ)素養(yǎng),不僅包括對傳統(tǒng)美術(shù)(結(jié)構(gòu)、光影、色彩、透視)知識點的剖析,還包含對 PS 使用的深入探索。


可以說,自從擬物不成為必修題材以后,九成以上的UI設(shè)計師是不會用 PS 的,這極大的限制了他們自身的可能性和作品的多樣性。








輕擬物本身也是擬物,所以它的核心基礎(chǔ)和擬物設(shè)計師一致的,只是省略了更多復雜的細節(jié)。而對于整個擬物的體系來講,最重要的東西實際上只有2個,形體、光影。



形體表現(xiàn)


形體的表現(xiàn),就是對圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標分享中,有寫過面性圖標進階的設(shè)計中,可以包含更多的細節(jié)、內(nèi)部元素,而不是僅僅只有外輪廓。


輕擬物的形體設(shè)計就要處于進階面性圖標或者更難的水平之上,即你要把這個圖形的內(nèi)容有明確的示意并畫出來,而不是用抽象的圖形做填充而已。


比如大眾點評的快速入口圖標,雖然看起來很復雜,但是那是配色上的復雜,而不是形體輪廓上的具象化。


換句話說,擬物插畫的圖形基底,類似扁平插畫風格圖標,不能表現(xiàn)得太抽象,也不能增加過多的細節(jié),需要一種恰到好處的平衡(玄學),這就非??简炘O(shè)計師的判斷和經(jīng)驗了。


并且,在描繪輪廓的時候,新手盡可能的采取正視圖來進行繪制,而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個面,這樣難度會大幅度上升,比如下面這種情況。



光影表現(xiàn)


除了形體外,光影就是整個擬物的靈魂了。


當一個完整的圖形完成填充色時,它是扁平圖案,如果完成光影呈現(xiàn)的時候,它就是三維空間的立體圖形,比如下面這個圓的案例:


在擬物的設(shè)計中,我們對光影的定義是至關(guān)重要的,所以首先就是針對該圖形確定光源的方向,是上方、前方、左上還右上,這對后續(xù)的設(shè)計有一連串的影響。


如果對光影沒有正確的解釋,那么在制作細節(jié)的漸變角度、投影的使用上,就會產(chǎn)生錯誤的設(shè)計,造成光影視覺沖突和矛盾。


在創(chuàng)建了光源以后,物體受到光線的影響就會產(chǎn)生明暗面和投影,可以簡單劃分成4個部分,高光、亮部、暗部、投影。


這和我們學習的素描有一定的差異,美術(shù)中對光影的表現(xiàn)害會包含明暗交界、反光面,這對于輕擬物的來說負擔太重,所以我們要去掉它們,接下來重點講講高光和暗部。


高光是物體作為受光物對光源的直接反映,比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現(xiàn),再或者一拳超人中男主光頭上長期存在的高光配飾(多數(shù)動畫的光頭角色都有)……

高光可以非常有效的增加畫面的層次和對比性,讓物體看上去更有沖擊力和觀賞性。


而暗部,則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意,因為不在受光面,所以顏色會變暗。在實際操作過程中,我們可以通過漸變的方式開控制明暗的表達,但盡量不要直接手動設(shè)置一個漸變色出來,而是為它疊加暗部或亮部的黑白透明度漸變。

了解這幾個特性以后,下面,我們就通過一個實例來講解一下輕擬物設(shè)計的過程吧。








作為輕擬物的演示,直接畫個圖標講一遍怎么操作是沒什么用的,我們要從實際場景出發(fā),用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁:


總結(jié)它的問題,不難發(fā)現(xiàn)首頁頂部業(yè)務功能太多了,頂部圖標就包含30個(加滑動的),雖然每個模塊圖標單看都沒有硬傷,但堆積到一起,就使得頂部缺乏足夠的信息層級和對比性。


我們要做的,就是通過輕擬物的方式,調(diào)整快速入口最大的三個圖標,凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始,講解一下如何完成輕擬物化設(shè)計的升級。


第一步:確認輪廓造型


第一個操作,即確定圖標本身的輪廓。根據(jù)原有圖標的樣式我做了一些改動,包括加粗車頭,減少高度,增加車燈等。并對每一個模塊進行純色的填充,定義它們的色彩和做出區(qū)分。


形體的重要性在于要對圖形本身有比較合理的呈現(xiàn),不要讓比例失調(diào)和圖不達意。



第二步:完善圖形細節(jié)


這一步,就要在原有基礎(chǔ)上,進行下一步的深入。包括對一些細節(jié)交代得更清楚一點,增加一些有趣的小元素等等,完善它的具體樣式。



第三步:增加基礎(chǔ)的暗部表現(xiàn)


在這里,我們就要開始為圖標增加高光了,高光從右上角打下來,那么有疊加關(guān)系的元素就會產(chǎn)生一個向下的投影。并且反向暗部的表現(xiàn),讓整體的立體感稍強。


這一步在軟件中主要使用蒙版功能,通過蒙版在背景上方創(chuàng)建一個圖層,然后添加深色的透明度漸變,就可以表現(xiàn)出對暗部和投影的效果。



第四步:增加高光效果


接著,就是最后一步,將高光添加到畫面中來,講整個圖標的質(zhì)感進行拉升,

undefined


通過上面的演示,我們可以將整個擬物設(shè)計流程精簡成:


1.確定圖形基本輪廓、外形比例、模塊色彩

2.豐富細節(jié)樣式增加趣味性和適當?shù)臄M真感

3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級關(guān)系

4.添加高光元素作為圖形的亮點,拉升層次感


然后,通過這樣的步驟,再來完成后續(xù)的兩個圖形,拆解完的效果如下。



然后,再用這三個修改后圖標套用進原來的頁面,并做出對應的修改,再來看看前后對比:



通過這個對比,我們就可以看出在這個復雜的首頁頭部中,輕擬物風格可以從一眾平面中被凸顯出來,且不會顯得太突兀和復雜。


而這就是輕擬物在項目設(shè)計中的實際作用,當畫面元素已經(jīng)開始超負荷,且容易導致同質(zhì)化的審美疲勞和主次不清時,就是輕擬物登場的時候了。







最后的總結(jié),學習輕擬物就是增加我們完成界面視覺輸出的可能性,為視覺創(chuàng)意增加一些儲備彈藥,以應對越來越復雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。


我們只在這篇羅列了制作的順序和思路,并沒有把軟件的操作完全放出來,一方面是因為時間上來不及(偷懶),另一方面是希望大家不會被軟件的使用框柱。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。


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

作者:酸梅干超人    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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


10年經(jīng)驗總結(jié)的高效 UI 配色策略

資深UI設(shè)計者

從平面到屏幕,CMYK 到 RGB,墨點到像素,色彩越來越豐富,形式越來越復雜。而 UI 的發(fā)展從擬物的繁瑣細節(jié)中掙脫出來,卻在色彩的展現(xiàn)中放飛了自我。


零售業(yè)有個有趣的研究成果 —— “七秒鐘定律”:人們在挑選商品和服務時 ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內(nèi),色彩的作用占到了 67%。


要在小小的手機屏幕中加入這么多顏色,并保持其中的聯(lián)系和邏輯,著實不易。如果你還對配色一無所知,完全不知道配色應該怎么入手,那么你需要了解一下,我?guī)啄杲?jīng)驗總結(jié)的配色思路。






無論我們用 PS、AI,還是 Sketch、XD、Figma,和色彩打交道最多的地方就是拾色器窗口,我們來看看這些案例:


雖然是不同的應用,但是這個拾色器的用法大同小異,但是,很多新人并沒有搞懂拾色器的正確應用邏輯。


很多人知道,UI 的色彩使用 RGB 模式,但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯,也就是色相(H)、飽和度(S)、明度(B)。


HSB 是色彩科學中對所有顏色屬性的理論劃分,是種概念上的定義,可以用來解釋任何色彩,也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化,且 HSB 的選色邏輯更清晰、簡潔、干練。


因為一個正確的選色過程,是先確定出色相,然后再在這個色相維度下選出明度和飽和度,所以我們首先要關(guān)注色相選擇條。


細心的同學應該已經(jīng)發(fā)現(xiàn)了,它們的首尾都是紅色,那是因為色相的序列是一個首尾相接的環(huán)形模式,所以它實際上就是色環(huán)的柱狀展示圖,應用起來和色環(huán)沒有實際區(qū)別。


接下來就要說到重點,飽和度和明度選擇區(qū),我自己使用的習慣,是將這個選擇區(qū)通過黃金三分法的方式切割成等比的 9 個區(qū)域,然后明確它們在 UI 中的對應情緒和應用場景。


在過去的大量分析中,互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會往右上角聚集,一些次要、不可點的色彩聚集在中上方,而文字背景色則聚集在左側(cè),無人區(qū)則是我們重點避開的對象。


下面我們分析幾個案例,看看它們在這個選擇區(qū)中的色彩分布情況:

undefined


大家也可以自己拿一些主流的應用做截圖,然后把它們的 UI 元素色彩排列到拾色面板中,就會得到基本一致的結(jié)果。牢記這 9 個區(qū)域的場景劃分,可以幫助我們非常高效、安全地完成 UI 配色。






在眾多的 UI 設(shè)計規(guī)范中,色彩部分的介紹,都必然包含三種類型,分別是:


  • 主色:應用的核心色彩,品牌色

  • 輔色:豐富頁面視覺和傳達效果的次要顏色

  • 中性:沒有色相的文字、背景用色



2.1 主色的選擇


主色是一個應用的最核心的色彩,品牌的象征色,比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。


確定主色,并沒有大家想象的那么復雜,它的要點在于 —— 你想讓用戶感受到哪種情緒,然后通過情緒關(guān)聯(lián)一個大致的色彩范圍,再進行微調(diào)。


在今天的互聯(lián)網(wǎng)產(chǎn)品中,主色的應用選擇范圍在拾色器區(qū)域的右上角,前面已經(jīng)有解釋了。這和平面設(shè)計中的用色有非常大的不同。


移動端產(chǎn)品要在一個方寸大的空間中爭奪用戶的注意力,引起用戶的興趣,那么低飽和清淡的色調(diào)是無法實現(xiàn)這個目標的,所以今天主色飽和度越來越極致,比如我們之前整理的,發(fā)在站酷的一篇總結(jié):


支付寶主色變更分析


再加上屏幕的 RGB 顯示特性,高對比度,高動態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法,就是在確定色相類型后,在右上方區(qū)域選出合適的色值。



2.2 輔助色的選擇


輔助色是豐富應用中的次要色彩,它會包含一到若干個和主色不同的色彩,除了品牌傳達外,具有更強的實用性。


前面我們提到過色環(huán),這里就要派上用場了。我們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型,它蘊含一個最樸素的原則,即兩個顏色在這個環(huán)形中角度越大,那么視覺差異性越大,對比越強,比如下圖的展示:

undefined

這些配色的模式是不能閉著眼隨便挑的,它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇,是根據(jù)實際場景的功能決定的。


比如通知、提醒、取消用大紅色,確認、同意用綠色或者藍色,收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標準的用色類型,跟著常規(guī)方法來做,是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。


沒有標準元素用色的情況下,再考慮應用色環(huán)的 “角度原則”,越需要被突出的顏色,可以在色環(huán)中離主色越遠,越不需要被突出的則越近。


比如下方攜程的案例,主色在藍色的情況下,支付、保險金標簽這些需要被重點突出的色彩,使用了主色的互補色, 讓我們一眼就能看見并產(chǎn)生強烈的操作欲望。



2.3 中性色的選擇


中性色,是頁面中文字、背景用到的顏色,它們承擔起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要,實際情況恰恰相反。


主色輔助色決定了界面視覺是否出彩,而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例,就應該明白,即使只有黑白灰的狀態(tài)下,我們理解這些頁面和進行使用也不會有絲毫的障礙。


中性色的配置,就是制定一個由深到淺的灰度階梯,應用在對應權(quán)重的元素上,色彩輕重的主要判斷依據(jù)是 HSB 中的 B(明度) 值。

undefined

中性色雖然指的是無個性,但并不是只能用純灰色,常見的一種做法,就是為中性色添加適量的藍色飽和度,提升觀看體驗(滿足 RGB 的某種特性)。


這種做法,顏色越淺的時候飽和度應用色值就越低,將這個規(guī)律在拾色器中進行表現(xiàn),那么我們就可以得到一個 L 型曲線,我稱它為 “中性曲線”。


掌握對于主色、輔助色、中性色的選擇方法,那么對于 UI 配色的奧義來說,你已經(jīng)掌握了一半,接下來就要了解更具體的實踐思路了。






配色并不是只有色彩的色值本身,大家一直在研究各種色彩心理學和理論,卻很少關(guān)心它們應用如何應用,如何配置。


所以,我根據(jù)主色和輔助色應用總結(jié)了一個配色的四象限表格,在分別看看它們對應的案例:

undefined


3.1 主色占比大,色彩豐富度高


主色會作為頂部標題欄或其它重要模塊中的背景色,進行大面積應用,加深用戶對品牌的認知和辨識度。而產(chǎn)品中又包含了大量功能和服務,需要用豐富的色彩來進行暗示,吸引用戶關(guān)注。


undefined



3.2 主色占比大,色彩豐富度低 


這類配色中,主色的應用占比也大,出現(xiàn)頻率高,鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中,或者是相對正式、品牌感強的應用。


undefined



3.3 主色占比小,色彩豐富度高


這是多數(shù)主流應用的趨勢,降低主色占比,留出更多的空間給內(nèi)容模塊的展示上,突出自身帶有的服務和功能。


undefined



3.4 主色占比小,色彩豐富度低


通常,會應用這種方式是因為產(chǎn)品的服務是相對單一,但也需要用戶投入注意力的應用,設(shè)計師就會盡力避免給予用戶過多的干擾。


undefined

每次在進行配色的時候,我們都需要對自己要應用哪種配色應用方式做出規(guī)劃,然后再動手執(zhí)行。有了這個目標,后面在整個項目的設(shè)計中的配色步驟就是水到渠成的事情了。






在實踐前,我們要簡單講講一個應用或者界面的標準配色的流程了,流程順序如下:



undefined



具體應該怎么使用這套流程,我們用一個圖蟲 APP 改版的案例來做演示,首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。



4.1 配色流程演示


原型是 UI 設(shè)計的基本藝能了,在開始具體設(shè)計、配色前,搭建頁面的框架原型是一個必備的條件,下面,是我們已經(jīng)準備好的原型案例。


然后,我們確定以橙色作為應用主色,并在拾色器中進行確認。


有了主色,就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的,那么首先可以用到的就是頂部標題欄的背景色了,以及底部 Tabbar 中的選中色,大按鈕色等。


接著,我們開始整理中性色的使用,選擇新的顏色來填充文字和背景,清晰的表現(xiàn)模塊層級,文字信息的權(quán)重。


最后,就是添加輔助色和其它色彩的元素了,這個步驟建議都是放在最后一步操作。因為色彩越豐富,越難控制,容易讓整個畫面顯得雜亂無序,所以先完成基礎(chǔ)搭建,可以更好的幫助我們判斷彩色的使用是否合理。


下面,我們使用彩色的金剛區(qū)圖標,然后將用戶關(guān)注、認證用戶、標簽等元素使用其它色彩,來豐富頁面的色彩內(nèi)容。

undefined



4.2 其他配色類型應用


根據(jù)第一個方案,我們可以再用這個原型來實現(xiàn)其余的三個方案的配色。


比如下面的主色占比大,但是色彩豐富度低的。因為已經(jīng)不太應用其它輔助色,所以主色填充上我們不再填充頂部導航欄的背景,而是將更多元素應用主色,減少輔助色數(shù)量。

undefined

然后是主色占比小,色彩豐富度高的方案,進一步降低主色應用的比例,然后在金剛區(qū)、標簽等處使用較為豐富的配色。

undefined

最后,就是主色占比小,色彩豐富性也低的方案,那么使用中性色的元素就開始增多,只保留最核心的一些元素使用主色,和極少的輔助色。

undefined

根據(jù)四種不同的配色方案,我們就可以得到四種不同的配色結(jié)果和風格,在每次設(shè)計開始實施前,我們都可以根據(jù)這種做法來做嘗試,并選出自己滿意的方案。


要再次強調(diào),UI 配色是極其強調(diào)形式的應用科學,最后做的往往會和一開始想的效果有極大出入,所以需要我們有幾個備選方案,可以隨時進行調(diào)整,并選出合理的那個。






以上是我們關(guān)于配色有關(guān)知識點的分享,希望可以幫助大家提升對 UI 配色的認識。




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

作者:酸梅干超人    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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


B端設(shè)計|B端圖標不會做?一文講清B端圖標如何設(shè)計和應用

資深UI設(shè)計者


在開始講解 B 端的圖標設(shè)計前,我們先來復習一遍圖標設(shè)計的基礎(chǔ)知識。相信不少同學看過我們之前更新的圖標系列干貨,沒看過的可以先收藏起來,等等看完本篇分享后再去閱讀……

史上最全的圖標設(shè)計教學.1 —— 圖標設(shè)計詳解

史上最全的圖標設(shè)計教學.2 —— 工具圖標的設(shè)計

史上最全的圖標設(shè)計教學.3 —— 其他圖標及應用


1.1 圖標的主要類型


理解圖標,首先關(guān)注的是圖標本身的類型,在整個 UI 體系中,圖標基本就分成3個大類:



工具圖標:包含一定產(chǎn)品功能隱喻的簡化抽象圖形,代替文字節(jié)省界面空間,方便用戶理解

裝飾圖標:主要目的是用來裝飾界面的視覺元素,樣式大于功能,常用于節(jié)日活動中

啟動圖標:產(chǎn)品的啟動圖標,即用來在系統(tǒng)中打開該產(chǎn)品的圖形按鈕,基本以自身 LOGO 為主


在 B 端項目中,應用最廣泛的必然是工具圖標,而裝飾、啟動圖標卻鮮有露面機會。但出現(xiàn)的少,不代表沒有,解釋工具圖標前,我們先優(yōu)先講解下裝飾和啟動圖標在什么情況下會出現(xiàn)。


其中,SAAS 類服務就有很多會重點強調(diào)品牌、情感化設(shè)計的案例,例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標提升界面的質(zhì)感。



啟動圖標則會應用在一些比較大型的項目里,當項目出現(xiàn)了很多下級功能模塊或類似插件的體系時,就會采取使用應用圖標的方式作為入口。


比如 Figma 也是一個 B 端工具,它的插件列表中就可以看見不同的啟動圖標。還有類似 Slack、Invision、Teambition 等產(chǎn)品,一個龐大的產(chǎn)品生態(tài)就必然會衍生出強化不同子產(chǎn)品身份的需求,就自然而然會用到啟動圖標了。



最后,就是我們熟知的工具圖標了,前兩種圖標,在前期畫不好不要緊,畢竟這類規(guī)格的產(chǎn)品會有經(jīng)驗更豐富的設(shè)計或總監(jiān)坐鎮(zhèn),新手當個切圖仔即可……


但是工具圖標,重要性就不言而喻了,B 端項目對工具圖標的需求非常大,幾乎每個組件中都會包含圖標。



雖然今天網(wǎng)上有非常豐富的圖標素材庫,但在形式各異的 B 端項目里依舊是供不應求的,各種行業(yè)特有的功能、實物、隱喻,只能設(shè)計師自己完成。


B 端設(shè)計師在圖標設(shè)計領(lǐng)域的主要工作,就是確定圖標樣式、設(shè)計圖標、導出切圖。下面的分享我們也會主要圍繞工具圖標展開。


1.2 B端工具圖標的風格


工具圖標的應用主要包含兩個部分,線性圖標和面性圖標。



這里再提圖標風格,不是把以前的知識點重新講一遍,而是要強調(diào) B 端圖標的特殊性。和 C 端相比,B 端圖標的實用屬性更高,并不需要過多凸顯本身的視覺風格。


所以,工具圖標中,使用大量漸變、插畫、投影的類型都要排除掉,它們對 99.9% 的項目都只會造成體驗的負影響,不要被網(wǎng)上的追波風飛機稿給帶偏。



適合 B 端項目的工具圖標只要應用最基礎(chǔ)的線性和面形風格即可,一定要劃分出差異,應該只包含圓潤、纖細、尖銳這幾種。



很多人好奇線性和面形圖標在 B 端設(shè)計中有什么使用上的差異呢?答案是沒有差異。


線性和面形的使用,純粹看設(shè)計師在當前場景判斷哪個合適用哪個,只要保證對應圖標風格統(tǒng)一即可。


不過如果遇到一些比較特殊的情況,比如要表現(xiàn)各類設(shè)備的復雜圖標,那用線性的做法還是相對合適和簡單一點。



1.3 圖標的統(tǒng)一性規(guī)范


對 B 端設(shè)計來講,獨立設(shè)計圖標的步驟是必不可少的,應該掌握的圖標規(guī)范還是必須要懂的。


我們雖然沒有 C 端那么多風格和技法的拖累,但想畫好 B 端圖標卻多出了其它難點,那就是一個頁面中出現(xiàn)的圖標實在是太多了。



這就引發(fā)了我們要講的第一個規(guī)范要點 —— “統(tǒng)一性”,所有同規(guī)格類型圖標具有一致性的特征,這些特征包含了:

  • 粗細一致:首先使用統(tǒng)一的描邊、線段粗細參數(shù)
  • 圓角一致:使用一致的圓角數(shù)值,不要一下尖角一下圓角
  • 透視一致:使用接近的透視角度,不要有的側(cè)視有的正視圖
  • 大小一致:視覺的大小保持一致,有均衡的大小感受


如果不能保證統(tǒng)一性的基本要求,那么整個頁面看起來就會非常的廉價、業(yè)余。很多新手處理 B 端項目就是應用了多套素材庫圖標,它們的細節(jié)完全不一樣,統(tǒng)一性當然無從談起。


而讓整套圖標保持統(tǒng)一性,是相當有難度的,其中最難的一點,就是如何讓一套圖標的大小均衡。雖然我們要對每套圖標確定一個固定的尺寸,但不代表圖標實際圖形的長寬數(shù)值是完全一致的。


幾何圖形對視覺有一定的欺騙性,有不同的大小體驗,比如下方案例(魷魚游戲亂入?):



所以,基于這樣的特性,每個圖標本身都包含了兩層屬性,圖標的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小,是透明白的,排版的時候以這個尺寸作為實際的邊緣來測量。



而視覺尺寸,則是在占位尺寸下圖標圖形的實際大小,這個大小是帶給我們實際視覺感受的部分。一套圖標的不同圖形必然視覺尺寸是各不相同的,我們用占位尺寸包裹它們來方便我們進行統(tǒng)一的應用。



所以,使用成熟的圖標素材必然會發(fā)現(xiàn)圖形周邊還會有透明的空白區(qū)域。當然,不同的素材,這個留白也是有區(qū)別的,下一個小節(jié)就會解釋。


最后要聲明一點,一套項目中可以包含多個規(guī)格(2-5個)的工具圖標,比如導航用的圖標比普通工具圖標更復雜一點,設(shè)計師只要保證每種規(guī)格保持的統(tǒng)一性即可。


1.4 圖標的柵格系統(tǒng)


圖標越多,大小的控制越困難,所以專業(yè)的圖標庫繪制就必然會應用圖標的柵格系統(tǒng)進行輔助。


在 Ant 的體系中,一個基于柵格的圖標實際包含3層,背景層、格線層、圖形層。



背景層,即圖標展位尺寸,需要先確定出這個元素的大小,然后才是里面的繪制區(qū)域。通常,柵格系統(tǒng)會為邊緣預留 1-4 像素的內(nèi)邊距(出血位),正所謂四周留一線,日后好相見。


格線層,則是使用的柵格線段,也是最重要的部分。格線層通常由 4 個基本圖形構(gòu)成,包含正方形、圓形、水平長方形、垂直長方形。


這四個圖形的長寬大小不一,原因是為了對應幾何圖形視覺尺寸不同的特征。把它們并列排列,就可以發(fā)現(xiàn)它們的視覺大小非常接近。



這些格線的作用,就是提前幫我們確定好視覺比例,幫助我們快速繪制相同圖形類型的圖標。



但是,不是完美符合這四個圖形要求的圖標該怎么辦,總不能格線把所有輪廓都給你實現(xiàn)出來吧?


格線的另一層作用,也就是最重要的作用,其實是一個用來做測量的工具,而不是輪廓依據(jù)。在幾何視覺差中,最基礎(chǔ)的大小原理是占用面積越大的圖形,尺寸感受越大。所以,長寬一致的正方形大于圓形,圓大于三角形。


所以當我們繪制的非常規(guī)圖形,和類似格線進行對比時,長寬缺少的一側(cè),就要由另一側(cè)增加數(shù)值來填補它的面積。


比如下圖 Ant 官方的電腦圖標,它的寬是橫向矩形,但是中間區(qū)域面積較小,所以增加了高度進行平衡。



再看一些其它的案例



這一步?jīng)]有固定的參數(shù)使用技巧,設(shè)計師需要將完成的圖標置入到其它圖標旁邊進行調(diào)試,確保尺寸是合適的。

格線只是一個圖標大小設(shè)置的參考工具,一切以最終效果為標準。





理解完圖標的基本規(guī)范,就到圖標的使用邏輯了,解決一些常見的設(shè)置誤區(qū)。


2.1 圖標應該做多大

圖標該做多大的,這是目前被問到最多的問題。本來應該是非常簡單的一件事,但很多工作多年的設(shè)計師也搞不清楚。


仔細捋了捋,罪魁禍首就是 AntDesign 這套規(guī)范中對圖標畫布的解釋了。



要重點強調(diào),Ant 設(shè)計圖標的意圖,和一般項目的是完全不同的。Ant 作為一套龐大的開源項目,它的圖標核心特征之一就是 —— 適應性


這些圖標要被應用到各種不同的設(shè)備、顯示器、系統(tǒng)中,圖標尺寸會用多大,在幾倍圖環(huán)境顯示全都是不確定的。所以圖標一開始按越大的規(guī)格完成,后續(xù)實際應用中的縮放、匹配也就越容易,適應性越高。


但是,在我們自己的項目中,這種做法是完全沒有必要的,1024 圖標的負面影響包含:

  • 像素數(shù)過多使得數(shù)值的制定難度大大提升,不管是元素尺寸還是描邊粗細
  • 矢量圖形源文件進行縮放很容易發(fā)生錯位,提前輪廓化會破壞源文件
  • 縮放圖標后描邊的數(shù)值往往會出現(xiàn)非整數(shù)和 0.5 的狀態(tài),虛邊問題嚴重


在常規(guī)項目里,一套項目是可以包含不同尺寸和規(guī)格的圖標的,而不是我們做一套相同風格的圖標在整個應用中無差別使用。


這也意味著,每個圖標在產(chǎn)品中的使用場景通常只有一個尺寸,不需要去面臨縮放的情況。即使需要縮放,也只是這套圖標中的少數(shù)幾個需要,或者相對特殊的項目。


所以,圖標尺寸設(shè)定,就是根據(jù)當前位置合適的尺寸來制定。可以使用素材在已經(jīng)設(shè)計好的布局中嘗試多大的數(shù)值合適,然后創(chuàng)建同樣的數(shù)值即可(盡量以4的倍數(shù)為標準)。



2.2 素材的正確使用方法


我們知道圖標的素材非常豐富,不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站,都提供了海量的素材。但是只要稍微專業(yè)點的項目,往往素材庫都滿足不了,部分規(guī)格的圖標還是需要我們自己重新繪制。


所以說圖標素材就完全沒用了嗎?當然不是。


圖標的正確用法是作為一種快速試錯的參照物,它可以幫助我們實現(xiàn):

  • 參考圖標的具體尺寸在哪個數(shù)值最合理
  • 參考當前場景使用面性還是線性的風格更合理
  • 參考圖標的設(shè)計風格是圓還是尖銳更合理
  • 參考相關(guān)隱喻的圖形樣式哪種更合理


在項目的界面設(shè)計階段,我們一向建議優(yōu)先使用外部的素材,尤其是 IconPark 這種比較統(tǒng)一,還可以快速調(diào)節(jié)圖標樣式的工具網(wǎng)站。



這個過程即使素材找不到和寓意一致的也沒關(guān)系,用相近的圖標替代就可以。等到頁面布局基本完成以后,最后再集中精力對需要繪制的圖標重畫一遍(甚至是在開發(fā)階段繪制)。


通過別人的圖標來快速匹配尺寸、風格、樣式,會幫助我們節(jié)省非常多的時間,也有助于我們設(shè)計出更專業(yè)、美觀的圖標。


另外,就是針對項目一些偏小尺寸的通用圖標,就可以比較放心的應用素材,例如翻頁的左右、更多、下拉、搜索等等。



2.3 圖標的色彩和狀態(tài)


圖標的尺寸、樣式都確定了,最后就是關(guān)于圖標的色彩和不同狀態(tài)的制定了。


前面講過,B 端項目對圖標的裝飾屬性沒有那么迫切,所以正常情況下,太花哨的圖標是要盡量避免的。彩色、漸變色、投影,都不應該在這個情況下胡亂使用。


常規(guī)的圖標只要使用中性色即可,而需要特別對待的圖標,色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。


當然,如果項目涉及到一些特殊的工具圖標,類似工廠、工業(yè)領(lǐng)域表達實體設(shè)備的擬物圖標,可以打破這個原則。但是,同樣避免這套擬物圖標的每個圖標用色不同,盡量只使用 3 種以內(nèi)的顏色完成擬物的填色。



同時色彩的使用還有一個重要的意義就是對圖標不同狀態(tài)的呈現(xiàn),部分圖標會承擔按鈕的功能,包含默認、選中兩個基本狀態(tài)。


普通權(quán)重的圖標,未選中狀態(tài)可以在默認色彩基礎(chǔ)上使用透明度來實現(xiàn)。



高權(quán)重的圖標,則可以在選中的狀態(tài)替換色彩,或者更改圖標的類型,將原本的線性更改成面形并填充色彩制造反差。





完成所有圖標的設(shè)計以后,最后一步就是切圖和導出了,這決定你的圖標能不能被正確運用到線上項目中。

3.1 圖標的收納和命名


在一套專業(yè)的 B 端項目中,已經(jīng)設(shè)計好的圖標是設(shè)計規(guī)范的 “資產(chǎn)” 內(nèi)容之一。圖標的文件不能散落在項目的各個界面里,而是在規(guī)范頁面中有統(tǒng)一的整理和收納。



這種做法的流程是,先在軟件的規(guī)范庫中創(chuàng)建對應的圖標組件( Symbol / Compoent ),然后再在具體頁面中應用,方便后續(xù)的統(tǒng)一管理和修改。


而在這個過程中,我們也需要對圖標有正確的命名方法,來確保團隊調(diào)用、檢索圖標的效率。通常,我的圖標命名規(guī)范如下:

尺寸 / 類型 / 圖標名-狀態(tài)


示例:

48px/導航圖標/表盤頁-默認

24px/一般圖標/搜索-默認


“/” 號的引用主要是方便軟件中對組件層級進行劃分,而我調(diào)用圖標的規(guī)則勢必是先從尺寸開始,再選擇對應規(guī)格,最后類型和狀態(tài)。


提前命名也是方便后續(xù)我們切圖和導出,但要提及一點,圖標的命名不要追求英文化,因為我們的詞匯量不可能實現(xiàn)正式的英文命名規(guī)則,只會寫一堆大家都看不懂的單詞。


而開發(fā)在使用我們的圖標切圖時,也不會用我們之前取的命名,會根據(jù)自己的命名習慣重新命一遍,寫個讓他能看懂的名字遠比用亂七八糟的英文強。


3.2 圖標的切圖格式


接下來,就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗的設(shè)計師切圖就只是隨手加個切片,然后上傳藍湖發(fā)給開發(fā)自生自滅了,這是一個非常不合理的操作。


再或者,強行使用 Fonticon 格式,而不管實際情況如何,造成最后實現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。


切圖是通過前端調(diào)用并在瀏覽器中進行顯示的圖形,而要被瀏覽器正常顯示,就有必要了解適合使用的切圖格式。


圖片的格式包含位圖和矢量兩種,位圖是通過記錄像素色值的圖形格式,假設(shè)一張圖是 100*100 像素,那么記錄 1W 個像素點的色彩,所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標繪制出顯示圖形的格式,可以支持自由縮放。


理論上,矢量格式是最佳的圖標切圖格式,但是它的限制同樣有很多,例如:

  • 無法記錄漸變色
  • 導出輪廓容易有錯誤
  • 無法記錄擬物圖形
  • 無法記錄投影元素


前面說過,普通項目中同一圖標是很少出現(xiàn)一會兒大一會兒小的需求,所以矢量最大的特征無損縮放,往往就不需要我們?nèi)タ紤]。矢量格式切圖的主要出發(fā)點是用來應對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題,而不是網(wǎng)頁端的基本使用。



當一套項目中出現(xiàn)了矢量格式無法覆蓋的圖標時,那么即用矢量切圖,又用位圖,就會顯得非常的混亂。只有類似 LOGO 等圖形元素,才需要考慮 SVG 格式,而不是一看到圖標就上。


所以,最適合切圖的格式就是位圖的 PNG 格式,一方面它是無損的,另一方面它支持透明背景,在切圖應用上可以完美和設(shè)計稿結(jié)合,而這是其它大多數(shù)位圖格式不具備的特征。


當每次項目完成以后,并不需要通過藍湖來實現(xiàn)切圖的導出,如果切圖文件分散在各個項目頁面里,那么一定會有很多圖標被遺漏,尤其是圖標的不同狀態(tài)切圖。


所以,最理想的切圖形式,就是將所有圖標完成整理和命名以后,一起框選,然后導出成 PNG 格式,再同步給程序員即可。






以上就是關(guān)于 B 端圖標應用的所有知識點了。

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

作者:酸梅干超人    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

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

設(shè)計師高效工作的利器——思維導圖到底應該怎么用?

資深UI設(shè)計者


思維導圖,英文名叫 The Mind Map,是一種用來開展、記錄發(fā)散性思維的圖形工具??梢哉f是目前職業(yè)辦公中使用最廣泛最基礎(chǔ)的圖形工具,無論是做故事大綱、頭腦風暴、任務拆解,都會進行應用。



通常,思維導圖會有一個到兩個中心主題,然后中心會擴展出不同的子節(jié)點,并使用連線進行關(guān)聯(lián)。每個子節(jié)點,都可以繼續(xù)建立更下級的節(jié)點,依次類推。


通過這種方法,我們可以建立出比較結(jié)構(gòu)化的信息層級,中心主題是宏觀內(nèi)核,越往下級拓展的,就是越細節(jié)的信息。


而隨著思維導圖軟件的發(fā)展和完善,除中心主題、連線、節(jié)點外,我們還可以在這個圖形中添加關(guān)聯(lián)、備注、圖標、待辦、圖片和附件等內(nèi)容。創(chuàng)建思維導圖的工具在今天隨手可得,無論是桌面端還是網(wǎng)頁端,想要創(chuàng)建思維導圖,從下方選擇一個即可。



思維導圖存在的價值,并不僅僅是我們要做一個方便別人理解的架構(gòu)圖形,而是通過它本身包含的結(jié)構(gòu)層級屬性,來幫助我們梳理自己的思路、想法、靈感。比如你要搞清楚進階設(shè)計師應該具備哪些能力,如何進行學習,那就可以通過思考,查找資料,以樹狀圖的形式記錄和整理。



它最大的價值,就是幫助我們在繪制的過程規(guī)范我們的思維形式,能針對不同節(jié)點實現(xiàn)聚焦和深入探索與思考。而不讓想法特別離散一會兒插畫,一會兒體驗,過一會兒又是平面四要素般毫無章法。


在互聯(lián)網(wǎng)團隊中,使用思維導圖輸出除了日常工作內(nèi)容計劃外,最多應用于和產(chǎn)品需求相關(guān)的表述上,有一些專用的思維導圖類型需要我們認識,包含下面三種:

- 產(chǎn)品功能結(jié)構(gòu)圖

- 產(chǎn)品頁面結(jié)構(gòu)圖

- 產(chǎn)品信息結(jié)構(gòu)圖


下面我們將從這三個思維導圖入手,了解如何實現(xiàn)它們的輸出,以及如果應用思維導圖工具來提升日常工作的效率,以及規(guī)劃自己的職業(yè)技能發(fā)展。







功能、頁面、信息結(jié)構(gòu)圖,都是產(chǎn)品經(jīng)理輸出的內(nèi)容產(chǎn)物,通常會置入到 PRD 中供團隊成員查看和理解。但是,這三種思維導圖不僅看起來差別不大,而且很容易搞混。


2.1 產(chǎn)品功能結(jié)構(gòu)圖:


我們首先介紹的第一個結(jié)構(gòu)圖類型,叫產(chǎn)品功能結(jié)構(gòu)圖,用來解釋產(chǎn)品本身功能的樹狀圖。如果學習過用戶體驗五要素的同學,就可以把它理解成它決定的就是范圍層的內(nèi)容。



通常,產(chǎn)品再開始進行一個新產(chǎn)品功能規(guī)劃的時候,第一件事就是啟動思維導圖工具,開始整理該產(chǎn)品會包含的具體功能,和對應的功能層級,這應該非常好理解。


比如我們用潮汐這個 APP 舉例,如果我要規(guī)劃一個這樣的產(chǎn)品,我會先考慮它包含的核心功能白噪音,然后向后思考白噪音包含哪些種類,如專注、睡眠、小憩、呼吸。每個白噪音類型里,我再根據(jù)對應場景提供更細節(jié)的功能出來。



然后,我再想到,白噪音不是只有固定一種的,而是包含非常多種,是不是就該提供一個放不同白噪音的地方,于是就增加了探索的模塊。在這個模塊里,包含搜索、廣告位推薦、分類推薦功能。每個獨立的白噪音,還可以對它進行收藏、分享等功能。



再然后,就還有添加用戶系統(tǒng),增加會員功能,統(tǒng)計功能,個性化定制等,就可以進一步完善這個圖表將所有想到的功能多羅列出來。



雖然產(chǎn)品需求的推導前面還有別的專業(yè)分析步驟,但落實到具體包含功能的制定上,過程和結(jié)果都如上方的一致。通過思維導圖逐個模塊添加和細化,明確它們的類型、層級。


一個修訂完整的功能結(jié)構(gòu)圖,就能清晰的表示這款產(chǎn)品包含了哪些功能和服務。


2.2 產(chǎn)品頁面結(jié)構(gòu)圖:


產(chǎn)品頁面結(jié)構(gòu)圖,是一個和功能結(jié)構(gòu)圖非常容易搞混的圖形。很多產(chǎn)品經(jīng)理在 PRD 中會在做完功能結(jié)構(gòu)圖以后緊跟頁面結(jié)構(gòu)圖,兩張圖形中會包含大量重復的名稱和相似的結(jié)構(gòu),讓新手一頭霧水。


頁面結(jié)構(gòu)圖等同于體驗五要素中的結(jié)構(gòu)層,用來詮釋產(chǎn)品包含的頁面、層級、分支。



首先明確一個概念,就是功能并不等于頁面。


一個頁面中可能包含多個功能,比如專注頁面中,就包含了時間、開始、暫停、停止、模式、標簽、場景設(shè)置的功能。



而一個功能模塊,也可能包含多個頁面,比如我們在功能結(jié)構(gòu)圖中可能會簡單表示添加聲音的功能,但這個管理需要比較多的操作步驟和頁面來完成。



既然我們知道功能和頁面不是一回事,那么頁面的類型、結(jié)構(gòu)有沒有必要表現(xiàn)呢?答案必然是肯定的,頁面也需要通過樹狀圖做完整的梳理并展示。



一個產(chǎn)品有什么樣的頁面,層級如何制定,都是基于功能分析出來的,合理的情況,是先把功能定好,再想怎么做頁面。功能是產(chǎn)品的內(nèi)核,而頁面涉及到具體的表現(xiàn)形式。


所以,外行在規(guī)劃一個產(chǎn)品的時候,往往是從頁面入手,告訴你整個產(chǎn)品包含了哪些頁面,大概的層級,但對功能的具體規(guī)劃卻往往語焉不詳。


頁面結(jié)構(gòu)圖對于設(shè)計師來說至關(guān)重要,因為它決定了我們應該設(shè)計哪些頁面,可以說是決定了我們的版本設(shè)計任務和工作量。不管產(chǎn)品有沒有提供這個圖形,我們都要自己梳理出來。



2.3 產(chǎn)品信息結(jié)構(gòu)圖:


功能和頁面的問題解決了,就所有結(jié)構(gòu)性問題都解決了嘛?顯然還沒有。


五要素中還包含一個框架層和視覺層,視覺層指具體頁面的樣式,那得用設(shè)計圖來表示,顯然不是思維導圖工具能實現(xiàn)的。那么,就剩下框架層一個還需要我們注意了。



框架層的表現(xiàn)無外乎就是單個頁面包含的內(nèi)容、交互、布局。交互和布局都是由原型圖來呈現(xiàn)的,但不管你有什么跨時代的交互思路還是殿堂級的排版能力,都要面對一個嚴肅的問題 —— 界面里要擺啥?


雖說功能地圖有一定的描述,但顯然還是比較寬泛模糊的,設(shè)計師是需要更具體的字段內(nèi)容的。這就是信息結(jié)構(gòu)圖存在的價值,描述每個功能模塊或頁面下方,包含哪些信息字段內(nèi)容。


比如在白噪音的詳情頁中,要放哪些信息?就一個音頻文件,我們要往里塞什么好。如果作為產(chǎn)品我的出發(fā)點就會是豐富這個頁面的一些信息,讓用戶更有欲望使用,或者進行識別。



仔細整理這些信息,你會發(fā)現(xiàn)不少頁面雖然看起來簡單,但是實際信息量一點都不少。而這些信息,不是設(shè)計師還是開發(fā)隨手做的,都是經(jīng)過產(chǎn)品規(guī)劃才落地的。


每個具體的信息,類似開發(fā)環(huán)境中常說的 “字段”,它也確實是產(chǎn)品經(jīng)理工作中后續(xù)和開發(fā)梳理字段表的雛形。


所以,到這里我們也就基本了解了項目中最常用的三個具體思維導圖。它們包含一定的先后順序,“功能 —— 頁面 —— 信息” 依次推導,從核心到細節(jié)。


梳理這些內(nèi)容,對后續(xù)我們展示、理解項目會起到非常積極的作用,也是 PRD 文檔中必備的圖形元素之一。即使項目環(huán)境中不需要設(shè)計師自己上手,你也要保證可以明白它們各自的作用,以及看懂它們在實際文檔中表述的內(nèi)容。







除了在產(chǎn)品說明中使用思維導圖,它還可以應用在我們工作和學習領(lǐng)域中的方方面面。我們就分別從這兩個領(lǐng)域切入來講一下設(shè)計師如何利用思維導圖,提升自身能效。



3.1 工作領(lǐng)域


在工作上,設(shè)計師可能也需要在競品分析里輸出上面這3種圖形,但還有很多別的工作場景需要我們應用,最常見的莫過于工作待辦事項的整理了。


比如我們對一整個項目的工作內(nèi)容進行梳理和評估,那我們就可以根據(jù)時間線或者內(nèi)容類型,將所有要做的事情梳理成樹狀圖。



或者,做用戶現(xiàn)場訪談這種調(diào)研,一個跨度接近一周的工作,我們也可以用思維導圖將前后需要完成的工作和順序解構(gòu)記錄下來。



任何復雜的工作流程,只要經(jīng)過結(jié)構(gòu)化的拆解,就可以細化成更容易理解和執(zhí)行的步驟。也更能幫助我們判斷工作量和制定時間計劃。



3.2 學習領(lǐng)域


在學習領(lǐng)域上,思維導圖最常用的在我看來有兩個方向,一個是對自己知識體系的整理,另一個是對于學科、書本的知識點整理。


雖然我們可能在各個干貨或者公開課里,看到很多有關(guān)職業(yè)技能樹的說明,并伴隨不同的通行類型。但它們都只是對內(nèi)容講解和輸出的一種抽象圖形解釋,用來輔助作者意圖的表達。


比如我們 B 端課程中使用的 B 端設(shè)計師技能掌握圖形,采取圓的形式,這樣講解起來更方便,也更好展現(xiàn)流程(樹狀圖會太長根本放不下去)。



但對于個人的實際學習來說,這種圖形是沒辦法直接進行記憶的,而且顯然可以整理得更細致,所以我們就可以通過思維導圖的形式,對自己職業(yè)需要掌握的技能整理下來,作為自己的學習目標。



一個靈活的思維導圖,會隨著你對職業(yè)的認識加深和計劃的調(diào)整始終處于一個更新的狀態(tài),輔助你對當前已經(jīng)掌握的,和準備掌握的技能有更全面的認識。強烈建議所有同學都培養(yǎng)這種習慣。


再者,就是進入到更細節(jié)的領(lǐng)域,比如一個簡單的技能,還是一本書,通過思維導圖完成知識點的拆解和整理。這在網(wǎng)上是最常見的思維導圖,就不在這里多做介紹了。








最后一點,就要簡單解釋思維導圖的輸出了。如果我們做的思維導圖僅僅是給自己看的,那么就沒有輸出的需求,但如果思維導圖是要展示給別人的呢?


對于一般的評審還是方案說明,我們只需要在導出思維導圖前,根據(jù)展示的畫布,調(diào)節(jié)方向、類型,以及精簡展示內(nèi)容的數(shù)量,讓文字能被正??匆娂纯?。



但如果我們要在作品集中展示呢?相信大家已經(jīng)看過不少作品集中包含思維導圖展示頁面結(jié)構(gòu)的案例了。



見過非常多新人在問這類思維導圖要用什么軟件制作,答案是本文羅列的那些工具都做不到上方案例的效果。要想在作品集的展示中獲得良好的觀感,就只能自己手動繪制。


也就是說,你們要自己用 PS/AI/Sketh/XD/Figma 等軟件畫一遍。你可以根據(jù)當前的場景和氛圍去設(shè)計合適的樹狀圖樣式,我就不慢慢做怎么畫樹狀圖的軟件教學了,只強調(diào)一個細節(jié),就是連接的弧線應該要怎么畫才準確。


不管你使用上下還是左右的布局,如果應用到弧線,就不能每個弧線全用肉眼預估來拖拽貝塞爾。最簡單的做法,先確定出包含幾個二級節(jié)點,畫出等距離的橫線,然后先拖出最上或者最下的弧線,確??刂贫它c都處于水平方向。然后復制這個弧線,將對應一側(cè)的端點移動到對應橫線上去即可。



切記要保證弧線的一致和穩(wěn)定,而不是歪歪扭扭的。再之后,想要設(shè)計成什么樣的風格,增加什么樣式,就根據(jù)你們自己的想法決定了。






強烈建議大家日常多使用思維導圖,因為它能很好的鍛煉我們結(jié)構(gòu)化思維能力。用的越多,你就會發(fā)現(xiàn)在你生活困擾你的問題就會越來越少。



 藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系。 



作者:酸梅干超人    來源:站酷





分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔