Categories
Zcool

深度解析設計系統

你覺得設計系統重要嗎?那目前手裡的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規範?那怎麼避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感? 設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規範、設計模式、設計語言、設計原則有什麼關係? 設計系統 設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在製作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統裡。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。 設計模式 設計模式是一種經常性,可重複使用的解決方案,可用於解決設計問題,我們經常會說解決整個方案我們要運用什麼樣的設計模式。 設計語言 設計語言是把設計作為一種“溝通的方式”,用於在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規範+多場景應用三大要素組成的一套設計應用規範系統。 設計原則 設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用於傳達品牌主張或設計理念,它將指引業務設計執行的方向。 比如Airbnb的設計原則可以簡單歸納為幾點: 設計規範 設計規範對於設計師來說並不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規範不僅有利於設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。 那是不是只要製作一套設計系統,在團隊進行擴散就可以了?那平台的統一性就解決了? 我曾經加入一個設計團隊,看到平颱風格不統一,當時很自豪很堅定的製定了一套平台設計規範,從色彩體系、文字體系、icon體系、botton體係以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平台統一性指日可待,沒想到這個規範就成了我自己的規範,僅僅是我在自嗨。 為什麼已經建立設計規範了,還是沒能解決平台統一的問題?這裡延伸出另一個問題,為什麼其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什麼推不起來? 那要追溯到設計體系的目的是什麼?它的意義何在? 1-建立統一的設計文化體系 2-保證多團隊成員共同參與的項目視覺一致性 3-提升品牌調性 4-節省與研發人員的溝通成本 5-將元素組件化,提升設計師和程序員的工作效率 6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。 7-在用戶層方面,對某產品的體驗一致性得到落實 8-減少設計出錯率 …… 整體可以歸納為 1-對內統一,對外區分 2-管理與協作變得方便 3-建立設計文化體系,建立品牌感 4-減少、優化錯誤出現 對內統一,對外區分 規範定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別於同類競品的,比如阿里雲、騰訊雲,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規範。這樣才能在協作上達到對內統一。我們都不希望在阿里雲的網站,各個頁面的設計差異明顯,像跳轉到其他平台。而這些針對用戶層一致性都是非常重要的體驗。 管理與協作變得方便 for Designer: 多個設計成員協同一個產品,迭代與更改規範都能更快的同步。可以試著想像一下一個幾十人的設計團隊,如果沒有統一設計規範,那網站會變成什麼樣子。 for Developer: 在UI還原中,設計需要經常與前端進行溝通“這裡這裡這樣做,那裡那裡這樣做”,對於每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。 設計規範統一後,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。 建立設計文化體系,突出品牌感 做品牌的時候需要製定一整套VI規範手冊,那平台同樣也需要統一的品牌感。建立統一的文化體係可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。 你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎? 減少、優化錯誤出現 設計經常碰到設計完後需要修改一個點,然後就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規範後只需要修改組件即可。盡可能的避免錯誤的出現。 設計規範的意義這麼強大,對網站及品牌有至關重要的作用,那為什麼還會出現沒有應用起來的情況呢? 很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規範是不是就失去了變化和新鮮感?那設計還有什麼意義?開發都可以做設計的事情了。” 這裡就要看對設計規範理解的深度—設計規範是分層次的,平台規範歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本 對無法拆分的底層基礎元素做嚴格規定 底層基礎元素也可以說是全局樣式,比如色彩規定、文字大小、icon線/面、botton體係等一些基礎的元素,給用戶一種統一的視覺形象,在跨界面、跨端、跨系統間有熟悉感,從而潛移默化地進行品牌的滲透。 增強界面設計的靈活性和可維護性 對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的複合組件減少過於局限的限定條件,考慮各種拓展的可能性。組件在製定過程中要考慮多種狀態,多種可能。 設計規範隨著業務的發展或技術的變革終究是會過時的,是需要迭代的。 設計規範是需要迭代的,而不是我只要製作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻 […]

Categories
Zcool

UI/UE | 產品體驗日記(15)

