<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          這么好的設計排版技巧,不看虧了??!

          seo達人

          一、運用分組建立層次 

          圖片

          在設計中,相鄰的元素比分開較遠的元素會更加吸引人注意,在做設計閱讀順序的時候,利用設計分組是一個非常有效的方法,將不同信息進行視覺間距分組,能提升用戶對于內容上的理解。

          如上圖slack的設計,插畫引導圖和底部按鈕上面文字拉開了距離,使得內容更聚焦。第二個界面的頂部頭像和下面的文字也是通過分組形成了對比。

          圖片

          stadium-live的產品設計上,登錄頁面按鈕為一組,頂部品牌LOGO和slogan一組,人物為一組,每組信息之間分組非常清晰,每一組都不會對對方視覺互相干擾,間距非常合理,用戶閱讀從一組信息到另外一組信息也很清晰。

          后面兩張頁面也是如此,頂部的導航,和下面表單信息,以及頭像和底部按鈕,通過分組處理,內容更加符合用戶的視覺動線。

          圖片

          在球員定制的處理上,最左邊那張圖,通過卡片和線條分組處理,從視覺上很清晰的看見排名,哪個球隊和哪個球隊之間比賽。

          圖片

          當一組信息比較接近,證明必須是有關聯的,如果距離比較遠,這意味著這組信息和他們是不同的,簡單來說,通過鄰近性,通過分組創造這些關系,為信息帶來層次。

           

          二、運用空白建立層次 

          圖片
          空白也是視覺設計元素,并不是留白就是空著,如果設計中留白運用合理,可以幫助用戶理解很多信息,因此任何設計都需要通過適當的負空間來傳遞信息。如上圖我喜歡的一個應用classpass設計非常極簡,頁面中大量運用留白來凸顯內容。
          圖片

          classpass的設計不會使用太多的視覺元素,而是運用留白把內容進行分組,每個頁面的留白恰到好處,同時留白本身就是對信息進行分組,所以頁面中減少了很多線條使用,頁面會更加干凈有品質感。

          圖片

          must是一款電影軟件,整體設計非常雜志感,頁面就是通過圖文處理,以及留白空間的處理,增加對比,基本產品體驗你不會感覺到視覺負擔,元素之間的信息組織的非常清晰。

          圖片

          在電影展示頁面,信息的處理,以及打分設計上,重復運用留白來處理信息層級,在設計中,當你元素周圍留白越多,它產品的注意力也越強,如右邊的打分頁面,幾乎所有焦點都在這個彈窗上。

          圖片

          artsy是一款藝術品電商網站,整個app的設計也充滿了藝術氣息,每次我設計找不到感覺時候就會去打開看看,里面的排版,還有設計的細節處理,都值得我學習,但我喜歡的還是他對于板式和留白空間的處理。

          圖片

          在首頁設計,我最喜歡他相框的設計,就像欣賞美術館的一幅畫,頁面留白也非常大,襯線體和非襯線體的對比也運用的非常好。

          圖片

          整個APP的設計被大量留白包圍,雖然現在流行各種質感,各種光感,C4D的設計,很多設計師認為設計越多越好,但是大量視覺元素會讓頁面過于飽和,如果沒有很好的視覺引導,用戶會感到不知所措。

           

          三、運用氛圍建立層次 

          圖片

          有設計感的紋理從視覺感受上比簡約主義更能吸引用戶注意力,但是背景紋理運用不能為了設計而設計,而是需要和產品內容有關系。比如紋理和文字內容,和信息是密切相關的。如上圖,是一款打車軟件,背景結合了打車的地圖,公路線路,用車場景,讓頁面對比和設計層次更加突出。

          圖片

          jour這款產品在設計上,背景通過有層次的氛圍紋理和質感,使得頁面氛圍感很強,層次細節更加豐富,當然在設計的時候切忌對于設計氛圍過度運用,那樣會讓用戶分散注意力。

          圖片

          其它場景上氛圍紋理的運用,卡片上通過系列插畫的塑造,頁面雖然有很多插畫,但是頁面平衡感同樣重要。需要考慮用戶在界面看見的和其它頁面視覺感受是一致的。

          圖片

          氛圍除了圖形,其實色彩也是很重要一種方式,我很喜歡的ASANS的設計,在背景上就是運用了一些幾何圖形的肌理效果讓整個空間感更加豐富,這些幾何圖形豐富細節同時也讓整個內容更加凸顯。

          圖片

          如上圖是他里面一個注冊登錄場景,在界面中,除了背景灰色底紋通過幾何圖形來烘托視覺層次,同時在插畫上也是非常巧妙,用戶輸出,完成后,整個插畫到品牌圖形的連貫變化體驗非常好。

          圖片

          Sift是一款新聞類閱讀產品,這類型產品設計一般就是文字排版,設計簡約為主,但是sift運用了一種大膽的設計,背景氛圍上采用一些點線底紋的肌理效果,和內容結合的很平衡。

          圖片

          Lugg是一款貨車APP有點像國內的貨拉拉,整個設計也氛圍感非常強,運用的全插畫設計,在頁面每個細節,從引導頁,讓頁面核心功能設計都能看見完整插畫的運用,我目前我看見運用插畫氛圍作為主設計最好的產品。

          圖片

          感興趣的同學可以去美國蘋果商店去下載使用,頁面中增加氛圍是一種增加層次很好的方式,但是同時需要主要好視覺平衡,不要做到本末倒置。

           

          四、運用襯線字體和無襯線字體建立層次 

          圖片

          字體對比,運用襯線字體和非襯線字體對比是非常常用的方式,如上圖運用了Adelle Sans字和Tiempos字體這兩款字體的對比讓頁面內容結構非常清晰。

          圖片

          上圖官網的設計,干凈的排版,通過字體大小,字型進行對比,體現出視覺層次。

          圖片

          字體的選擇本身也是設計中很重要的因素,好的設計不僅能提升設計品質,同時也能讓頁面視覺層次更加分明。

           

          五、結語 

          回歸設計本質,其實我一直覺得設計這個工作就是一個翻譯官,我們的使命是讓用戶使用產品過程中更加易懂,同時我們能方便地解決他們的問題,而不僅僅是專注在界面美觀本身上,今天分享的這些提升設計層次的一些技巧,也是為了讓頁面有更好的體驗。


          作者:叮當貓

          轉載請注明:學UI網》這么好的設計排版技巧,不看虧了?。?a style="color:#428BCA;text-decoration-line:none;">

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          哦,原來這樣可以更高級!

          seo達人


          圖片

          如果光看視覺不論主題感覺還不錯的,但最大的問題也是不符合主題,主體是一個現實的籃球運動員,卻搞了很多魔幻的元素,結果就很像魔幻籃球似的,這樣在練習的時候可以試試,但作為一個項目需求肯定是不會讓你過的。

          再來看看修改后的:

          圖片

          修改后的圖整個就和諧統一多了,更符合主題。

          我們做圖的時候符合主題是最基本的,那到底該怎么做呢?今天就給家分享一下設計思路。

           

          一、明確風格

          視覺設計師經常會遇到各種各樣的需求,首先我們要做的第一件事就是了解需求,明確風格。
          我們可以通過了解需求背景,和觀察人物素材來了解,之后再去推進設計。

          我們來看看素材:

          圖片

          這不是NBA巨星科比么?!明顯是現實題材,不應該加入一些魔幻、科幻什么的元素進去。

          圖片

           

          二、明確需求

          明確需求的目的是為了抓住設計關鍵點,方便為接下來的設計推進提高效率。比如這次作業是要求大家設計一張帶有神秘感的剪影海報,我們可以找剪影的參考來提取這類視覺表現的關鍵點是什么:

          圖片

          找了很多參考,可以看到剪影視覺的效果還是蠻強的。很容易出效果,通過觀察我們要學會提取里面的關鍵點:

          圖片

          我們要做的就很明確了,在一個場景里設置一個光源,再加入人物調黑放在光源前面形成對比。

           

          三、元素聯想

          我們的人物素材是籃球員,我們就可以通過籃球運d動員這一個點為中心去發散聯想:

          圖片

          再用這些點來組成畫面,就會很符合主題了。

          比如我們的場景可以是球星的發布會背景墻:

          圖片

          一個簡單的場景就ok了

          然后是我們的光源:

          圖片

          原圖中就是一個圓,就比較普通。
          其實光源也可能是各種各樣的造型,來增加設計感和主題感。我們剛才聯想到有籃球,光源我們就可以用籃球來做。但我又懶得畫,怎么快速的做一個呢。這里給大家分享個省力的小辦法。

          我直接從開源的圖標網站去下載,里面的圖標都可以免費用,且可以下載到矢量文件。
          圖片

          直接下一個不錯的放圖里看看:

          圖片

          emm,感覺有點太粗了,一點也不透氣,沒關系。我們把源文件拖進AI里調整下描邊粗細就可以了:

          圖片

          再放回圖里看看:

          圖片

          這樣就輕薄透氣多了!再給圖形加個外發光效果:

          圖片

          光源就完成了,又快又貼合主題棒棒的!
          接著可以繼續豐富畫面,比如把光源想成一個霓虹燈,那可能需要繪制一些線路,也可以在墻上張貼一些人物宣傳海報:

          圖片

          還可以增加燈光對地面的倒影,直接把墻上的籃球圖形復制一個下來,使用透視工具拉一下變形,放到地面上:

          圖片

          這里要注意做好兩個點,倒影才能更真實:
          1.靠近光源的位置會很亮,遠離光源的地方要暗下去;
          2.靠近光源的位置邊緣比較實,遠離光源的地方要用高斯模糊虛化下去。

          圖片

          這樣整個場景就很豐富啦。

          接下來是人物的處理,有一個點給大家分享下:

          直接把人物涂黑也有剪影的感覺,但是毫無細節,人物就很平,薄的像紙,一點都不立體

          圖片

          為了解決這個問題,我們可以給人物的邊緣加一些過度的光,注意觀察手臂的位置:

          圖片

          有過度光的人物是不是就顯得很立體啦?

          這個同學的也有點這個問題,整個手臂沒有加過度光,所以會顯得有點平:

          圖片

          加完過度光看下整體效果:

          圖片

          一張帥帥的人物剪影海報就完成了!

           

          四、其它的一些附加知識點

          1.低視角會讓畫面充滿壓迫力。

          以Amor的作業為例:人物我們不能調,

          但我們可以調整地面的俯視角度。比如右邊這張,就放大了透視,就給人一種仰視角色的感覺,整張圖更有壓迫感。左邊這張因為透視比較小,視角就比較高,顯得是在俯視角色。就缺少了一點氣勢:

          圖片

          小小的改動就可以提升一個氣質。

           

          2.在光源里加入一些碎片會讓畫面更豐滿,充滿細節。

          這是兜兜一張作業,也是很不錯的。

          圖片

          我們觀察下底部光源的位置的區別:

          圖片

          很多同學打完光就會讓它空著,就會顯得很單一,光也會顯得有點蒼白平淡。其實我們可以在光源里加入一些細節,就可以讓光的層次更豐富了,從而讓畫面更耐看。


          作者:慢熱

          轉載請注明:學UI網》哦,原來這樣可以更高級!

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          設計策略|源源不斷的創新思路(激進篇)

          seo達人


          圖片

           

          本篇講述:激進式創新

          激進式創新是相對罕見的,它同時依賴革命性的技術和創新的商業模式來解決問題,激進創新的發生往往伴隨著產品的創新、組織創新等連鎖反應甚至引起產業結構的變化。科技的創新帶來了很多革命,iPhone開創了電容觸屏時代,ARVR打開了元宇宙之門;新的商業模式利用現有的資源引起行業巨變,如Uber和滴滴用物聯網技術關聯私家車和出行乘客,連接異地旅者和房東的Airbnb等都是激進式創新。

          作為設計師,我們在技術和用戶間承接著場景和體驗,了解激進式創新的方法可以讓我們在工作更好地幫助團隊突破。很多具有劃時代意義的創新產品其實都有設計師創始人的身影:顛覆傳統酒店行業的Airbnb(愛彼迎)的聯合創始人Rian Chesky和Joe Gebbia,首創了華夫格底跑鞋的Nike(耐克)創始人Bill Bowerman,設計開發了凹凸面圓點拼接積木的LEGO(樂高)創始人Ole Kirk Kristiansen,顛覆內容傳播權威、開啟全民播客時代的Youtube聯合創始人Chad Hurley…他們都是設計師出身,基于自己對行業、產品和用戶需求的洞察革新了行業。

           

          一、激進創新啟動 / 策略2則

          圖片

          上一篇提到漸進式創新的起點難度主要在于溝通和傳達,而激進式創新依賴創意突破,有兩類需求命題可能會讓創意發散變得艱難。其中一種是需求命題過于具體,這可能會限制創意的發散空間;另一種則是需求命題過于宏大,無邊無際讓設計師不知從何著手調研和發散。針對這兩種狀態,下面的方法將針對性地幫助設計師們解題。

           

          策略1.  問題挖掘 Dig Deeper

          命題過于具體很可能會限制創意的發散空間,仿佛解決方案已經有了安排,那設計師很可能會被限制在已有思路中。問題挖掘就是針對這類命題打破砂鍋問到底,從而幫助自己更好地獲得發散思路。問題挖掘就是寫下所有能想到的問題,挖掘前因后果,了解內外機會和風險。

           

          提問可以從以下三種工具角度著手:

          圖片

          • 5W1H問題

          5W1H分別是:是什么,是誰,為什么,在哪里,在何時,如何。從這六個提問開始著手列出所有想問的問題,并繼續發散關聯的子問題。然后嘗試自己回答剛剛列出的問題,有些問題可能和命題無關則跳過。當我們自行完成了梳理篩選后,就可以將這些問題在和需求方溝通和訪談時提出,進行深入了解,獲得靈感。

          • 是什么(What) “我們的創新想要解決什么問題?關鍵假設是什么?”…
          • 是誰(Who)“產品創新的購買者是誰?用戶是誰?相關利益人是誰?”…
          • 為什么(Why)“為何這個問題重要?為何發生這個問題?為何之前未能解決?”…
          • 在哪里(Where) “這個問題發生在哪里?之前在哪里解決?還有哪里有相似的問題? ”…
          • 在何時(When)“這個問題何時發生?問題何時開始?何時可以解決?” …
          • 如何(How)“如何解決?已經嘗試了哪些解決辦法?”…
          • 5個為什么(5Why)

          經典的連問5個為什么。如果我們針對看到的結果,只問一個“為什么”,很容易停在第一層的表象原因,只有不斷的深入挖掘才可以層層遞進,找出最關鍵的底層原因。

          • “機器為什么停下來?” 電路過載,使保險絲熔斷。
          • “為什么?” 軸承潤滑不足,因此被鎖定。
          • “為什么?” 機器人上的油泵沒有循環足夠的油。
          • “為什么?” 泵入口被金屬屑堵塞。
          • “為什么?” 泵上沒有過濾器。
          • 層層擴散

          如果五個為什么是向內層層遞進,那層層擴散就是向外發問。以最為基礎的命題問題作為中心點擴散,向外展開相關因素:產品的核心問題,相關結構技術,外部文化和法規…

          • “這個產品我們要解決一個什么問題?為什么要解決這個問題?”
          • “別人對這個產品的當前印象和期待是怎樣的,需求發起者是誰?”
          • “這個產品的開發方式,有什么背景,歷史淵源,復雜的代碼歷史,變動難度?
          • “這個產品擁有的資源?”
          • “這個產品有什么文化、政治、法規背景
          • “我們的外部優勢和劣勢是什么?”

           

          策略2. 設置邊界 Planting Limits

          都說設計是戴腳鐐跳舞,你是否接到過抽象空泛且聽起來沒有任何限制的命題?創作條件沒有限制也許意味無限可能,但更常意味著難以聚焦。適當的束縛有時可以幫助更好地放飛想法。所以如果面對的命題太龐大,可以嘗試給自己設限,或思考可能存在的限制,就能抓到一個相對靠譜的起點。

          • “這個項目要控制成本投入,用最少的資金,最少的人力?!?
          • 最大程度保留用戶的現有體驗,盡可能減少用戶學習成本?!?
          • “新創意最大程度滿足原來的代碼框架,使用最小的開發成本?!?
          • “新的產品體驗要極簡,將用戶路徑縮短到三步以內?!?
          • “在鏈路上需要用戶使用的媒介最少化?!?

          圖片

          例. 重新設計支付流程

          • 原體驗:原本用戶需要攜帶錢包出門,錢包里會有多張信用卡,儲蓄卡,還會有很多現金。而用戶出門手機也必不可少。
          • 設置邊界: 在優化的支付流程里,盡可能減少用戶支付需要攜帶的東西;在用戶支付流程中減少遇到的阻力,提升消費。
          • 新體驗:讓用戶可以用軟件進行轉賬,輸入需要支付的價格,雙方確認后輸密碼轉賬。

          -> 讓用戶可以直接掃碼進行支付,無需輸入價格,無需人工核對。

          -> 讓用戶用指紋確認,或開通多少元以下免密碼支付,無需輸入密碼。

          -> 讓用戶直接手機感應支付,無需打開手機或軟件。

          -> 掃臉進行支付,即使不帶手機也可以進行支付。

           

          二、激進創新過程 / 策略3則

          上一篇漸進式創新介紹的方法和原則在激進式創新同樣適用,而本文將介紹三則對于命題較大的激進式創新非常適合的過程方法,分別是:創意矩陣,逆向思考,多問“如果”。

          圖片

           

          策略1.  創意矩陣 Creative Matrix

          如果需要用創意解決一個較為龐大的主題,尤其是激進類創新設計,那創意矩陣可以迅速排列組合進行發散,且不遺漏內容。

          創意矩陣以表格的形式,讓X軸和Y軸上的內容進行交叉碰撞,強制、批量地激發創意的方法。如在X軸寫下選擇一類用戶和主題間的需求(目的 / 流程 / 用戶類型 / 特點 / 心理等…),Y軸寫下解決問題的方式(內外部新機會 / 實現方式 / 科技 / 環境 / 媒介 / 分發渠道 / 政策等…),橫縱碰撞在一起,就會有一張完全覆蓋的創意表格,之后可找出亮點、分析可行性進行創意選擇和組合。

          圖片

          例:設計一個針對工業設計的3D建模軟件,打破市面上常見的軟件功能和體驗。

          我們以Gravity Sketch的3D建模產品為例,用創意矩陣倒推思考的流程。

          (1)首先確定XY軸發散方向。能帶來革命性改變的體驗往往依賴技術層面的實現,技術革新會帶來在流程、建模方式的革新。所以我們將3D軟件依托的技術和媒介為Y軸,在媒介的放散方向上同時考慮建模現有媒介(傳統的PC端和云端軟件等)是否還有新的機會;再考慮相對激進、未來的媒介(如pad端、VR端等)。3D建模的工程經常會涉及到協作分享等流程,選擇以整體設計步驟為X軸。從這個矩陣開始進行發散,交叉重合的部分思考結合出的設計,再選取其中的亮點向產品方向創新。

          圖片

          (2)梳理亮點。在梳理發散過程中可以看出,VR客戶端和pad用移動端有相對創新的亮點,不同于較為傳統的PC端和云端。如果pad端和VR端可以滿足3D建模軟件所需要的性能,這樣的創新就可以被支持。

          (3)繼續探索。針對每一個流程步驟,可以聚焦到里面的每一個分步驟,探索亮點。比如創作階段的流程可以展開到具體設計到建模的步驟。當把步驟進行分解之后,可以發散出各個階段利用VR的創作優勢。

          (4)梳理亮點。在草圖和草模階段,VR內直接創作可以節約物理材料,支持無死角設計不用重復出圖,幫助立體想象、可視、模擬真實尺寸體驗,打通草圖到建模的鏈路…顛覆草圖到建模階段的設計流程,提升整體效率和可能性。

          圖片

           

          策略2.  逆向思考:程序 / 觀念 / 狀態

          逆向思維締造了許多打破常規的創意。上一篇我們介紹了在漸進式創新中實用的原理/功能/結構三種逆向思路。這里介紹3類更適用于激進式創新的逆向思路和具體的案例,為激進式創新賦能。

          圖片

          • 程序或方向逆向 | 顛倒事物發展變化的構成順序、排列位置。

          例a. C端服務直接收費 -> C端服務免費,其他項盈利

          很多產品在收費時直接向C端用戶收取服務費用,但是容易面臨C端有付費意愿的用戶量數不多。不如讓用戶免費使用體驗服務,擴大用戶留存的基礎上,通過向B端等有更多支付意愿的商家收取費用。QQ、微信等通訊軟件的出現讓用戶免費使用通訊、社區等功能,通過用戶的留存從其他商業化項目收費,如收取在軟件內的廣告費用。

          圖片

          例b. 主動檢索 -> 算法推薦

          以前用戶瀏覽信息的方式,偏重于主動搜索需要或感興趣的內容,但是檢索流程相對繁瑣,用戶可能并不夠了解自己的喜好。逆向思路讓用戶被動接收信息,由算法基于用戶的瀏覽喜好狀態進行推薦,無需用戶進行檢索即可將信息推送給用戶。短視頻等產品就是通過算法推薦匹配出用戶感興趣的視頻,讓用戶享受“刷”視頻的過程。

          圖片

          • 觀念逆向 | 設計者反轉看待問題的觀念,或針對人們的觀念逆向設計。

          例a. 少即是多 -> 多才是多

          現代主義建筑大師Ludwig Mies Van der Rohe提出“少即是多(Less is more)”的極簡設計理念改變了很多產品和建筑設計,之后許多設計師都遵循”少即是多原則進行設計,羅伯特?文丘里 (Robert Venturi)逆向而行從設計思路上“反叛”,開創了“少則無聊(Less is bore)”觀念,讓設計的建筑更符合街道氛圍和文化。BJARKE INGELS B.I.G 事務所則喊出了“多才是多(Yes is more)”,設計出造型夸張有趣的建筑,并從外觀出發讓設計帶有更多豐富的能力。

          圖片

          例b. 追隨變化 -> 鎖定不變

          在日新月異、瞬息萬變的互聯網,很多企業和產品都在努力擁抱、追隨變化,但很少有人去思考什么是不變的。Amazon(亞馬遜)創始人Devin Beverage在亞馬遜創立之初就選擇思考未來十年,什么是不變的,并得出了三件極其普通但是消費者最核心在意、不會變化的三件事情:無限選擇,最低價格,快速配送。在用戶的底層需求上出發,并且長期、持續地投入讓亞馬遜成長為現在的頭部企業,支持經典的包括支持自營&第三方賣家平臺(Marketplace)、開放給消費者的比價工具、Prime會員兩日達、影視服務等開創性產品設計。

          圖片

          • 狀態(過程)逆向 | 改變現在的狀態,如正變負,進變退、動變靜、硬變軟等等,獲得創新。

          例a. 人在路上跑動 -> 跑步機跑道帶動

          過去跑步都是人在道路上跑動鍛煉身體,人動路不動。但在艷陽天、雨天等天氣下在室外的環境就會不適合跑步運動。跑步機的誕生就讓用戶可以隨時在室內環境中舒適、不占空間地進行運動,讓“地”動起來,人在原地跑動。不但可以調節跑步機跑帶的角度速度等模擬各類環境,還可以監控記錄用戶的跑動、健康狀態,一舉多得。

          圖片

          例b. 人去商店購物堂食 -> 外賣快遞送上門

          過去的購物體驗基本都依賴用戶到店進行。但這樣商店能輻射的客戶范圍會相對狹小、用戶也必須出行才能購物和享用美食。比起提升到店體驗,支持送貨上門,讓用戶足不出戶體驗到購物的樂趣和便捷。不但讓顧客可以享受到更遠距離、甚至海外的商品,商家同時可以輻射更遠距離的顧客,也不用依賴實體門店進行銷售。

          圖片

           

          策略3.  多問”如果”, What if… 

          多問些異想天開的問題,別害怕天馬行空的發散。我們總是可以把解題思路再聚焦到一個盒子,所以不用最初就把蓋子蓋上。阿爾伯特?愛因斯坦甚至說過:“如果一開始這個想法不荒謬,那么它就沒有希望了?!?在發散的過程中要敢于想象發散,才能帶來突破式創新。當我們想要解決問題的時候可以首先大膽發問、設想出“如果”的場景后,再去考慮實現該場景所需要用到的技術;也可以從技術出發,暢想落地場景的“如果“。

          圖片

          對于市面上一些帶有亮點的產品,我們也可以倒推去思考當初設計者問出的“如果”是什么。這幾年全球都在疫情的不斷反復中掙扎,我們可以以遠程工作場景為例,來思考一些“如果”。

          例. 遠程協作

          • 發散:如果我們遠隔萬里還能面對面、身處一個空間工作交流…

          如果遠程狀態下我們還可以像在辦公室一樣一起查看模型…

          如果在查看模型的基礎上我們還可以調整、比對修改方案,及時看到反饋…

          • 結果:空間感知設計評審

          Microsoft Mesh使人們能夠與全息狀態聯系,跨空間共享,并從世界上任何地方進行協作。通過為組織引入支持 Mesh 的混合現實體驗,可以增強虛擬會議、進行虛擬設計會話、遠程幫助他人以及舉辦沉浸式虛擬會議,從而大幅提高工作效率。

          Mesh通過允許用戶使用任何設備在任何位置加入任何位置來增強 3D 設計評審。無論是物理存在還是全息,同事都可以實時查看和批注 3D 模型。所有內容都在設計會話之間持續存在,因此團隊可以從他們中斷的地方快速開始交流理解,激發創造力。

          圖片

          例. 遠程培訓和維護

          • 發散:如果維修人員不能上門工作,是否有人能遠程教學我修理電器…

          如果維修人員可以遠程修理我的電器就好了…

          如果他們能看到我看到的內容,完全基于我的視角指導我…

          如果還能在我的視覺標記、說明、演示操作方法…

          如果在工業界專業領域,也能這樣進行教學、監督、指導…

          • 果:遠程培訓和學習

          Hololens利用AR技術進行遠程培訓,特別是關于手術、設備維護和交通管制等復雜主題的培訓,很難與講師在同一個房間,并從多個角度查看同一組對象。員工可以通過全息傳送、全息共享和可視化效果從任何地方一起學習,有助于提高虛擬培訓的效率,同時降低差旅和物流成本。

          圖片

           

          三、激進創新決策 / 策略三則

          圖片

          Warren Bennis說,“創新—任何新想法—根據定義,一開始都不會被接受。在創新被組織接受和內化之前,需要反復嘗試、無休止的演示、單調的排練。這需要勇敢的耐心?!奔みM式創新需要經過的等待和挑戰可能非常漫長,在這個過程中,更需要謹慎地篩選想法和推進。下面的三則方法可以幫助我們在決策中減少試錯成本。

           

          策略1.  考慮實現時間和所需要的技術系統。

          九宮格視窗可以幫助進一步決策,將創意靈感在“系統結構”和“實現時間”兩個維度進行排列選擇,之后根據需求的資源和達成所需時間進行選擇和規劃。突破式的創新往往需要大量的時間來完善技術和系統,所以在篩選想法的過程中結合這兩個因素,可以保證持續性的創新。

          圖片

          例. Netflix播放創新

          現在我們熟知的Netflix網飛是一家會員訂閱制的流媒體播放平臺。

          • DVD及藍光租賃提供商

          最初在1997年剛成立時,Netflix曾經是一家在線DVD及藍光租賃提供商。當時DVD技術剛誕生,輕質的材料代替了原本笨重的VHS電影格式存儲,讓郵寄DVD成為了可能。Netflix創新地使用線上下單、往返郵寄的租賃模式,讓用戶通過免費快遞信封租賃及歸還Netflix庫存的大量影片實體光盤,并以此打敗了線下租賃連鎖店百視達。

          • 付費訂閱流媒體

          2006年在線點播技術興起,隨著新技術的出現Netflix 轉向通過互聯網流式傳輸視頻,提供更廣泛的內容選擇,并且可以無限觀看、點播、低價,高質量的影視內容,并最終吸引了對手Blockbuster 的核心客戶。Netflix的付費訂閱模式和Apple的iTune下載、Youtube的免費模式成為當時最熱門的三個細分市場。

          Netflix的創新幫助他們在市場上站穩腳跟并不斷突破,但如果在1997年Neflix就把流媒體視頻作為目標進行創新、不考慮當時的現實技術和研發時長,那公司可能在漫長的科技發展等待中生存,也就沒有后來的故事了。所以對于突破性的創意,按照時間維度、技術實現給出逐步創新的節奏,通常能更好地幫助產品持續創新。

          圖片

           

          策略2.  考慮可推動性&可實現性

          如果你的創意需要在大公司里進行落地和推進,可以使用“傳播速度和可實現性”矩陣逐步選擇,第一步聚焦適應速度和傳播速度,將決策者對產品的影響也放入考察。第二步,審查可實現性和財務可行性,之后做出相應選擇和推動。

          圖片

          這個矩陣也可以用于對外部環境的判斷,在第一步驟中考慮想法在文化、政治、地緣等因素下的適應和傳播速度,在第二步驟中考慮市場技術或包容度是否能支持該想法的推動。

          例. 出行產品的本地化決策

          以出行領域的產品設計為例,我們可以看看在這個領域里一些創新決策考慮。我們熟悉的Uber,滴滴等打車平臺通過利用空閑的私家車來接送乘客,降低了打車花費、難度和空閑汽車的利用率,顛覆了原本的出租車打車市場。而在決策想法時,這類出行產品需要考慮當地的具體交通、運輸工具、出行狀態等現實因素進行推送。

          • UberEats在美國部分城市用汽車送外賣

          Uber優步是起源美國的打車平臺,2016年該品牌在美國本土開啟外賣業務。當時中國已經成熟的外賣業務主要是由騎手騎電瓶車來完成外賣服務,但在美國一些城市自行車作為工具的出行道路十分有限,人們居住的距離也相對遙遠。所以Uber從他們已有的打車系統上汲取了思路,在這些城市讓司機用汽車送外賣解決了路程遙遠的問題,同時讓他們可以有機結合接送乘客和接送外賣的訂單,系統規劃路線后不但提高效率,也讓司機增加了收益。

          • Gojek在印尼用摩托車送乘客

          2015年,當來自美國的Uber和來自新加坡的打車平臺Grab在印尼打得火熱、且都使用出租車和私家車作為接送乘客的交通工具時,印尼市場的Gojek則聚焦印尼的國情,把打車平臺的思路運用在打摩的上,規范化摩的市場。在交通嚴重擁擠的印尼,摩的的快速穿梭遠比汽車出行更適合本土,這讓Gojak成為了印尼的第一大出行平臺,并在后來拓展出龐大的本地生活產品體系。

          圖片

           

          策略3.   小心鴻溝

          “如果解決方案意味著與他們習慣接受的標準有太大的偏離,那么成年公眾的口味不一定準備好接受符合他們要求的合乎邏輯的解決方案?!?——Raymond Loewy,著名的可口可樂瓶、殼牌石油標志背后的工業設計師這樣說。

          如果你的創意需要很多解釋,大量的培訓和“幫助”功能,那么這樣的設計可能過于先進或復雜,不易被大眾理解。產品創意在初期會輻射到的創新者、早期使用者與普通使用大眾間可能存在著差距,在一些案例中,早期使用者覺得有趣認可的解決方案并不被大眾所買單,所以在選擇創意和推進過程中,設計師也要考慮這種差距。

          圖片

          例. Airbnb如何更好地銜接早期大眾

          Airbnb將尋求經濟實惠住宿地點的旅行者與想要租房或備用房間的人聯系起來,這個想法現在已經被大眾熟悉。但在2009年業務的第一年,這個創意是非常具有創新性的,尚不為大眾熟知。

          • 好創意卻不得市場認可

          當時雖然早期使用者的反饋非常好,但團隊仍然面臨著嚴峻的用戶增長和收入挑戰,甚至一度每周只賺200美元。為什么這樣一個對租客和出租者都互惠互利的創新,卻不能在市場上得到良好的反饋呢?一天下午,團隊正在與Paul Graham一起思考紐約市的搜索結果,試圖弄清楚為什么他們增長。Paul Graham給出了一個簡單的建議:前往紐約,租一臺相機,花一些時間與客戶一起列出他們的房產,并用美麗的高分辨率照片取代業余攝影。因此,團隊成員飛往紐約,與Airbnb在網站上列出房產的客戶會面、拍攝高質量照片。結果收入迅速增加了100%(400美元)。

          • 照片減少溝通鴻溝

          究其原因,其實是雖然當時Airbnb的想法已經在市場上獨具突破性,但團隊沒有考慮到早期使用者和早期大眾之間的差距。早期使用者往往樂于嘗試新事物且有很強的需求(特別體驗、更低成本出行等),而早期大眾會和他們現有的酒店體驗進行比較,安全、正規、優質、溫馨的入住體驗是他們的強需求,那些非高清、非精美照片很難在第一印象上說服早起大眾這些品質。彌補上這個預期差距后,也就有更多的用戶愿意嘗試了。在后續的迭代中,Airbnb也也在系統改進上不斷強化安全、正規,更好地滿足用戶。

          圖片

           

          結語

          激進式創新往往依賴團隊基于用戶需求、市場、技術等多維度內容的理解。在創新過程中,設計師更多了解相關領域和創意方法就能更有益啟迪想法。希望本文激進篇、上文漸進篇的設計策略可以幫助設計師們更好地創新發散。

          創新思維可以被學習累積,設計師可以保持多看多思考的習慣,從其他優秀的設計和產品上反推創意思路。設計創新時要相信推進的過程,如果對題目感到無從下手,相比糾結現有思路是不是最優解,不如用文中的方法把想法全部寫下來并原型嘗試。許多時候我們離優秀的想法只是一步之遙,也許轉個彎就柳暗花明了。

           

          參考:部分策略啟發/提煉自以下著作和文章:
          1. 《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist)
          2. 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick(Author),Nadia Langensand(Artist)
          3. 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters
          4. 《Thinking, Fast and Slow》Daniel Kahneman
          5. 《Cross the Chasm》Geoffrey A. Moore
          6. 《The Innovator‘s Dilemma》Clayton M. Christensen
          7. 《Lean Startup》Eric Ries
          8. What are 5 Whys? | Interaction Design Foundation (IxDF)
          9. https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8
          10. Types of Innovation&nbsp;– The Ultimate Guide with Definitions and Examples
          11. The Design Process Simplifed – Design Sojourn
          12. https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca
          13. https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71
          14. Airbnb 2021 Release: 100+ innovations and upgrades across our entire service
          15. Clipdrop – Copy and Paste reality with AR + ML | Product Hunt
          16. https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73
          17. https://docs.microsoft.com/zh-cn/mesh/get-started


          作者:ISUX設計

          轉載請注明:學UI網》設計策略|源源不斷的創新思路(激進篇)

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          logo設計除了用首字母,還能怎么做?

          seo達人

          一、以某物體作為logo圖形

          如果品牌名剛好是某種物體,或者品牌名中的某個字是一種物體,又或者是品牌名的諧音是某種物體,那么都可以直接把這個物體當作logo圖形。當然設計師需要對該圖形進行設計,使其變得更美觀、更特別、更符合品牌的調性。比如把圖形進行簡化、規范、抽象化、或者是增加一個記憶點,另外,同行中最好沒有其他知名品牌用過該物體作為logo圖形。采用此類手法的設計logo的品牌有:蘋果、長城汽車、錘子手機、天貓、盒馬鮮生等。

          圖片

          ▲ apple公司的logo就是一個蘋果,但它又不是一個普普通通的蘋果,而是一個被咬了一口的蘋果,而且在設計上經過精確規范,視覺上符合黃金比例。

          圖片

          ▲ 長城汽車的logo是經過一個極度簡化的長城烽火臺圖形。

          圖片

          ▲ 錘子科技的logo是一把小巧、精致的地質錘,比起普通的錘子更專業、更具科技感,在設計規范上同樣不簡單。

          圖片

          ▲ 天貓的品牌名中含有一個“貓”字,所以它的logo是一只幾何化、且極具特色的黑貓。

          圖片

          ▲ 盒馬鮮生中的“盒馬”其諧音是“”河馬,所以其logo圖形就是一只可愛的河馬。

           

          二、象征圖形

          這種logo圖形在表面上與品牌并沒有什么聯系,而是借用某個被大眾比較熟知的、具有某種特定象征意義的圖形,來象征該品牌的理念、愿景、產品品質等。使用此類logo設計手法的品牌有:星巴克、勞力士、中國聯通、真功夫等。

          圖片

          ▲ 星巴克的logo圖形取自古希臘神話中海妖-塞壬的形象,她具有非常誘人的歌聲,聽到她歌聲的人都會經不住她的誘惑,星巴克把海妖塞壬的形象作為logo圖形,是想表達星巴克的咖啡品質極佳,與塞壬一樣具有極大的誘惑力。

          圖片

          ▲ 頂級手表品牌勞力士的logo是一個皇冠,展現了勞力士在制表業中的帝王之氣,也定位了勞力士在鐘表行業的王者地位。

          圖片

          ▲ 中國聯通的logo靈感來源于中國傳統元素:中國結,具有連接、團結、與消費者心心相通等寓意。

          圖片

          ▲ 快餐品牌真功夫的logo圖形為一個酷似李小龍的插畫人物,象征著該品牌的品質過硬以及中國特色。

           

          三、用一種動物作為logo

          國內的互聯網品牌特別喜歡用動物作為品牌的logo,很重要的一個原因就是方便打造品牌IP,動物IP可以有效拉近品牌與消費者之間的距離,以及豐富廣告傳播的手段。另外,使用動物做logo也更能方便消費者記憶。當然,品牌方選擇的動物最好與品牌的行業、氣質比較吻合。使用此類logo設計手法的品牌有:京東、蘇寧易購、攜程旅游、瑞幸咖啡等。圖片

          ▲ 京東的logo是一只小狗,狗的特點是是忠誠、溫馴,符合服務行業的特性。

          圖片

          ▲ 蘇寧易購的logo是一只獅子,獅子是草原之王,蘇寧易購希望通過獅子圖形來表達自己想做大做強的野心。

          圖片

          ▲ 攜程網的logo是一條海豚,海豚是海洋動物,與旅游行業比較吻合。

          圖片

          ▲ 瑞幸咖啡的logo是一只梅花鹿,該品牌主要針對年輕白領,梅花鹿精致而優雅,符合瑞幸咖啡的品牌調性。

           

          四、抽象圖形

          即設計一個在氣質上、造型上符合品牌精神、調性、行業屬性的抽象圖形,以此來作為logo,抽象圖形比起具象的圖形具有更廣泛的包容性。使用此類logo設計手法的品牌有:耐克、英國石油、奔馳、華為等。

          圖片

          ▲ 耐克的logo看似一把勾,但勾與運動品牌能有啥關系呢?實際上它是一個物體快速運動出來的軌跡,感覺是“嗖地一下就不見了”,速度極快。也有人說這是翅膀的造型,你看,抽象的圖形會給受眾很大的想象空間,而這個圖形是否優秀,取決于它是否總能引導人們往正面的、跟品牌相關的方向聯想。

          圖片

          ▲ 這個傳說中最貴的標志,是英國石油的logo,被稱為太陽花,寓意生機勃勃、永不凋零、照耀世界。

          圖片

          ▲ 奔馳的logo是一個三叉星圖形,又似汽車的方向盤,象征著汽車行業以及征服海、陸、空的愿景。

          圖片

          ▲ 華為的logo像一個光芒四射的太陽,其實也像一朵綻開的花,寓意華為多元化發展,以及走向世界的決心。

           

          五、中文結合圖形

          既然是中國品牌,所以直接用中文來做logo設計自然是天經地義的,這種logo的關聯性比用品牌首字母更強,通常為用品牌名中的一個字或兩個字與品牌相關的圖形結合。使用此類logo設計手法的品牌有:北京冬奧會、中國美院、廣州、廣州國際品牌節等等。

          圖片

          ▲ 北京冬奧會的logo采用“冬”字與滑雪運動員的圖形結合。

          圖片

          ▲ 中國美院的logo采用“國美”二字與印章圖形結合。

          圖片

          ▲ 廣州城市logo采用“廣州”二字與廣州塔圖形結合。

          圖片

          ▲ 廣州國際品牌節的logo采用“廣品”二字與廣州塔相結合。

           

          六、把品牌名直譯為圖形

          有些品牌名是一個動詞或者名詞,通過其字面意思就能把它圖形化,這種圖形在表面上會與品牌有明顯的關聯,如同要想有內在的關聯,還是得在設計風格和設計調性上下功夫。使用此類logo設計手法的品牌有:一加手機、三菱汽車、方圓地產、紅點獎。

          圖片

          ▲ 一加手機的logo圖形為阿拉伯數字1與一個加號的組合。

          圖片

          ▲三菱汽車的logo為三個菱形。

          圖片

          ▲方圓地產的logo為一個方形與圓形的組合。

          圖片

          ▲ 紅點獎的logo為一個紅色的圓球。

           

          七、用主打產品或主要服務作為logo

          有些品牌有主打的產品,或者聚焦于某個行業,那么也挺適合用用能代表主要產品或主要服務的圖形作為logo,前提是也要做出個性。這樣可以讓消費者一目了然,比如漢堡王、喜茶、QQ音樂等就是這么做的。

          圖片

          ▲ 漢堡王使用其主打產品漢堡作為logo圖形,同時也呼應了品牌名,這個logo在經過去年的改版升級后,變得非常簡約,具有很強的識別性和延展性。

          圖片

          ▲ 喜茶的logo為一個人正在喝奶茶。

          圖片

          ▲ QQ音樂的logo為一個音樂符號。

           

          圖片

          怎么樣?思路是不是打開了很多,所以,以后別只用首字母這一種方式設計logo了,多嘗試一下其他的方式,或許會有更多、更合適的解決方案。

           


          作者:蔥爺


          轉載請注明:學UI網》logo設計除了用首字母,還能怎么做?

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          產品分析怎么做

          博博

          分析產品,也是難到很多 UI 設計師的問題。很多人認為這屬于產品經理的工作,但實際上 UI 設計師也離不開使用產品分析的技能來處理日常的工作,以及提升自己的產出質量。


          產品的分析其實遠遠沒有想象中那么玄乎,這篇文章就要教會大家如何通過正確的步驟完成對產品的分析。


          以下為正文。


          undefined



          產品分析,顧名思義,就是對某互聯網產品,進行系統的、多緯度的分析,并最終完成一份邏輯清晰,符合客觀事實的商業報告。


          為什么我們需要這個報告?那是因為對于我們工作的決策來說,獲取越多有效的參考信息,就越能幫助我們做出正確的選擇。


          舉個例子,如果我準備做一款針對定制奶茶外賣的 APP,那么就要了解這樣的 APP 產品通常有哪些模塊和功能,通過 APP 下單的流程是什么樣的,以及用戶更喜歡什么樣的設計或者交互。這時候,光靠我自己腦補是沒用的,我得分析同行或者相關外賣 APP 產品,才能得到明確的結論,然后作為依據開始設計我自己的產品。


          或者,我們在面試或者客戶談判之前,有認真的分析過對方的產品,那么在溝通過程中就可以讓我們的處境更有利,能進行更有質量的溝通和探討。


          產品分析的好處很多,不僅能幫助我們解決當前的問題,也可以幫助設計師鍛煉自己的邏輯思維能力,產品能力以及業務能力,是升職加薪的必備技能。




          undefined



          接下來,可能很多同學已經忍不住摩拳擦掌,想要知道產品分析應該怎么開始了,但別急,我要先講講一個被很多人忽略,以及在眾多講解文章中都沒有提及的東西,就是產品分析的 —— 目標。


          前面提到,產品分析最后要以商業報告的形式呈現,而一份合格商業報告是要提供 “明確的結論” 的。如果這份報告指向性不清晰,洋洋灑灑寫了一百頁,像流水帳一樣把所有能羅列的分析內容全都一股腦做進去,那對于自己和看的人都是一場災難。因為這樣的報告沒有重點,缺乏閱讀性。


          開始分析前,我們要確定一個明確的目標,即想要通過這份報告獲得哪些信息。在獲取的內容上,往往不會只想得到一個結果,很可能會是復數形式,所以我們需要列一個表格,將它們羅列出來。

          比如我們再用想做奶茶外賣服務的APP為出發點,那么我們分析美團或者餓了么的產品,定了下面這些目標:

          undefined


          可以看出,對于產品、交互層面的分析明顯要大于設計的權重,根據 MVP 原則,第一個版本應該要得出的是一個流程可以跑通的產品,在前期過分關注設計和細節并不是首要任務。


          所以,在不同的場景、時期、戰略上,產品分析的側重點就不同,而且留給我們的分析時間也不可能足夠充足的,所以也要將精力集中在最重要的事情上,提升效率,才可以真正解決問題。




          undefined



          整個產品分析的內容,可以劃分成多個緯度和若干的細節,我用下面這個思維導圖表示出來。

          undefined


          這樣的圖表讓人望而生畏,如果每一部分我們都認真做分析,那么勢必得寫出非常多的內容不可,所以才有了前面所說的要規劃分析的目標,在實際執行過程中有很多分析項是不需要提及的。


          再者,產品分析中還包競品分析、運營分析、交互分析、視覺分析、文案分析等分支,它們各有側重和取舍,所以不要為此而感到恐慌。


          下面,我們分別對這些內容進行簡單的說明。



          1.產品的基本信息


          分析任何產品的第一步,就是對它有一個大致的認識,首先就是去下載和體驗它,并且能用一句話來概括它的功能,然后通過該功能解決了用戶什么樣的需求。


          然后就是它所處的行業目前的狀態,是否規模連年上升,有什么重量級新聞或者革新,未來的發展趨勢是什么。如果我們不了解的情況下,可以多在百度、知乎、新聞門戶上進行搜索和了解


          盡可能收集可信的數據報告或者圖表,便于信息的整理。

          undefined


          對于一些新上線不太久的應用,通常會帶有非常明顯的初創團隊烙印,可能有一些匪夷所思的交互或者功能,這時候在應用上浪費時間干想是沒有用的,可以花點時間在網上找找創始成員的履歷,會對我們認識應用有更大的幫助。比如拼多多創始人在上線前有 “拼好貨” 的多年積累,產品模式是經過檢驗的產物,有大量相似的特征。

          undefined


          最后,還可以對產品當前的處境做簡單的收集,有沒有強大的外部競爭,它們各自在市場中占比的數據,以及用戶在不同商店、社交平臺中對其的評價。這可以幫助我們對該產品的競爭力和商譽做出初步的認識。



          2.用戶研究


          用戶研究這個名詞出現得非常頻繁,想不看見都難,它是專業產品團隊必備的項目準備工作。用戶研究的方式和產出物多種多樣,通常我們會建立清晰的目標畫像找出目標用戶,然后對他們進行訪談、調研,設計可用性測試、眼動測試等等,幫助我們更好的推出可以被用戶喜愛的產品。


          但在我們研究外部產品的時候,往往不需要將它想得太復雜(除非是對直接競爭對手的分析),否則只需要整理該產品的目標用戶畫像即可。


          用戶畫像即總結核心用戶多個緯度的特征,主要分成三個部分。


          生理主要就是用戶的年齡、性別、身高或體重等特性,外在的則是諸如學歷、工作履歷、所處城市、薪資狀況等可以直接收集的內容,內在的則是性格、愛好、行為(喜好女裝之類的……)等等和關聯主觀特征的內容。


          根據我們的需要對這些屬性進行篩選,就可以制作幾個標準的用戶畫像卡片出來,比如下方這種。

          undefined


          3.用戶體驗要素


          因為這兩年對于產品、體驗、設計的專業分析需求高漲,所以 《用戶體驗要素》 中的五要素就成為大家喜聞樂見的分析模型,它給我們提供了明確的分析步驟和方向,易于上手。


          undefined


          戰略層:


          戰略層指的是產品在宏觀、商業層面上的的考慮,需要我們自己的判斷,因為如果不是內部人員,那么對于一款產品的戰略層思考是無法做到絕對準確的。雖然網上可以搜索到很多商業分析和企業 PR 稿,但是這些內容的使用往往是具有欺騙性的,是基于運營需求拋給大眾的障眼法。


          比如我之前分析的一篇關于瑞幸咖啡的總結(個人總結):

          https://www.zhihu.com/question/306547560/answer/559771838


          所以,報告中沒有充足的把握時就不要在這個問題上侃侃而談,只需要回答,一款什么樣的產品才可以滿足用戶的需求獲得商業上的成功。


          范圍層:


          戰略層可以獲得的信息通常是一個比較宏觀、含糊的概念,所以,我們要來制定更具體的方案,明確產品應該包含那些功能和服務,規劃產品功能要覆蓋的范圍。


          比如提供奶茶的外賣服務 APP,初期我們的功能包含選擇店鋪商品、加入購物車、交易結算系統,但不包含資訊推送、曬單社區等功能。


          所以,范圍層就是將該產品提供的最重要的服務、產品內容羅列出來。


          結構層:


          這就是一個產品的功能或者信息結構,通常我們可以用思維導圖或者樹狀圖的方式進行梳理。最初級的方法是通過對可視頁面的層級做梳理,整理出產品的頁面層級結構。


          而更好的方式,是根據產品的幾個核心功能建立產品流程圖,將操作的結構與邏輯展示出來,繪制這個圖表的過程中可以更好的加深我們對產品的理解。



          框架層:


          框架層即頁面的布局結構,以及組件層面的交互和展示,一般來說,可以研究產品的主要流程頁面,每個頁面的布局和信息展示是否合理,操作是否順暢。


          如果覺得沒法很好的理解,書中建議是通過 “界面設計”、“導航設計”、“信息設計” 三個角度切入,但這樣操作性太差。建議在分析這個界面的時候,只要關注內容從上到下的布局內容有沒有契合主題,并且重要的組件中,字段權重能不能很好的被表現出來即可。


          比如我們看下面飛豬的航班頁面,頁面模塊依次是城市、日期、班次列表、排序篩選。在航班列表中,最被用戶關注的價格信息得到凸顯(證明買機票的用戶對價格更敏感),時間作為次級權重元素相對被弱化但依舊易于識別。



          表現層:


          這里就是著重分析產品設計本身的特點了,相對就容易了不少,只要分析配色的方案,設計的一致性,捕捉動效和情感化設計的細節即可。

          就不展開更多的說明了。


          用戶體驗五要素的分析一樣不是散亂的拋出結果而已,如果按原書的方法做分析,肯定也會作出非常復雜的報告,所以我再提煉一次用戶體驗分析的思路。


          通過分析產品的商業目標,進入劃分功能和服務的范圍,之后根據核心的服務總結主要操作流程,并在最后的交互、布局、設計的幾個方向來判斷它們是否有益于核心流程,能被用戶接受。然后得出結論,如果有益,那么產品符合商業目標的條件,如果沒有,則難以達成。



          4.盈利模式


          有一些產品本身就有購買要素,或者有付費的項目,那么對它作出分析是非常重要的。因為任何商業產品最終的目的都是為了盈利,所以多數產品會在這方面下足功夫。


          如果是電商、外賣、快遞這類直接發生交易的應用類型,只要分析產品本身的交流流程即可,相對比較直觀。


          如果是類似社交、資訊、工具類的應用,往往在盈利點上會比較隱晦,并通常包含較多零散的盈利來源,比如不同位置的廣告位,訂閱服務,付費道具等等。


          我們要做的就是把這些盈利來源全部羅列下來,如果知道價格也對應填寫上去即可。



          5.運營策略


          如果不是以工具為導向的產品,通常就有比較重的日常運營。包括用戶運營、社區運營、媒體運營、內容運營和活動運營。


          有不少產品的迭代是以運營為導向的,我們直接通過產品功能本身去分析它往往得不到理想的結果,所以需要從運營的角度進行切入。


          比如每日優鮮這樣的生鮮電商,如果仔細研究用過它的服務,就會發現這款產品本身交易的流程乏善可陳,但是出彩的地方是在于層出不窮的運營策略,無論是選品的內容運營或者活動運營上,而這些運營方式才是推動產品的改動和優化的主要因素。


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



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

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          如何提升我們的審美

          博博

          新手和初學者總會錯誤的將審美的能力托付給天賦或是科班教育,作為自己審美水平低下的借口。如果這么想,那肯定不會為自己帶來任何改善。


          今天,我要寫一些不一樣的東西出來。


          按我一貫的風格,我不喜歡在入門問題上高開高走,一開始就討論比較概念或者藝術性的問題,就講講在最初級月薪不過萬,連自己工作設計類型相關的作品都沒辦法評判好壞的情況下,展開討論。


          所以,我要寫一篇接地氣的提高審美的回答。


          關于比較


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


          在這里,我們不談具體某個領域審美的規則和方式,我們來講講提升審美的具體做法。


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


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


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


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



          原因1:


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



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


          這話說的頗有道理,但依舊在推理上站不住腳。因為,量變為什么一定就能產生質變?這個變化的邏輯依據是什么?在青銅段位里打了一萬盤,也不代表一定能打進最強王者不是。


          所以,這就是要引入第二個原因,關于對比。



          原因2:


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


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


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


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


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


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


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


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



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


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


          什么?您配?


          您配幾把……



          具體案例


          不正經到此為止,正經臉……


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


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


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



          人像攝影




          美食攝影



          室內設計



          產品設計




          海報設計





          管理界面





          UI APP 界面





          小結


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


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


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


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


          當然不是!


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


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


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


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


          但超出的部分在哪里?答不答得上來,就是內行和外行的區別。


          內行經過專業的訓練可以品嘗出其中蘊含的風味、口感,解釋它們與產地氣候的聯系,儲藏運輸的條件,以及沖制過程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒有體系的評價。


          如果設計師對設計相關的作品只能做到和外行一樣的水平,那么他也只能是設計師中的外行,并且缺乏成為優秀設計師的必要基礎。


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


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


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



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


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



          “BONG~”


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


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


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


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


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



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


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


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


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


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

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


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

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

              ? 分析:尋找優劣差異的原因


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



          1.采集


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


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



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




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



          2.對比:


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




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


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


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



          3.分析:


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


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



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


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


              ? 字體

              ? 配色

              ? 布局

              ? 配圖

              ? ……


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


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


          學?。?


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


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




          結尾


          對于設計基礎審美的提升就解釋到這里了,再寫下去也沒人看了(寫不動了)。我們在職業相關的審美提升一定要具有實用性,接地氣,目標準確的特點,不要這個階段跑去聽古典,看畫展,讀詩歌,所以整個回答我都盡量避開這些坑不提。


          設計師的專業性首先不是追求審美的極限,而是先提高自己的下限。只有超出自己動手能力的下限,才能讓我們拒絕粗制濫造的作品,驅動我們進步。


          最后,在同意我前面觀點的基礎上,大家可以嘗試我最后給出的方法,如果你覺得你的審美還提升不上去,那歡迎你們隨時找我算賬!而只是看完卻沒有實質行動,那就不要再抱怨自己什么提升上去了。

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

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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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


          數據可視化

          博博

          這兩年互聯網行業在 C 端市場上的增長已經不足以吸引大眾和投資者的視線,B 端作為一個新的熱點開始被追捧。 

          但 B 端是一個泛指,它是由若干面向商業場景的不同細分行業組成。包括云服務、SAAS、PAAS、定制系統、數據可視化、智慧平臺、商用 HMI 等等。 

          不同 B 端細分行業差距是非常大的,就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業一樣。每當我們討論 B 端行業前景,就一定要聚焦到具體的行業類型,否則就沒有討論下去的基礎。 

          而我們今天重點聚焦的,就是目前聲勢極大的數據可視化行業。 



          這是最近很多同學咨詢和關注的領域,也是各大顯卡廠商、3D 引擎發布會上的???。 



          各種讓人眼花繚亂的圖例和技術應用解說,很容易讓我們產生未來已經加速向我們走來的 “幻覺”,此時不抓緊時代的機遇投身數字化界面的設計,更待何時? 

          但我還是要勸大家別光顧著雞凍,冷靜下來好好分析這些行業和市場狀況,當你了解的越多,你就越會發現,這個職業方向和你們想的不太一樣…… 

          首先,數字可視化領域也是一個比較籠統的行業,它依舊可以拆分出若干細分領域。但我先簡單根據視覺展示類型把它們分成兩大類,平面展示型和3D展示型。為什么根據這個分而不是商業場景,下面會做進一步解釋。 

          首先,數據可視化不是用了花哨的 3D 視覺才叫可視化,平面展示類型是絕對不能忽視的一個方向。它的主要應用場景集中在商業 BI ,統計分析工具等。 

          比如統計并查看網站、應用、店鋪數據的平臺。 



          這類產品有非常廣泛的使用場景和需求,是現代企業和產品運營的基石,它存在的價值是毋庸置疑的。 

          而另一類 3D 展示型的細分發展方向,包含展示大屏、數字孿生、智慧項目、商用 HMI 等類型。 



          這類項目更多是由技術發展催生而來的 “新需求”,和 5G 的發展是高度相似的。我對這個行業的發展潛力是認可的,但對設計師從事這個行業的總體前景持悲觀態度。 

          下面,針對真正的數據可視化設計師,我會從下面幾個維度展開討論(唱起反調): 

          - 知識門檻 

          - 行業特征 

          - 團隊價值 



          數據可視化是對數據信息進行圖形化設計的過程,這個行業不是這兩年才出現的,而是由來已久。 

          從世界上第一個圖表的誕生之后,就有無數統計學家和設計師投身到這個領域中,發明和設計出各種精妙絕倫的圖形。



          數據可視化的重要性不會比任何其它設計行業低,但是,數據可視化重要性的來源,是由數據本身的價值賦予的。因為詮釋數據的方式精彩,所以有價值,而不是僅僅是因為你做得好看且花哨。 

          更進一步說,就是數據可視化的價值是被統計學賦予的,而統計學是被這個世界真實需要的。 

          但很可惜,極少有 B 端設計師會投入精力到統計學的基礎知識和應用,這就導致很多設計稿中,連對數據的展示應該用折線還是柱狀都分不清。 

          或許你依靠經驗可以提升對一些基本圖表使用的心得,但是,進階的可視化設計需求就靠幾個簡單的折線、柱狀、餅圖就能解決嘛?那下面這些圖形應用需要掌握什么? 



          復雜的可視化應用場景,不僅需要設計師對統計內容和數據應用有主動地分析,還需要對計算機圖形學有一定的掌握。先不說門檻極高的 R 語言應用,但凡涉及到區級以上的地理信息可視化,就一定需要應用 GIS 工具的應用,導出并轉化數據包。 



          除了 2D 以外,3D 可視化的項目,所需的知識儲備就更進一大步。很多新人的認知以為設計師的工作只要用 3D 軟件建模并輸出就可以,學會 C4D 就可以做可視化項目。

          這和以為掌握烤箱的功能就可以做出美味的蛋糕性質是一樣的…… 

          前面說過,3D 可視化是由技術發展催生出的行業,它的應用受到技術的影響非常大。因為 3D 應用實在是太復雜了,比 2D 圖形復雜好幾個量級,這就導致設計可以落地的限制遠遠超出新手的認知。 

          常規的 3D 項目,必然要借助相關的圖形協議或者引擎。比如新手剛開始都以為的 3D 可視化就是網頁中運行 3D 效果,而網頁運行 3D 就是借助 WebGL 圖形協議實現的。 



          由于各種技術和硬件限制,WebGL 的性能是奇差無比的,因為它的圖形繪制渲染主要依靠 CPU 來完成,只要項目稍微復雜一點,多邊形和圖元數量一多,立馬就會讓電腦變卡(CPU占用量暴漲)。同時,它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。 

          因為 WebGL 太弱,目前封閉的可視化項目就轉而使用其它的技術解決方案,即虛幻 Unreal 和 Unity。沒錯,就是你們玩游戲啟動畫面中顯示的那倆引擎。 



          換句話說,現在的高端 3D 可視化項目,就是用做游戲的方式做可視化應用,只要在指定設備里安裝,就可以調用 GPU 資源,實現更高級復雜的效果。



          但是,只要應用了對應的引擎,就必須使用配套軟件來完成渲染、動畫、交互事件。即通過 C4D 或者 Blender、犀牛等軟件完成建模(不同可視化項目應該用的建模軟件也不一樣),再導入到虛幻或者 Unity 編輯器中進行下一步的操作,然后再和開發進行交付。 



          因為 3D 的復雜性,導致獨立 3D 可視化項目的開發流程被大幅度拉長,從而讓設計師需要掌握的知識面也大大增加。中間每個步驟都充斥著各種屎尿屁的限制,我就不繼續展開了。 

          3D 可視化設計師,幾乎就等同于游戲行業中的技術美術(Technical Artist),因為游戲開發更復雜,分工更明確,技術美術作為設計師和開發之間的橋梁,幫助項目的美術能盡量在技術上被實現。 

          而因為可視化項目的建模精度與視覺效果要求不高(對比游戲),這些工作就要由同一個崗位包攬,設計師就沒辦法回避這些讓人絕望的知識信息。 

          還有一點對比游戲行業更讓人絕望的,就是 3D 可視化實際應用的技術方案是高度碎片化、沒有體系的,而且技術迭代周期遠比游戲行業短(WebGPU已經在路上了),這在客觀上增加了設計師的從業壓力(歡迎體驗前端開發的壓力?)。 

          一個專業的可視化設計師知識門檻,是遠遠高于一般 UI 設計師的。 



          當我們研究一個行業的前景時,就是研究它未來的趨勢和潛力。數據可視化嚴格意義來講并不是完全獨立的一個行業或市場,而是其它多個大市場中的某個組成部分。 

          如前面提到的數字分析、物聯網、工業物聯,都是層次更高的商業化市場。這些都是近年來高速發展的熱門行業,是帶動可視化行業發展的客觀依據,我就不一一找公開統計數據佐證了。 

          而可視化除了商業場景外,還有個在國內做可視化繞不開的話題 —— 政策。 

          如果具體關注過地產、5G、電動車產業的發展歷程,就應該明白國家意志的貫徹可以怎樣在短時間內催生出市場的高度繁榮(或者泡沫)。 

          而政策對于可視化的利好,就在于 “數字政府” 概念的規劃中。從幾年前開始就興起的政務數字化轉型,到最近國務院發布的 《關于加強數字政府建設的指導意見》,都是中央直接 “指導” 地方發展數字化的指標,是行政意志與力量的體現。 

          說更具體點,下面是指導意見中的目標說明,非常直白,大家可以自己體會: 

          到2025年,與政府治理能力現代化相適應的數字政府頂層設計更加完善、統籌協調機制更加健全,政府數字化履職能力、安全保障、制度規則、數據資源、平臺支撐等數字政府體系框架基本形成,政府履職數字化、智能化水平顯著提升,政府決策科學化、社會治理精準化、公共服務高效化取得重要進展,數字政府建設在服務黨和國家重大戰略、促進經濟社會高質量發展、建設人民滿意的服務型政府等方面發揮重要作用。 
          到2035年,與國家治理體系和治理能力現代化相適應的數字政府體系框架更加成熟完備,整體協同、敏捷高效、智能精準、開放透明、公平普惠的數字政府基本建成,為基本實現社會主義現代化提供有力支撐。 

          原文鏈接: http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm 

          正因國情在此,所以這些年 G 可視化項目才如雨后春筍一般涌現。智慧城市、智慧農村、智慧水利、智慧交通、智慧民政等等,都是借助這股東風蓬勃發展。 



          所以,商業和政務的迫切需求,催生出一大批可視化服務公司,如 EasyV、ThingJS、觀遠等。即使頭部大廠也生怕錯過這個機會,紛紛組建團隊進行行業布局。如騰訊云的 Raya Data、阿里云的 DataV、網易的數帆等等,都已經小成氣候,初現鋒芒。 

          市場需求旺盛,規??焖僭鲩L,前景理應一片大好!但是…… 

          市場總規模的擴張,帶給個體的收益卻不一定有表面看起來那么理想,尤其是設計師崗位。 

          這要先從常規 UI 設計行業說起,UI 設計師工資已經是國內設計行業工資最高的類型之一,從10年前的屌絲行業到今天能和老牌貴族建筑設計叫板,是非常了不起的成就。 



          而之所以有這種收入,除了移動互聯網爆發以外,最重要的原因就是互聯網產品的 “利潤率”,可以用非常少量的職員撬動上億甚至上百億的利潤。 

          如王者榮耀 2021 年全年盈利 28 億美元,接近 200 億人民幣的利潤。一款游戲的利潤直接達到萬科(2021年利潤225億)和中國人保(2021年利潤216億)的水平,他們都是在冊員工超過 10W 人的大型企業,也是國內各自行業里的巨頭,而王者的員工只是他們的幾百近千份之一。 

          再如螞蟻金服、微信、抖音之類的國民級互聯網應用,都是用極少的員工達到讓人難以置信的估值和利潤,這在傳統行業是無法想象的。 

          所以能盈利的公司會給員工開出滿是行業紅利的待遇,拔高行業上限的同時,也迫使那些有志于挑戰巨頭的新公司愿意抬高工資價碼,吸引人才。 

          總結起來,UI 之所以平均收入遠超平面、服裝、工業、室內等老牌設計行業,并不是因為 UI 專業門檻更高,而是以行業規模、項目規模、利潤率三個核心指標的共同作用形成。 

          其中,項目規模和利潤率的重要性,其實遠遠大于行業規模,這是很多職場新人最想不通的地方。 

          例如廣告行業已經是一個萬億市場了,除了分眾這家互聯網獨角獸外,其它老牌廣告營銷公司每年財報的營收和利潤大家感興趣的可以去搜搜(下圖為 21 年財報)。 



          看看他們的營收總額和凈利潤比例,以及員工總數,你自己就會得出,作為普通平面設計師的待遇,是絕對不可能超過頭部互聯網企業的,甚至能達到中游水平都是超常發揮的結論。 

          行業規模大,但是頭部企業規模和利潤卻不高,除了行業本身的平均利潤率因素外,還有一個原因就是業務是高度分散的,沒有被集中在少數頭部企業,供應商數量龐大,不像多數 C 端市場都由少數幾家公司或者產品把持或直接壟斷。 

          在可預見的未來,可視化行業也會處于這樣的情況,競爭激烈,利潤率低。而且作為 B 端服務商,不要看各家企業需求旺盛,政府各級單位招標不斷,實際上每個項目的規模都不大,百萬內的項目才占行業的絕大多數,這是不太符合滿足我們收入期待的項目規模。 

          而單個項目規模在未來高速擴大在我看來也不太現實,有兩個原因,一個是項目使用人數極少(通常也就幾十上百人…),另一個就是對可視化項目實用性的質疑。 

          如果看過航天相關的報道,就會看到指揮室數據大屏相比我們網上看過的案例比起來,簡陋得發指。這會是因為總局沒有預算,請不起設計師和團隊開發嘛? 



          為什么航天指揮中心沒有用下面這種 “科技感” 滿滿,復雜的我坐下面保證除了標題一個字也看不見的 “高端設計”? 



          原因說出來讓人沮喪,因為他們 —— 真的要看上面的信息??!

          真正能發揮可視化價值的場景并不多,很多項目出發的意義,就是為了表面工程(各級ZF單位需求,自行體會),裝飾屬性大于實用性。既然實用性不夠高,很多甲方心里也清楚,是花錢裝裱門面的,那么投入的預算就更不可能太高。 

          所以,我對可視化行業的整體的發展是認可的,但對單家公司或項目的預期,卻是悲觀的,它們沒法達到我們已經習慣的 C 端和 SAAS 行業的高度。 



          最后,還要探討下數據可視化中設計師的團隊價值。 

          我們知道,一個完整的可視化項目設計與開發門檻都是非常高的,但因為高,創造的價值就高嘛?項目營收的成本占比就高嗎? 

          答案依然是否定的!因為可視化行業的絕大多數項目都是 “傳統” 的外包項目。 

          不管是商業是政務領域,外包最重要的任務,都是找到業務(中標)。樸素的價值觀會認為,只要技術和服務夠好,業務自然源源不斷,其實不然。技術服務都是后驗的,客戶沒有合作過之前是不知道的,在市場上挑選服務商,可不是打開淘寶買家評論查看分數和具體評價篩選。 

          所以,外行了解服務商的窗口,更多是通過熟悉的中間人介紹,或者銷售的嘴。誰能拿到項目,誰就為公司創造了最大的價值。后面怎么做那是后面的事,換誰做不是做…… 

          這就是最常見的外包企業思路,所以技術人員或者設計往往都是消耗品,沒有那么強的依賴性。而在具體外包實踐環節中,項目的執行決策也和一般 B 端、G 端項目不同。 

          我以前一直強調,B 端項目的存在價值,是用來解決業務問題,為企業 —— 降本增效。但是可視化項目往往不是用來解決問題,而是用來 —— 解決產生問題的人! 

          尤其是面向政務的項目,在領導的需求面前,是沒有體驗這一說的,首先考慮的應該是 ”科技感“(結合前文理解),不然怎么展示自己貫徹上層指導意見…… 



          這種環境對于創意類職業是非常不利的,一方面創造的價值并不顯著,另一方面是由別人 “教你” 怎么做設計。長此以往,你會越來越缺失職業競爭力和發展可能。 

          問題二,則是因為可視化項目獨立開發成本太高昂,做的視覺內容又非常固定。于是有實力的團隊就紛紛投入可視化編輯工具的研發,解決最麻煩的底層圖形方案。 



          這和 B 端的前端開源框架非常類似,把底層的代碼、交互、動畫、性能優化都幫你做好了,設計師和程序員可以用非常省事的完成項目的視覺內容落地。 

          但是,常規 B 端管理項目中,界面樣式一直就不是最重要的事情,而是解決復雜頁面流程和組件交互的問題。所以資深的 B 端設計師樂于應用第三方的框架來完成復雜的項目。 



          而在可視化領域中,多數項目并沒有那么多和復雜的交互需要考慮,視覺展示效果才是第一位,絕大多數團隊應用第三方框架是大勢所趨。核心工作內容被影響,那才叫觸及靈魂的打擊。 

          所以,在我看來可視化設計師可以創造高價值的場景,只會出現在兩種團隊中。 

          第一種,是給其它可視化團隊提供圖形服務的 SAAS 工具,比如 Raydata、EasyV 這類。都需要團隊有非常優秀的前端程序員和技術積累,換句話說,就是既要有技術實力又要有資金保障的團隊。 

          第二種,則是走優質項目輸出路線的小團隊或公司。會有一些優秀的開發人員坐鎮,再由設計師主導來推動業務發展,不會什么項目都做,會選有價值的用心交付。例如早年的 UI 外包團隊 ARK、Eico、TangUX 等都是這種路線。 

          這兩種對比目前海量的服務商來說都是鳳毛麟角,第一種類型是可視化設計師發展最好的歸宿,因為設計產出和圖形技術發展高度捆綁,只有這樣的團隊才會最早最快接觸新的專業技術方案。 

          除了這兩類,不要對其它外包類公司有太多的期待。在整個互聯網行業中,成熟產品團隊非常不喜歡招外包設計師不是沒有原因的。 

          至于未來是不是可視化內容會在 C 端領域打開局面,發展出一些新的應用場景,我就不過早下定論了。 



          最后,做個總結,給目前還沒有進入可視化設計行業,或者是誤打誤撞進入這個行業的設計師一些職業方向的建議。 

          可視化設計行業和廣告業非常類似,就是從業人員收入構成是沙漏狀,而不是像 UI 這樣呈金字塔狀的,缺乏健康的增長梯度和充足的腰部崗位。 



          可視化設計師從菜鳥進入專業階段所需的知識量更大,準備周期更長,技能門檻更高。在初中級階段和一般 UI 行業對比起來 —— 毫無性價比。 

          如果本身熱愛可視化,想將 FUI 那些東西搬進真實的世界和項目里,也做好了艱苦學習的準備(說不定是你樂在其中的),那么這個的行業的頭部崗位就是為你這種人準備的。 

          畢竟行業體量大,當然就會有真正優質的崗位出現,只是它的門檻高,沒有那么多水分能擠。 

          如果不是異常熱愛這個行業,具備較強的自學能力,或有一定的 3D 和圖形技術知識積累,那么不太建議往這個職業深入發展,一般的 B 端和 SAAS 項目才會是更好的選擇。



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



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

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          輕擬物設計

          博博


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


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


          這種狀態持續了很多年,看起來歲月一片靜好。


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


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


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


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


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


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


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


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


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


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


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


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


          且除了 APP 外,其它領域對于擬物設計的需求也會開始逐漸提升,尤其是目前越來越復(fu)雜(kua)的大屏數據展示、車載界面、定制系統等等。


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







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


          首先我們看看,過去優秀的擬物圖標和設計案例,它不僅表現元素本身的光影、透視、構造,甚至會非常完整的表現物體表面的材質和肌理。


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


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


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


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


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


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


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


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


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








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



          形體表現


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


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


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


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


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



          光影表現


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


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


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


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


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


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


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

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


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

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








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


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


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


          第一步:確認輪廓造型


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


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



          第二步:完善圖形細節


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



          第三步:增加基礎的暗部表現


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


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



          第四步:增加高光效果


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

          undefined


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


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

          2.豐富細節樣式增加趣味性和適當的擬真感

          3.通過蒙版添加暗部來完善表現的明暗和層級關系

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


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



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



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


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

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

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

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          ui中的投影

          博博

          在如今的界面設計中,投影使用的范圍和頻次越來越高。無論線上項目或是追波上飛機稿,都可以看見各種各樣的投影樣式。

          投影的使用,是 UI 設計師必須掌握好的視覺設計基礎。投影遠沒有大家想象的那么簡單,即使軟件中可以設置的參數并不多,很多設計師始終沒辦法很好的應用投影來提升自己的設計質感。

          所以,這篇文章就會詳細講解設計投影的正確姿勢。





          有了光,才有影。光影是美術和攝影最核心的基礎。

          如果沒有系統學習過相關理論,對投影的認識會有失偏頗,會認為投影只是將一個物體的輪廓(遮擋光源的部分)完整映射在其它平面上而已,一個光源下只有一個影子,比如下圖設計出來的情況。

          但是,真實世界中的投影,卻并沒有這么簡單,往往虛實即不統一,明暗也不一致。就像下面這個物體的陰影。

          undefined

          在光學原理中,不透明物體遮擋光源,所產生的影子有兩個部分,本影和半影。本影是影子中間最暗的部分(還有偽本影的概念,我們暫時將它合并起來理解),而四周開始變淺變淡,有彌散質感的影子稱為半影,就像下圖所示。

          現實世界中可見的投影都會形成這兩種影子,因為光源有散射的特征,當光線照射在物體上時勢必會產生非垂直角度的光線,于是其中作用最大,重疊最多的一部分形成本影,而其余比較極限的切線部分形成半影,如下圖的案例。

          通過案例我們也可以發現,當光源、物體、陰影面的距離不同時,產生的本影和半影面積也就不同。反過來講,我們還可以通過物體本影和半影的面積,來判斷它的空間關系,比如下方的兩個物體,明顯能感受到下側懸浮的高度大于上側。

          或者,通過陰影來判斷光源對于物體的方向和強弱。比如下圖案例,就可以明顯判斷光源位于畫面的左側,所以即使擺入其它物體,陰影也會朝反方向延伸。

          除此之外,投影還可以反應很多其它隱藏的三維信息,只要使用得當,它就可以幫助設計師表達呈現各種不同的空間位置。比如可以通過投影判斷物體是處于懸空或者是平躺,以及物體的厚度如何。

          根據生活的經驗,我們已經對投影所產生的暗示習以為常,能根據投影的結果下意識的對界面內容做出判斷。所以,設計師在設計過程中如果對投影沒有進行很好的思考,就無法設計出符合規律和邏輯的投影,界面就會產生違和感,而作品也因此大幅降低了質感。

          undefined





          在進入了扁平化的設計環境后,投影有很長一段時間被抹除,因為大家認為那是擬物的遺毒,就怕設計里用到擬物元素顯得不夠時髦。

          到了 Material Design 發布以后,谷歌在規范中增加了 Z 軸的概念,也就是為平面預設了立體的空間,設計元素可以定義與空間中水平面的距離,并通過投影來表現。

          下圖中,Z 軸數字越大,代表和水平面的距離越遠,上升得越多。而帶給我們這種感受的原因,就是投影的暗示,元素本身的 XY 坐標并沒有任何改變。

          即然增加了投影,那么谷歌的專業設計團隊,肯定不會很隨意的制定其參數。當我們打開谷歌的官方 UI kits 源文件進行查看時,就能發現其中的奧妙。它們為元素創建了兩層投影,即本影和半影,有時也稱為 top shadow 和 bottom shadow。 

          并且,還有一個在第一部分沒有提及的要點,投影的深淺與元素的距離是非線性的,即中心到邊緣衰減的速度是越來越大的,用坐標軸標示就是非線性的函數關系,而大多數軟件中的投影只能以線性的模式呈現。

          在 UI 設計師接觸的平面類軟件中,只有 PS 具備完美復現這種投影的能力,即控制投影的等高線。

          上面出現的投影都是黑白灰,但在現在流行的設計作品中,最常見的是應用了彩色的投影,攝影中也經常會應用彩色的投影渲染氛圍。

          但是,投影中的這些彩色區域,并不完全都是投影,還包含了折射和漫反射等混雜的色光。為了簡化(完整的闡述可以寫一本書了),我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘,傘下的人頭頂也會彌漫著草原的芬芳……





          在開始展示具體的設計案例前,我們要先明確一個原則,即:優雅的投影是讓你感受到它的存在,但不會吸引你去關注它!

          undefined

          一般的設計軟件中,元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形,我們可以通過 XY 軸移動它的位置,并使用模糊的參數來設置它的彌散度。

          當元素距離水平面越近,陰影距離元素也就越近,即投影的 XY 值越小,模糊也越小,如果離得遠則相反。



          3.1 常規投影類型


          第一種投影的類型,即假定元素平躺,光源正對著元素的平面,可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0,只添加模糊的參數,透明度較低。第二層陰影使用相同的模糊參數,增加 Y 軸坐標,透明度較高。

          在非 MD 設計中,它濃郁的投影參數會讓整個界面變“臟”,變擁擠。我們要做的是要降低投影的透明度,這樣才能讓投影的表現更自然舒適。要牢記的是,當使用純黑色做陰影時,透明度無論如何都不應該高于 20%,正常區間在 5%-15%。

          既然知道陰影屬性的規律,我們還可以復制這個矢量圖層做高斯模糊也可以得到一樣的效果,這種方法可以支持我們設計出更真實的投影。即將 Bottom Shadow 獨立出來,縮小并向下移動。

          如果想要得到彩色的投影,那么只要切換投影的色彩即可。值得注意的是,不同色彩的刺激程度不同,我們要憑感覺去調整它們的透明度。

          如果感覺不得勁,陰影太少了,那么我們就讓元素的 Z 軸上升。

          既然前面提到彩色投影是由于光線穿透了元素,那么當使用了漸變色或者是圖片的投影,我們在之前提到的復制出的那層充當 Bottom shadow 的矢量圖形,就可以不使用填充色,而是直接用漸變或者是原圖進行模糊和透明度調整。



          3.2 非常規投影類型


          光既然可以垂直于被照射平面,那么發揮想象力,我們還可以更改光與面的位置,讓光線與平面之間的夾角變小,如下圖所示。


          在這個場景中,投影就作用在圖片下方的地面,只有地面處于透視狀態時,才能可以看見它的投影,所以,我們就可以得到下方的效果。

          當然,我們還可以結合光源的類型,比如使用聚光燈等,那么陰影的輪廓就會發生變化。

          我們甚至可以假設元素本身產生了一定的變形,如邊緣翹起,那么就會出現獨特的陰影形狀。

          我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中,讓我們設計中的視覺形式更豐富有趣。




          學會正確的投影設計方式,并不是僅僅讓我們局限在 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助,比如做設計作品的包裝。

          通過前面講解的知識點,上方展示案例中應用的陰影方式相信你們已經可以看出端倪了,如果使用基礎的陰影設置去創建展示的陰影,就會發現效果遠遠不如案例的高級,自然也難以帶給別人良好的視覺體驗。

          最后,在項目中,想要將設計出來的陰影交付給開發,真正落地實現出來,無論安卓或是 iOS ,陰影的渲染和設計軟件的參數是不一致的,這就需要大家自己鉆研究了。

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

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

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          高效ui配色策略

          博博

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


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


          要在小小的手機屏幕中加入這么多顏色,并保持其中的聯系和邏輯,著實不易。如果你還對配色一無所知,完全不知道配色應該怎么入手,那么你需要了解一下,我幾年經驗總結的配色思路。






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


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


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


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


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


          細心的同學應該已經發現了,它們的首尾都是紅色,那是因為色相的序列是一個首尾相接的環形模式,所以它實際上就是色環的柱狀展示圖,應用起來和色環沒有實際區別。


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


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


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

          undefined


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






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


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

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

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



          2.1 主色的選擇


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


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


          在今天的互聯網產品中,主色的應用選擇范圍在拾色器區域的右上角,前面已經有解釋了。這和平面設計中的用色有非常大的不同。


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


          支付寶主色變更分析


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



          2.2 輔助色的選擇


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


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

          undefined

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


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


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


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



          2.3 中性色的選擇


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


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


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

          undefined

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


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


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






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


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

          undefined


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


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


          undefined



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


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


          undefined



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


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


          undefined



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


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


          undefined

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






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



          undefined



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



          4.1 配色流程演示


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


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


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


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


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


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

          undefined



          4.2 其他配色類型應用


          根據第一個方案,我們可以再用這個原型來實現其余的三個方案的配色。


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

          undefined

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

          undefined

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

          undefined

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


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



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



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

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          日歷

          鏈接

          個人資料

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

          存檔

          亚洲va欧美va天堂v国产综合