<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>

          首頁

          ICON設計法則—菱形法則

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          從不同維度對Icon設計進行解析,整理一整套Icon設計的法則

          網絡上有很多關于Icon設計的文章,一些文章從部分維度切入講述Icon的設計理念,但大部分缺乏整體性。


          所以我嘗試把自己的思考方式結合其他人的設計理念整理了一個完整的Icon設計法則,通過簡單易懂的描述語言,并且結合設計案例呈現出來,希望能夠對大家有所幫助。文章使用的案例只代表個人觀點,并不代表相關產品。


          本文重點講述Icon設計思維,關于Icon的具體定義以及具體的制作過程就不再贅述,網絡上有很多相關文章都有講述。


          從不同維度對Icon設計進行解析,整理一整套Icon的設計法則。每一個產品中都有不同類型的Icon,產品通過Icon可以快速的向用戶傳遞語意,通過獨特的設計語言讓用戶形成對于產品的認知心智。Icon的重要性就不言而喻了。


          ICON的設計法則-菱形設計法則,主要包括語意、層級、設計形式、風格、一致性、范圍。而其他的設計思考也是這個設計法則的變體,中心思想沒有發生變化。通過對以上設計思考點的聚合,來設計能夠傳遞Icon語意,并且能夠清晰展現產品結構和信息層級的Icon系統,通過差異化的設計形式展現產品設計的獨特風格,讓具有一致性的設計語言傳遞信息,和用戶形成共鳴。

          Image title



          層級

          第一層級Icon

          第二級別Icon

          第三層級Icon

          第一層級的Icon一般指首頁的井字入口Icon,讓用戶快速獲取入口信息,完成對產品流量的分流,讓用戶快速完成自己的任務。這種類型的Icon是級別最高的,無論是面積、形式感、視覺沖擊力都應該是最突出的,這種高層級的Icon可以簡單通過一下三種方法表現,1、擬物化的設計方式增加視覺重心和吸引力。2、通過細節的增加呈現Icon設計的復雜形式感。3、采用沖擊力強的色彩對比,抓住用戶的關注點。除此之外具體的思考過程,后文也會詳細講述。


          下圖分別是“自如” “每日優鮮” “大眾點評”的首頁入口Icon,分別采用了擬物化設計,細節添加,色彩對比的設計方法。

          Image title


          第二級Icon歸納為導航類型的Icon,引導用戶操作產品,完成用戶的任務,同時傳遞品牌特色。這種Icon類似真實街道中的指向標。第二層級的Icon不需要做的視覺重點非常重,能夠讓用戶認知到,并且了解Icon傳遞的信息,在操作行為上產生預期就可以。通常的設計樣式是線型Icon或者是面型Icon。


          下圖分別是“自如” “每日優鮮” “大眾點評”的二級Icon系統

          Image title


          第三類Icon是語意型Icon,主要是向用戶傳遞信息,烘托信息氛圍,并且引導用戶瀏覽信息。這種類型的Icon視覺相對較輕,且不可點擊,具體的設計思考在后續的內容展開。


          下圖分別是“自如” “每日優鮮” “大眾點評”的三級Icon系統

          Image title


          以上三級的劃分并不是說Icon只有這幾種類型,這樣劃分是從功能和視覺上進行區分便于設計同學理解,當然在具體的設計過程中也可以對Icon進行更細化的區分,最主要根據具體的需求去定義Icon的層級,然后再采用對應層級的設計語言。


          語意    

          1)、Icon背后的語意(Icon的特性歸納)

          2)、Icon的可識別性(Icon的特點表現)

          Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產品信息。所以在Icon的設計之前,需要思考Icon背后傳遞的文字語意,理解語意,構建對于語意的多維拆解(比如沙發是由靠背、兩個扶手、四條腿構成,重心要穩,和床有哪些區別等等)。同時還需要思考Icon圖形化之后的可識別性,基于對用戶認知的了解,歸納Icon設計中需要具體表達的幾個關鍵特點,迎合用戶的認知心里。幫助用戶快速的獲取Icon想要傳遞的信息,如果不能快速的獲取,反而增加了用戶獲取信息的成本,那就本末倒置,削弱了用戶的使用體驗。


          例:下圖是“大眾點評”二級Icon設計的語意表現思考方法

          Image title



          設計形式

          1)、外形

          2)、表達方式

          3)、色彩組合

          4)、Icon特色

          外形是Icon 的基本形態,不同的形態傳遞不同的視覺感受,構建不同的心智。同時Icon的外形決定了內部元素的設計。


          Icon的表達方式主要兩種,分別是線型Icon,面型Icon。線型Icon形式抽象、簡潔,便于用戶識別,用戶認知成本較低,缺點是Icon容易極簡,造成了似是而非,可識別性降低。面性Icon相對線型Icon視覺重心更突出,便于用戶聚焦,設計表現形式會更豐富,缺點是可能會過于復雜,造成信息層級混亂,增加了用戶的認知成本。


          色彩組合,就是Icon中的色彩語言,在設計Icon的過程中通常包括單色系的Icon和色彩組合系列的Icon。通過不同顏色的組合傳遞產品的品牌形象和產品特質,在設計Icon的過程中,尤其是導航Icon的過程中不建議使用超過兩種顏色的Icon,這樣容易使用戶視覺疲勞。


          Icon特色是Icon在設計過程中的細節,這些細節是體現Icon自身精致的部分,同時也會影響用戶對于產品和品牌的認知聯系。影響產品的感性認知觸達用戶內心。


          例:下圖以“大眾點評”中的“拍視頻”icon做舉例說明

          Image title



          風格

          1)、品牌理念

          2)、產品特色

          3)、視覺特色

          品牌理念是是指產品背后的定義和想要傳遞的價值。通過簡介的符號、文字傳遞給用戶的認知、理解、印象、感受。通過塑造品牌理念的塑造,和用戶在感性層面形成共鳴。融入品牌基因的Icon系統具有更好的辨識性和認同感。這需要設計師和業務團隊一起溝通產品,深入理解業務,總結出關鍵詞語表達品牌,最終和業務團隊達成統一共識。


          產品特色指產品在同行業中的定位差異,核型競爭力。通過簡潔的視覺語言進行表現。通常的產品特色體現在業務范圍、用戶群體,使用場景,產品功能等。在這四個維度中總結歸納成可落地的具體的表達關鍵詞,進一步具象化。


          視覺特色指在競品分析中,總結得到在視覺層面其他產品中可以借鑒的感性共性和自己產品定位差異性的結合。通過可借鑒的共性傳遞行業的特點,而差異化的視覺表現可突出自己產品的特色和競爭力。


          例:繼續以“拍視頻”Icon為例子進一步解釋說明

          Image title



          一致性

          一致性的綜合表現在圓角、透明度、線條粗細 、間距、顏色、層級、漸變、特色細節


          Icon的一致性有利于降低用戶的認知成本,便于品牌傳遞,而Icon的非一致性會增加用戶的跳出感,降低用戶對于產品專業度的認可。通常情況下可以通過以上8個維度進行分析和提煉。前七個維度大家比較好理解。重點解釋一下第八個維度“特色細節”,特色細節是設計師通過對于產品和業務的理解主觀加入的一些關鍵性視覺表現的點,增加產品一致性的基因,可能是斷線,尖角,原點等等標志性元素。


          例:下圖通過對“大眾點評”Icon做拆解進一步從六個維度說明Icon系統的一致性(并不是說每一個icon的設計必須包含八個維度)

          Image title



          范圍

          視覺范圍和熱區范圍


          隨著Sketch的普及,更多的設計師開始采用一倍的設計畫布輸出設計方案,但在設計的過程中需要注意視覺面積和物理面積,兩個Icon的物理尺寸大小是一樣的,視覺感性的面積偶爾會變化。所以需要在設計完Icon之后,對Icon進行排列,進行視覺對比,發現視覺的不一致性。


          熱區范圍是代碼定義的用戶可操作的交互面積,視覺是感知不到的。熱區范圍的確定有利于開發工程師和設計師達成視覺方案的一致。避免后期由于大家對于方案設計、開發理解的不同,增加后續溝通的成本。通常情況下會出現的問題就是

          1、界面開發的還原度低

          2、熱區范圍過小,用戶無法點擊

          3、Icon的熱區范圍不一致。

          Image title



          總結

          在設計的過程中,Icon的樣式可以借鑒,但要根據自己的產品做形式上的調整,具體可以通過上述談到的幾個維度作為切入點調整Icon。同時在設計的過程中避免無窮的細化,因為有些細節用戶根本不會觀察到,這樣做只能是設計師的自嗨。設計師容易漏掉的是熱區范圍的確定,盡管Ios平臺和Android平臺都有對于Icon范圍的定義,但針對產品的icon熱區范圍調整還是要有設計師自己的想法。這樣才能增加Icon設計的思考價值,也更符合產品自身的特色。

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

          官方揭秘!飛豬首頁2018完整改版背后的設計過程回顧

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          飛豬首頁在這兩年,經歷過無數次大大小小的改造。而在2018年7-8月,我們對飛豬首頁進行了尤為重要的,一次較為完整的改頭換面。這篇文章,包含了飛豬首頁歷次改版的回顧。我們也想和大家分享一下,2018年,我們這次完整改造背后的思考。

          飛豬首頁的歷史

          我在2015年畢業后,就來到了飛豬。其實當時還沒有飛豬的概念,那時候的 app 叫「阿里旅行·去啊」,后來了解到我們還有過「淘寶旅行」、「阿里旅行」、「去啊」等這些曾用名。

          說起名字還有個故事。我剛工作那會打Uber,司機們都特熱情,打車能和你聊一路。

          有個司機問我:「你是在阿里哪個部門工作呀?」,我就說:「去啊」。司機很激動,馬上說:「哦哦,我知道,那個去哪兒網,頭像是綠色駱駝的那個!我老婆手機里就裝了一個!」

          我連忙說:「不是的不是的,我們叫去啊,不叫去哪兒。我們也叫阿里旅行,或者淘寶旅行,你知道吧…」

          然后我們討論了一路「去啊」和「去哪兒」的區別。

          雖然直到我下車,我也不知道司機老哥有沒有弄明白。

          這個事其實很有代表性。在當時,旅行市場最大的品牌就兩個,攜程和去哪兒。雖然市場上還有同程、窮游、螞蜂窩、驢媽媽、藝龍等旅行相關的app,但我們就叫「去啊」,其實已經暴露了我們的目的(并不是為了讓大家想下「去哪兒」的時候,不小心下載了「去啊」),而是我們當時的目標就是要做一個對標OTA 的旅行預訂工具。

          這時候我們的首頁和他們比起來,簡直滿分。當然,我指的是相似度,滿分。

          這其實就是飛豬的起源版本首頁。在這里我們可以看到巨大的機票、酒店這樣的旅行類目預訂的入口,其實就是為了讓用戶有「預訂」的認知。

          直到有一天,產品經理在壓榨設計師出圖,我隱約聽到「我們是平臺,不是OTA」這樣的說法。那個設計師熬掉好幾根頭發之后,方案確定了,我們便有了下面這個版本的首頁。

          我們看到,這個版本的首頁看起來不像攜程了,更像是當時的淘寶。那個產品經理把他的 iphone5s 擦得锃亮,非常興奮地給我展示:「你看,這個首頁,改得太棒了!比以前好多了!」

          其實以我當時的聰明才智,真沒看出來。但后來想想,這個改版其實是一次覺醒。這個改版意味著,我們要在平臺的業務模式下,在機票酒店這樣的預訂心智之外,找到自己的特色。

          而這種差異化的思維模式影響了接下來一年多的首頁設計。

          剛開始接首頁時,我們嘗試從內容進行突破,將商品羅列升級為旅行內容。

          同時,在品牌升級為飛豬之后,我們嘗試為用戶提供更個性的服務,基于用戶可能想去、準備出發、正在旅行等不同階段,設計了「目的地個性化」模塊,讓有不同需求的用戶可以看到不一樣的目的地、玩法、商品。

          后來我們新起了場景化項目,有個業務小組產出了全球第一站、周邊好去處這兩個出境、周邊的導購場景。

          并且我們將首頁所有的信息都進行了個性化處理,讓每個人每天可以看到不一樣的內容。

          當然,首頁的樣式看起來越來越美好了,但我們仍然不滿意。

          歷史版本首頁的問題

          上面這些版本的首頁,有一個共性:我們一直圍繞著業務的布局,在首頁上設計業務模塊。比如下面的這些模塊:

          而體現在數據上,也有這么幾個共性:

          • 用戶最主要的點擊發生在頭部類目預訂;
          • 用戶在頁面中尾部的點擊非常低;
          • 用戶可能看到了頁面中尾部,但仍不點擊。

          用一句話來總結,就是用戶對排列業務模塊搭出的首頁沒有建立認知。

          2018年4月開始,我們著手對飛豬首頁進行一輪整體的改版。在改版之前,我們首先需要對之前首頁進行一次全面的體檢。

          在這里,我們使用 NLP 理解層次,來深入理解飛豬首頁到底發生了什么。

          簡單介紹一下 NLP 理解層次:我們一般可以通過6個層次理解事物,由低到高分別是:環境、行為、能力、BVR(信念/價值觀/原則)、身份、精神。這套框架幾乎可以幫我們分析理解一切問題。

          △ 用NLP分析問題背后的原因

          1. 環境:飛豬業務主導的環境

          飛豬的整體環境核心是以業務為導向的,設計的大部分工作是屬于支持性質的。在首頁工作中,我們做得更主動一些,常給一些提案,也可以算作是共創。但核心的決策權是屬于業務和產品的,所以這就導致,飛豬最后上線的東西,往往優先考慮的是業務的重要性。

          2. 行為:首頁根據業務調整不斷改版

          我們始終在跟蹤首頁的數據,并根據數據的變化、業務的傾向性對首頁進行日常的調整。

          3. 能力:設想的場景沒有做好,維度少/內容欠佳

          我們希望做場景化,其實是很好的想法。但業務前期只嘗試了周邊、出境兩個場景,這很難匹配旅行用戶各種各樣的偏好。

          同時,飛豬在生產高質量內容的方面做得不夠,產出的內容沒有讓用戶產生興趣。

          4. BVR:內容數量>內容質量

          因為飛豬的內容起步晚,在起步初期的目標是提高內容的數量,而非生產高質量的爆款文章。所以當后續我們需要用到內容時,常常擔心取到一些充數的質量不高的內容。

          5. 身份:售賣平臺

          飛豬以往的定位仍然是旅行商品預訂平臺,這也會在一定程度上,導致我們不會在提升內容質量上投入太多。

          6. 精神:?

          這個層面我只能說我個人的理解:我希望飛豬能讓旅行者享受更多旅行的快樂。

          2018年飛豬首頁做的改變和突破

          通過分析我們發現,飛豬的身份定位,對我們設計產品會有從表及里的深度影響。如果我們定位是旅行預訂工具,必然只能做出小的創新。所以如果要做大改變,首先要定義飛豬的新身份。

          而恰巧,2018年飛豬迎來了新的品牌定義──「全球fun肆玩」。我們開始從旅行預訂平臺進行更大膽的轉型,試圖建立新的在線旅游生態。

          在這個身份轉變的契機下,我們在2018年對首頁進行了升級。

          1. 矯正目標

          飛豬的新目標叫「全球fun肆玩」,關鍵在fun。我們需要通過設計,激發用戶旅行的欲望。

          2. 重構框架

          舊版飛豬的框架依然是圍繞業務架構建立的。而在這次改版中,我們希望基于每一個普通旅行者的視角,來建立新的首頁框架。

          在建立框架之前,我們需要挖掘的是,旅行是什么?

          有人說旅行是機酒火汽的預訂,其實不是。我理解的旅行指的是人,花一段時間,離開現在的位置,去感受快樂。其中包含了角色、目的、地點、時間4個關鍵的因素。而取決于角色的不同,每個人在旅行上作出的決定也是不同的,所以「人」是旅行真正的內在因素。

          而我們認知里零散的旅行方式,如:跟團游、自由行、親子游、出境游、周邊游只是被內在因素對旅行產生影響的結果。

          而偏偏旅行還要求我們產生玩的想法,留出足夠的時間,從一個地方去另一個地方。當定機票酒店已經不再是個難題的時候,我們決策困難的原因更多是在自身:我不知道自己想要什么樣的旅行。

          所以我們解析了用戶的旅行特性,發現每個用戶喜歡的內容、商品,都是不同,且是特色鮮明的。所以我們的核心需要做到的,就是讓這些無數的普通人,都能感知自己的內在,并找到和自己內在適合的旅行方式。而直接放商品、內容都讓用戶難以理解。所以我們選擇了更理想的方式來讓用戶理解自己的內在──主題。

          我對主題這兩個字的定義是:一句話描述你想要的旅行。這句話可以是:情侶最愛去、國內必玩地、舌尖上的中國、隱居西子湖畔等等和你匹配的點。

          我們初步將主題組織成了靈感、計劃、商品三個維度,希望能在玩什么、什么時間去、買什么等旅行決策上,對用戶由內而外地產生幫助。

          3. 培養能力

          在搭建好了框架后,我們需要的就是更好的承接能力。核心考驗的就是內容的生產和算法的組織。

          為了讓用戶看到更好的內容,我們使用了新的后臺,可以通過算法,動態選出具有相似主題的無數商品,搭建頻道,并進行投放,做到千人千面。

          在內容質量上,我們還將繼續尋找突破口,進行新的升級。

          飛豬2018的首頁,我們也在視覺上打破傳統,做了很多突破。

          突破空間 – 打破「屏效比」的偽命題

          在移動端設計的時候,設計師往往被要求利用屏幕的空間。

          而業務方和 PD 也非常機智,總能有一些金點子,例如:「區塊再矮一點」、「文字再小一點」、「給我多放幾排」、「一排再給我多放幾個」。

          在這樣的訴求下,我們的界面設計常常會失去很多留白空間,導致信息密度會很大。而太大的信息密度反而會影響用戶的閱讀欲望,甚至降低用戶的閱讀效率。

          而隨著設計影響力的增加,大家認識到了一個更美的、更能討人喜歡的界面,不是什么都放上來的界面。

          圖片 – 大圖凸顯內容品質

          由于以往對空間利用的苛刻,我們的圖片常常會被壓縮得很窄、很矮,有時甚至無法形成系統的圖片比例。而在解決了空間的問題后,我們可以按照1 : 1、16 : 9、4 : 3這樣的標準比例來設計圖片坑位的大小。這些比例能更好地幫助用戶閱讀圖片的內容。

          文字 – 不是裝飾,更不僅是內容

          隨著iOS11的推出,大標題對設計已經產生了較大的影響力。我們在設計首頁時就做了大膽的嘗試,使用簡短有力的大標題和留白作為每個模塊的區隔,讓用戶的視線可以從一個模塊自然地過渡到下一個模塊。

          同時,我們盡量保證內容是簡短有力的,這樣就可以用更大的字號,減少用戶閱讀的成本。

          色彩 – 來自于旅行的顏色

          以往在猜你喜歡中,我們的標簽都是用黃色或者黑色底,蓋在圖上來做的。但這會影響圖片的品質,同時較小的標簽文字蓋在圖上,其實并不適合用戶閱讀。

          所以我們優化了方案,讓小文字和圖片不要重疊,提升了文字的閱讀性。同時通過改變標簽文字的顏色,讓標簽成為了商品卡片的點綴。

          未來的首頁

          我們回顧了飛豬首頁的設計歷史,并看到了2018年我們的探索。這背后伴隨的是行業、市場、用戶的變化,提醒著我們需要把產品設計得更優秀,來面對無盡的挑戰。

          2018年飛豬首頁的改版,也代表著首頁設計模式的轉變,從業務爭奪入口轉型為基于用戶體驗,設計師、產品經理、業務方、技術團隊協同作戰的模式。

          而作為設計師,更需要始終圍繞著用戶,在桎梏中跳舞,做出好體驗的設計。

          2018飛豬首頁的改版只是開始,飛豬才剛剛轉型,未來我們將更加緊密地圍繞用戶,提供質的服務。

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

           

          為什么別人的背景色,永遠比你的有氣質?

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          無論是色彩學還是其他學科,所謂的理論也好方法也好,它們的本質無非就是規律的總結。我經常喜歡做一個比喻,就是你可以想象色彩是一座高山,而配色方法就是通往山頂的道路,但是通往山頂的道路不止一條,配色的方法也不只一個,你可以選擇一條路走到底,也可以從一條路換到另一條路,還可以每次上山都走不同的路,這就是我所理解的色彩學。所以今天我就帶大家走一條新的路來登山,這個路就是背景色的類型與應用技巧。

          背景,應該很好理解,我相信應該沒有人會不清楚,比如這里我們做的這個案例,很明顯白色的底就是背景。如果讓大家填充背景色,我相信大部分人的本能反應就是填充基本色相。

          比如這里的背景我們填充了紅色。

          當然其他任何色相在原則上都是可以的,因為都是背景色。

          但是我們本期教程所要探討的不是這種在色相上的背景色,那我們所要總結的背景色規律是什么呢?我們先來看圖。

          大家可以思考一下,看看能不能發現這其中的規律。這里的背景色類型并不是我們通常所認為的具體色相,也不是在色調上的劃分,而是從更寬泛的角度去探索背景色的規律,然后更好的運用到我們的設計當中。

          那我們就來看看背景色的四種類型是如何劃分的:分別是白底型、淡色型、深色型、黑底型。

          白底型

          首先我們來看白底型。

          說到白底不能不說白色,白色是沒有任何色彩的顏色,是非常好的調和色,可以和任何色彩搭配。

          而研究色彩最重要的就是要了解它的屬性和氣質,而任何色彩都有兩面性,白色最突出的屬性就是干凈、簡潔、純潔等等,再結合相應的設計內容和題材也可以傳遞出非常多的屬性,只要和這些屬性相吻合都可以使用白色。

          而白底型又分為大白底和小白底,比如畫面中的這個就屬于小白底,也就是說雖然是白色背景,但是內容信息比較多留白比較少,就屬于小白底型。小白底型具有的意象是實用、干凈、知性以及舒暢、通透、簡潔等等。

          大白底型也很容易理解,就是類似這種留白較多內容或元素較少的版面,我們平時說的比較多的極簡和留白風格,基本上都是這種大白底型的。大白底型具有的明顯屬性是簡約、樸素、開放、文藝、雅致、清淡等等。下面我們來看看白底型的相關作品。

          這是一個美食招貼,畫面以白色為背景,通過文字的編排以及不同色彩的食品來豐富版面,干凈、簡潔的同時又能夠很好的讓人關注食品的本身,而且這里使用的就是小白底型。

          這個海報也是小白底型,像這種在白色背景上使用黑色文字、淡色圖形或插畫的設計也很多,給人的感覺非常干凈,直接。

          這種純文字的海報相信大家也肯定見過不少,就是白色背景上方黑色的純文字編排,看似簡單其實是非常難的一種形式,難的地方不是色彩,而在于對版式能力的考驗。

          這個海報雖然也是白底黑字的純文字編排,但是也屬于大白底型,文字信息量非常少,屬于極簡留白的風格,給人的感覺就是簡約、雅致甚至是文藝和藝術。

          這是一個純凈水的海報,也是采用的白底型,上方的文字和圖形以藍色為主、紅色為輔,藍色代表水,紅色是印章的顏色,通過元素之間合理的空間以及整體的白色背景,體現出了純凈水產品的天然、健康、純凈,沒有任何其他雜質。

          淡色型

          我們再來看看第二種背景型,淡色型。

          淡色是比較冷靜的色調,沒有什么很強的主張,給人冷淡的感覺,所以淡色的使用范圍就有局限,但是只要合理的運用淡色的特點,就可以發揮出淡色的最大優勢。

          淡色最適合表現纖細、優雅、溫柔等屬性,淡色會讓人產生幸福溫柔的情緒,讓人們進入沒有刺激感的色彩世界,但是淡色調沒有積極性,太過溫柔反而給人冷淡的印象。

          背景用淡色調雖然也可以體現白色的簡潔、干凈,但是卻多了些色彩本身的傾向性,無論用什么色相都可以給人優雅、簡潔的印象,淡色最適合表現女性、優雅、平和等印象,富有情緒變化,輕柔、輕快。下面我們還是來看看相關設計。

          這個海報的背景就是采用的淡色型,背景是比較淡的黃色,海報中唯一色彩比較豐富的元素就是五個小人的插畫,而且以暖色調為主,所以背景使用暖色調的黃色可以讓整體版面的色彩很均衡,結合人物的卡通插畫給人一種純真、輕柔,以及淡雅的恬靜風格。

          這個海報是關于美食產品的,典型的日式風格,包括書法字、櫻花等等,這里的背景雖然帶有微弱的漸變和紋理,但是并不影響整體的淡粉色調,雖然是美食主題,但是這種淡雅、清新、柔軟的風格一點都不會影響到人的食欲。

          這個海報雖然是關于文化的,但是整體的風格偏向這種卡通、插畫的感覺,而且色彩使用的也比較豐富,純度和明度都控制的很好,整體協調統一,背景色使用了淡色的黃色,統一了整體畫面的色調,充滿了可愛、童趣。

          深色型

          第三種背景類型就是深色型。

          深色就是在純色中加入大量的黑色,從而讓純色變得內斂了許多,而且增添了力量感,更加嚴肅莊重。

          深色可以表現強力感和深度,這是其他色調所不具備的,如果說淡色是女性的顏色,深色就是男性的顏色,充滿了力量和陽剛,當然這并不是絕對的。

          深色融合了純色和黑色的特點,可以有效的突顯位于背景之上的元素和色彩,同時又帶有強烈的情緒,具有高格調。深色型最大的特點就是深沉,給人堅實可靠的感覺,并且還帶有神秘和幻想,配合適當的色相可以充滿激情。

          美食相關的海報很多都喜歡用深色型背景,尤其是傳統類美食,還有就是巧克力、咖啡相關的主題。這個海報的背景就是使用了深色調,給人一種高檔感和格調感。

          這個海報的背景色使用了深色調的藍色,結合白色的線稿畫,充滿了神秘感,而且很有深度,同時又不失傳統和古典的韻味。

          這是一個酒類招貼海報,深色的背景沒有任何其他顏色的干擾,純白色的文字,使得整個版面干凈利落,同時背景的深色又為畫面帶來力量感、強勁而有力,正符合了酒品類的風格和屬性。

          黑底型

          最后一種背景型就是黑底型。

          黑色代表什么都看不見,是抑制力很強的顏色,與黑色組合的顏色都會被很好的襯托出來。

          黑色最適合用來表現奢華、男性和神秘,也可以表現幻想性、神秘性和強大的力量,同時黑色也代表了閉鎖,是帶有不安和恐懼的顏色,而且還代表犯罪和暴力。

          黑色作為背景的時候,會激發觀者的想象力,讓其他色彩看上去更加鮮艷。任何元素在黑色的背景上都富有神秘感和幻想,黑色面積越大這種感覺越明顯,此外黑底型最突出的特點就是力量感、高級、內斂和莊重。

          這是張藝謀導演的電影《影》的其中一款海報,并沒有使用太過復雜的背景,就是采用純黑色為底色,上方水墨武俠的人物以及書法字,帶有傳統、古典、深沉的韻味,如果是看過這部電影的同學回過頭來看這個海報,你會發現其實電影中的爾虞我詐、人心險惡也都蘊藏在黑色的世界里。

          這個海報的主體人物是日本拳擊手村田諒太,也就是和體育、運動相關的內容,而背景正是使用了黑底型配色,體現出男性的陽剛以及拳擊的力量感。

          這個電影海報也是大面積的黑色背景,上方的元素很簡單,就是地球和文字,通過光影的處理和深邃的黑色,給人的感覺很直接,神秘、恐怖、遙不可及。

          這個海報相對來說比較偏藝術化,純黑色的背景,各種幾何圖形,簡單的文字內容,給人一種高級感和格調感。

          這個海報從字面意思以及圖形來看應該是與地震相關的主題,那么自然災害肯定是非常嚴肅的話題,所以設計者也很簡單直接,黑底白字,讓人有效的閱讀文字信息,充滿了正式感和莊重感。

          案例演示

          最后我們來看看案例演示,這里我們設計一個書籍封面,書籍的名稱是無聲告白。

          首先我們創建出網格,根據網格來編排文字信息,這里我們創建的是橫向八欄,豎向五欄的模塊網格。

          然后先將書籍名稱編排到版面兩側,各占一個格子,中間放置引言信息,同樣占據一個網格寬度,標題放在版面上方可能會顯得有些重。

          所以這里我們可以將標題下移,然后頂部編排作者名和書籍的英文名。

          然后將其他文字內容編排到版面的最下方。因為我們主要是講色彩,所以文字編排這塊就不過多講解了。

          然后將書脊部分加入進來,將書籍名稱、作者以及出版社的相關信息編排好,版式部分基本就差不多了。

          下面我們根據本期教程所講的背景類型來配色,而這里應該使用哪種背景型呢?這個要根據設計的內容來決定,因為這本小說的名字叫做無聲告白,而且小說的故事內容也比較壓抑充滿悲劇色彩,所以這里我決定使用黑底型的配色。

          將背景填充黑色,文字反白。但如果是現在這樣單純的黑色,可能看上去會顯得有些單調。

          所以這里我們從書籍名字中的無聲來找靈感,為背景填充象征聲波的抽象圖形來豐富版面。

          最后添加書籍的腰封,使用白色來形成對比,腰封上的文字填充黑色,這個書籍封面就設計完成了。

          我們來看下效果圖,整體的黑色調還是比較有這種陰暗、憂郁、孤獨的感覺的。

          那有的人可能會有疑問,其他三種背景色就不可以么?當然也可以,配色在很多情況下并不是對錯的問題,而是要看你想通過色彩傳遞出什么樣的感覺。所以這里我也做了其他三種背景型的配色,如果單從版面的整體配色感覺來看,也是沒有任何問題的。

          還是那句話,關鍵點是你想讓這個設計給人什么樣的感覺,如果想傳遞白底型所代表的印象,那么你就可以使用白底型。

          同樣的道理,如果你想傳遞淡色型的色彩印象,當然你也可以使用淡色型。

          如果想傳遞深色型的意象那就使用深色型,這個邏輯應該很容易理解。

          本期教程到這里就結束了,我們主要從白底型、淡色型、深色型、黑底型這四個角度出發,來探討不同的背景型所傳遞出的不同感受。這四種背景類型屬于大的范圍,如果想對配色深入研究,當然背景色不可能就四種,理論上來講任何色彩都可以充當設計的背景,所以除了要掌握好這四種背景型,還要做到兼顧色相的屬性和色調的屬性,這樣才是一個多維度視角的配色,就像我們開頭講到的,配色就是一座高山,你知道通往山頂的道路越多,你就可能比別人更快地到達山頂。

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

          設計B端后臺,必須搞清楚這些組件(一)

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          我們在設計諸如CRM(客戶關系管理)、OA(辦公自動化)等面向B端用戶的后臺界面時,往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向,不知該如何選擇。有時好不容易選完之后,又會發現有更合適的組件,導致反復修改設計稿,降低了工作效率。

          那么在對比了幾個常用的組件庫(Ant Design / Element / iView)并結合自身的工作經驗之后,我選擇了一些常用的組件,來和大家簡單總結下它們的使用場景以及可能出現的誤區。

          在Ant Design 的組件庫中,分為了通用、布局、導航、數據錄入、數據展示、反饋、其他這七大類組件。今天先來看看數據錄入中的相關組件,我將其又分為了手動輸入以及點擊選擇兩大類。(評分、上傳等特征明顯的組件就不在此贅述了。)

          手動輸入

          1. 輸入框Input

          輸入框是數據錄入中最常見也是最基礎的組件,在需要用戶輸入內容的時候即可選用。

          除了常規的輸入框,帶前/后綴、帶圖標、帶按鈕的輸入框也是較常用到的。

          在輸入內容中頭/尾是相對固定的時候,我們就可以采用帶前/后綴的輸入框來減少用戶手動輸入,比如網址輸入框就可以加上后綴。

          有時候為了幫助用戶了解輸入內容的類型,可以在輸入框中加上圖標,比如輸入用戶名或密碼的時候。

          帶按鈕的輸入框最常使用的場景就是搜索框了。

          2. 自動完成AutoComplete

          自動完成其實是輸入框Input 的一項功能,但是 Ant Design 和 iView 中將其單獨拎出來了,為了避免大家搞混,我們這兒也單獨講。(Element中在輸入框 – 帶輸入建議)

          顧名思義,自動完成就是輔助用戶輸入。在輸入一部分內容后,提供相關的備選項,不僅可以減少手動輸入,還能更精準的輸入。常見的使用場景就是搜索框了。

          3. 數字輸入框InputNumber

          數字輸入框特用于需要輸入范圍數值的場景(電話QQ等號碼不宜使用)。右側的步進器則可以幫助用戶精準控制數值的增減。

          當然作為輸入框的一種,也可以加上前/后綴來減少固定內容的輸入,比如%或者貨幣單位(¥、$、元、円)。

          點擊選擇

          1. 單選框Radio

          單選框顧名思義就是在一組選項中僅可選擇一個時使用。

          由于單選框的選項都是平鋪展示的,所以選項不宜過多,當選項較多時建議采用選擇器Select(后文會提到)。

          按鈕形式的單選框也可以被當作標簽頁Tabs 來使用(標簽頁Tabs的本質其實就是單選框)。

          2. 多選框Checkbox

          多選框則是在一組選項中需要選擇多個時使用。

          同樣,由于是平鋪展示,選項不宜過多。

          多選框不同于單選框Radio 的是,它可以單獨使用,來表示兩種狀態之間的切換,類似于開關Switch。區別在于開關Switch 會直接觸發改變狀態,多選框則一般用于狀態標記,需要配合提交操作使用。

          3. 選擇器Select

          選擇器也是數據錄入中很常見的組件,它以下拉菜單的形式來呈現選項(選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示)。

          除了單選,還有多選的形式。

          上文輸入組件中提到的自動完成AutoComplete,其實也是選擇器的一種衍生方式──帶輸入的選擇器。

          4. 級聯選擇Cascader

          級聯選擇是指,在選擇器Select 選項數量較大時,采用多級分類的方式將選項進行分隔,便于用戶選擇。比如地址選擇,就可以按省市區一層層分類。

          5. 穿梭框Transfer

          當多選框Checkbox 選項過多時,除了選擇器Select 的多選形式,還可以用穿梭框的形式來呈現。相比于選擇器Select,穿梭框占據更大的空間,當然也可以展示選項的更多信息。

          6. 日期選擇器DatePicker

          當需要錄入日期的時候,可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。

          當然,需要錄入一段時間的時候,也可以同時選擇開始日期和結束日期。

          7. 時間選擇器TimePicker

          時間選擇器與日期選擇器DatePicker 幾乎一樣,從彈出面板中選擇時間即可。

          時間選擇器和日期選擇器DatePicker 還可以組合使用。

          8. 滑塊Slider

          滑塊的使用場景類似于數字輸入框InputNumber,需要在某個范圍內錄入數值。不同的是,它可以直接選取而不用手動輸入。

          當然,也可以和數字輸入框InputNumber 配合使用。

          還可以選擇某個區間,比如價格區間。

          當數據選項較少或者離散(不連續)時,還可以采用分段的形式。

          總結

          今天主要講了數據錄入的相關組件,共11個:

          • 輸入框Input:最基礎組件,除常規外,還有帶前/后綴、帶圖標、帶按鈕的形式。
          • 自動完成AutoComplete:輸入框Input 的一項功能,提供備選項輔助輸入。
          • 數字輸入框InputNumber:錄入范圍數值,帶步進器精準控制,還可帶前/后綴。
          • 單選框Radio:只能選擇一個,選項不宜過多,按鈕形式可做標簽頁Tabs。
          • 多選框Checkbox:可多選,選項不宜過多,單個使用可做開關Switch。
          • 選擇器Select:以下拉菜單的形式呈現更多選項,可單選/多選,可帶輸入。
          • 級聯選擇Cascader:選項數量較大,采用分類的方式將選項分隔。
          • 穿梭框Transfer:可多選,展示選項更多的信息。
          • 日期選擇器DatePicker:選擇日期,可以選擇一段日期。
          • 時間選擇器TimePicker:選擇時間,可以與日期選擇器DatePicker 組合使用。
          • 滑塊Slider:錄入范圍數值,可與數字輸入框InputNumber 組合使用,可選擇區間,可用分段的形式。

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

          網易嚴選的插畫是如何繪制的?設計師用了這個流程!

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          插畫在中國被俗稱為插圖,有著非常悠久的歷史,最早在佛教文化中出現,以「變相」圖解宣傳佛教教義,如今一般指為企業、產品、服務所繪制的圖畫的一種藝術形式。作為現代設計的一種重要的視覺傳達手法,插畫以其直觀的形象性,真實的生活感和美的感染力,廣泛應用于現代設計的多個領域,涉及到企業宣傳、社會文化活動、影視文化等諸多領域。

          插畫一方面富于靈活表現,可根據設計師思維和想法進行各類創意,適用于各類視覺主題,另一方面又與嚴選簡約、精致的品牌形象契合度較高,因而是嚴選專題設計的一個主要表達方向,經常在嚴選各類專題設計中得到應用,受到廣大用戶的喜愛與推崇。

          許多剛入行的視覺設計師認為插畫風格專題設計需要非常專業的插畫功底才能完成,因而盡管覺得插畫風格專題唯美、形象卻敬而遠之不敢輕易嘗試,今天個人從以下五個步驟去解構插畫風格專題設計,通過相對簡單易學的基本操作,讓沒接觸過插畫風格的設計師也能輕松駕馭與運用。

          嚴選插畫風格設計五部曲

          整體構思

          和所有風格的視覺設計一樣,插畫風格設計首先也需要進行整體的需求分析,主要進行以下方面工作。

          1. 分析受眾與目標

          首先需要對專題的受眾進行簡單的社會化分析,通過分析大體了解受眾的年齡層次、收入水平、審美品味、興趣愛好等,根據社會化特征信息建立用戶畫像,有利于設計方向與基調的確定。比如嚴選的目標用戶定位于20-35歲,具有穩定的工作與收入,追求高品質生活的都市白領。

          其次需要深入分析專題所需要表達的目標和信息,通過色調、版式、字體、元素等設計手法準確傳達信息內容的同時,帶給用戶更多美的感受,升華主題思想,強化品牌概念與服務。

          2. 確定情感關鍵詞

          所謂情感關鍵詞,就是我們產品的視覺所要表達的情感感受,比如情人節專題確定的「浪漫」、「溫馨」、「甜蜜」,新年專題的「喜慶」、「歡快」、「熱烈」,父親節的「責任」、「擔當」、「感恩」等等。確定好專題活動的關鍵詞后,將有助于我們進行整體風格的把握與塑造。

          3. 整體意境構思

          確定好專題的方向后,接下來就可以構思整體的意境以及挑選合適的素材,如新年專題我們會想到用大面積紅色作為主色調的布局,結合鞭炮、春聯、燈籠、年畫等中國傳統元素,通過合理的組織和編排,加上中國風的字體設計與適當的細節完善,共同勾勒營造一派喜慶祥和的氣象。

          提取輪廓

          基于前一步驟的構思的整體意境,我們需要對挑選的現實素材進行插畫化改造。通常我們通過鼠標勾選的形式,將素材的輪廓勾勒出來并填充相應的顏色,使寫實的風格形象化、概括化和扁平化。

          簡化圖形

          插畫風格相對實物風格,去掉了大量的寫實細節,只保留主要的特征信息因而顯得扁平簡約但不失形象生動。因此在這個步驟我們需要將勾勒好的圖形進行簡化操作,以簡單圖形代替寫實描繪、多以面和色塊去代替原有的細節,簡化后的圖形具有高度的概括性。

          完善細節

          除了保證插畫的形象性與直觀性外,我們需要進一步對素材進行細節上的完善,以滿足進一步的審美性與趣味性,同時賦予元素一些創造性,可以嘗試通過以下方法進一步完善。

          1. 移花接木

          移花接木指將現實中不同時間和空間各類元素進行解構和重組,創造出一些妙趣橫生的新事物,增加插畫內容的趣味性。

          2. 區分主次

          將重要的、核心的元素進行強調刻畫、次要的元素進行弱化處理,從而拉開主次元素的層次關系,使畫面更加具有層次感和空間感。

          3. 突破現實

          通過調整元素間的比例關系,夸張的創造現實中并不存在的事物,更加容易吸引用戶的目光焦點。

          優化整體

          經過以上的步驟,我們的素材基本已完成插畫風格的改造,但插畫素材在整體專題界面中并非孤立的存在,而是和整體色調風格、版式、字體設計形成一套有機和諧的整體,共同去呈現專題需要表達的信息與目標。

          案例分析

          1. 千萬和春住專題

          整體構思

          情感關鍵詞:清新、唯美

          整體意境構思:以嫩綠色作為主色調,結合桃花、陽光、汽車、風箏營造輕松出游踏青的歡快意境。

          提取輪廓

          從田野、桃花等幾張現實圖片中將頁面需求的主體元素進行提取,作為背影進行主體頁面的大面積輔色,將整體的色調感覺搭建出來。

          簡化圖形

          初步提取的輪廓由于過于具象,與唯美的主題風格不太協調,在這一步我們將主體元素進行簡化處理,用圓潤、可愛的幾何圖形加上明快的色塊去代替樹木,整體更加扁平、卡通化,營造更加輕松、自由的氛圍。

          完善細節

          為了更好的體現春天外出郊游的意境,我們對細節進行完善,增加了汽車、風箏等小元素,將桃花進行樹枝刻畫、太陽光芒的刻畫等處理,同時將遠處山景進行虛化,形成層巒疊障的連綿山脈,拉開了畫面的層次空間。

          優化整體

          最后我們根據主題進行專題的字體設計,將常規的宋體進行變形處理,部分筆劃好似春風輕撫而飄逸,又加上了象征春天生機勃勃的嫩芽,富有生活趣味。通過一片桃花作為主體分別呈放若遇到新歡、若重拾舊愛的對應專題好禮,使頁面整體和諧統一。

          2. 愛戀物語專題

          目標:呈現出情人節情侶間的愛情的甜蜜與浪漫。

          情感關鍵詞:浪漫、甜蜜

          整體意境構思:以甜美暖色作為主色調,通過主體元素禮物盒與情侶間夸張的比例關系抓住用戶眼球,浪漫甜美同時不失趣味性。

          3. 新春集市新年專題

          目標:呈現出春節喜慶熱鬧與琳瑯滿目的商品。

          情感關鍵詞:喜慶、熱鬧

          整體意境構思:以中國傳統舞獅、牌樓、鞭炮等作為主體元素,谷倉作為次要元素,前后對比主次分明、空間感強,呈現了新春集市的縱深與五谷豐登的產品,整體氛圍熱烈喜慶,激發用戶的購買欲望。

          總結

          插畫風格的表達,既遵循著藝術設計的通用規則,又具備自身獨特的審核特征,需要設計師更多去發現生活中的美,通過以上五部曲將生活中各類元素進行不斷的重組、創造,在專題中進行特有的形象性、生動性、趣味性、創造性的藝術表達,從而豐富專題內容,更好傳達專題思想。

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

          那些好色之徒,都做過這些訓練之創建配色體系2

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          其實根據我的從業經驗來看,如果想真正的了解色彩,就需要一套非常完整、系統的訓練方法??赡芎芏嗳税ㄎ易约?,一開始都對這些訓練不以為意,認為直接學習配色理論或方法不是更好么?為什么還要做這些色彩訓練呢?認為這些訓練沒有意義,甚至有的人會覺得是小孩玩的游戲。

          但殊不知其實我們每個人的色感,正是在兒童時期形成的,因為兒童時期的認知更加純粹,對于色彩的想象力以及受到的限制要比成人少得多,所以賦予色彩的深度和廣度也就比成年人更加豐富。

          這也是為什么很多人看到小朋友的繪畫,會覺得他們很有配色天賦了。

          所以我們要做的就是打破對色彩的固有認知,讓自己回歸到一種單純的狀態,來重新認識色彩。

          比如現在給你一個蘋果,可能我們的第一反應就是直接把它吃了,事后要你回憶對蘋果這個物體的印象,也許你體會的并不深刻。

          而如果我們改變條件,假設你從未見過蘋果,這一次你不僅要吃掉蘋果,還要說出你的感受。

          根據你的五官對其進行認知,這時你對蘋果的體會將和前一次大不相同。

          比如通過視覺我們可以看到綠色,通過嗅覺可以聞到果香,通過觸覺可以感受到堅硬,通過味覺可以品嘗到酸甜,通過聽覺可以聽到清脆聲。

          而重新認識色彩也是同樣的道理,就像我們從未見過蘋果一樣去體驗一個假設我們從未見過的色彩,然后通過不同的角度去對色彩進行拆解,最后組合在一起形成屬于我們自己的配色體系。

          賦予色彩名稱

          創建個人色彩體系的第一步,就是為色彩命名。

          比如我們隨便找一個顏色,就拿這個黃色來舉例。

          根據自己對這個色彩的感覺來命名,可以隨意發揮,你想到什么就可以說什么,沒有限制。

          比如從最基本的色相角度出發,我們可以叫它鮮黃色。

          根據這個顏色我們可以聯想到向日葵,所以也可以命名為向日葵。

          我們還可以聯想到月亮,所以也可以起名叫月亮黃。

          那我們還可以聯想到《變形金剛》里的大黃蜂,所以也可以給這個顏色起名叫做大黃蜂。

          還能聯想到麥當勞的陽光橙,所以也可以命名為陽光橙??傊斈憧吹竭@個顏色時,腦海中能夠聯想到的詞匯都可以使用,哪怕是跟這個顏色相差很多也沒關系,最重要的是你自己的感受。

          對色彩進行理性分析

          對色彩進行命名之后,第二步要做的就是對色彩進行理性分析。

          我們還是拿這個顏色來進行練習,先來找出它的色相、明度和飽和度。

          首先根據色相環的大致位置,確定這個色彩的色相。

          然后通過純度和明度的調整來找到與右側顏色相符的色值,這里我們得到了一個數值。

          然后用吸管工具吸取右側的黃色,得到的結果和我們猜測的做比較,只要結果不是相差很大都是可以的,如果相差很多那就說明你對色彩的敏感度還有欠缺。

          HSB色值猜想完之后我們再來看看它的RGB色值。

          根據RGB原理很明顯黃色是由紅色和綠色混合得到的。

          但是我們對比來看很明顯這兩個黃色還是有差別的,所以還需要進一步分析。

          我們調出RGB色相環,我們看采樣的這個黃色是偏向紅色多一些還是偏向綠色多一些,很明顯是偏紅一些,因為它比較偏橙色。

          所以我們就可以適當的減少綠色的成分。

          我們來看一下對比,已經接近了。

          最后我們通過RGB色值來對照一下,雖然紅色和綠色的色值相差不多,但是我們采樣的顏色中還有少部分藍色,肉眼其實很難看出來,但是我們可以自己去模擬一下。

          這三個成分的三原色混合之后,得到的就是我們采樣的顏色了。

          △ http://www.rgbchallenge.com/

          如果想提升對RGB的敏感度,可以通過這個小游戲來練習一下。

          玩法很簡單,根據畫面中給出的RGB色值來選擇你認為相對應的顏色,選對了繼續下一關,選錯了GAME OVER重來。

          接下來我們來看CMYK色值。

          黃色是CMY其中的一個原色,所以首先黃色肯定是最多的。

          對比來看一下,很明顯采樣的黃色中還有其他顏色成分。

          我們調出CMYK色相環,同樣也是看采樣的黃色偏向哪個方向,也是偏紅色多一些。

          所以我們得到這個顏色中需要加入紅色,但是應該加多少呢?

          這里我們加入了20%的紅,同時將黃色的含量降到80%,這個是根據經驗和感覺來的。

          這時將兩個顏色對比來看一下,已經相差不多了。

          最后通過數值來比對,可以說幾乎已經很接近了。

          只不過采樣的顏色中還帶有少量的青色,但是影響不大。

          然后我們再來看看色調。關于色調這種老生常談的問題這里就不多講了,因為之前我專門寫過一篇關于色調的文章《高手的平面課堂!最容易上手的配色方法》,里面已經講的很詳細了。如果你看過這篇文章,那么當你得到了一個顏色的CMYK色值時,就已經可以判斷出是什么色調了。

          如果沒看過也沒關系,我帶大家來區分一下,白色和純色之間是明色和淡色,純色和灰色之間是濁色和淡濁色,純色和黑色之間是暗色。

          將這些代表性色調提取出來一比對,就可以知道這個色彩的大致色調是什么了。

          很明顯我們采樣的這個顏色是介于純色調和明色調之間,你可以叫它純色也可以叫它明色。

          色調看完之后我們再來看看它的色彩家族,也就是這五大色相關系。

          首先我們來看看它的同類色是什么,如果大家剛開始比較困難可以偷個懶,調出色相環。

          這樣找到相應的色相就非常簡單了,但是不建議大家這樣做,除非是新手或剛入門的同學。

          然后是近似色,相距45度的顏色。

          然后是中差色,距離在90度左右。

          接著是對比色,120度左右。

          最后是互補色,對比最強烈,也就是相距180度左右的顏色。

          這五大色相關系是最基本也是搭配起來最常見的,一般不太容易出問題。這里需要說明一點就是我們在對色值進行猜測的時候,不需要要求太高必須要完全一致,只要差不多就可以。并且大家在看教程的時候可能會覺得有些復雜佷麻煩,我做這些為了給大家演示看上去是花了些時間,但是當你自己在猜想的時候可能只是一瞬間的事情。

          對色彩進行感性分析

          下面我們再來看看第三步,對色彩的感性分析,所謂感性分析也就是說這個色彩給你什么感覺。

          比如這個黃色給我們的正面意象有:陽光、輕松、幽默、開朗、熱鬧、歡樂、幼兒、開放、快樂;負面意象有吵鬧、廉價、不雅、軟弱、浮躁、輕浮、稚嫩、散漫、不安。注意在提煉感覺的時候不要約束自己,能夠聯想到的都可以記下來。

          對色彩進行行業分析

          然后是第四步對色彩進行行業分析,也就是說你認為這個色彩適合哪些行業或者你見過哪些行業使用過這個色彩。

          比如最明顯的就是兒童、寵物、游戲、時尚、運動、促銷、餐飲、農業、傳統、汽車等等。

          對色彩進行設計應用

          以上這些訓練做完之后就進入到了最后一步,也就是用這個色彩進行任意內容的設計。

          這是我們的文案,這里我們要設計的是關于詹姆斯十六代戰靴的三個Banner。

          1. 案例一

          首先根據尺寸創建版面,找到一張詹姆斯的圖片去底之后放到版面中,然后將主題信息放大并選擇一款具有力量感的字體編排到版面的中上位置,將中文標題和LOGO做重復編排。

          將文字信息放置到人物下方,底部信息做描邊和變形處理為畫面增加形式感,最后將其他信息編排到空余的左側。

          最后在主標題下方添加色塊來豐富一下版面,版式部分就完成了,接下來開始配色。

          因為我們要用到采樣的這個黃色所以主色已經確定了,但是這個畫面只用一個顏色顯然是不夠的,所以我們還需要其他顏色。

          因為考慮到設計的內容和風格所以我覺得配色上應該有一些對比,但是又不想使用對比很強的互補色,所以這里我選擇對比色,但是黃色的對比色有兩個應該選擇哪個呢,這里我選擇了紫色。

          因為如果了解NBA的話應該知道,湖人隊的球衣本身就是黃色和紫色,也就是人們所謂的紫金戰袍。

          但是這個紫色有些偏紅,所以我們可以調整成偏藍一些。這也是我想告訴大家的一點就是配色是靈活的,千萬不要死腦筋。

          輔色確定了之后就可以為畫面填充顏色了,但是我們看填充完顏色之后人物圖片的顏色有些不協調,所以人物的顏色也需要調整。

          這樣看上去就會好很多,那么第一個案例就完成了。

          2. 案例二

          第二個案例我們選擇鞋子來當主體,然后編排主標題。

          將其余信息圍繞主體鞋子來編排,通過適當的變形角度來為畫面增加靈動。

          但是兩側很明顯太空了所以可以添加色塊和文字,版式部分就完成了。

          因為我們設計的這三個Banner是一個系列的,所以配色也應該是統一的不需要改動。

          3. 案例三

          我們再來看看最后一個案例,前兩個案例分別是以人物為主體和以產品為主體,所以第三個案例我就直接用文字編排,將文字信息進行分組給圖片留好位置。

          為了增加一些形式感,下方的標題同樣進行描邊處理并進行裁剪。

          那么同樣使用這組配色,將圖片放置到預先留好的位置上,這個案例也就完成了。

          最后我們來看一下整體效果和效果圖。

          本期教程到這里就結束了,我們從幾個不同的角度去對色彩進行拆解,大家回去之后可以自己多加練習,每天解構一個色彩,這樣長期積累下來,你就會在不知不覺中創建了一套屬于你自己的配色體系。

          但是我相信肯定會有人有疑問,如果照這樣做那糾錯機制在哪?因為這些都是大家自己去創建的很多內容不一定對,如果你有這樣的疑問那說明你是認真學習的人,但是我這套方法并不是沒有糾錯機制,這個糾錯機制就是你自己,在漫長的時間里你的成長、歷練、感受、學習都會影響你對一個色彩的認知,可能幾個月甚至幾天之后你看待同一個色彩的感覺都是不同的。所以放心大膽的去做吧,只要你肯堅持,火候到的時候自然就會有所收獲。

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

          投影一直做不好?看這篇文章就搞定!

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          平時設計工作中,關于投影,簡單一點的就是一個圖片中的主體摳下來放到畫面中,這個時候就要設置一個投影,讓主體在畫面中更和諧。難一點的就是在合成設計里,涉及到每個物體的投影形狀、顏色、透視等等,根據分析畫出投影,這期教程就給大家普及一下投影的相關知識,以及如何去做投影。

          陰影是什么呢?陰影是光帶給這個世界的禮物。

          陰影的概念

          還是正經解釋一下什么是陰影?

          在客觀世界中,光線總是從光源沿著直線方向發散。

          在光線的照射下,受光部分稱為亮面,僅次于亮面的受光是灰面,而光線無法照射到的部分,稱為暗面;由于被受光面遮擋,物體所在環境中出現的陰暗部分稱為影,陰與影的總和就是陰影。

          陰影的要素

          陰影形成的要素有哪些呢?

          首先要有光源,光源就是光點,光點向下的垂線與承接面的焦點就是光足,陽光的光足在地平線上,燈光的光足在照射的基面上,然后是要有物體,光點發出的光線,經過物體上陰點,光足與物體底點也就是陰足連線,與光線相交的點就是影點,陰影就是陰足到影點的部分。

          畫陰影時,一般是先定光點和光足,然后是陰點陰足,光點連接陰點,光足連接陰足,這樣陰影自然就畫出來了。

          用這張照片來做個簡單說明:

          光源的位置,就是太陽,向下垂線交于海平線于一點,這個就是光足。

          然后,定出一些椅子上的陰點和陰足。

          光點連接陰點,光足連接陰足,這樣就能畫出陰影的大致形狀了。

          光源的分類

          光源總體上可以分為兩大類,一類是自然光,比如:太陽光、月光。一類是人造光,比如:燈光、燭光。

          1. 自然光

          自然光有兩個特點:光線平行;隨著時間的變化而變化,不會為?的意志所轉移。

          光線平行

          因為太陽、月亮這樣的發光體離我們太過遙遠,所以可以把它發散的光線視為平行的。

          再來說下這張圖片,同樣是自然光,為什么它的光線不是平行的?

          這是因為透視的現象,就像這個地板,不也是平行的嗎?但是因為透視的關系,它們會相交于一點,光線也是同樣道理,因為我們以這個角度觀察,所以光線會出現透視現象。

          也就是說,當我們從側面觀察的話,就很明顯看到光線是平行的。

          隨著時間的變化而變化,不會為人的意志所轉移

          日升日落,陰晴圓缺,都是自然的規律,不會為我們的意志所改變。

          2. 人造光

          人造光有兩個特點:光線不平行,呈放射狀;根據需要變換位置。

          光線不平行,呈放射狀

          用這張圖片來舉例,畫面中光源是路燈,物體是消防栓,我們對它進行一個簡單的分析:

          它的光點是路燈,向下的垂線,到地面上的光足,然后是消防栓,光點連接陰點,光足連接陰足,畫出陰影,可以看出,因為與光源距離近,所以光線是不平行的,呈現一種放射狀,并且影子也會呈現放射狀。

          根據需要變換位置

          為了呈現想要的視覺效果,可以隨意移動光源的位置,甚至調整它的顏色、明暗等,可以人為改變。

          燈光屬于電光源,它可以是單一光源或者組合光源,常見的像這樣的白熾燈,還有日光燈等等。

          當各個方向都有光源的時候,投影就會消失。在醫學上,用的無影燈就是根據這個原理制成的,因為醫生做手術的時候,手和器械都有可能對手術部位造成干擾的陰影,所以無影燈就能盡量消除陰影。

          陰影規律及其特點

          我們模擬一個太陽移動的軌跡,當太陽位置比較低的時候,光線與地面的夾角就會比較小,影子會很長;升高一些,夾角就稍微大了些,影子縮短了點;再升高一些,夾角更大,影子很短了。然后當太陽在物體正上方的時候,與地面的夾角接近90度,影子基本就是一個點。那另一邊,基本就是相同的情況,所以,光源離照射物體越高、越遠、光線角度越大,陰影越短。

          我們再通過幾張圖片來進一步了解陰影規律及特點。

          我們看到人物的影子非常的長,光線與地面夾角比較小,說明它的光源在一個比較低的位置上。

          這個正俯視的圖片,影子也很長,說明它的光源也在一個較低的位置。

          影子的長度也不算短,但是看光線與它的夾角比較大,證明它的光源在相對比較高的位置上。

          這張照片比較明顯了,影子比較短,接近中午的陽光。

          △ 接近中午的陽光

          我們之前在透視的那篇教程里說過,物體的透視線,最終都會消失在視平線上,所以,當畫面中先有一條視平線,我們同樣可以畫出一個立方體。

          當物體有一個陰影,我們可以通過影點與陰點和陰足的連線,找到光點和光足。這樣也就找到光源的位置。

          這張圖片,我們就可以通過倒推的方式找到光點,如果畫面中再放入其他物體,就可以用光點和光足對其連線,從而做出投影。

          正常情況下,物體在光源下的投影,如果在其中出現一個臺階會怎樣?

          影子就會隨著階梯的形狀而產生變化,也就是說陰影投在不同的承影面上,會隨著受影面的變化而變化。

          這兩張圖片就明顯看出陰影根據地面起伏的形狀而變化。

          陰影在設計中的應用

          第一個是接觸陰影,是物體與物體之間接觸所產生的陰影,一般這種我們都可以用圖層樣式當中的陰影來設置。

          還有一種接觸陰影,是物體立面與承影面之間的投影關系。

          第二種是懸空式投影,這類投影給人很強的空間感,并且大多數情況,投影都會成為畫面中的主角。

          第三種是倒影,針對反光較強的面會有,比如鏡面、水面、琉璃臺面等,并且在表現一些高端產品設計時候經常會使用到。

          第四種是長投影,也是這幾年扁平化流行起來,帶動的一種投影形式。

          第五種合成設計中的投影,和實際照片中的場景是一樣道理的,這也是所有投影當中比較難操作的。

          最后一個創意投影,它不會根據物體本身的形態去表現,而是根據文案和設計構思而產生的很有創意的投影形式,當然,這個主要靠大家發散思維的聯想了。

          案例時間

          用兩個簡單的小案例,來給大家講解一下如何做投影。

          給下面右側的書籍做一個和左邊一樣的投影:

          給圖層添加投影圖層樣式,不透明度調整到45,角度137,距離26,擴展10,大小35。

          我們把外圍一圈的投影已經設置好,下面就再添加一個投影,也就是最貼近書籍邊緣部分。這個部分投影我們可以稱之為閉塞投影,是近光量最少的地方。

          再添加一個投影,不透明度33,角度不變,距離5,擴展10,大小10。

          利用圖層樣式的投影就完成了,大家在調整的時候可以邊調整邊觀察,以達到一個自然的效果。

          第二個方案,是給畫面中的立方體添加一個投影,要符合光影關系。

          第一步要按照透視關系,把立方體看不到的面給畫出來。

          根據之前我們學到的知識點和畫面中其他陰影來進行分析:

          先連接幾個人物的影點和陰點,我們知道自然光的光線是平行的,并且我們標記出來的也確實近乎平行的光線,既然這樣,我們就不需要找到光點的位置。

          只要復制其中一條光線到立方體上的陰點即可,然后我們再去找光足的位置。

          為了找光足,可以先把畫面擴展一下,然后連接影點和陰足,三個參照物連線的延長線會相交于一點,這個點就是光足。

          從光足往回連線,與陰足的延長線,相交于影點,這里為了區分,三條線我用三個不同的顏色,然后我們把三點連線,就是陰影的區域了。

          可以發現綠色和藍色是基本重合了,我們就可以忽略藍色的那條線了。

          立方體陰影的范圍與形狀,然后再進一步刻畫。

          做個高斯模糊處理,數值2。

          在陰影上方新建一個圖層,用鋼筆工具勾勒一個閉塞陰影,不要太大哦,填充深灰色,模式正片疊底。

          做高斯模糊,數值1.4。

          為了不讓影子邊緣太生硬,選擇濾鏡 – 扭曲 – 波紋 – 41%。

          用吸管工具吸一下旁邊影子的顏色,填充到立方體影子。

          如果影子太重,可以適當降低不透明度,再統一暗部的色調,這樣陰影就做完了。

          最后總結

          信息的阻力設計

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          什么是阻力?


          用戶使用App時需要穿越層層頁面,在穿越這些頁面時需要消耗時間和精力,稱之為阻力。


          首先探討一下品類方面的阻力。


          Image title


          如圖,這是幾個電商App界面,一眼望過去并不知道哪個頁面是哪家電商,其實這個并不重要。如果你到一個平臺購物,往往不是因為線上產品用戶體驗不一樣,而是因為賣的商品不一樣,或者商品的價格亦或配送速度不一樣。所以這里它們長的一樣我覺得沒有太大問題,甚至我認為他們之間雷同是一件好事,用戶省去了切換的成本,尤其是新平臺跟老平臺長得像都是沒什么問題的,這樣用戶切換新平臺阻力就小了很多。


          但是當我們需要定義一個新品類時,這個思路就會不一樣。



          定義新品類


          舉個例子,國際化品牌Airbnb,在2014年的改版中做了很大的調整,這次改版后發現,要找房子下單,搜索瀏覽和操作效率并不是很高,但是他們還是做了這種低效高顏值的選擇。


          Image title


          對大多數人來說,私人房屋短租給其他人的這種服務是個新產品,是高端還是低端用戶其實沒有概念。所以在2014年Airbnb重新推廣的時候,他的設計理念是各位房客先別管這個產品是什么樣的模式,先說這個事情是不是看起來很酷。是不是酷這件事對于一個新產品是重要的,如果我用過一個酷的產品,分享給朋友。對方往往也會因為我分享的產品酷而覺得我這個人很酷。有些實用性還不錯但是品牌調性沒那么高的產品,用戶使用完后會覺得“把這個產品分享給別人,并不會給我加分”而止步分享。鑒于此,我認為Airbnb高顏值雖然一定程度上犧牲了效率,但是拔高了品牌調性,也就提高了產品的推薦值,是一個正確的選擇。


          那么當我們需要重新定義一個已有品類時,我們的思路是什么呢?



          重新定義品類


          Image title



          這是我們2016年發版的首頁設計,自如和跟之前的租房平臺不太一樣,所以我們的首頁設計要重新定義一個品類。以前,尤其是我們80后對于租房會有什么樣的感受都是有一些認知的,比如說黑中介…其實大家都有一些印象,被坑過的80后不在少數。自如出現的時候可能就需要重新整理大家對于這個品類的認知。所以我們在設計首頁的時候,先用一個高顏值大圖展現一下房子是什么樣子(因為我們的房子確實顏值很高品質不錯),搜索按紐也不是很大。所傳達的思路是我們希望用戶在找房子之前對我們的平臺有些認知,或者說對租房這個品類,打破固有的刻板印象,有重新的認知。我把這種重新定義已有品類的設計方法定義為“我們不一樣”。



          在今年,自如的影響力大了很多,在這個背景下我們進行了新一輪的改版。雖然從用戶的角度講可能進APP第一件事是要找房子,但是從企業的角度,企業有很多想要傳達給用戶的信息,這個頁面也是讓用戶知曉其他業務的入口(自如給大多數人的印象是一個租房平臺,但是我們也有像保潔,搬家這類的服務)這些入口也許用戶當時不會點擊,可是當他需要用保潔,或者搬家的時候就會想到好像自如有這么一個業務,之后他會去自如的首頁找。所以多條業務線的并列呈現,也有類似廣告曝光的作用。


          Image title


          我用這張圖來代替我們的原型圖,我們要展現多條用戶線的時候很依賴于這個界面上的多個按紐,當時就想能不能順著這個思路在盡可能的情況下做的好看一點。我們之所以覺得這個界面給你的感覺沒那么好,是因為這個界面信息量太大了,還有色彩的沖撞過猛了。 


          我覺得色彩的間隙太小了,應該加大,所以加了一些白框,讓這些顏色之間離的更遠,顏色間的沖撞也就比較小。


          Image title


          然后再看這個顏色本身,我們是不是可以選一些相對共性的顏色,比如把標準的紅綠藍改成紅,暖綠,和偏綠的藍(暖藍),然后把選中的顏色找他的擴展色,用擴展色畫出一些按紐。


          Image title


          這就是我們后來首頁的樣子。



          低頻應用的阻力設計


          作為一個低頻使用的App,跟高頻使用的App阻力設計思路最重要的不同點是什么呢?我從學習成本這點來切入。



          學習成本


          微信的聊天記錄刪除功能,有一點學習成本。


          Image title


          用戶在使用中偶爾向左滑發現了可以刪除聊天記錄,通過偶爾的觸發,用戶學會了這樣刪除聊天記錄。通過后期每天不斷地使用強化了對這個功能點的記憶。


          但是我們的低頻App似乎沒有這個機會,由于使用次數比較少,有些功能隱藏起來的話用戶大概率永遠都不會去用。設計時不但要把點贊的按紐放出來,而且點贊的時候還要告訴用戶,點贊后飄在右上角。


          Image title


          告訴用戶收藏之后,收藏列表可以點擊右上角這個按鈕查看。我們不但要把所有的功能擺出來,而且還要告訴用戶這個功能下一步怎么走。因為他如果這次沒學會,以后可能也不會用這個App了,這點跟高頻的產品不一樣。



          點擊數據


          我們設計首頁的時候對于點擊數據會有一個預期和目標,但是往往數據反饋會跟設計初衷多少有些不相符。大家可以猜一下哪是點擊率最高的…在這里我只能告訴大家一個大概的排名。我們當初希望是租房的點擊高一些,因為用戶點擊后可以了解我們有多少個租房產品,所以我們把它在視覺上設計的重了一些。但是其實搜索是排在他前面的,用戶對于大面積的區域像banner這類東西是有免疫力的,所以不管做的多花哨其實用戶會習慣性的忽略掉,也就是視覺中心和實際的交互中心不見得一樣。合租在租房的前面,整租都可以在前面,看來用戶還是比較仔細的看了我們的界面,而且可以斷定大家對于合租是什么東西了解的很清晰。


          Image title


          可以看到,“租房”這個按紐我們剛開始設計的時候,感覺應該是高的,因為這個是總集,我們在后期的訪問中發現用戶認為這個是表示分類,所以設計的雖然明顯,但是用戶仍然認為這個不可點。



          減少阻力


          減少阻力,需要跟用戶的預期相符。


          租房按紐怎么做交互才能讓用戶感到順暢?租房的按紐包括右邊的四種,其實是個1.5級(介于一級頁面和二級頁面之間)的界面,所以點擊左側的租房,用戶會進入“租房”頁面。而右邊的這四個Button應該還在,只是這四個按紐變成放大精細版。包括租房Button的底圖,也是放大放在頁面最上面,這跟用戶的預期才比較一致。


          Image title


          從首頁到列表,到詳情再到下單及更深層的頁面,頁面的ICON和精細程度和用力程度都不一樣,層級越深視覺沖擊越輕。


          Image title


          如圖,最右側預約那一列,假設設計師有足夠精力和時間,是否可以把最右側的頁面做的視覺更豐富,甚至跟首頁一樣?然而我們現在的規范里面仍然不允許做的更花哨,原因是我們認為在前半段的時候,用戶需要一些阻力來提升注意力,從首頁先認知這個租房APP跟他平時認知的不一樣,接下來有一些信息的輸入比如圖片,再往后,如果一旦點約看或者是點簽約,這時他的決策做好了,產品要做的事就是一步步往以最快的速度,完成這個事情,不要讓他有任何的猶豫,不要讓他分心,任何的分心都有一定的概率讓這個流程中止甚至是終止。


          Image title


          如圖,我把整個流程的信息阻力畫了一個曲線,首頁阻力是最大的,越往后越小,實質性的信息越多。決策前需要讓用戶提升注意力,所以信息量要大,表達要豐富。一旦決策后,信息的傳達以最簡潔的排他形式存在,讓用戶路徑盡可能的縮短也讓信息阻力盡可能的變小。


          以上就是是我對信息阻力設計的整理,希望大家能夠有所收獲。

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

          你的設計,用戶真的看得懂嗎?

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          設計師經常犯的一個錯誤就是上帝視角,高估了用戶的理解能力。一頓操作猛如虎,結果用戶可能根本沒看懂你的設計。

          前段時間個人所得稅app 上線,用戶可以在線辦理個稅專項扣除申報。我自己也嘗試使用了一波,在申請房貸利息抵扣的時候發現了一個問題。

          在房貸信息模塊里需要我輸入證書編號,但是我根本不知道到底要哪個證書編號。輸入提示非常的簡潔,就三個字「請輸入」,到底要輸入什么?這樣的表單在很多產品中都可以看到,讓用戶輸入生日,但沒有告知日期的格式。日期格式真的太多了,用戶到底選擇哪種?

          設計師經常犯的一個錯誤就是上帝視角,高估了用戶的理解能力。一頓操作猛如虎,結果用戶可能根本沒看懂你的設計。

          更快:交互層

          有的時候用戶并不是看不懂你的設計,而是沒時間看你的設計。如果我們做了一個抽獎活動,用戶看了一眼主界面沒有弄明白是怎么玩的,那么這個抽獎大概率是失敗的。你或許會不服,我明明把活動規則已經寫在下方了,可是用戶根本不會看。因為他們真的很「懶」。

          所以讓「用戶看懂你的設計」,首先我們應該做到「讓用戶更快的看懂」。我們需要提升信息的傳遞效率。

          1. 信息可視化

          俗話說「字不如表,表不如圖」。用戶對于具象元素(表格、插畫、icon和圖像等)的感知能力更強,具象元素也更能傳遞情緒。例如:道路兩旁的路標多數是以圖形為主體的。這是因為在車子高速行駛的過程中,司機沒有足夠的時間閱讀標示上的文字。

          場均122.4分,30.6個助攻,45.0個籃板……這些數據對于我們來說只是冷冰冰的數字,我們很難理解其背后的含義。雷達圖對球隊數據進行了可視化處理,提升了信息的可讀性。因為相較于純文本,大腦處理圖形的速度要快得多。

          以谷歌日歷為例,如果我要做瑜伽,那么就會在日程詳情頁配一個瑜伽墊的插畫;如果我要跑步,那么就會配一幅跑鞋插畫。用戶甚至不用看文字,通過插畫上所描繪的場景就可以知道自己接下來的行程。用戶可以更快地看懂。

          2. 合適的組件

          選擇合適的組件可以降低用戶的學習和操作成本。以上面的生日為例,與其通過輸入提示告訴用戶日期格式,還不如直接給用戶提供一個日期組件。

          多數的選擇場景中我們都會使用底部動作欄來承載選項,如選擇優惠券/銀行卡。參考了一些產品,發現他們都在底部加上了關閉/確定按鈕。我們不妨來思考:動作欄界面底部需不需要提供關閉/確定按鈕?

          決定一個元素的去留,我們需要明白它的作用是否可以被替代。底部的按鈕是供用戶點擊關閉底部動作欄的,光看「關閉動作欄」這個動作,底部按鈕并不具備不可替代性。因為點擊上方的空白區域或者把關閉按鈕放在右上角都可以關閉動作欄。

          這樣一看,底部的按鈕是可以刪除的。那為什么其他的產品都保留了呢?因為我們忽視了組件的信息屬性,我們沒有考慮如果沒有它是否會對用戶了解系統當前的狀態造成影響。

          沒有底部的按鈕,用戶無法確定底部動作欄是否正常加載。用戶不知道我是只有一張銀行卡還是只加載出來一張銀行卡。

          更準:文案層

          前段時間去體檢,發現排隊顯示屏中有的人前面有咖啡圖標,有的人沒有。好奇的我特地找護士問了一下,發現咖啡意味著接下來的體檢項目不需要空腹,你可以去吃早飯了。圖標的確很簡潔,可是有多少人看到這個咖啡圖標會立刻意識到自己可以吃早飯了呢?

          過度追求信息傳遞的效率,而忽視了精度,從一個極端走向另一個極端——簡潔易懂的文案是保障信息準確性的重要措施。

          前段時間針對報錯文案做了一個梳理,發現了一些文案中的共性問題。

          1. 沒有提供解決方案

          一個合格的報錯文案應該由:報錯場景、報錯原因和解決方案共同構成。首先告知用戶具體遇到了什么樣的報錯場景并且解釋原因,最后提供解決方案。多數文案都只做到第一步,只描述了報錯場景,這并不能滿足用戶的需要。

          • 如果照片上傳失敗,用戶需要知道是因為格式不對還是圖片太大了。
          • 如果因為系統升級,導致服務暫停,用戶需要知道什么時候可以再次提供服務。
          • 如果把報錯場景看成是一個坑,那么報錯文案應該告訴用戶你掉進了一個什么樣的坑,為什么掉進來以及怎么樣才能爬出去。

          2. 擁抱數字

          多數的文案都不愛提供數字,用戶能獲取的信息也比較模糊。我們盡量給用戶提供準確的數字,包括時間、金額、次數等,讓用戶對當前的狀態有一個準確的認識。

          輸入手勢密碼錯誤是有次數限制的,可是你并沒有告訴用戶今天還剩幾次機會。

          我們經常會遇到資料審核的場景,最常見的方法就是告訴用戶「資料審核中」,非常的省事。但是用戶會疑惑到底要審核多久,給用戶提供一個大致的審核時間,讓用戶有目的的去等待。

          備胎:在線客服

          如果前面兩個方法都不能解決用戶的疑問,那么我們只好給用戶提供在線客服了。

          1. 入口的必要性和統一性

          客服的入口一般在首頁或者用戶的個人信息頁,除此之外我們需要在用戶有客服訴求的場景中給用戶提供客服入口。如果不提供入口,用戶遇到問題就要返回到首頁或者我的頁會很繁瑣。如果用戶在一個表單頁中錄入信息,突然對某一項內容不確定,返回到首頁找客服咨詢。這樣可能會導致用戶之前填寫的信息丟失,用戶需要重新輸入一遍。

          以下圖為例,這是一個借款的表單頁,用戶在這里錄入借款信息。我們會給用戶推薦一款借款人安全險的保險產品,提示文案是「保費60元,貸款利息可節約55.33元」。

          但是用戶反饋不知道這個60元的保費是一次性扣除還是每月都會收取,并且這個利息節省是什么意思。因為對收費標準不確定,用戶的購買意愿也會受到影響。這里的文案表述不清楚,我們可以給用戶提供一個客服的入口。

          因為在線客服是一個共有的模塊,不同的業務線都可能會調用。那么在入口的設計上,我們需要注意一致性。當然我們也不能過于死板的追求一致性,因為不同場景用戶對于客服的訴求是不一樣的。就以支付寶為例,生活繳費和螞蟻借唄兩者在線客服的入口是不一樣的。

          因為相對來說,用戶對借錢的場景更加敏感,有更多的疑問去確認。這筆貸款的利率怎么算的?還款方式是怎么樣的?會不會影響我的個人征信?所以在借唄頁中,用戶對于客服的訴求更高,所以在布局上會放在更加顯眼的位置。

          2. 對話式交互

          用戶進入客服系統不意味著立馬可以跟客服小姐姐聊天。咨詢問題一般會經歷以下幾個步驟:

          • 提供猜你想問的問題;
          • 客服機器人;
          • 真人客服。

          以支付寶為例,首先會根據你的來源給你推薦你可能想問的問題。例如:你從充值中心進入客服,首先會給你推薦充值繳費相關的問題。

          如果提供的問題列表里沒有用戶想問的,用戶就需要手動去查找問題。這時客服機器人登場,根據你輸入的關鍵詞,給你提供相應的解決方案。如果客服機器人不能解決你的問題,那么可以召喚真人客服來幫你解答。

          京東金融與支付寶的客服流程大同小異,其中的一個區別在于它額外提供搜索框來查找問題,而支付寶是通過對話式交互來查找問題。

          對話式交互也是近年來比較熱門的一個話題。對話式交互主要的優點在于學習成本低,我們現有的交互體系都是建立在人工智能不夠智能的基礎上。如果足夠的智能,未來的產品界面可能就是兩個對話框,你只要打出或者說出你的需求就可以了。

          年初一下午我要看韓寒的新電影,幫我預定一張票。系統根據你的行程和之前的觀影記錄,猜測出你當天觀影的影院和時間順便根據你的喜好選好座位,生成了一個訂單或者同時生成好幾個訂單供你選擇,你確認一下就可以。

          當然這只是一種設想,目前的技術還無法實現,系統無法真正分析出用戶的真實意圖并且做出反饋。例如,在現實人與人的對話中,同樣的一句話,不同的語境下有著不同的意思。

          把這個場景帶入客服中,我們輸入「修改」可以發現有這么多相關的問題。如果我從白條頁面中進入客服,我輸入「修改」,那么應該優先從白條相關的問題中篩選出與「修改」相關的問題。而目前來說,不管從哪個模塊進入客服,輸入「修改」給你推薦的問題都是一樣的,沒有考慮語境。在這種不夠智能的情況下,對搜索結果的展示上傳統的搜索框模式更加合適。

          總結

          以上是我簡單的分析和總結,如果你有不同的看法和建議歡迎留言。


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

           

          原來日本設計還能這么萌!53歲老頑童的“腦洞之作”風靡日本!

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          說起日本設計,你腦子里冒出的第一個印象是不是「性冷淡」

          MUJI、優衣庫、nendo工作室,清一色的簡單灰白掛,看了就讓人想到「斷舍離」。

          但是,并非所有的日本設計,都是這個調調的,也有可能是下面這樣的。

          平淡無奇的紅綠燈,搖身一變竟然變成了楓葉的形狀?

          綠、黃、紅三色正好對應不同季節下楓葉的顏色,有了它就算一路碰到紅燈,情緒也不會暴躁咯。

          那些乘電梯永遠不看腳下的小孩,銀杏落葉鋪成的電梯,足夠吸引你的目光了吧?這玩意兒可比「注意腳下」的標語好使多了。

          以上這些腦洞大開的設計全都來自于日本GOES公司創始人前田賢剛,他是個53歲的老頑童,低調到日站君只能找到他的這么一張小照片。

          雖然公司總共就5個人,但卻和資生堂、奧林巴斯、加拿大觀光局等大客戶都合作過。

          看了他們的作品之后,或許會顛覆你對日本設計的認知。原來日本人認真賣起萌來,也是一把好手吶!

          居家好物篇

          看到這個日站君忍不住哼出聲「童年的紙飛機終于飛回我手里~」

          但是千萬別真飛出去,因為它的真實身份其實是一個鹽罐。

          「靈魂撒鹽」都弱爆了,「紙飛機撒鹽」了解一下,做飯的時候還能順便追憶下童年。

          欸,這堆雪是干嘛的?

          答案揭曉,其實這是一個門擋。

          或者用來做書立也可以。永遠不化的積雪,簡直圓了南方孩子一個「看雪夢」,以后再也不用花5塊錢,雇北方人在雪上寫名字了。

          雖然摸清了前田賢剛「不按套路出牌」的秉性,但日站君看到下面這個還是迷茫了,曲別針被掰彎了?

          而它的實際用途竟然是固定海報的釘子!一眼掃過去,毫無違和感。不知道的可能還想求鏈接,哪家的回形針這么剛連墻都能戳穿。

          回形針都能釘海報了,所以這肯定不是普通辦公用的燕尾夾。

          沒錯,從底部的桿子就能看出些端倪,人家就是個吧臺椅。

          事情變得沒那么簡單了,看GOES家的作品,仿佛演變成了一個「猜猜我是誰」的游戲。偶爾加班來一瓶啤酒,還挺有情調的。

          哈哈你又猜錯了,它只是提醒你工作的便利貼。

          有情調的來了,磁帶卷筆刀。

          高科技儀器卷筆刀,連削鉛筆都能變成一件有儀式感的事。

          吃貨篇

          一塊吐司,看上去松軟香甜,讓人忍不住想咬上一口。

          不過別真咬,因為它是個如假包換的手機殼。這樣的手機殼千萬別給我,我每天都會餓醒的。

          藏了塊「蛋糕」的茶杯,有了它喝水都是甜甜的。

          一箱來自遠方的包裹,中間透出的紅蘋果又大又圓,任哪個快遞小哥看了,都會輕拿輕放吧。

          嘿嘿又被騙啦,人家只是一卷膠帶,就是長得逼真了點。

          夏日炎炎,來把「五花肉扇子」扇扇風。友情提醒,別在午飯前夕使用,不然可能會慘遭同事群毆!

          再穿雙「牛排拖鞋」,總覺得腳底板好像油油的。

          冰淇淋掛鉤,牢固性有待檢驗,總擔心天一熱就化了……

          還有新鮮出爐的「蔬菜瓜果戒指」,青椒、草莓、胡蘿卜、玉米,應有盡有,敢戴出去的,日站君敬你是條漢子。

          萌寵篇

          之前的巧克力總算知道是被誰偷吃的了,巧克力上的貓腳印透露了一切。

          想和你家阿喵玩躲貓貓嗎?紙袋子就是個不錯的藏身處噢,露出的一截小尾巴,能萌死個人。

          往袋子里一瞅,果然在這兒躲著呢。

          喵星人款「暗中觀察」插座,你家主子盯著呢,看你還敢忘拔插頭!

          路障也貼上阿喵的照片,醒目值立馬翻了個倍。

          這只萌萌的小兔子表盤,總覺得少了點什么。

          如果你穿的是小白鞋,調整好角度抬眼看,少的兩兔子耳朵終于補齊了。

          難以想象,這些居然全出自一個大叔之手,所以說,千萬別小看大叔,他可能比20多歲的你更有少女心。

          宅男篇

          一個畫著美女的扇子,就能夠成為宅男愛用品了嗎?

          那是你沒get它的正確使用方式,只要角度找的好,就能營造出下圖的場景,簡直是單身男性的福音哇。

          誰說露肩裝是女性的專屬?

          男生照樣可以擁有。穿上它,保準你是整條街最靚的仔。

          精神病人思維廣,中二少年歡樂多,漫畫式鏡子專為每一位中二魂爆棚的你而設。

          每天起床一照鏡子,誰還不是故事的主人公。

          一般的傘都不夠符合中二少年的氣質,得撐這一把才行。

          別人在明你在暗,再也不怕和陌生人進行迷之眼神對視了。

          要是嫌那把不夠炫酷,八星八箭全鉆石豪華版足夠閃瞎你的眼了吧?

          下面是新時代年輕人必備的手機三件套,自帶打光板的手機,絕對的合影利器!

          手機也得好好防曬,「臉基尼」也給用上。

          手指不夠長的少年,只需一根「手指加長器」,單手按到手機屏的各個角落,從此不再是夢。

          這突破銀河系的腦洞,日站君不禁想為它們雙擊666。

          GOES公司的理念是要做「引人注意而獨特的idea」,看了他們的作品應該沒有人會覺得他們沒做到吧。

          人們總會忽視眼前的風景,前田把生活中的小物件摘出來,再融入自己的腦洞。

          于是當大家再看到它們時會眼前一亮,然后會心一笑,感受到創意的美好,這就是設計的意義吧。

          當性冷淡、極簡風大行其道,他們卻致力于把普通平凡的事物玩出新花樣,告別無聊的日常。果然有趣的靈魂才是萬里挑一!

          以上小物均為良心介紹,如有種草概不負責,別問日站君要鏈接,因為日站君也沒有。2019年都到了,我們也稍微來點改變唄,或許比起性冷淡,不如賣萌來的贊。

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

          日歷

          鏈接

          個人資料

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

          存檔

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