查爾斯·狄更斯在他的作品「 一年到頭」中寫道:“有人曾經被問到這樣一個問題:什麼是天才?他回答說:天才就是注意細節的人。”對設計師來說:“細節是頭等大事”,那些優秀的設計師並非都有極高的天賦,只是在做設計時候多思考了一下細節而已,所謂細節決定成敗。 01.「淘寶」收藏夾-商品被拋棄前的挽留 產品體驗: 在淘寶的收藏夾,如果對收藏的寶貝不滿意,可通過當前寶貝後面的“找相似”功能入口,系統會從商品庫匹配類似的寶貝以供用戶選擇。 設計思考: 收藏夾對大家來說並不陌生,可以理解為關注,跟購物車有很多相似的地方,說到底就是存商品。購物車更偏向於讓用戶購買,用戶添加到購物車的商品相較於收藏夾有更強烈的購買慾望,平台則通過不定時對購物車的商品進行降價、發紅包、湊單等活動刺激用戶的購物慾望,達到成交的目的;而收藏夾則弱化了購買的屬性,更多的是對商品的一種喜歡,或者只是稍有感覺的商品,購買慾望並不強。所以說收藏夾裡的商品很邊緣化,在用戶的認知裡沒有多大的存在感,對比購物車,收藏夾的商品購買的可能性很低,也許下一次用戶進來就會清理掉。 淘寶APP則在收藏夾每個商品後面提供了一個找相似入口,就算是在用戶清理商品之前做的最後一次挽留吧,用戶可能一時興起進入收藏夾,看到曾經有點感覺但並不是很滿意的商品,如果太多了就會產生清掉的想法。這時看到找相似入口,或許會再次勾起用戶曾經想過有要購買的慾望。從找相似入口進去,系統會從商品庫匹配類似的商品以供用戶選擇,相同的商品在不同的店鋪,其優惠力度和口碑都有很大的區別,可能會通過商品其他方面的優勢改變用戶的想法,以達到促單的目的。人的惰性是天生的,如果讓用戶自己進行搜索對比,可能嫌麻煩,但如果系統把用戶曾經出現過的想法做了處理,篩選後將結果主動呈現給用戶選擇,這時候用戶多少會有些動心,相比什麼都不做,其轉化和留存顯而易見。 02.「美團」訂單評價-是責任義務還是轉化的切入點? 產品體驗: 在美團的訂單管理-待評價板塊,每個訂單時間的下面都有一段引導性的文字,吸引用戶完成評價操作。 設計思考: 有很多電商類型的APP在規劃訂單這個版塊時,都按部就班的分為待付款、待發貨、待收貨、待評價,殊不知這些功能不是目的,也不是一成不變的流程,如果站在企業利益的角度深挖,每個點都可能成為用戶轉化的引線。就拿待評價來說,如果只是因為用戶買過東西就要去評價,說實話沒有這個義務,而且還費時間,即使用戶去評價了,萬一是差評呢?毫不誇張的說,差評明面上影響的是單個商戶/商品,其受到最大影響的還是企業。 直接這樣說有些冠冕堂皇,引用“蝴蝶效應”惡性循環的說法:一個用戶給了差評,直接影響著後來用戶的下單成交率,而其中可能就有一小部分用戶會被流失掉,隨著用戶量的減少,就會降低該平台所有商家/商品的的銷售量,如果繼續惡性循環下去,那麼企業面臨的是什麼樣的結果,不難猜測。 美團APP的訂單評價功能並非為了根據常規走形式,而是在每個訂單裡都增加了帶有營銷性質的文案引導,在用戶完成評價的情況下,還為再次轉化做了埋點。 根據上圖:第1、2條訂單,不管是金豆、紅包,還是優惠券、積分,其性質都是在給予用戶優惠,讓用戶繼續完成未完成的事物,為的是能盡快達成目標,獲得最終的獎勵,同時也會因為用戶獲得了獎勵,為再次下單得到實質性的優惠做了鋪墊(如:我們在某個APP賬戶裡剩下幾塊零錢無法提現,這時可能會找個需要用的或者最便宜的商品把零錢花掉,不然丟了就是浪費,優惠也是同理),以促成再次的下單轉化。再者,伸手不打笑臉人,平台已經提示評價之後給予各種好處,即使想給差評的用戶(非全部)此時的糟糕心理多少會有些變化,或可能對平台體諒而放棄差評。 第3條電影訂單則是通過問答的方式降低評價的難度,能避免用戶需要自己去思考評價的內容而浪費時間,一問一答的方式方便了很多,還能通過提出的問題轉變想給電影差評用戶的思維,把用戶自己的主觀想法引導至當前問題方向,以此降低差評概率。 不管評價何種類型的訂單,美團APP這種做法就是把用戶的心理研究的很透徹,通過營銷型的文案或內容直觀的呈現在用戶面前,增加對用戶的吸引度。 03.「騰訊地圖」貼心的左手操作開關 產品體驗: 騰訊地圖APP首頁的部分功能操作入口默認顯示在右側,根據用戶的使用習慣(尤其是左利手)可以在地圖設置中開啟左手操作,回到首頁就能看到這部分功能入口移到了左側。 設計思考: 我們在PC端與電腦交互的時候,無所謂左/右手的問題,反正就是一個鼠標箭頭,左手還是右手無非就是挪下鼠標墊的事情,當然,如果誇張一點的話,市場上也存在針對左利手用戶的鍵鼠設計。反觀移動端應用,就嚴謹很多,需要考慮用戶的使用環境。 騰訊地圖APP就很貼心的考慮到了左右手操作的情況,只要在地圖設置中開啟左手操作開關,主頁的部分功能入口就從屏幕右側移到了左側,針對左利手用戶來說,非常的友好。另外,同一個用戶都有可能使用左手或右手,這種並不完全依賴於用戶的左/右利手習慣,而更多依賴於當前的使用環境,比如:香港的車駕駛位在右側,大部分都習慣右手(為了安全考慮,建議雙手)握方向盤,左手操作其他,手機導航也不例外。即使不用去深究左右手操作的問題,功能到底顯示在左邊還是右邊,完全可以交給用戶自己去選擇,給用戶更容易掌控的感覺,帶來安全感,騰訊地圖的左手操作開關就很好的詮釋了這一點,極大的提升產品的易用性。 04.「躺平」讓人印象深刻的文案 產品體驗: 躺平APP的個人信息,不管是必填還是非必填,系統都使用個性化且較玩味的文案作為默認信息,非常有趣。 設計思考: 用戶在填寫表單時,常見的APP通常都是使用佔位符“請輸入”或“請選擇”等之類的提示,殊不知信息的錄入,不僅需要浪費用戶大量的時間,還增加了完成表單的難度。一個好的產品都會從用戶的角度出發,在填寫表單時,根據已知信息,幫助用戶預判內容並自動錄入。比如:用戶在輸入電話號碼前,需要先輸入國家的代碼,系統可以根據用戶當前定位所在的國家自動錄入;給用戶給一個默認暱稱;根據主流用默認一個性別等,即使幫助填寫的信息有誤,用戶本來就需要自己編輯的東西,並沒有增加使用成本。 在我第一次進入躺平APP的時候,看到“魔鈴座橄欖球宣傳大使”這個默認暱稱,簡直有種高端大氣上檔次,吊炸天的感覺,如果要讓我自己想個好點的暱稱,要么俗不可耐、要么想到放棄(即使想到了更好的,默認暱稱也不影響,直接改掉就得了)。性別、年齡屬於非必填,我們通常在其他應用裡看到的都是請選擇,或者根據平台的主流用戶已默認性別。躺平APP使用“不關你事”比較玩味的文案,感覺有趣且神秘,如果是強迫症的用戶非得點開看看裡面到時是什麼鬼。趣味化的文案讓人印象深刻,有時還能引發會心一笑,間接提升了用對戶產品的使用粘性。 05.「騰訊新聞」海報分享-長圖截屏高效快捷 產品體驗: 在騰訊新聞APP的詳情頁面,把自己想要的內容選中,長度不限,選擇海報分享工具,系統會自動將選中的內容生成圖片通過微信或QQ等渠道進行分享。 設計思考: 新聞是一種信息,很多人借助這種信息,對生活做出理性的判斷,當然,也不排除只為八卦的心態。當我們看到自己感興趣的文章內容、圖片時,就會使用設備系統截屏,作為自己後續回味或者分享使用,但設備截屏只能截取當前屏幕已顯示的範圍,如果想要多點內容就只能藉助其他軟件,或截取多張自行拼接。 在騰訊新聞APP的詳情頁面,可通過海報分享,將用戶已選中的內容自動生成長圖進行分享,相當於長圖截屏,雖然不能直接保存到相冊,但可以進入分享渠道進行保存或收藏,免去多上圖片拼接的麻煩。海報分享考慮周全且人性化,截長圖非常方便,一次截取全部想要的內容,既完整又清晰,極大方便用戶使用。 06.「美團」好友拼單-誰才是最大的受益者? 產品體驗: 在美團外賣的商家店鋪頁面,通過將拼餐/湊單的拼單鏈接發給微信好友,好友直接從鏈接進入微信小程序的該商家店鋪進行選擇,選好提交即可,由拼單發起人支付合計金額以完成下單。 設計思考: 之前看過一篇文章《論用戶有多懶》,單從文章分析的角度,用戶自己肯定不會承認,但從專業分析的角度,再合適不過了。每一個行業的興起都是因為龐大用戶量實質性的需求,而每一次非理性的消費,都是利用了人性的弱點,大多數人都是趨利避害、好逸惡勞。比如:做一件事,在5、10分鐘選擇,一定會選擇5分鐘;工作一天,報酬在500、600元中,一定選擇600元,這是人的本性。外賣行業也不例外,明明在家等著就可以送飯上門,為什麼要出去?這也是成就外賣行業的主要原因,同時平台也會從各個利益點出發不停的探索,在解決用戶需求的同時,滿足企業自身的利益,拼單就是其中的一個例子。 美團APP的外賣拼單功能,可通過多個用戶共同完成一次外賣下單流程,其中包括一個發起用戶和多個拼單用戶共同完成,所有用戶選擇的商品由發起人統一提交、結算和支付。拼單功能可以幫助多方、解決各種需求。下面我們就來分析下美團好友拼單的一石三鳥: ①用戶:對於想要拼餐的用戶,發起好友拼單一起結算,能夠解決因分開下單導致送達時間不一致的問題,非常方便,對於已結算好的總金額進行AA制,比起單獨下單要把每個用戶的訂單金額統計到一起方便多了。還可以通過湊單達到起送條件,金額越高,總優惠比例越大等,利用給予用戶優惠的力度,增強用戶的粘性。 ②商家:通過好友拼單,把多個用戶拉到同一家店鋪消費,從“發起人”用戶的角度出發,將一些“猶豫不決是否要點外賣”的場景,即非剛性的需求的用戶邀請拼單,可幫助分攤運費、享受滿減優惠,刺激猶豫中的用戶進行消費,以提升店舖的銷售量。 ③企業:不管是增加用戶粘性還是提升店鋪銷售量,其最終受益者都是平台。另外發起拼單所邀請的很可能不是美團外賣的活躍用戶,甚至從未在美團註冊過。但當他們點擊拼單邀請鏈之後,就可以用微信授權美團外賣登錄H5或小程序進行點餐,起到宣傳轉化新用戶的作用。 07.「網易云音樂」邀請好友一起聽-來淋“表情雨” 產品體驗: 在網易云音樂邀請好友一起聽,發送表情時,會有滿屏的動態表情落下,感覺下了一場“表情雨”。 設計思考: 我們在聽歌時,基於不同的需求,偶爾和閨蜜一起聽聽,互相安利喜歡的歌曲;也有從做朋友開始就一起聽,從朋友聽成戀人、再聽成夫妻的。記得很久以前,我邀請朋友一起聽歌,為了方便隨時打字和語音聊天,特意下載了YY,把好友拉近同一個頻道,現在回想起來,簡直是low爆了。目前大部分跟社交沾點邊的應用都可以邀請好友“開房間”,只要不違法,怎麼造都行(不要想歪了)。 網易云音樂的邀好友一起聽歌,不僅僅是私人空間,在用戶體驗方面也加了一把火。發送表情包時,滿屏都是“表情雨”,製造出一種浪漫的氣氛,就像線下二人世界的感覺有木有,讓用戶感受到親切放鬆的氛圍,以創新性的方式為“房間”創造了更個性化的使用體驗。 08.「菜鳥」寄快遞-個人隱私的安全防線 產品體驗: 在菜鳥的寄快遞頁面,開啟隱私寄,包裹上的面單會自動隱藏寄件人手機號碼、地址中的部分信息。 設計思考: […]

Categories
Zcool

UI界面設計常見的排版方法

接下來為大家介紹一下本篇內容,通過UI的頁面排版佈局,進行系統的頁面設計,本片章通過keep、喜瑪拉稀、京東、比心等多個app系統的闡述UI等距柵格排版的優勢。 最後再說一句勿忘初心,方得始終,祝大家2021越來越好。 1.1什麼是柵格系統? 網格系統可以讓你依靠秩序與邏輯去完成設計。 早在20世紀初,德國、荷蘭、瑞士等國的平面設計師們發現通過維持視覺秩序,從而使版面能更加清晰有效地傳遞信息,二戰後這種理念在瑞士得到了良好的發展,直到20世紀40年代後期,第一次出現了使用網格進行輔助設計的印刷作品。 1.2柵格系統的優勢 柵格系統在頁面排版佈局、尺寸設定方面給了設計者直觀的參考,它讓頁面設計變得有規律,從而減少了設計決策成本。 UI設計也是需要理性的、客觀的、具有數學邏輯美感的。熟練運用網格系統能夠讓你的設計更有秩序和節奏感,頁面信息的展現更加清晰,提高閱讀效率,從而提供給用戶舒適的使用體驗。 當多位設計師共同設計產品時,一個統一標準就變得尤為重要。如果沒有一個統一的框架去約束的話,我們的產品的頁面和組件的標準可能各式各樣,這樣的話整個產品的頁面都會比較混亂。因此,網格系統有助於將界面設計工作分開,因為多位設計師可以在統一的佈局下進行不同部分工作,並且無縫集成並保持連貫。 1.3 App中重要的網格系統 網格系統利用水平與垂直的參考線,將完整頁面的版心劃分成若干大小一致的格子,所有元素都在版心內編排,再通過這些規律性的格子作為參考來構建有序的版面。 在app設計中,被到導航欄、標籤欄和左右邊距包裹的區域為設計區,所有元素都應在設計區排版佈局。但並不是不可超越左右邊距,在一些特定的環境下也可以使用邊距空間。 柵格系統就是利用均分的垂直和水平線,將頁面分割成若干有秩序的格子,按照這些分割好的格子去安排頁面的設計元素,控制元素之間的節奏關係。 柵格系統大的層面可以幫助設計者更好的進行版式設計與內容佈局,而小的方面可以輔助設計師規範頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講,這兩者同等重要,從執行層面來講,我們一般先做版式設計與佈局然後再填充內容、調整細節。 2.1什麼叫單位的網格 由於列跟水槽的寬度是以網格作為基本單位來增加或者減小,所以柵格化的重要一步就是需要先定義好柵格的原子單位“網格”的大小。 我們也可以利用相同網格法來製定產品中的間距,建立相同的間距為一個單位的網格,使用單位的倍數來定義模塊的間距與元素的尺寸。 2.2網格的應用標準 App通常不會超過6列,以750*1624為例,如果邊距為40、間距為20,劃分成6列,則每列為95,較ios最小點擊範圍(88px)大一點,如果劃分為7列,則每列為78,這麼小的尺寸將會影響用戶的點擊操作。 2.3.八倍間距的應用 目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除,使用8作為最小原子足夠普適。可以確保不同佈局之間的視覺一致性,同時可以靈活的適配多種尺寸的設計。以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中最大程度的避免類似於0.5、0.75、1.25等次像素的出現,從而使頁面各類元素在大多數場景下都能有比較精緻的細節表現。 在網格系統中應該更加註重的是間距,而間距要遵循網格系統(例如使用4、8、16、24、32 等和8 具有規律的數字)同時在產品中的各類元素也要遵循這類原則(例如圖標大小、組件大小等)。所以佈局的水平和垂直節奏和各個組件的節奏會相互重疊,整體的設計將更加完整。 那麼假設我們以8為基準的去延展系統間距,得到如下間距系統: 8、16、24、32、40、48、56、64、72、80、88、96、192等,這裡都是8的倍數或能被 8 整除。 開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基於8的原子單位來設計,因此如果設計師也使用以8為基本單位的柵格系統,開發與設計師相互對接就會更加方便,開發實現頁面時也能更高品質的去還原我們的設計。 2.4十倍間距的應用 如果定義10為最小單位,那麼以10為基準去延展系統間距,得到一組數字是10、20、30、40、50、60、….120、130等。 比心app挑選20作為列間距,挑選20作為全局邊距,這些將滿足整個app的設計需求,相同的邊距會讓整個app顯得整齊一致,緊湊的節奏感使得整個頁面充滿了活力與動感。 keep app挑選挑選30作為全局邊距,大邊距長留白,上方金剛區間距90,下間距110 ,圖片間距10留出大面積空白。大量的留白和簡單的比例讓整個界面充滿了清新的文藝氣息。簡單佈局,充滿呼吸的節奏感,能讓用戶在體驗運動的同時,又有呼吸流暢的感覺,具有極佳的用戶體驗感。 2.5四倍間距的應用 如最小的單位是4,那麼較為合適的間距有16、20、24、30、36;我們還可以通過列間距反推全局邊距的尺寸,全局邊距大於列間距畫面會更加聚焦在屏幕中間,反之,畫面就會跑向屏幕邊緣。 3.1什麼是廣進分割比 有人曾經問過我黃金分割比是否能在ui的界面設計中的得到應用,其實黃金分割比在建築、電器、logo 設計和攝影等領域都有著舉足輕重的作用,但是這種方法在UI 設計中卻不是那麼流行,因為它看起來太難了,但在國外的軟件設計已經開始有了很好的應用。 這是一個十分有趣的數字,我們以0.618來近似,通過簡單的計算就可以發現: 0.618/1=0.618 (1-0.618)/0.618=0.618 3.2 keep中的黃金分割比 以app界面尺寸750*1624為例子, 750*0.618=464、 1624*0.618=1004 ,以這兩個尺寸為線拉長延伸,以keep app為例,可以清楚的發現首頁的功能區第二、第三的圖標正好在黃金分割比上,整體分佈顯得清晰明確複合左右最佳分割比例. 將頁面的黃金分割比連線將整個界面清晰分為3層9個部分,再將單手操作熱區圖片與9宮格結合後.清晰的發現keep的主要操作與視覺位置主要體現在中間三個區域與下方前兩個區域. 通過上圖就會清晰的發現keep首頁整體佈局的合理性與用戶體驗的舒適度. 參考文獻: […]

Categories
Zcool

交互設計師解析三個案例:單複選框、標題省略號、輸入框清空按鈕| 設計詳解

1、從單複選組件反思功能設計問題 節前有一位讀者問了一個關於單選與復選框樣式選擇的問題,大概是: 看到很多單選與多選的設計形式,多種多樣,以前看到「圓點+圓圈」就知道是單選,但是為什麼現在單選與多選的設計樣式五花八門,都沒有遵守前面這種規範呢?這些組件的樣式到底該如何確定呢?為什麼會有一種模糊不清,不知道如何使用的情況? 我發現許多人都有一個習慣,就是喜歡把某個具象的內容抽象化,把某個具體的問題概念化。 比如認為單選就應該是「圓圈+圓點」的形式,但似乎從來也沒有任何明文規定單選就必須是這樣的形式,只不過大家看得多了,就習慣認為是這樣,覺得就是這樣規定的,但其實並沒有過這樣的規則。 要知道,樣式常常根據功能在變化。比如功能優化了,樣式也需要進行修飾,並不是說這裡有一個單選操作,就必須是「圓圈+圓點」的形式給用戶選擇。無論是在電腦還是手機上,都是一樣的道理。 這樣去處理問題,常常會把實際的業務問題給處理沒了,最後變成控件選擇的問題,而不是功能本身的問題。 比如普通的彈框,也是一種單選狀態,為什麼不也改成下圖右邊這樣的呢?不就是操作路徑長,點擊起來麻煩,多此一舉,而且也不好看麼? 即便真的在某個場景下,非得使用上圖右邊的單選形式,那麼把樣式改成下圖這樣,又有何不可呢? 只不過常規的「圓圈+圓點」被使用得多了,大家形成了共識而已,但並不代表它就是一種標準。 如果有一個規則規定說,單選必須是「圓點+圓圈」,那麼各位目前所設計的絕大部分組件都將不能使用,包括各類菜單或開關。比如下圖這樣的action sheet 就不應該存在,而它的出現也是因為功能屬性、設備遷移、操作形式等內容的演化所呈現的結果。 這就是大家在處理設計問題時,習慣做一種概括,希望能複用於絕大多數場景而導致的錯誤情況,沒有落實具體問題具體分析的原則。 包括這位讀者的問題,也是希望能夠明確單選與復選樣式的選擇問題,以便往後能夠更有條理的使用。但可惜並不是這樣,從上述我舉的控件例子可以看出,單選形式早就已經變了模樣,而多數人並沒有註意到,還在認為單選與多選就應該是圓圈與方框的形式。 設計工具/方法論,確實是有部分指導作用,但不能作為絕對性或權威性的內容來吸收,應該辯證地去看。 而之所以在移動端延伸出許多自定義組件(形式並沒有遵循所謂的市場常見規範),正是因為業務與功能的多樣性導致的結果。 樣式的選擇不單單是看到的那部分,它還可以任意變化地處理,無論是單選或者是多選,不該被樣式套牢了。而它的決定因素應該是內容。 比如,iOS 鬧鐘的鈴聲選擇,有許多可選項。 但是因為內容的明確性,大家都知道,鬧鈴只能選擇一種,不會同時有2 個鈴聲響起來(當然也可以這麼做),所以即便鬧鈴的單選形式再如何變化,大家也都知道它是單選的,這就是功能決定了操作形式的例子。 類似於,再如何變化選擇樣式,無論是圓圈、方框,或只有勾,甚至是其他情況,大家也都知道它就是單選。 而之所以用勾或圓點表示被選中狀態,只不過是人的一種正常認知意識,即使改成三角形,只要能說清楚是被選中狀態,那也不是不行,只不過三角形沒有勾來得清晰罷了,而並不是因為有什麼特殊含義。 所以只要梳理出符合自己產品的「單多選」樣式,形成規範即可。一些人會感到模糊不清的原因是它本來就沒有所謂的標準,又何來的清晰呢? 寫到這,想到之前有讀者問:什麼時候該遵循設計規範,什麼時候不該? 要知道,設計規範本身就是基於某個具體產品內容所構建的一個整合標準,為了規範化存在共性的功能形式。而對於共性的判斷也應該是從功能來定義的,比如返回都在左上角類似的,但是一定麼? 單拎出來說什麼時候該遵循,什麼時候不該遵循,是很概念化的一個問題,不可能存在一個具體話術標準,說什麼時候應該,什麼時候不應該的。 如果我回答,符合規範中已有的形式的,就遵循,不符合的就不遵循。那就是一句典型的廢話了。但除此之外,我也就不知道如何解答了,除非你把規範和具體問題發給我,我可以跟你一起討論討論。 寫這篇文章的時候,看到一位朋友發的信息: 為什麼手機刷新都喜歡下拉?因為神經科學研究表明,這個動作,更容易讓人產生對不確定性和驚喜的期待,原理和賭場的老虎機類似。 很多人都會習慣性給一些操作或交互形式做類似這樣的定義。 但這麼定義是不對的,因為這相當於前面說的,把業務給解釋沒了,成了形式上的討論。而為什麼會使用下拉、以及下拉會有什麼情況,包括它所解決的問題,都沒有任何的分析。 比如,下拉之所以讓人上癮,並不是因為「刷新」本身。下拉只是一種交互行為,它的出現也只是為了解決早期刷新按鈕佔據屏幕空間的問題,希望通過下拉進行刷新,以隱藏掉屏幕上的刷新按鈕,給屏幕留出更多可用空間。 而採用下拉是因為它更符合人的直覺—— 往下拉能看到更多新的內容。 但是人之所以會對下拉上癮,並不是因為下拉這個行為,而是因為下拉能看到更多信息。下拉本身只是解決了屏幕空間的問題,而人其實是對內容上癮。 比如我在騰訊新聞裡看NBA 的資訊,通常只會直接上滑,看下面的內容,看完了就關了,不會進行下拉刷新。 因為在騰訊新聞裡,下拉刷新的新聞並不是最新的內容,更多是今天或今天之前的信息,不刷新反而是剛剛更新的資訊,那麼下拉刷新雖然也是刷新,但是刷新出來的內容是舊的,也並不吸引我,反而成了我要避免的操作,因為只要一下拉,最新的資訊就會被舊的資訊擠掉,要刷掉進程重新打開App 才會重新再顯示最新的。 所以就不能簡單的定義說「下拉刷新是一個容易讓人上癮的操作」,而是要關注內容,如果刷新的信息都是舊的,或者是用戶沒興趣的,那即便刷新了,也不會引起用戶的注意,也更不可能讓用戶上癮了。 2、標題文案溢出使用「…」合理嗎? 讀者: 呆呆,這個圖的卡片列表裡,標題用省略號合適嗎? (因為原圖涉及讀者項目隱私,所以重畫了個草圖。) 又是一個沒有業務背景的問題。不過這個問題比較簡單,可以展開來說一下。 通常,我們會在各類產品裡面見到諸如「標題超出部分用省略號顯示」這樣的設計,譬如上面這圖。 於是,許多人在自家產品的設計過程中,遇到此類情況,被開發問到時,也會搪塞一句:文案要是超出就「…」顯示吧。 大多數遇到這種情況的,都是因為之前沒考慮好,才臨時想了這個解決辦法。 而很多時候,一些產品之所以用「…」顯示,並不是因為單純地文案溢出,可能是專門設計過的。 所以,如果簡單地認為「…」就是解決溢出而使用的方法,那就有問題了。 下面舉幾個例子。 有些產品,我們幾乎看不到列表視圖裡的標題是有省略號的。 因為這類產品的目的就是讓用戶讀到完整的標題信息,對眼前的內容好做判斷,從而考慮是否點進去看詳情。 […]

Categories
Zcool

提升信息效率的5條原則——京東用戶後台設計規範

信息設計是除了圖形以外的文字、數據等內容設計,通過信息設計可以提高人們應用信息的性能,在眾多信息中能夠迅速找到自己所需要的,並且使得信息能被有效地理解。所以,信息設計的關鍵在於如何將信息有效地展示,而不是強調如何藝術性的表達。 因此,以下總結了5條信息設計的原則,同時結合了後台設計的實際案例進行應用。 靠近與動態 這主要針對信息提示的設計。 “靠近”指的是信息需要靠近行為目標,顯示在用戶的中央凹區域內;“動態”可理解為“變化”的,但不僅是內容的變化,還需要有位置樣式的變化。 因為人們的視覺系統分為兩個區域,一個是中央凹區域,而剩餘的是邊緣視覺區域(相當於視覺盲區)。人們可以輕易的感知到中央凹區域裡的事物,而對於落在邊緣視覺區域的事物,他們的存在都很難被發現。除非這個事物是動態的,才會引起人們中央凹區域的轉移,將視線轉移到這個動態事物上。 在界面設計中,這將會影響信息的可見性。比如在我們之前的後台,有個關於當前“網絡狀態”的信息設計。在正常情況下,界面頂部會顯示“網絡良好”的橫幅,當用戶沒聯網的時候,頂部的橫幅內容會變為“網絡異常”… 但當時我們因為這個設計被用戶投訴了。 (在實際操作過程中,右邊的提示設計比左邊的更容易讓用戶看到) 因為用戶在後台中進行的都是主流程操作,根本沒注意到頁面頂部的信息變化,進而導致了後面操作的失敗。所以我們將這裡的提示信息進行調整,只有異常情況才會顯示toast提示以引起用戶的注意。 讓提示信息顯示在用戶的目標行為附近,或通過動態的展示以引起用戶的注意。 適應與側重 “適應”指信息設計需要考慮產品屬性與應用場景,“側重”是根據不同場景需求,適當調整信息呈現的側重點。 一個產品可能是作為線上獨立運作的平台,也可能只是線下的輔助拓展;可能是供娛樂消遣的內容展示,也可能是作為實用的專業工具運用。甚至比如在一個運動類產品中,用戶動態下使用的頁面,與靜態時使用的頁面,信息的導向、可觸發的範圍設計都可能產生變化。同時,不同的產品屬性與應用場景,對應不用的用戶人群,這些人群的需求也相差迥異。 像當時在我們後台裡,有一個關於商品列表的設計。常規的商品列表會包含商品圖、商品標題與價格,而商品價格通常被重點突出用來吸引消費者;但在後台中,用戶群體是我們的商家,他們最關注的其實是這個商品“我賣了多少份”、“我賺了多少錢”,商品價格反而不是最重要的點。 (相比左邊的設計僅是把信息“添加”進頁面中,右邊的設計同時適當調整了信息層級,讓信息效用於當下的場景) 所以我們在做這塊商品列表設計的時候,棄用了常規的商品列表組件,重新設計了信息層級以適應當前的商家場景,側重展示用戶最關注的信息。 根據不同的場景適當調整設計,有側重性地呈現信息以提高使用效率。 前置、直達 嚴謹的框架界定、完整的信息展示有時候並不是最佳解決方案。 “前置”“直達”意為將二級頁面(或獨立功能)信息前置於主頁面中展示,為用戶提供更快捷的直達入口。 其實對於大部分用戶來說,用的只是一個產品中的某個核心功能而不是全部功能,所以如果從使用效率上講,將這個核心功能入口前置展示在主頁面,要比用戶先進入二級頁面、再在全部功能中尋找這個核心功能的使用效率更高。 這種設計理念我們也可在ios14中見到,通過小組件的形式,在主屏幕展示每個APP最核心的內容,用戶無需進入APP即可直達功能入口。 特別是對於後台這種專業型工具來說,對產品精準、便捷的訴求會更加明顯。比如當時我們後台中有一個邀請功能,包含主頁的歷史邀請列表與設置邀請條件的二級頁。這個二級頁中有是否接受邀請的開關、對邀請級別與粉絲量的限制;如果關閉這個開關,則此時頁面中對級別與粉絲量的限制設置失效。 (在實際運用場景下,右邊的設計不僅能快速進行操作,而且這個開關與列表、更多設置選項之間的承接關係也表達地更加清晰) 所以我們將這個決定了二級頁中其他選項“生死”的開關前置到列表主頁中,畢竟在關閉開關的情況下,用戶已沒必要為了其他無效的設置選項進入這個二級頁。 通過將關鍵功能前置,打破頁面層級間的分隔,幫助用戶直達關鍵功能。 非必要折疊 保持簡潔似乎是設計師恆定不變的主題,在許多常規頁面中,如果一個內容包含ABCD不同分類,這些分類信息基本上會被“合併同類項”,折疊成左右滑動的菜單欄樣式。 不過除了圖片的折疊還較為顯眼,對於文字標題的折疊還是需要慎用的。因為用戶進入一個頁面會快速瀏覽頁面中的主要內容(或占比大的模塊),同時經過長久以往的瀏覽習慣,用戶操作界面的滾動方向都是上下為主;所以當文字標題作為輔助信息不僅佔比較小、且是左右滑動的菜單欄樣式時,位於菜單欄第2項以後的內容會被大部分用戶自動忽略。 在我們之前的後台設計中,有一個關於活動類型的切換就是採用這種左右滑動的菜單欄形式,這也間接導致了當時位於第2、3項菜單中的類型被選中率特別低。 (對於一些重要功能的切換,右邊的設計比左邊更能引起用戶注意,讓用戶進入選擇的狀態) 後來我們將這裡進行優化,把原本作為頂部滑動菜單欄的活動類型下移、並變成3個展開的選項,將活動類型的選擇作為需要用戶操作的主要內容的一部分,繞開用戶的自動忽略。 折疊為左右滑動的文字菜單欄,由於樣式不顯眼與用戶瀏覽習慣的影響,除了第一項以外的其他內容,通常會被用戶忽略。 默認與引導 “默認”指界面中一些默認選項,這些默認的設計可幫助我們引導用戶的操作,同時對於用戶而言,他們並不會輕易改變這些默認信息。 因為用戶對於有可能導致自己失去一些權利或其他什麼的時候會表現的無比敏感。當用戶面對不同選項時,如果此時有個默認選項(不選擇)將比選擇一個可能導致自己失去什麼的選項更能獲得安慰。所以被動的選擇默認狀態會讓用戶感到安全感,更加簡單,和更小的風險。 基於這種默認項心理,也可以引導用戶按我們推薦的路徑操作,盡量減少異常情況的發生。比如我們後台設計中有個數據分析模塊,用戶可篩選不同時間段查看數據情況。但如果用戶頻繁切換時間段,將會增加我們系統的計算負荷進而導致數據異常。 (面對不同篩選項時,左邊的設計給用戶的第一反應是“這裡還有2個選項,我切換試試有什麼反應”;右邊的默認項設計可有效削弱用戶對“可選擇”的敏感度) 所以我們將時間篩選中的某一項作為默認項,並將其他時間選項收起(如果說前面說的“非必要折疊”是繞開用戶的自動忽略,這裡的“默認”選項則是進入用戶的自動忽略),用戶來回切換的頻率減少,相應也降低了系統的計算負荷。 運用默認項設計,營造用戶在使用過程中的安全感,引導用戶的同時盡量減少異常情況的發生。 寫在最後 以上關於信息設計的原則,幫助我們把信息更加高效地傳遞給用戶。 不過除了“信息傳遞”的使命之外,設計也在不斷地探索著對用戶行為與決策的推動,嘗試著各種讓設計價值最大化的可能。 ( 詳見我們之前分享的這篇關於“行為助推”文章【點擊進入傳送門】 ) 我們正在探索的路上,期待你也一起來。

Categories
Zcool

設計師必看的色彩與應用指南

色彩是影響用戶最簡單和最重要的一個因素。研究表明,人們只需90秒就能對一種產品做出下意識的判斷,而其中高達60%以上的判斷僅基於顏色。因此,選擇合適的顏色對於改進產品的轉換率和提高產品的可用性是非常有用的。在沒有文字的場景中,顏色的搭配非常重要。如何配色可以使設計感更強,如何配色更好看,哪些配色不好看,解決這些問題就需要學習色彩理論。 我們身處在一個多彩的世界中,物體的不同顏色,會讓我們產生不同的情緒。色彩,即光從物體反射到人的眼睛所引起的一種視覺心裡感受,按字面含義上理解可分為色和彩。 「色」是指人對進入眼睛的光傳至大腦時所產生的感覺,「彩」則指多色的意思,是人對光變化的理解。色彩的基本理論雖然老生常談,但在UI設計中具體怎麼運用,還有關於色彩的性格和含義,都是我們需要了解的。因此在學習UI配色之前我們先來了解色彩的基礎知識。 1.1色彩常識 原色 所有的色彩都源自“紅黃藍”三種原色,很多人誤以為三原色是“紅綠藍”,其實不是。紅綠藍是顯示上的三原色,計算機屏幕的顯示是色光三原色(紅red,綠green,藍blue)即RGB組成的,每一個像素的顏色都用三原色值來顯示,與美術上的三原色不一樣。原色是其他顏色調配不出來的。把原色相互混合,可以調和出其他種顏色。 雖然RGB 在顯示設備上表現良好,但並不夠人性化。因為人們判斷顏色,往往是通過:這是什麼顏色?是不是太艷了?是太亮了還是太暗了?這樣的感官維度,而很難通過紅綠藍的亮度層級去判斷。所以人們後來基於RGB 衍生出了HSB 模式和HSL 模式。 印刷三原色為青(Cyan)、品紅(Magenta)、黃(Yellow)。是減色模式,混合為深灰色,並不能產生黑,所以在印刷時加上黑色油墨,才能產生純正的黑,就是CMYK顏色模式。 間色 又叫“二次色”。它是由三原色兩兩混合調配出來的顏色。紅與黃調配出橙色;黃與藍調配出綠色;紅與藍調配出紫色,橙、綠、紫三種顏色又叫“三間色”。在調配時,由於原色在份量多少上有所不同,所以能產生豐富的間色變化。 複色 也叫“複合色”。複色是用原色與間色相調或用間色與間色相調而成的“三次色”複色是最豐富的色彩家族,千變萬化,豐富異常,複色包括了除原色和間色以外的所有顏色。例如,黃色與橙色混合得到橙黃,紅色與紫色混合得到紫紅。 冷暖色 最後由三種原色、三種間色和六種複色組成的系統就稱為十二色環,從紫色至黃綠為冷色,黃色至紫色為暖色。冷色令人聯想到天空、海洋、冰雪等,產生寒冷、理智、寧靜等感覺;暖色則令人聯想到太陽、火焰、熱血等,產生溫暖、熱烈、危險等感覺。 雖然可以用「冷」、「暖」色係來劃分色彩,但配色的變化卻又千種萬種。藉著色彩的組合方式,從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來表現色彩的印象。 不同的色輪由不同的人發明,他們對於色彩的見解不一樣,因此創建出來的色輪用途也不一樣。比如:伊頓色輪又被稱之為美術三原色,是由顏料的三原色混合疊加而成;RGB色輪主要運用於電腦、手機、平板等一系列科技產品,RGB的三原色是光的三原色;CMYK色輪主要用於印刷領域。 1.2色彩三屬性 豐富多樣的顏色可以分成兩大類,即有彩色系和無彩色系。彩色系的顏色具有三個基本特徵:色相、明度和飽和度,在色彩學上被稱為色彩三大要素或色彩三屬性。 色相(Hue) 色相是自然狀態下的色彩,是色彩的相貌。簡言之,色環上沒有改變明暗的色彩。色相是色彩的首要特徵,是區別各種不同色彩的標準。例如紅、橙、黃、綠、青、藍、紫就是其中不同的基本色相。黑色是沒有色相的中性色。不同的色相在人眼中的差異是色相本身對應光的波長不同而造成的。紅色波長最長,紫色的波長最短。 飽和度(Saturation) 飽和度是色彩的純度,他表示顏色中所含有色成分的比例。增加飽和度,色彩會變得更強烈、鮮豔生動;降低飽和度,顏色中灰色成分越大,色彩會變得暗淡乏味。當一種顏色摻入黑、白或其他色彩時,純度就產生了變化,當摻入的顏色達到很大的比例時,人的眼睛就無法感知出來了。 飽和度為0 的顏色為無彩色,就是黑、白、灰。數值越大,顏色中的灰色越少,顏色越鮮豔。飽和度高的地方給人感覺靠近,而飽和度低的地方則給人的感覺很遙遠。高飽和度和低飽和度的色彩都給人堅硬的感覺。 明度(Brightness) 明度,指色彩的明暗度,反應的是色彩的深淺變化。以自然界為例,一些物體在早晨和晚上的色彩不同。如樹木和山脈,早晨色調淺;傍晚因為光線減少了,色調變得偏暗。距光源越近的物體,明度越高,反之,則明度越暗。 明度在UI設計中扮演重要的角色,明度運用得好,可以實現好的對比效果。明度達到100%時,色彩就會變成白色(黑白模式下);明度是0%時,就會變成黑色。色彩的明度變化往往會影響到純度,例如藍色加入黑色以後明度降低了,同時純度也降低了;如果藍色加入白色則明度提高了,純度卻降低了。 1.3色彩的搭配 完整的UI配色應包含主色、輔助色和中灰色。主色通常與品牌色一致,輔助色一般選擇與主色色調一致且能拉開層次的顏色,強調色選擇與主色相對立的互補色。下面我們來學習幾種常見的配色方案。 單色 單色是指某個色彩的明度變化,即在色彩上疊加10%-90%白色或黑色得到的一組顏色。單色搭配由於彼此之間色彩相同,因此能和諧共處,但因較為樸素也就不容易引人注目,而且會給人一種單調的感覺。單色配色在色彩變化上也適合長時間閱讀,顏色波動較少,比較適合沉浸式交互的界面設計。 蝦米音樂就是單色搭配的最好例子,它將主色橙色用在主要功能入口、標籤欄圖標等所有界面的關鍵元素上,給人非常精緻和統一的視覺體驗。 如若想要在色彩變化上融入一點微妙的變化,可以嘗試在色環中選用兩側相近的顏色,這樣色彩層次豐富了而統一感也不會變,稱之為“鄰近色配色”。 鄰近色 是指在色相環中相鄰的兩種顏色,在色相環上相距60°,或者相隔五六個數位的兩色。它可以在同一個色調中建立起豐富的質感和層次,優點是陽光、活潑、穩定、和諧但不單調,理所當然稱為最安全的配色法則。鄰近色色相相近,冷暖性質相近,傳遞的情感也較為相似。例如,紅色,黃色和橙色就是一組鄰近色。鄰近色表現的情感多為溫和穩定,沒有太大的視覺衝擊。 美顏相機的主色是粉色,將淺粉色和淺紫色作為輔助色,既能信息區分又和諧統一。 互補色 互補色是指在色相環上對立(180°)的兩個顏色,色相環上夾角呈現一條直線,例如黃色和紫色、橙色和藍色、紅色和綠色等。互補色有著非常強烈的對比度,在顏色飽和度很高時,可以產生許多十分強烈的視覺效果,就會使這兩種顏色都顯得更加鮮明,也將視覺衝擊力強度提升至峰值。這類配色形式優缺點和對比色很相似。常給人一種潮流、刺激、興奮的感覺,把互補色放在一起,會給人強烈的排斥感,搭配不好會很山寨。 Airbnb的主色為紅色,界面設計中使用主色的互補色「墨綠」作為主色調,給人清晰、高效簡潔的感覺。 分裂互補色 分裂互補色是指尋找三種顏色,其中兩種互為鄰近色,另一種與它們形成互補色,例如黃色和藍色、洋紅。這種搭配既能保持互補色強烈的對比及視覺上的趣味性,又能讓顏色變得柔和。 36Kr將藍色作為主色,互補色黃色作為輔助色用在圖標、標籤上,再選擇黃色的鄰近色紅色作為另一輔助色,用在不同的信息上,有助於用戶區分產品信息。 對比色 指在色環上相距120°~180°之間的兩種顏色,也是兩種可以明顯區分的色彩,包括顏色三要素的對比、冷暖對比,彩色和消色的對比等。對比色能使色彩效果表現更明顯,形式多樣,極富表現力。需要注意的是,互補色一定是對比色,但是對比色不一定是互補色。因為對比色的範圍更大,包括的要素更多,如冷暖對比、明度對比、純度對比等。這類配色形式優點是視覺衝擊力強烈、富有跳躍性、突出、點綴能力強,比如常用作畫面中的點綴色,或與主體固有色成對比關係的背景色,用於突出主體。缺點是大面積使用比較難把控。 馬蜂窩的主色是黃色,對比色藍色作為輔色用在標籤、小圖標上,紅色作為強調色用在價格等信息上。 對比色也不單純是兩個顏色之間的對比,而是色調之間的對比!對比色還包括:補色對比、色相對比、明度對比、飽和度對比、冷暖對比,飽和度越高對比越強烈,明度反差越大對比越強烈。 四元色搭配 四元色搭配在色環上形成了一個矩形,使用不是一對而是兩對互補色。將其中的一個顏色作為主色,其餘顏色作為輔色進行搭配可以得出不錯的效果。 四元色是比較難以平衡的顏色,不過搭配好了會非常出彩。不信可以自己用用感受一下,尤其是使用其中一個顏色作為主色,其他的三個顏色作為輔助色的時候。 1.4色彩和光源關係 了解了色彩的基本知識,下面說說色彩和光源的關係。如果想描繪好對象的色彩,那麼就必須了解對象的固有色、光源色、環境色及它們之間的關係和變化。 […]

Categories
Zcool

2020當代好設計獎全新獎杯揭曉——德國著名設計師Dirk Schumann專訪

經過國際評審團專業、公平、公正的評選,2020當代好設計獎最終獲獎結果已於12月1日正式揭曉,並且今年的頒獎典禮暨在線慶功將於12月18日在線上與大家見面! 2020當代好設計獎評選出當代好設計金獎和當代好設計獎,其中金獎獎杯最受所有參賽者的關注。今年,我們特別邀請德國著名設計師Dirk Schumann先生對獎杯進行了全新設計,金獎獲得者在贏得殊榮的同時,也將獲頒代表國際頂尖設計水準的金獎獎杯。 我們特別採訪了Dirk Schumann先生,請他分享當代好設計獎金獎獎杯的創作故事,以及他眼中的設計原則和設計趨勢,以下是採訪實錄。 德克·舒曼 Dirk Schumann 德國設計師 舒曼設計公司創始人 2006年至今任紅點產品設計大獎評審 2015年至今任紅點設計概念大獎評審 Dirk Schumann先生是浴室配件、太陽能技術、醫療設備、通訊技術等方面的設計專家,曾獲得近百個專業設計獎項,包括:紅點產品設計大獎、iF設計獎、G-Mark、德國設計大獎、德國設計師俱樂部獎、歐洲生活方式獎、意大利舒適與設計獎、Good Design Award(芝加哥雅典娜)、Plus X Award 創新技術大獎、Design Plus獎、ID-NL設計獎等,也長期擔任國際多個設計獎項的評審。 Dirk Schumann設計作品 Dirk Schumann設計作品 Dirk Schumann設計作品 Dirk Schumann先生擅長針對品牌的市場目標建立系統化設計策略,創新產品概念,並通過以用戶為中心的設計思維、經濟環保的理念,實現企業的產品開發價值的最大化。 專訪時刻 Q1:這次您受邀設計當代好設計獎的獎杯, 請您先簡單介紹一下設計獎杯時的思路, 並請您談談對當代好設計的理解。 獎杯最核心的設計元素來自於基礎的八卦圖形。當代好設計獎的Logo是八卦圖形與Good首字母G的融合。八卦元素具有非常複雜、多元的文化屬性,也代表了人類對宇宙萬象思考的提煉,是大道至簡的精華。 獎杯中的八卦元素由紅色陽極氧化鋁製成,它在毛玻璃後面形成一個特定的角度,八邊形Logo最終在玻璃表面展現出清晰精準的形狀。 Logo的立體形態與透明玻璃巧妙結合,通過材料特性和構造的角度,創造了Logo從模糊到逐漸清晰凝聚的動態效果,正如創意從無到有的誕生過程,更如金獎作品在創新宇宙中脫穎而出的姿態。 一方面,這是種引人注目的視覺效果,但另一方面,這其實也像徵著藝術與設計中極其現代的趨勢。這背後的象徵意義關聯到八卦宇宙理論,毛玻璃背後的八邊形從無序的混沌中演變至愈來愈清晰的八卦圖形。這也意喻宇宙始於混沌,明於智慧,設計亦然。 Q2:您在設計中堅持的理念和原則是什麼? 首先設計應該是簡單、有識別度、有特點的,這是設計最基礎的形式;再者是設計要能為產品帶來附加值,同時融合實操性、物理上和心理上的功能,即有意義的形態;最後要能與用戶建立情感聯結的設計元素。 Q3:從設計師到設計公司創始人, 從紅點設計大獎獲獎者到紅點設計大獎評審, 哪些設計理念對您影響至深? 這一路上給我啟發的設計理念有很多,例如在中學時期,Luigi Colani結合空氣動力學和仿生學的造型概念令我著迷。我喜歡幾何學、與功能結合的純粹主義、非線性概念等等。公元前出生的羅馬建築師Marcus Vitruvius Pollio寫的The Ten Books on Architecture也對我產生了重要的影響。這些熱愛都成就了我在設計這條路上前行,之後我也希望能繼續與更多異域文化環境下的品牌進行產品設計合作。 Q4:請您向大家介紹一下, 紅點獎的評審標準以及它的特別之處吧。 紅點最佳設計獎有著非常嚴格的評審標準,目前的獲獎率是1%-2%左右。得益於評審團中國際化多樣性的組成,評審標準包含了非常多元的觀念和評估標準。投票制度結構清晰透明,從而保證了所有高質量專業評審的思見最終能得到清楚的決策。當代好設計的評審也秉持了這種高標準,每一項獲獎產品都能得到專業的評判。 Q5:您近年來也一直和中國企業有合作, 請問您認為近幾年來中國設計有著怎麼樣的變化? 近些年來,不論是設計還是製造技術的標準,中國的企業都有持續地提高,在產品的不斷迭代當中,技術應用方面也不斷創新。同時很多企業還兼顧了中國特有的文化屬性,使其具備了設計獨特性和傳統特質。 […]