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

          首頁

          讓轉化率飆升!頂尖按鈕設計的20個黃金法則

          天宇

          01. 按鈕設計強弱表現

          在整個產品設計中我們要根據信息傳遞的優先級對按鈕設計進行主次區分,設計表達要有強弱差異。按鈕設計可以通過大小、填充、描邊、色相、飽和度等的不同來進行強弱差異,不同強弱的差異表現出按鈕的等級:行動觸發、主要、次要、輔助、禁用等。

           

           

           

           

          02. 圓角設置要合理

          對于按鈕邊框來說,我們通常采用全圓角和小圓角居多,這樣顯得穩重大氣。而大圓角按鈕并非不可用,只是相對較少,會顯得按鈕不方不圓的,設計表現顯得不夠成熟。

           

          全圓角的圓角值等于按鈕高度值的一半,而小圓角的圓角值我們通??刂圃?1/4H(高度值的四分之一)以內(僅為個人參考,并非絕對值)。

           

           

           

           

          03. 投影設置要用對色彩關系

          給一個有彩色系按鈕設置投影時,選擇無彩色系(比如黑色)也能達到效果,只是為了得到更好的視覺效果,提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色,這樣得到的效果會顯得更加干凈清爽。

           

           

           

           

          04. 投影的使用勿過度泛濫

          雖然投影的運用可以使按鈕更有層次感,但是也需要根據具體情況慎用。比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度,使得按鈕配色環境顯得不夠干凈清爽。

           

           

           

           

          05. 給按鈕文字一點呼吸感

          按鈕文字和邊框的設計要預留一定的留白,不要做“舍不得”的設計,使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負空間獲取經驗,看看文字大小和負空間之間是否存在某種比例關系。找到這個比例關系運用到按鈕設計中,也許會讓你的設計顯得更加成熟穩重。

           

           

           

           

          06. 按鈕設計別讓用戶思考

          按鈕的存在是為了引導用戶進行引導式操作,而不是讓用戶對其產生困惑。按鈕設計別讓用戶思考這是啥,是否可以點擊,需要簡潔明了的對此操作進行指引。用戶已經養成對按鈕外觀和功能的行為習慣,如果你設計的按鈕樣式與“標準”差異太大,用戶就會產生疑惑,影響使用體驗。

           

           

           

           

          07. 樣式表達的一致性

          當設計元素規范統一時,用戶操作過程中的理解成本最低,一致性也因此成為最有力的可用性原則之一。我們在設計按鈕的時候要注意樣式表達的一致性,比如:按鈕形狀、色彩定義、風格特征等,這樣會使得我們的設計可用性更強。

           

           

           

           

          08. 箭頭運用不是字符輸入

          一些初入職場的設計師會偷懶直接字符輸入形成按鈕內部所需箭頭,這樣的表達方式自然顯得粗糙些。箭頭要當成圖標來進行設計,控制好箭頭的粗細和文字筆畫的粗細值接近,這樣顯得更有細節和態度。

           

           

           

           

          09. 按鈕設計主次分明

          通過信息對比才能形成主次之分,按鈕設計需要在風格上進行區分,達到層次結構的視覺提示。主要的按鈕需要和次要的、輔助的形成差異,最大化突出主按鈕的視覺效果,更好的引導用戶根據設定的軌跡進行操作。

           

           

           

           

          10. 按鈕設計不要讓用戶誤解

          在整個項目設計規范中,我們需要避免讓用戶把非按鈕狀態的內容進行誤判。在確定好按鈕樣式特征之后,不要在其它場景運用其樣式特征或者類似的風格特征,這樣會讓用戶產生錯誤的認知,因而進行無用的操作。

           

           

           

           

          11. 按鈕文本表達要言簡意賅

          在進行按鈕文本思考的時候,盡量減少字符和單詞的數量,內容表達言簡意賅,只要能夠準確傳達信息識別度即可。有時候也不一定需要文本,圖標可以傳遞的信息可以考慮文本的減少,也許可以讓界面的呼吸感更強。

           

           

           

           

          12. 按鈕文本設置切勿換行

          單行文字的可讀性更高,如果出現換行就會降低可讀性。我們在設計按鈕的時候,確保文本內容在一行之內顯示,如果設計空間不足要考慮文本內容的精簡。

           

           

           

           

          13. 特殊場景要靈活轉變

          底部按鈕的運用并非固定不變,不同機型或者特殊場景的考慮需要靈活轉變。比如 iPhone X 等類型的機型,由于底部需要預留主頁控制器的位置,所以在設計按鈕的時候需要考慮上中下的過渡銜接,這樣才能帶給用戶更好的感官體驗。

           

           

           

           

          14. 按鈕大小要便于點擊

          按鈕需要方便用戶進行點擊操作,如果用戶點擊失敗或者誤點到周邊元素,就會帶給用戶不友好的體驗。若是帶有文本的按鈕,只要文字大小不要小于極限值,通常實現出來的按鈕交互熱區都會滿足點擊需求。

           

          如果是純 icon 的按鈕,除了按鈕大小需要控制合適以外,也要確保交互熱區能夠滿足點擊區域要求。

           

           

           

           

          15. 同屬板塊按鈕大小一致

          在同屬板塊內的按鈕設計,我們可以通過按鈕的強弱來體現層級關系,不要讓按鈕大小不一,這樣視覺平衡會受到影響。

           

           

           

           

          16. 按鈕設計考慮文本最大值

          稍微注意細節的設計師也不會讓文本的長度超過按鈕寬度,這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的,幾個字即可表達的意思卻使用了過多修飾詞。在進行按鈕文本思考的時候,要根據最佳的視覺效果設定一個最大值,不要任其無限制發揮,這樣會使得最終的視覺效果大打折扣,甚至影響用戶感官體驗。

           

           

           

           

          17. 保持按鈕可讀性

          按鈕設計需要考慮在不同環境下的適應度,確保用戶可以一目了然的發現它?,F在很多產品都適配了深色主題模式,按鈕的配色不能只考慮白色或者淺色背景下的運用,需要考慮大多數背景下的適配。在進行色彩選擇的時候,始終保持按鈕與背景的高對比度和可讀性。

           

           

           

           

          18. 按鈕去文本是否合理

          關于按鈕文本的設置需要結合信息傳遞的識別性和準確性,雖然純圖標顯得設計簡潔大方,但是需要考慮圖形是否可以準確的表達其含義,不會讓用戶出現誤解或者錯誤的認知。所以,按鈕去文本需要根據文案代表的含義來判斷,如果不需要輔助解釋也能判斷出按鈕的意思,那么更為簡潔的設計表達效果更佳。

           

           

           

           

          19. 正確判斷按鈕顏色選擇

          色彩在設計中是最直觀的體現,不同的顏色會傳遞不同的性格,帶給用戶認知差異。而按鈕的顏色選擇也并非隨性發揮,需要結合品牌色和輔助色作出判斷。

           

          通常比較統一的標準是采用品牌色作為大部分按鈕的顏色,遇到一些需要差異化的按鈕會選擇輔助色來表達,紅色或者橙色多為行動刺激作用,不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用、失效等屬性,需要酌情選擇。

           

           

           

           

          20. 按鈕位置結合用戶體驗

          引導用戶作出選擇的按鈕應該放在左邊還是右邊,根據操作系統的不同也引起了設計師們的爭議。比如 Windows 系統習慣將確認按鈕放在左邊,而蘋果系統卻選擇了放在右邊,用戶運用系統的習慣會影響其行為的適應度。不過要是在移動端個人傾向于將引導用戶作出選擇的按鈕放在右邊,更有利于用戶點擊(特殊人群這里需要除外)。

           

          有時候為了防止用戶誤操作,我們會將確認操作的按鈕放在左邊,通過助力設計讓用戶再次確認。所以,一方面我們要結合操作系統的習慣,另一方面也要結合用戶習慣,將按鈕放在最合適的位置,便于用戶操作。

           

           

           

           

          小結

          作為設計師來說,對每一個細小的元素進行深入思考和總結,才能讓我們設計出更好的解決方案。一枚小小的按鈕設計,其背后也有很多需要探索的東西,本文為大家總結了 20 條經驗,相信還有更多值得梳理的細節,期待更多設計伙伴去挖掘。

           



          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          寫給產品總監:UI設計:軟件產品的“顏值”與“內涵”,如何提高軟件產品中的UI設計水準?

          藍藍設計的小編

          作為產品總監,你一定明白,軟件產品成功的關鍵在于用戶體驗,而UI設計正是塑造用戶體驗的核心。簡單來說,UI設計就是用戶界面的設計,它決定了用戶如何與你的產品互動,就像產品的“顏值”和“內涵”,直接影響用戶的第一印象和使用感受。UI設計不僅僅是讓界面好看,更重要的是好用。 它需要平衡視覺美感與功能實用性,讓用戶在使用過程中感到舒適、高效、愉悅。

          如何提高軟件產品中的UI設計水準? 以下是一些建議:

          設計師需要掌握的思維模型

          天宇

          關于設計思維你了解多少?

          設計思維模型對于互聯人來說非常重要,經常我們在評價一個候選人時候會說,這個同學系統思考差了點,或者說用戶和商業思維不夠。那么到底什么是系統思考,設計師該如何學會系統思考,系統思考到底能幫助我們在做設計時候有什么幫助,今天希望我的這個分享能讓你了解什么是系統思考,以及它的思考模型是什么。

           

          設計思維模型的重要性

          設計做久了你會發現離不開流程和思維,之前支付寶一位大佬總結下來叫“左手藝術,右手科學”,藝術大家都明白,設計師是感性動物,對于美的追求是大家都是擅長的也非常有發言權,那么科學指的是我們需要通過科學的方法流程,系統的思考問題方式,讓設計不止好看,同時也應該符合用戶,商業訴求,滿足好這3者的平衡點。

           

          所以設計師,除了關注「左手」藝術的部分,同時也需要關注「右手」科學的部分。

           

          設計思維模型有哪幾種

          設計思維模型不止是一個單一的思維模型,它包含三種思維模型,設計思維,用戶思維,產品思維。今天這篇文章,我們先來了解第一個思維,設計思維到底是什么,我們該如何提升設計師的設計思維。

           

          設計思維包含哪些

          第一個設計思維也是最基礎的,就是作為設計師,我們必須了解各大平臺的設計規范,這是做任何設計的基礎,如果你了解你負責的這個平臺規則,那么你的設計就無法邁出第一步,所以對于剛做設計不久的同學,基礎思維規范需要去死記硬背背下來,沒有這個基礎后面都是無用功。

           

          1.知道基礎設計規范

          常用的設計規范,比如蘋果的設計規范,里面詳細講述了,常用的蘋果導航欄高度是多少,蘋果的表格視圖高度多大,頁面中常用的設計字體字號多少,如何去適配不同分辨率,這些基礎的設計原則,都統稱為設計思維。

           

          谷歌的material規范,也是設計師必須了解的規范,特別是需要了解它在系統層面和iOS的差異化。

           

          2.知道常用設計原則

          設計思維很重要一點,就是要了解基礎的審美,以及用戶心理學,其中排版運用比較多的格式塔原理,是做設計排版的基礎。

           

          相似性原則:我們會潛意識把更緊密的事物歸屬一組。

           

          相似性原則運用:淘寶網導航菜單就是運用這種原則,根據產品類別一致,進行同類分類,這個就是運用的格式塔緊密設計原則。

           

          封閉性原則:視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

           

          封閉性原則運用:我們會自動將這些不完整的圖形在腦海中封閉起來,形成一個整體圖形。如圖中海報,雖然文字被遮擋了一部分,或者被一些圖形分割了,但是我們腦海中還是會自動腦補出設計畫面。

           

          連續性原則:我們的視覺感知系統傾向于連續性,視覺系統傾向于感知連續的形式而不是離散的碎片。

           

          連續性原則運用:Pinterest和ins雖然卡片被下面截斷了,但是我們還是會認為它和下面內容是一組的。

           

          焦點原則:一個一面只有一個核心,一個眼睛,引導用戶去關注你想表達的重點。

           

          焦點原則運用:少即是多,蘋果的很多產品就是運用一個焦點,做到畫龍點睛的作業。

           

          地面原則:我們的大腦將視覺區域分為主體和背景,主體包括一個場景中占據注意力的元素,其余都為背景。

           

          地面原則運用:如上圖案例中,我們視覺會自動將紅色,綠色,藍色當做背景,頁面的幾何圖形會當為主體,用戶的注意力也在上面,在平時做設計時候需要去營造這種空間和層次感。

           

          格式塔是設計很重要基礎之一,來源于20世紀的德國,也是作為設計師必須掌握的設計原則,也是你做設計的第一個需要掌握的設計基礎。

           

          3.知道設計是用來用的,而不是藝術

          很多同學剛做設計,很容易在頁面中為了體現自己掌握的某種技法,而做過了,或者設計的頁面太偏向于個人喜好。這是不對的,我們的設計最終一定要是用戶使用的,否則再漂亮華麗的設計都會是曇花一現。

           

          Path的設計在剛出來時候,簡直是業內交互和視覺標桿性產品,創新的交互細節,精致的頁面表現。都很完美,但是最終也逃不過曇花不現,很大部分原因是產品定位不準,商業思考不夠,沒有很好解決好用戶訴求,最終導致失敗。所以在一個成熟的設計中,設計好用比好看更重要,我們要做的就是在這個過程中不斷尋找合適的平衡點。

           

          當年Facebook 出品的paper這款產品,也是業內關注度極高,把手勢運用到了極致。但最后也逃不過這種命運,幾乎移動市場上,沒有一個產品是因為好看而活下來的,幾乎最后的那些被人們每天使用的產品,都不是因為好看,而是因為好用,滿足人們痛點需求。

           

          所以,剛工作的設計師,在設計思維這個層面,一定要明確我們的每一個頁面,一定是滿足用戶完成任務為第一優先級,其次考慮產品整體和品牌,公司大的設計方向掛鉤。

           

          4.知道設計不止是效果圖,對落地負責

          工作幾年后,作為一個漂亮的設計效果圖都不難,很多時候參考下競品,在競品基礎上去找一些差異化創新,甚至做出一個超越競品的設計效果圖,加上真實動效,好看的圖片,精心排版的文案。這些很多設計師都可以做到。但是很多設計師忽略了真正上線后的效果。

           


          上面那個情況,我想大家都經歷過,我們效果圖做的很好,干凈的商品圖,標簽也很規范。但是實際上線后就是右邊效果,各種圖上放牛皮癬,以及各種標簽。

           

          從業務層面來說,沒有錯,因為放牛皮癬可能銷量更好。但是設計時候,我們是不是可以再往前一步,幫用戶思考如果圖片上房廣告該在展示,如果文案很多時候,標簽很復雜的展示規則。

           

          優秀設計師不僅僅能做出漂亮設計圖,同時他們也能對內容進行負責,定義好詳細是內容規范。

           

          之前淘寶的同事,定完一個電商的KV風格后,還會出一個詳細的風格指南,里面會去定義配色,文案話術,字數,以及頁面圖片的展示規范,這些的目的都是對內容進行控制。

           

          5.知道主流設計趨勢和手法

          目前很多設計師以為做UI就只有扁平化,以為大公司設計流程都是痛點分析、人群畫像、旅程地圖、用戶調研、方案呈現。各種一堆推導,然后最終的方案簡簡單單收尾,同時還暴露一個很大問題,風格單一。其實UI真的不止是只有扁平化。

           

          手法一:手繪簡筆風格

          如果你是設計日記的忠實讀者,你一定看過我之前寫過一些大廠的設計手法。手繪簡筆就是其中一個風格之一,整體風格都是手繪線條配以低飽和度顏色,有很多趣味性和故事融合在里面。

           

          Facebook改版之前的風格就是運用的這套風格,整個頁面也更加年輕和時尚。

           

          手法二:分形藝術風格

           

          利用簡單的幾何圖形,不斷重復,形成一種新的形式,在一些背景上,一些圖形和海報上經常被大量運用,只不過很多設計師并沒有關注到這些風格。

           

          Uber之前的規范中,對于全球的各個國家的設計,都是定義了一個國家的基礎圖形,然后圍繞基礎圖形做出了一系列擴展,這其實就運用到了這個分形重復設計手法。

           

          包括我們熟知是蘋果相冊圖標,chrome瀏覽器和谷歌相冊圖標,都是運用這種手法,一個基礎圖形有規律的變化。

           

          手法三:柔光風格

           

           

          很多設計師做東西風格比較單一局限,UI發展到今天其實有很多新的風格出現,柔光風格就是其中之一,整體風格呈現出光的折射特征,顏色層次豐富,有明顯的光的流動感和方向性。在設計上常用漸變,光斑,流動透明疊加手法,是目前大公司比較主流的一種風格。

          整個畫面有色彩流動感,背景一般是多色融合,有層次,有流動液體變化。

           

          像這個案例就是色彩上跨度比較大的一個漸變,同時運用白色透明疊加方式處理,細節簡單細膩。

           

          支付寶之前芝麻信用的風格我很喜歡,其中就是運用的這套設計手法,背景運用這種虛實,光斑作為層次。

           

          在很多可視化場景中也會運用,比如左圖就是運用波浪透明疊加線條作為頁面核心焦點,右邊頁面背景底部運用有層次的漸變和光暈。

           

          手法四 :紋理風格

          這個風格很多人都有印象,特別是韓國設計中大量運用了這種設計,國內電商中也會運用比較多,這種風格就是紋理風格。

           

           

          淘寶的88會員,我們能看見會員頁面輔助元素這些紋理效果作為背景出現在這些頁面中,能很好將視覺層次豐富起來。

           

          雙11的宣傳海報,也是運用這種幾何紋理作為視覺層次的裝飾。

           

          考拉當年的改版設計,很核心的元素就是這個圓形,以及他的底紋運用效果。

           

          這種底紋效果,很多時候也可以傳遞出品牌的氣質,品牌的調性,左側音樂播放默認圖片,特別有品質感,右側電商主頁面的背景,清晰感覺,后面線條恰到好處。

           

          當然,設計趨勢并不止我今天說的這些,其實有很多,作為設計師,設計思維中很重要的點,就是關注趨勢,并將他運用到你設計中去,這是必不可少的一項技能。

           

          6.了解設計只是整體體驗的一部分

          從這張經典的圖中我們可以看出,設計只是一個產品其中很小的一部分,很多設計師以為我們看見的就是一切,其實不是,就像冰山一樣,表現層是最上面的一部分,冰山下面其實有很多的內容。

           

          我們來看個案例,比如支付寶:

           

          表現層:

          視覺設計師比較容易關注的,圓潤的圖標,卡片的設計,扁平的風格,2.5D的插畫風格,小螞蟻的微動效,支付寶品牌藍色,以及一些卡片的動畫效果。

           

          框架層/結構層:

          頂部的4個金剛設計,也是用戶最常用的4個功能,下面14個宮格導航,代表不同的服務入口,小螞蟻卡片是通知入口,下面營銷廣告資源位,下面是千人千面或者推薦的服務卡片等等。理財頁面也是如此,頭部用戶數錢,下面業務入口下面不同理財服務。

           

          范圍層:

          根據用戶的訴求,中間的宮格導航是動態變化的,用戶也可以去根據內容需要去定義,小螞蟻通知入口也是如此,一個小喇叭的功能,把所有支付寶的通知都收在這個地方,底部卡片根據用戶習慣去展示,比如你經常點外賣那么推送你美食卡片,你比較關注疫情推薦你疫情卡片等等。

           

          戰略層:

          顧名思義,那就是公司整體戰略,從支付寶品牌升級更加年輕化,強化生活服務心智,首頁新增外賣到家、果蔬商超醫藥等便民生活版塊,并基于智能算法為用戶推薦喜歡的服務,讓每個用戶擁有更貼心專屬的支付寶。

           

          所以其實所有產品都是圍繞這樣邏輯去設計,我們設計師要明白設計那種趨勢手法,只是一部分。我們要不斷的去了解最頂層,才能理解產品設計背后的規則邏輯。

           

          最后

          今天分享的是設計師需要掌握的思維模型,其中關于設計思維的,我們再來回顧下,設計思維包括哪些:

           

          1.了解基礎的設計規范;

          2.知道常用設計原則;

          3.知道設計是用來用的,而不是藝術;

          4.知道設計不止是效果圖,對落地負責;

          5.知道主流設計趨勢和手法;

           

           

           

          作者:我們的設計日記
          鏈接:https://www.zcool.com.cn/article/ZMTE5NDc1Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          如何以點、線、面為界面設計尋求規則

          天宇

          點線面在用戶界面中的應用貌似很少有人寫,我挑業余時間進行了大量案例的翻閱分析,發現其中確有規則。

           

          首篇萬字長文獻給你。

           

           

           

          前言

           

          用戶界面的本質是資源的互換。

           

          用戶為產品提供時間和注意力,產品為用戶提供單位時間內最大價值的內容。

           

          當視覺設計師介入其中后,他們的關系可以用這樣一幅圖表示。

           

           

           

          表現層作為用戶體驗五要素的最具象層面,解決的是產品視覺效果的呈現問題。視覺設計師需要借以合理的版式和視覺手段來保障用戶在單位時間內獲取最多的內容資源,即實現信息的高效獲取。

           

          信息的高效獲取來自合理的視覺引導(信息閱讀的優先級安排)。我們一直在說的層次清晰、低信噪比、沉浸感等視覺體驗在本質上其實都屬于合理的視覺引導。

          借以實現的手段包括我們熟知的卡片、留白、配色、字體層級、圖標等等。這些手段龐雜繁多,體系化的建設必不可少,但是漫長的積累沉淀中很容易被其淹沒,而且每種手段背后又是什么樣的底層邏輯和依據?

           

          為什么卡片讓頁面層次清晰?為什么面性圖標擁有較高的辨識度?為什么步驟條會有橫縱之分?...

           

          而點、線、面解決的就是這些內在邏輯問題,在你熟知它們的特性后,絕大多數的設計手段都可以被其解釋和串聯起來,并且讓你的設計決策和設計推導更加有據可依,而不是簡單的“憑感覺”。

           

          如果我們將各種設計手段比喻為各類武學外功招式,那么點線面理論就好像吐納內功,雖為最基礎的入門心法,但其對內息的作用影響著所有招式的發揮。

           

           

           

          點、線、面與康定斯基

           

           

           

           

          點、線、面理論最早由瓦西里·康定斯基提出,他所著的《點、線、面》一書最早曾作為包豪斯學院的形式課程進行教學。他將所有藝術的形式都歸結于點、線和面三種元素的關系。

           

           

           

          康定斯基對于點、線、面的獨到思想為設計領域產生了極為深遠的影響。我們目前最熟知運用到它的的一個領域就是平面設計領域。通過這個理論,平面中所有的元素都可以看作點、線、面三類形態,并且每類形態的存在、變化和結合,都可以為畫面傳達出不同的樣式和風格。

           

          雖然用戶界面設計和平面設計分屬于兩個完全不同的設計行業,但點、線、面理論是相通的。

           

           

           

          點、線、面淺談

           

          點、線、面具有普適性、相對性。前文已經講過,點、線、面這三種形態存在于所有的元素中。不論是哪種元素都可以用點、線、面來表示。并且,點、線、面之間是相對的,并非對元素的純粹定義。

           

          比如一個界面中的面性圖標,我們可以將其看作一個點,當相對于線性圖標時,我們又可以將其看作面。如果這個圖標和其他圖標一起組成標簽欄,那這串圖標也可看作線。

           

           

           

          下面,我將分為點、線和面三大板塊,來講述每類形態基于自身維度所擁有的特性,并如何通過存在、變化來在界面中發揮著各自的作用,實現合理高效的視覺引導。

           

           

          正文開始。

           

           

           

           

           

           

           

          萬物自一點始。

           

          正如宇宙大爆炸源自一個引力奇點那樣,點是萬物之源,也是所有元素的基礎。點從維度上來說屬于零維,它沒有辦法像線、面那樣延伸,這決定了點本身的向心性和自由性。

           

           

           

          康定斯基將點描述為“雄辯與沉默”,這句話的意思就是,當點獨立存在于一個畫面中時,它便開始“雄辯”自己的存在,讓自己成為焦點;而當它的數量增加時,點便傾向于“沉默”,并且根據它的排列方式傾向于對應形態的特性。

           

           

           

          向心性

           

          當一個點獨立存在時,點的向心性協助它成為視覺焦點。此時點主要起到定位的作用。

           

          以支付寶首頁為例。在以往的界面設計中,我們往往在每個模塊標題旁添加一個小小的短線,而這個小短線便是作為定位點引導用戶迅速注意到標題,實現不同內容的快速定位。并且作品包裝中也常會用到它。

           

           

           

          不過在Complexion Reduction去形式化的浪潮洗禮下,這種方式已成為過去式,現在我們會直接用標題本身作為點進行定位。

           

           

           

          但是,在其他更多的場景下,僅靠文字其實并不能很好得發揮點的向心性,尤其是一些信息較多、需要迅速辨識的場景下。這時候,我們通常會引入另一種要素——圖標來指代它。

           

          圖標本身可以用來表意,而獨立、精致的特性讓它很適合作為點元素來處理。

           

          比如app中的標簽欄中的圖標就可看作點元素,每個圖標以其所具備的向心性幫助我們迅速得聚焦到它所在的位置。列表頁的每個字段前也會加入對應含義的圖標來幫助用戶迅速錨定當前欄目,并且由于圖標擁有更高的辨識性,這讓閱讀變得輕快而富有節奏。

           

           

           

           

          下圖所示為Google日歷中的活動頁表單,當我們將字段前的圖標去除時,閱讀沒有了強定位元素將會缺失節奏,信息獲取變得困難和緩慢,影響用戶表單的填寫。

           

           

           

           

           

          聚集性

           

          點是自由、精致的,它不會像線那樣有向兩端延伸的特性,這意味著它可以進行各種形式、規則的排列組合以契合版面。

           

          點化線

          在這種分布形式下,點通常以圖標的形式進行橫向及縱向的排列,并且傾向于線的引導性進行視線引導。

           

          點的橫向排列通常見于標簽導航欄、單行的金剛區入口等。點的縱向排列通常見于列表布局中。由于點本身對用戶注意力的聚焦,點沿著什么方向進行排列時,用戶視線便傾向于朝對應的方向移動。

           

           

           

          上面所舉的Google日歷就是這樣,單個圖標方便定位,而多個線性排布的圖標則具備了線的引導性,便于用戶的由上至下得快速瀏覽。ios自帶的音樂app和QQ音樂的歌單也同樣利用了點化線引導瀏覽,只是圖片和阿拉伯數字的區別而已。

           

           

           

           

          點化面

          在這種分布形式下,點常常橫向排列在界面中(一排內通常不超過5個),作為一個個快捷入口存在,形成網格式布局。

           

           

           

          比如金剛區業務入口、書籍等類型的布局都屬于網格式。這個布局下的點集合傾向于面元素,界面在這個布局下呈現出富有觀賞性的視覺張力,吸引用戶眼球,而且網格式的布局引導用戶視線均勻遷移,便于視覺區分。

           

           

           

           

           

          網格與列表

           

          既然講到這了,不得不提下上面兩種形態各自所在的版式——網格布局和列表布局。

           

           

           

          通常來說,靜態頁面中的內容大致可分為圖、文兩大類。

           

          形態上看,文本本身具有線那樣不斷延伸的特點,因此列表的橫向版面更適合長文本的展示。而圖片、圖標通常以固定尺寸的img獨立存在,可看作點元素,像上一節所講的,它既可存在于列表又可存在于網格。

           

          視覺動線上看,列表布局的動線屬于尼爾森等老前輩所提出的F型瀏覽模式。即用戶首先落點于左側的定位點,再由左向右進行閱讀,接著再垂直掃視,當定位到興趣點后繼續由左至右得閱讀。這種動線符合人類自然的閱讀模式。

           

           

           

          并且在由上至下的視線遷移中,用戶的注意力勢必隨著路徑的拉長而逐步遞減。

           

           

           

          而這種遞減效應讓列表式布局更適合基于產品及用戶習慣以某種規律排序。

           

          郵件訊息以時間進行排序,這是基于用戶查看最新消息的習慣;電商商品則默認以相關性、銷量等因素綜合排序(同時買家可以根據價格、銷量等進行自定義排序),這是基于用戶的購物喜好習慣;直播平臺以熱度進行排序,這是基于羊群效應制造引流點,同時也刺激用戶發布優質內容。并且在特定的排序規律下可以引導用戶帶有目的的、更迅速得掃視。

           

          但是如果界面變為網格布局,掃視效率將大打折扣,較高的圖版率也導致文字信息被過度弱化。

           

          如下圖,健身環大冒險并不屬于外觀型產品,用戶更關心的是價格、好評等文字信息,當其變為網格視圖時,一方面用戶無法根據排序結果迅速垂直掃視,另一方面文字信息被重量級的圖片壓制,用戶無法迅速獲取它們。

           

           

           

           

           

           

          網格布局通過犧牲寬度來將界面等分為一個個格子,從形態上直接限制了長文本的存在,這讓它更適合放置一個個獨立的點,比如圖片、圖標。而文本則落于底部淪為一介輔助。

           

          從視覺動線上看,網格布局傾向于Z型瀏覽模式。用戶視覺動線通常由左至右、再由上至下得進行,并可以“雨露均沾”得在數個點上均勻遷移,注意力遞減效應不會像列表布局那么強烈。因此,網格布局非常適合進行不同信息的辨識和區分。

           

           

           

          界面中常見的功能業務入口、專輯或者電影的布局、單獨店鋪中的商品,它們不需要明顯的排序處理,并且用戶初始行為都是通過圖片、圖標進行迅速得辨別區分,繼而進行交互決策。如果將其列表化處理,不同信息的辨識區分效率將受到影響。

           

          如下圖,服裝屬于典型的外觀型商品,當變為列表視圖時,商品之間將難以辨識區分。

           

           

           

          由此,我們大致可以梳理出兩種布局適用情況:

           

           

          列表:適用于文本為主要展示,或者按照某種規律排序的信息。

          網格:適用于圖片為主要展示,或者沒有排序規則,需要用戶通過圖片、圖標辨識區分的信息。

           

          當然了,這兩種布局并非只能選其一,淘寶、京東這類體量龐大的電商平臺便為了方便用戶習慣,提供了兩種布局視圖便于用戶隨時切換以降低決策成本。

           

           

           

          另外,它常被作為一類豐富畫面層次的手段。當點不再按照橫縱方向排列分布時,便可作為圖案被用在特定場景的背景中,以降低背景過平過空的感覺。

           

          比如美食杰封面的加載占位圖就以與產品相關的各種食材圖標隨機得組合為圖案,飽滿的畫面減少了用戶等待時的枯燥無味。而QQ的群發布功能,在首個卡片背景中便加入了各種學習類的圖標隨機分布在卡片上,烘托出熱鬧趣味的氛圍,和下面的三個次要功能從卡片背景上迅速拉開層級。

           

           

           

           

           

           

           

          線條是一種簡單、輕盈的存在,可以看作是點受外驅力作用下的運動軌跡。它從維度上來說屬于一維,不同的外驅力結合使得線可以沿著任意方向自由得延伸,從而讓它擁有了高效的引導性、分割性和造型性。

           

           

           

          康定斯基在書中以溫度去定義線的情感,他將水平線定義為無限冷能的表現形式,將垂直線定義為無限暖能的表現形式??此苹逎y懂,但聯系到現實生活就相對容易理解一點。

           

          現實生活中的水平線通常存在于地平線中,因此給人的感覺是穩定、平和,類似非啟動時的“”態;而垂直線常見于那些從基線建造、生長的事物,比如高樓大廈、參天巨木,它們都通過能量來實現垂直方向的高低變化,因此給人的感覺是上升、下落、變化等感覺,類似啟動后的“”態。

           

           

           

          而線具備的冷暖態決定了水平和垂直線發揮各自作用時所傳達的感受。

           

           

           

          引導性

          線可沿任意方向延伸的特點讓它具備了很強的引導性。界面中最常見的就是跑步、地圖類app中的路線顯示,就是通過線的引導性來顯示起點到終點所行進的軌跡。

           

           

           

          如果我們將起點和終點對齊歸于一條線上時,便可以通過降維的方式將其縮減至單個維度。

           

          時間維度可以引申到界面中的時間軸、步驟條、加載條和音視頻中的進度條等,這類維度通常需要加入點元素,通過點的向心性輔助定位。空間維度則引申到滑動頁面時出現的滾動條等。

           

           

           

          如上文對溫度的解釋,“暖”態的垂直線象征變化。當我們希望用戶能夠感知到時間的變化,或者流程需要花費較長時間時,垂直線相對來說是個更好的選擇。

           

          比如外賣、快遞的訂單進度,火車的??空军c時間,timeline,到賬時間等信息,要么需要傳達變化感,要么費時較長,因此適合以象征變化的垂直線來進行引導,給予用戶變化感、產生需要等待的心理預期。

           

           

           

          “冷”態的水平線象征靜止。當我們希望用戶能夠沉浸在這個流程中,感知不到時間的變化,或者流程時間極短時,那就更適合用水平線。

           

          比如airbnb申請成為房東時,會有個需要用戶即時填寫的分頁表單,為了讓用戶沉浸在填寫中,同樣以水平線作為它的進度反饋,降低時間變化感。

           

          比如美團買藥后的審方頁,藥師的審方進度是即時性的,通常只需等待十幾秒即可。水平的靜止感能夠讓用戶產生“當前正在發生”的感覺,避免讓用戶產生需要等待較長時間的心理預期而離開當前頁面。

           

           

           

          但是,如果我們將美團審方的進度條改為縱向(去除文案提示),給用戶帶來的感覺也就大不相同。

           

           

           

          下文講到的分割性也可以以冷暖態來解釋。我們希望用戶能夠專心閱讀信息,因此會盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到,也會盡量降低它的明度和長度。

           

          另外,界面中往往也存在著一條無形的線,它同樣也是起著重要的引導作用,只是這類線不僅僅作用于某個特定模塊,它還可以作用于整個界面。這條線通常被稱作 視覺動線。視覺動線在網格與列表那一節中簡單提了下,只是這部分體系太過龐大,后面有時間我會單獨寫一篇。

           

           

           

          分割性

           

          很多時候,界面中僅僅以留白進行分隔時,很容易造成信息無法被明確得劃分。這時我們往往需要引入額外的形式進行輔助。比如分割線。

           

          分割線通常運用在模塊內部信息的分割,雖簡單粗暴,但并不能應付更高層級的模塊分割。而模塊之間的分割通常以面性(分割條)來進行。留白、分割線和分割條三者的分割層級由低到高,通常需要在頁面中結合使用。

           

          需要注意的是,線面的分割形式需要盡可能得輕量化,一旦擁有了視覺重量很容易成為噪音,我們需要盡量避免信噪比過低對用戶閱讀體驗的破壞。

           

           

           

          為了增加頁面的呼吸感,我們很多時候會用留白這種最為輕量的分割方式代替所有的線、面。

           

          這類大留白的特點往往與Complexion Reduction風格相結合,視覺上不僅制造一種舒適的簡約感和呼吸感,也減少了頁面中線面分割形成的視覺噪音。

           

          Complexion Reduction最早源自Airbnb、Instagram、Medium等產品的頁面改版,而后被UX設計師Michael Horton所總結出的設計趨勢。蘋果在17年所發布的ios11同屬于這個風格,這類風格最突出的三個特征就是大標題、面性圖標和克制用色。

           

          但是,這種去形式化的分割方法并非適用于全部頁面,一般只有在頁面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁面才適合使用。

           

          比如ikea和airbnb的首頁,它們并不像京東、支付寶有龐大的體量和業務需求,所以很適合全留白的方式。這讓它們的首頁看上去非常干凈清爽,富有呼吸感。

           

           

           

          不過,在其他字段信息繁多的界面中,分割線依然是一種高效的分割方式。

           

          我們可以看到,IKEA和airbnb的詳情頁依舊選擇了分割線的分割方式以應對繁多的字段信息,避免全留白帶來的層級混亂。

           

           

           

           

           

          造型性

          線本身可以沿任意方向自由延伸,形成一條曲線、折線、螺旋線等等。而當線的首尾相連時,便可以勾畫出面。

           

           

           

          但是,線的閉合性所形成的面僅僅是一具沒有量感的空殼。但同時線條本身輕盈的特性讓其更加輕量、通透,因此對于一些辨識要求較低、或者需要被弱化的元素來說往往是個不錯的選擇。

           

          界面中最常見的運用就是幽靈按鈕和線性圖標。

           

          相比于面性按鈕和圖標,量感的缺失讓其無法在辨識性上勝出,但是在其它地方也各有所長。

           

          幽靈按鈕常用于一些次按鈕、未選中態以及tag,線性圖標常被用于一些次要功能、未選中態以及裝飾。

           

           

           

          當然,線面也可以根據產品自身需求作類別區分。

           

          比如支付寶和美團這些產品,工具型圖標全部線性,而業務型圖標全部面性。并且線性圖標得益于背景主色色塊的反白加成讓它們并不會被過度弱化。

           

           

           

           

           

          虛線

           

          虛線是點化線的最簡易的表現。

           

          但是因為虛線本身斷開的地方太多了,并不適合用于常規信息的分割,它通常適用于一些特定的場景。

           

          比如一些產品中的票券、賬單這類特殊場景中,通常會加入虛線進行信息的分割,就是為了映射模擬現實世界中便于撕開的撕票線來增加代入感,減少認知負荷。

           

           

           

          虛線另一個特性是不可見性。

           

          這個特性最早可追溯至建筑、機械等行業的制圖規范中——以同等點元素所構成的虛線代表對象視覺盲區中的棱邊線及輪廓線。

           

           

           

          一些漫畫或動畫作品中當一個東西突然不翼而飛時,往往會留下一個虛線的輪廓。

           

          這種有意思的設定也被設計師引用到了用戶界面中。

           

          比如當我們想讓用戶去上傳一個圖片時,往往會采取一個虛線的矩形結合按鈕進行引導,便是為了告訴用戶:嗨這塊地還是空的,快來加點料!

           

          比如Pinterest、dribbble以及AntD的圖片類upload組件,都采用了這種設定。

           

           

           

          另外,這種形式也適用于空狀態的表示,比如dropbox。

           

           

           

           

           

           

           

           

           

          面可以看作是線的運動軌跡,可以由一個閉合的線生成,也可以由點、線強化自身而來。

           

          點線面的臨界問題

           

           

          康定斯基在書中曾講到,線的強化加粗,與點不斷增大面臨同樣的問題,即與面之間的臨界。

           

          這句話的意思就是,當點、線通過強化自身的面積、寬度后,和面的界限開始模糊,從而具備了面本身的性質。

           

          比如ios11中讓人印象深刻的大標題,便是由通過增加每個點的面積(增加每個字的字號),以及筆畫的線寬(增加每個字的字重)來趨向于面,以營造出飽滿、沖擊的視覺張力。

           

           

           

           

           

           

           

          辨識性

           

          二維的屬性讓它可以向四周無限得擴張自己的領土,這個優勢讓面可以輕松承載各類信息,并且也讓它具備了絕佳的視覺張力。

           

          在一個點線面同時存在的畫面中,人眼優先注意到的必定是擁有絕對視覺張力的面元素。這意味著面擁有著遠勝于前兩者的辨識性,或者說,在一部各類元素參演的戲劇里,面更擅長主角。

           

          比如在一個放置了文字的界面中,我們希望其中一段比較重要的文字完全和其他文字區分開,也就意味著這段文字需要進行對比。

           

           

           

          我們可以對這段文字加粗、加入顏色等等,這的確能做出一些明顯的變化。但是僅僅是對字體本身的強化,一旦界面需要劃分層級,就會顯得很“平”,造成信息關系的曖昧。

           

           

           

          不過,當加入一層淡淡的色塊充當文字背景后,便可以制造出極為明朗的層次關系。一方面,這段文字神奇得與其他信息迅速孤立開來,另外,有面作為“靠山”讓它變得稍微與眾不同,并且相比其他文字能被更快得注意到。

           

           

           

          當然,如果你覺得它很重要,那你可以增強文字與背景的顏色對比,給面加入各種各樣的顏色。

           

          而當顏色對信息可讀性造成影響時,為保證信息的順利辨識,我們不得不對文字進行反色處理,以此作為視覺落點來強制用戶迅速注意到它。這就是我們熟知的反白視覺手段。

           

           

           

          面的這種強力屬性被用到了界面的方方面面,比如按鈕和圖標。

           

           

           

           

          相比前面所講的線性圖標,面的辨識性讓面性圖標可以更快得被識別。因此,界面中一些重要的業務入口通常都以醒目的面性圖標存在,并且常以面性圖標代表激活、選中時的狀態,線性圖標代表未激活、未選中時的狀態。

           

           

           

          不過線性圖標薄弱的辨識性并非完全適合標簽欄狀態的切換。

           

          用戶在選中到當前頁時,并不代表其他頁面徹底弱化了,用戶同樣需要關注其他未選中的頁面。

           

          正因如此,ios11中所有未選中的icon全部由線性更改為了面性。同樣的,國內的簡書、天貓等產品也進行了圖標的改版以提升其他頁面的點擊率。

           

           

           

           

           

           

          對于按鈕,面的辨識性為它的層級使用提供了更多可能。

           

          如下圖,按鈕從樣式上來看大致有六種樣式,深色、淺色、淺灰色、幽靈、文字和圖標按鈕,其中面性按鈕就占了一半。相比幽靈、文字和圖標按鈕,三種面性按鈕都以面的強辨識性引導用戶迅速注意到它。因此面性按鈕相對對應更高的層級。

           

           

           

          當頁面中存在多個功能按鈕時,就需要以樣式進行主次之分。深色按鈕以強烈的顏色對比制造吸引力,因此常以深色表達層級最高的主按鈕,而次按鈕通常對應層級較低的淺色、淺灰色等樣式。

           

           

           

          當頁面中沒有主次功能之分時,按鈕的樣式通常取決于當前的用戶場景及業務需求。

           

          比如知乎的答案詳情頁面,答主關注按鈕是淺灰色樣式,就是為了引導用戶沉浸在內容中,避免深色樣式對閱讀造成干擾。而答主個人頁的關注變為深色,則是由于用戶點擊答主頭像的行為來自了解更多的動機,即用戶對其產生了特定興趣,在此場景下使用深色樣式便是為了引導用戶采取社交行為。

           

          另外按鈕圓角的轉化也是為了強化信息的聚焦。關于圓角的內容可以去我的前一篇文章《寫給設計師看的圓角背后的邏輯》,里面有更詳細的講解。

           

           

           

          app store同理。商品列表頁的按鈕一致以淺灰色樣式表達,而詳情頁使用了深色。

           

           

           

          我們在按鈕樣式的選擇上,務必需要考慮到當前的用戶場景,避免過低的信噪比而影響信息的傳達效率。

           

          比如app store列表頁中,用戶的場景是非特定的瀏覽行為,如果使用深色按鈕將會讓其成為視覺焦點,強制用戶不斷注意到它,致使其成為“噪音”,影響用戶對有效信息的獲取。

           

           

           

           

           

          承載性與分割性

          面無限延展的屬性讓它可以承載各類信息。包括文字、圖片或視頻元素,異或是元素自由組合所形成的信息單元。

           

          并且我們僅加深界面的背景色,就可以基于面的分割性,通過控制模塊間距實現區域的劃分。(這里的間距即我們熟知的分割條)

           

           

          但這種文字墻一般平鋪式的布局并不能更好得反映當前模塊所在的層次,或者從用戶認知上說它們傾向于一個層面上。而且直角矩形的四個頂角所形成的四個焦點,也讓用戶的視線傾向于發散而非聚焦。直到卡片的出現,問題得以順利解決。

           

           

          卡片式設計

           

          卡片在我們生活中隨處可見,信件、名片、便利貼、甚至是我們的手機屏幕,它們從形態來說都屬于面,并且都充分利用了面的承載性來充當一個收納信息的容器或載體。

           

          信件收納來信人的寄語,名片收納對方的個人信息、便利貼收納事項清單、屏幕收納用戶界面。而且它們方便攜帶,我們想要知道更多,打開它即可。

           

           

           

          2012年I/O開發者大會中,隨安卓4.1系統一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。

           

           

           

          這種后擬物時代的設計不僅一改Google以往混亂的信息展示問題,而且熟悉的擬物感收獲了足量用戶的喜愛。初嘗甜頭之后,Google將卡片應用到了所有的產品,并且將其作為基礎元素列入了一門偉大的設計語言中——material design。

           

          你可以在material design中更系統得看到,google通過為界面添加了z軸(海報高度),來擬物映射生活中的一張張卡片。并且通過陰影的濃淡反應卡片所在的高度,通過不同的高度實時反映當前元素的層級關系。

           

           

           

          而在ios11中,改版后的app store也使用了大量的卡片進行排列組合,形成格外的清晰的頁面層次引導用戶的視覺動線。

           

           

           

          相比原本平鋪直敘的信息,卡片式設計通過以下優點讓其風靡設計界——

           

           

          1.更高效得獲取信息

           

          每張卡片都是一個獨立的面。從面的辨識性上說,獨立和聚焦的特點讓卡片與其他內容形成天然的斷層,更易形成視覺焦點。

           

          從面的分割性上說,卡片通過犧牲屏幕空間(四周的塊外距)的方式讓區域的分割相較分割條更為明確,清晰的層次關系便于用戶迅速辨識和獲取信息。

           

          比如改版后的支付寶,通過引入圓角卡片來引導用戶更好得留意到下方的各類生活服務,以實現向生活服務數字平臺的轉型。

           

           

           

           

          2.更輕量的入口跳轉

           

          每個卡片除了承載信息外,都可以作為單獨的入口承載內頁的所有信息,并且卡片的屬性讓內頁的展示變為了展開而非跳轉。

           

          比如app store點擊卡片后,便以非線性的展開動畫呈現所有內頁信息,返回則只需下滑手勢即可,輕量而有趣。

           

           

           

           

          3.更多的交互手勢

           

          卡片獨立的特點讓它可排列也可堆疊,這為頁面帶來了更多的交互方式。

           

          我們可以通過左右滑動(scroll)解鎖橫向更多的空間,也可以左右輕劃(flick)形成類似tinder那樣新的產品機制。

           

          比如知乎的書架引入滑動手勢展示更多內容,輕劃手勢切換問題卡片。

           

           

           

           

          4.更舒適的視覺觀感

           

          卡片基于自身獨立的特征讓它成為網格布局的常用載體,富有觀賞性的視覺張力讓頁面更加吸引眼球。

           

           

           

          當然,卡片并不是通用的,原本可以靠留白或分割線分割的信息,如果為了視覺效果硬是卡片化處理,就會導致閱讀的低效,而且浪費空間。

           

          比如常見的一些feed流,相比卡片,這類同類的信息流更適合以列表來幫助用戶迅速得掃視,并節省頁面空間。

           

           

           

           

          卡片的嵌套和分割

          產品的功能并非完全互相剝離的,很多時候存在包含和平行的關系。

           

          這兩類關系分別可以以卡片的嵌套和分割進行處理。前者通過卡片堆砌表達信息的包含關系,而后者則通過視覺分割所形成的點擊域傳達信息的平行關系。

           

           

           

           

          比如天貓點評頁中的金香蕉好物推薦,每個卡片承載了商品信息以及點評信息,通過卡片的嵌套表示出兩者的包含關系。而單條推選理由及入口的引導屬于平行關系,因此采用了視覺分割來進行劃分。

           

          并且前者跳轉的是點評詳情,后者跳轉的頁面中包含了所有點評、商品推薦以及我要點評,因此在后者所屬的面中加入了淡淡的一層業務主色來強化它的地位。

           

           

           

           

          在支付寶改版后的卡包頁中同樣進行了一次嵌套處理,以更好得容納不同的業務并傳達各自所在的層級,并且以尺寸和顏色對比進行業務區分。

           

           

           

           

          京東金融的付費業務卡片中存在兩個平行關系的功能,因此以分割線形式進行了區域的劃分。

           

          同時,它利用了顏色進行了有效的視覺及情緒引導:黑色背景進行反白處理將其作為一個單獨的視覺落點,強制用戶注意到這里,并且又傳達了付費用戶所尊享的高級感。

           

           

           

           

           

          蘋果是如何改頭換面的

           

          自從ios7轉型扁平后,線元素在蘋果設計語言中一直占有重要地位,線自身的纖細、輕盈感可以迅速打造apple獨有的輕量調性,不僅是按鈕、圖標的樣式,字體本身也更加傾向纖細的字重。

           

          但是,這個僵局在ios11發布的那天被徹底打破。

           

          2017年6月6日,蘋果設計師喬納森仿佛和線有了隔夜仇一般,從解鎖頁面到原生應用中,原本ios10中曾經被大量使用的線元素基本全部被面元素取代。

           

          比如鎖屏頁面,所有撥號按鈕全部由幽靈樣式改為了面性樣式,而數字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識,并且降低了線圈所產生的視覺噪音。

           

           

           

          app store中也同樣發生著形態的易主。

           

          你可以在下圖中看到,原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。

           

          另外,11代中眾所周知的大標題同樣也可以看做化面的傾向(通過增加自身的面積),強烈的視覺張力引導用戶迅速得進行辨識。

           

          另外,所有的數字全部提至文字的前方,基于用戶由左至右的動線更突出產品自身,以點化線的形式更好得引導用戶進行掃視。

           

           

           

          追求極致的蘋果顯然不能容忍tab中未選中態下出現的線元素,你可以在ios13中看到,線元素得到了徹底的消除,并且顏色一并得到了克制,再次提升了閱讀內容的沉浸感。

           

           

           

          ios11中的商品詳情頁獲取按鈕也同樣使用了面性,深色的強調樣式更好得契合了頁面所在的用戶場景,召喚用戶對其感興趣的商品采取點擊行為。

           

           

           

          控制中心頁面,基于面元素的承載與分割性,所有的信號類功能獨立收納到了卡片中。

           

          亮度和音量的調節則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強了兩者的辨識力,另一方面,根據菲茨交互定律,面積的增大帶來了更好的點擊體驗。這一點在miui11的控件優化中也得到了應用。

           

           

           

          所有的未選中態圖標也進行了面性處理,大幅提升了10代中未選中頁標簽的辨識性。并且每個圖標對應的文字也進行了加粗。

           

           

           

          縱觀ios11中所有形態的變化,我們可以發現這次改版的最終目的是:促進內容的高效獲取。

           

          順從作為蘋果歷來遵循的設計法則之一,和包豪斯“形式追隨功能”設計理念不謀而合。

           

          ——設計永遠只幫助用戶理解內容,但永遠不與內容競爭。這一點在ios11的這次“改頭換面”中被徹底應用及實現,并且對設計圈影響至今。

           

           

           

           

          最后

           

          點、線、面理論并不像格式塔、尼爾森可用性法則等方法論那樣,為設計者提供切實可行的具體指導,它更類似一種內斂的全局觀,幫助設計師拋開顏色、質感等額外手段,從宏觀的角度以點、線和面的方式將所有的設計元素抽象化處理,讓原本雜亂無序的萬象有章可循。

           

          最后,以康定斯基的一句話結尾——

           

           

           

           

           

          此篇完。

           

           

           

           

           

           



          作者:設計師Andrew
          鏈接:https://www.zcool.com.cn/article/ZMTE3MjU3Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          設計小白必看|好設計的標準

          天宇

          在設計實踐的廣闊天地里,設計師們常面臨一個核心挑戰:如何在領導與產品經理缺乏設計敏感度的環境中,持續產出高質量作品,并確立設計評價的統一標準。本文通過分析具體案例,探討視覺設計的構成要素與評估原則,旨在為設計師指明成長路徑,促進專業技能的精進。
           
          設計品質的界定與追求
          1. 獎項榮譽的光環:例如,無印良品憑借一組榮獲日本平面設計最高獎項——龜倉雄策獎的海報,展示了設計的卓越。該獎項被譽為設計界的“奧斯卡終身成就獎”,海報以簡練的色彩和幾何形狀,藝術化地再現了人與自然的和諧,特別之處在于全部采用廢紙板制作,既創新又環保,與品牌理念緊密相連,實現了藝術與商業的雙贏。
          2. 國際設計獎項的權威:德國紅點設計獎,作為全球設計領域的風向標,激發了全球設計師的熱情。像徠卡相機,不僅是高端攝影的代名詞,其設計也屢獲殊榮,融合了創新與傳統,成為設計與商業并重的典范。自2015年推出的Apple Watch,亦憑借不斷的創新設計,摘得了眾多設計桂冠,證明了設計在推動產品革新和市場接納中的關鍵作用。
          3. 設計公司的國際舞臺:提及韓國設計公司Plusx,其在紅點設計獎的頻繁亮相,顯示了設計跨界合作與國際化視野的重要性,為設計的多元化和國際競爭力提供了范例。
          設計小白必看|好設計的標準
           
           
           
          在評估設計作品,尤其是商業設計的價值時,獲得權威設計獎項的認可確實是衡量其優秀與否的重要標準之一。然而,好設計的定義遠不止于此,它還需在實用與美學間取得完美平衡。
           
          深澤直人的傘柄設計:一個典型的例子是日本設計大師深澤直人的雨傘設計,傘柄的微妙凹槽,既自然又貼心地解決了雨天攜帶購物袋的困擾,展現了設計的創新與人文關懷。這類設計以其細膩洞察和實用價值,贏得了廣泛贊譽。
           
          實用性與美感并重:產品的美學不應脫離其實用性而獨立存在。蘋果iMac的設計就是這一原則的杰出代表。從初代的半透明機身到如今的超薄設計,每一代產品都展現出極致的工藝美學,即便在沒有品牌標識的情況下,其設計的獨特性也能讓人一眼辨識,這正是精湛工藝與美學融合的典范。
           
          直觀性與普適性:好的設計應當易于理解,跨越年齡界限。無印良品的CD播放器設計便是一個典型,其簡潔直觀的操作界面,即便是老人和孩子也能輕松掌握,體現了設計的人性化和普及性。
           
          設計哲學的深度:以微信為例,其設計理念強調“克制”與“約束”,從簡潔的開屏界面到不刻意夸大產品價值,專注于核心功能,展現了一種對用戶尊重與誠實的態度。在眾多APP日益商業化的背景下,微信多年如一日的堅持,顯得尤為難能可貴。
           
          真誠與透明:反觀當前某些廣告宣傳,如電商平臺中常見的誤導性促銷信息,如所謂的“第二件0元”實則并未真正減免,這種做法違背了好設計的真誠原則,損害了消費者的信任。真正的優質設計,應當如同微信一樣,以真實的功能價值贏得用戶,而非依賴虛假營銷。
          設計小白必看|好設計的標準
           
           
           
          設計,無論是應用于APP還是工業產品,核心在于實用性,滿足用戶需求的同時,也不忘在細節處下功夫。正如無印良品的電飯煲,圓潤可愛的外表下,還細心設計了放置飯勺的凹槽,這些細微之處的關懷,成就了設計的卓越。優秀的設計作品,即便隨時間流逝,其設計理念與文化內涵仍歷久彌新,成為不朽的經典,如博朗和蘋果的早期設計,至今仍是設計史上的里程碑。
           
          設計的精髓在于全面性,避免在顯眼處過分雕琢,而忽視了不起眼的角落。正如商場中,若華麗的大堂與臟亂的洗手間形成鮮明對比,顧客的體驗將大打折扣,難以吸引回頭客。因此,卓越設計的標志是對每一個細節的精心打磨,確保整體體驗的完美無瑕。
          來自瑞典的品牌Freitag,巧妙利用回收卡車車篷制作背包,其獨特的二手質感、個性化圖案與顏色,不僅設計實用,更傳遞出強烈的環保理念,展示了設計與可持續發展的完美融合。
          設計小白必看|好設計的標準
           
           
           
          1.Good design is innovative
          好的設計是創新的
          2.Good design is aesthetic
          好的設計是美的
          3.Good design makes a product understandable
          好的設計是易懂的
          4.Good design is unobtrusive
          好的設計是克制的
          5.Good design is honest
          好的設計是誠實的
          6.Good design makes a product useful
          好的設計是實用的
          7.Good design is long-lasting
          好的設計是經得起歲月的考驗
          8.Good design is thorough down to the last
          detail
          好的設計是考慮周到并且不放過每個細節的
          9.Good design is environmentally friendly
          好的設計是環保的
          10.Good design is as little design as possible
           
          設計領域的金科玉律,尤其是Dieter Rams提出的“好設計的10個原則”,深刻影響了德國博朗公司的產品哲學,這些原則成為了衡量設計作品的經典標尺。
           
          商業設計的卓越不僅體現在設計本身的美感與創新,更在于市場的積極反饋和用戶口碑。蘋果產品是這一理念的典型例證,不僅屢獲設計大獎,其市場表現和銷量同樣令人矚目。戴森公司則以創新技術為核心,如其吹風機、卷發棒等產品,憑借前沿科技與設計美學的結合,實現了商業上的巨大成功,再次證明了好的商業設計應是美觀性與市場性的雙重勝利。
          設計小白必看|好設計的標準
           
           
          視覺設計與UI設計的標準:
           
          視覺設計與UI設計的標準化對于維護品牌形象、提升用戶體驗至關重要。在大型企業中,確保設計的一致性尤為關鍵,以下是一些普遍認可的設計標準:
           
          1. 網格系統的應用:確保頁面布局有序,增強一致性。
          2. 比例與尺寸的合理性:維持視覺元素間的和諧比例。
          3. 文字的清晰可讀:選擇易讀性強的字體,合理設置字號、行距。
          4. 色彩的情感傳達:色彩運用需考慮文化寓意及情感影響。
          5. 圖片的精選與優化:高質量圖像與品牌調性相符,提升視覺吸引力。
          6. 圖標與圖形的規范:制定統一的圖標庫,確保圖標含義清晰一致。
          7. 按鈕設計的統一性:按鈕樣式、交互反饋需遵循統一標準。
          8. 視覺層次的構建:通過大小、顏色、位置等區分信息優先級。
          9. 對齊與平衡法則:確保頁面元素視覺上的平衡與協調。
          10. 視覺引導策略:明確的視覺路徑引導,幫助用戶高效完成任務。
          設計小白必看|好設計的標準
           
           
           
          產品設計的優質標準:
           
          遵循上述設計準則的同時,產品設計還需考慮以下幾個方面:
          - 用戶中心:深入理解用戶需求,以用戶為中心進行設計。
          - 功能性:確保產品功能的實用性和易用性,解決用戶痛點。
          - 創新性:在設計中融入新穎理念,區別于競爭對手。
          - 持續性:設計應考慮產品的生命周期,便于升級和維護。
          - 可持續性:關注環保材料與制造工藝,減少環境影響。
          設計小白必看|好設計的標準
           
           
           
          在設計實踐中,嚴格遵循這些準則,不僅能提升設計的專業度,還能確保產品在視覺與功能上的雙重卓越。
          網格系統作為設計領域的基石,其重要性已被谷歌、微軟、蘋果、Naver、阿里巴巴等巨頭公司廣泛認可,并將其納入設計規范之中。盡管網格并非僵化的規則,允許在基礎框架上靈活變化,但它在維持設計的一致性和提高工作效率方面扮演著至關重要的角色。
           
          Web設計中的12列網格標準:12列網格因其靈活性而備受歡迎,能夠輕松適應6列、4列、3列乃至2列的布局需求,使得頁面結構更加條理化和模塊化。在PC端設計中,采用12欄網格系統能夠顯著提升頁面的統一性和標準化程度,使設計過程遵循規律,簡化決策,從而達到高效而美觀的效果。響應式設計中,網格更是保證跨平臺一致性的關鍵工具。
           
          Reddit官網便是12列網格應用的典范,其頁面布局既有序又富有變化,充分展示了網格在網頁設計中的優勢。網格系統的運用,無疑為網頁或PC設計奠定了良好的基礎框架。
           
          移動設備上的6列網格:考慮到屏幕尺寸限制,移動端設計傾向于使用6列網格作為標準,它既能滿足大部分設計布局需求,又能方便地實現二等分或三等分布局。盡管如此,針對特定需求如淘寶等電商應用,由于信息密度高,可能會采用12列網格以容納更多內容。
           
          設計小白必看|好設計的標準
           
           
          海外產品中的網格應用示例,如Pinterest,其界面設計明顯遵循了一個6列網格系統,圖片與按鈕的布局均嚴格遵循這一規則,確保了界面的整潔與統一,每一頁的邊距處理也保持一致,進一步證明了網格在打造有序且視覺舒適界面中的核心作用。
           
          不論是PC還是移動平臺,網格系統都是設計中不可或缺的組成部分,它既是設計標準化的推手,也是提升用戶體驗的有效途徑。
           
          Airbnb的設計備受推崇,其背后的秘密在于一套有序的網格系統。他們采用的布局策略是左右邊距48像素,內容區域間隔24像素,這樣的設計增加了頁面的留白空間,營造出舒適愉悅的瀏覽體驗,使得Airbnb的設計呈現出獨特的秩序美感和視覺焦點。
           
          轉而觀之,谷歌作為設計規范的先行者,在其最新設計語言中首次詳盡闡述了網格系統的應用。谷歌的網格系統不僅涵蓋了傳統元素如邊距、間隔,還特別定義了四欄布局,以適應手機、Web及平板等多種平臺的產品設計,體現出其在跨平臺設計中對一致性和靈活性的重視。谷歌官網是深入了解其網格系統細節的寶貴資源。
          設計小白必看|好設計的標準
           
           
           
          合理比例的重要性:比例在設計中占據核心地位,合理的比例配置能夠顯著提升視覺效果。盡管存在爭議,黃金比例(約1.618:1)作為古老而經典的美學法則,自古希臘數學家歐幾里得時期起就被廣泛討論。盡管有人質疑將其作為絕對設計法則的適用性,但黃金比例不失為設計初期的一個有益參考框架,而非一成不變的規則。
          蘋果公司在其APP圖標設計中巧妙運用黃金比例,這一原則貫穿其眾多設計作品,證明了黃金比例在現代設計中的持續影響力。眾多知名互聯網品牌亦紛紛采納黃金比例,以提升視覺和諧與品牌識別度,再次驗證了比例設計在塑造高品質視覺體驗中的關鍵作用。
          Facebook在其官方網站的設計中同樣采納了接近黃金比例的原則,以此優化視覺布局,確保用戶界面既美觀又易于導航,進一步證實了黃金比例在現代數字設計中的廣泛應用與影響力。
           
          谷歌的Material Design規范,作為設計界的權威指南,詳細闡述了如何通過標準化的比例(如16:9, 3:2, 4:3, 1:1, 3:4, 2:3等)來構建界面布局,以實現設計的一致性和高效性。這一做法不僅統一了視覺語言,還提升了用戶體驗,強調了在設計中遵循規律比例的重要性,它是塑造流暢視覺流程和提升設計整體感的關鍵。
          設計小白必看|好設計的標準
           
           
          文字易讀性:設計中的核心要素
           
          在產品設計中,文字是傳達信息的橋梁,其易讀性直接關系到用戶體驗的質量。優化文字排版,確保信息傳遞的高效,是設計中的重要一環。通過精細控制對齊、字體選擇、行距、字間距等,可以顯著提升閱讀體驗。
           
          對齊的魔力:對齊方式對閱讀節奏有著直接影響?;靵y的對齊會導致閱讀效率下降,而合理的對齊能夠引導用戶的視線流動,提升閱讀體驗。如上圖所示,三種不同的對齊方式帶來了迥異的閱讀感受。良好的對齊不僅美觀,還能使信息層次分明,便于用戶快速抓取關鍵信息。
           
          間距的藝術:間距(包括行間距和字間距)是控制閱讀節奏的另一關鍵。過小的間距會使文字擁擠,閱讀時易產生視覺疲勞;反之,過大的間距則可能導致閱讀斷層,信息連貫性受損。找到合適的間距比例,是保障閱讀流暢性的關鍵。這要求設計師在設計過程中,根據內容的性質和閱讀場景,精心調整,以達到最佳的視覺舒適度和信息傳遞效率。
          設計小白必看|好設計的標準
           
           
          無論是遵循黃金比例的布局設計,還是遵循標準化比例的界面構建,亦或是通過精細調控實現的文字易讀性,都是設計中不可或缺的要素。它們共同作用,不僅提升了設計的美學價值,更深層次地,優化了用戶體驗,確保了信息的有效傳達。在數字化時代,把握這些設計原則,是每一位設計師通往卓越設計道路上的必修課。
           
          在提升設計的易用性方面,文字大小與字體的變化扮演著至關重要的角色。信息架構通常圍繞標題、副標題和正文構建,通過調整文字尺寸與粗細,可以有效引導用戶注意力,確保信息的層次分明。蘋果公司便巧妙地將黃金比例應用于字體設計,其字體大小對比通常維持在1.7:1或0.7:1,這與黃金比例的美學原則不謀而合,進而增強了視覺層次和閱讀流暢性。
           
          對比策略的運用,是另一提升設計易用性的有效手段。通過文字大小、顏色及透明度的對比,可以顯著提升內容的可識別度。然而,在追求視覺效果的同時,還需遵循Web內容無障礙指南,確保所有用戶都能無障礙獲取信息,推薦的對比度標準為至少4.5:1。蘋果官網便是這一原則的絕佳示范,巧妙利用文字的大小、顏色及透明度差異,使得信息傳遞既高效又具有吸引力。
          設計小白必看|好設計的標準
           
           
           
          色彩的情感傳達是設計中不可忽視的一環。色彩的選擇不僅關乎美觀,更直接影響用戶的情緒反應。每種色彩因其明度、飽和度的不同,能喚起截然不同的情感體驗。例如,紅色既可以表達個性與現代感,也能展現性感魅力。為了精準掌握色彩的情感語言,可以借助“色彩意象尺”這一工具,它能幫助設計師了解每種色彩所蘊含的情感傾向,是品牌塑造和色彩搭配的重要輔助工具。在品牌設計過程中,色彩意象尺能指導設計師選定符合品牌調性的色彩方案,確保色彩運用與品牌理念和諧統一。
           
          以定義品牌色彩為例,通過色彩意象尺分析,設計師可以深入理解不同色彩的情感寓意,從而在眾多顏色中作出明智選擇,不僅塑造品牌的獨特視覺形象,還能激發目標受眾的共鳴,進一步強化品牌識別度與市場影響力。正確運用色彩,不僅美化視覺界面,更能在情感層面與用戶建立連接,是設計中不可或缺的策略之一。
          設計小白必看|好設計的標準
           
           
           
          舉個例子
          在著手創建一個面向全球95后用戶的時尚社交產品時,色彩選擇尤為關鍵。假設我們的品牌定位趨向于青春活力與輕盈,首先需從色彩意象尺中挑選符合這一氣質的色彩基礎。在這個過程中,我們鎖定紅色和黃色作為潛在的候選色彩。
           
          分析競品色彩策略:調研發現,多數競品偏向使用紅色系,這為我們提供了差異化的機會。于是,我們決定避開紅色,轉而選取黃色作為品牌的核心色彩,以此在市場中脫穎而出。
           
          考慮用戶偏好:接下來,需分析目標用戶群的性別比例。假設男性用戶占比更多,且偏好較為大膽的色彩組合,我們基于黃色進行調整,提高其明度和飽和度,最終選定了一款接近糖果玉米的鮮明黃色,以滿足年輕男性群體的審美偏好。
           
          確定品牌色彩:通過這一系列步驟,我們的品牌色方向得以確立——鮮明而富有活力的黃色,既體現了品牌的時尚特性,又與目標用戶群體產生強烈共鳴。
          設計小白必看|好設計的標準
           
           
          理論應用與實踐:理解品牌個性維度、色彩情感及色相意向尺等概念,對于初學者可能略顯陌生,但通過本文的介紹,希望你能逐步掌握這些理論,并在實際項目中不斷實踐。隨著時間的積累,你將能自信地從零開始創造獨特且經典的色彩搭配方案。
           
          推薦資源:為了進一步提升你的色彩搭配能力,推薦訪問“BrandColors.net”(請注意,網站名稱為示例,實際網址應自行搜索確認),這是一個匯聚了全球知名企業的品牌色彩庫,你可以從中獲取靈感,學習如何高效地運用色彩來強化品牌形象。
          設計小白必看|好設計的標準
           
           
          上文提到的案例,展示了如何根據產品定位(如優雅與高級),利用色彩意向尺選擇中性色調,進而打造出既符合品牌調性又具視覺吸引力的設計實例,進一步證明了色彩選擇在品牌塑造中的重要性。
           
          通過這些步驟和工具的綜合運用,你將能夠更加系統和科學地定義屬于自己的品牌色彩,為產品注入獨特的靈魂與魅力。
           
          在設計領域,圖片作為傳達信息的強有力工具,其重要性不言而喻。它不僅直接且有效地表達設計意圖,還能瞬間提升作品的整體品質。當設計中需要傳達特定情感或概念,如安全,通過展示警察、保鏢、手機鎖屏、戴口罩的圖像,或是保險箱、指紋鎖等象征物,可以直觀地向觀眾傳遞安全的信號。進一步,圖片的選擇還能啟發設計風格,如保險箱的塊面感、穩重的字體和對稱構圖,都能為設計增添安全、可靠的氣息。
           
          圖片的運用不僅限于情緒板,它們在設計項目中發揮著舉足輕重的作用,能夠清晰地傳達信息,提升視覺效果。一張精心挑選的攝影照片與設計巧妙融合,如汽車與風景的和諧搭配,能極大提升作品的藝術感和吸引力,尤其是在電商設計中,優質的圖片與產品氣質相得益彰,能有效提升銷售額與設計美感。
          設計小白必看|好設計的標準
           
           
           
          圖標設計同樣不容忽視,它們不僅是功能的指示符號,更是設計語言的重要組成部分。圖標的設計風格,如圓角大小、質感選擇,都能深刻影響作品的氣質傳達。柔和的斷口與疊加色彩圖標,給人以輕松愉悅的感受,適合營造親切友好的氛圍;而線條硬朗、質感穩重的圖標,則更適合金融等領域,傳遞出專業與信賴感。圖標設計還需遵循用戶習慣,采用與日常生活緊密相關的隱喻,確保用戶能夠迅速理解和感知,從而提升用戶體驗。
           
          綜上所述,設計師應擅長運用圖片和圖標作為設計語言,通過精準的圖片選擇與富含隱喻的圖標設計,有效傳達設計概念,提升設計的整體品質與溝通效率。這不僅是提升設計作品美學價值的關鍵,更是連接用戶情感與理解的橋梁。
           
          在產品設計的復雜生態系統中,按鈕作為用戶交互的核心元素,其設計的精確性與合理性至關重要。每個按鈕都承載著特定的行動召喚,因此,制定明確的按鈕規則是設計中不可或缺的一環。設計中,按鈕樣式多樣,如填充型、線框型、色塊描邊型及純文字型,每種類型對應不同的應用場景。主行動按鈕通常采用品牌色彩填充,以增強點擊欲望,如“購買”、“下一步”等關鍵操作;輔助操作則傾向于采用白色邊框按鈕,以減輕視覺負擔。警告操作采用紅色,無效狀態則以灰色呈現,以此明確按鈕的功能和狀態,避免用戶混淆。
          設計小白必看|好設計的標準
           
           
          缺乏明確的按鈕設計指引,將導致設計混亂和功能混亂,影響用戶體驗。因此,建立一套詳細的按鈕使用規范,是設計團隊的必備工作。
           
          視覺對齊準則同樣影響著設計的精確性和美觀度。設計時,精確的數學對齊雖為基礎,但在特定情況下,視覺效果的和諧同樣重要。如NAVER的閃屏設計,通過輕微的視覺偏差調整,使界面看起來更為和諧自然。在處理文字排版時,粗細字體的搭配需注意視覺平衡,有時需對字體大小進行微調,以確保視覺上的等效性。同樣,中英文數字混排時,由于視覺感知差異,需適當調整數字大小,確保整體視覺的均衡。
          設計小白必看|好設計的標準
           
           
           
          按鈕設計的規范性與視覺對齊的精確性,是提升產品設計質量的關鍵。通過細致入微的調整,如遵循特定場景下的按鈕樣式規則、適時進行視覺矯正、以及在字體與數字混排中追求視覺平衡,設計師能夠確保用戶界面既符合邏輯,又美觀協調。這些細節的把握,是設計從“可用”走向“卓越”的必經之路。


          作者:啊糖糖att
          鏈接:https://www.zcool.com.cn/article/ZMTYxOTMzMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          產品設計如何利用心理學

          ui設計分享達人

          產品設計的成功除了依賴設計方案和技術實現,還與用戶的心理密切相關。用戶心里決定了我們用怎樣的設計策略解決問題。我們常認為人們做決策時是理性的,但其實用戶行為經常是非理性,會受到情緒、習慣和社交環境的影響。了解這些心理學規律能幫助我們更好地的預測和引導用戶行為,優化產品體驗,提高用戶的粘性、留存率和轉化率,從而產品商業價值最大化。
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學
           
           
          產品設計如何利用心理學


          作者:DesignLink
          鏈接:https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          “好的設計組件”在搜索設計場景中的定義

          ui設計分享達人

           
           
          關于設計組件庫,我們有一些新思考
           
           
           
          從網上搜索設計組件,我們能找到各種對外公開的設計組件庫,同樣還有不少或概括或詳細的文章,手把手教你“如何搭建一個好的設計組件庫”,但這些方法論很少探討面對C端組件頻繁增改、設計規范動態調整,如何高效賦能業務設計交付的相關內容,但這恰恰是搜索業務面臨的關鍵問題。
           
          搜索是一個“牽一發而動全身”的業務,每一個微小的設計細節都有可能影響各個業務的數據指標,一個“好的設計組件庫”需要以一種潛移默化的方式讓設計師掌握設計規范,完成合規的設計,從這個角度而言它應該比較
          「好懂」
          。
           
          而作為服務于整個設計團隊的公用設計組件庫,面對每月數以萬計的調用次數,它必須保障最基本的易用性,應該非常
          「好用」
          。
           
          同時,面對頻繁迭代,“好的設計組件”還需要保持最快的更新速度,為各個橫向團隊提供正確的樣式,從這個角度來說它還要
          「好維護」
          。
           
          因此,
          「好懂、好用、好維護」
          是搜索設計語境下,對一個“好的設計組件”的定義。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          接下來,我們將從這三個「好」入手,分享搜索設計組件庫在升級過程中的一些思考,希望能和大家共同探討。
           
          關于設計組件庫,我們有一些新思考
           
           
           
           
          關于設計組件庫,我們有一些新思考
           
           
           
          “萬丈高樓平地起”,我們先來說說如何從零開始構建一個既符合設計規范又易于理解的設計組件。
           
          首先,在搭建組件時,我們可以考慮采用
          多層嵌套
          的方式,即組件(Component)內部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作,甚至還能在解綁組件時,通過選中內部的子組件圖層進行解綁,大大簡化了搭建和使用雙方的操作流程。
           
          在多層嵌套的思路下,我們可以進一步用
          “底層靈活、上層收斂”
          來指導組件的搭建。這意味著底層變體的形式足夠多樣,能夠支持大部分的狀態切換,而在上層組件搭建的過程中顯性地加強規范的指引(如規范中不允許使用的樣式不對外展示),以降低超出規范設計的可能。
           
          具體的搭建流程可以大致分為三步:
          場景收集和分析、搭建基本變體組、拓展高階變體組
           
          我們將通過視頻組件搭建的生動案例,具體介紹如何依據“底層靈活、上層收斂”原則來搭建組件庫,使得組件本身既足夠靈活,又能起到足夠的約束作用。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          在著手搭建某類組件時,我們首先通過規范確認和場景遍歷,廣泛收集各類變體。隨后,從我們能想到的所有維度出發,對這些變體進行細致定義。這樣,我們就能得到一張詳盡描述組件變體性質的表格。表格的第一列依次列出變體1、變體2、變體3等,而第一行則羅列出各種維度,如寬度、比例等。通過這種方法,我們可以將原本零散、雜亂的組件變體描述,系統地歸納整理成一張清晰明了的表格。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          表格通過不同維度來唯一確定一個變體,這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致,常見特性則涵蓋了最常見的分類性質,如寬度、高度、數量和優先級等,而業務特性則與具體業務緊密相關。
           
          在搭建組件時,我們可以遵循
          「共性-常見特性-業務特性」
          順序,這樣的順序有助于降低理解成本,因為最符合心智的分類被置于外層,同時底層的組件又保持了足夠的靈活性,便于切換各種變量。對于業務特性,我們可以根據實際情況靈活處理,既可以將其作為基本組件的延展,也可以不將其納入組件范疇。
           
          以視頻組件為例,我們從表格中獲取的信息如下:
           
          •  
            視頻尺寸及其組合是最符合用戶心智的變體選擇;
          •  
            播放狀態是所有變體的共有性質;
          •  
            自動播放情況與業務相關,但不一定需要在組件庫中呈現;
          •  
            高階組件僅涉及少部分尺寸的組件,應在完成基本組件搭建后再進行。
           
          據此,我們可以輕松梳理出視頻組件搭建流程的優先級:
           
          1.  
            播放狀態作為共性,應首先搭建;
          2.  
            基本組件尺寸和組合是最符合用戶心智的變體選擇,應緊隨其后;
          3.  
            高階組件在完成基本組件搭建后再進行。
           
          值得注意的是,“封面槽位”是“播放狀態”中的一個圖層。根據“底層靈活、上層收斂”的原則,我們將其插入到搭建播放狀態之前。因此,視頻組件的最終搭建流程為:
           
          1.  
            封面槽位;
          2.  
            播放狀態;
          3.  
            基本組件尺寸和組合;
          4.  
            高階組件。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          完成對視頻組件搭建的分析,我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件,再用基本組件搭建高階組件。這一步驟雖然為大家所熟知,但仍需格外注意,如配置項的設置要力求合理,也可以融入設計規范和使用規范,同時還應將一些搭建過程中的零散組件集中收納避免被調用。關于這些具體的注意事項,我們將在后續部分進行詳細闡述。
           
          至此我們完成了組件搭建的基本流程,一個達到及格線的視頻組件就誕生了。據統計,優化后每次調用視頻組件將節省至少10步的點擊操作!
           
           
          關于設計組件庫,我們有一些新思考
           
           
           
          完成了一個基本組件的搭建后,我們可以轉換視角,從使用的角度來審視并檢查這個組件。
           
          我們期望,從插入組件變體、切換組件配置,再到最后的解綁組件,整個流程都能縱享絲滑且穩定可靠,確保業務設計師在使用過程中獲得最佳體驗。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          我們可以一步步來審視組件的使用過程。首先是插入組件,據觀察,通常有三種方式,①在左側的資產面板(Assets)中直接找到對應組件并插入;②通過查閱設計規范,鎖定所需的變體后復制粘貼;③選中一個不需要的組件,通過右側的“切換變體”面板(Swap instance)切換成所需的變體。很明顯,在這個過程中依賴的是組件的精準搜索和快速定位。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          為了提升搜索精度,我們可以從組件命名入手,采用中、英、數字結合的方式,實現模糊匹配;也可以在發布時隱藏不希望被調用的組件,以減少無用的搜索結果。如果組件是采用前文提到的“多層嵌套”方式搭建的,我們可以添加“Preferred”子組件,這樣在切換時會優先展示這些子組件,這個功能在切換圖標時尤為實用。
           
          對于習慣邊查閱設計規范邊使用組件的設計師,我們增加了更多實際使用的正誤案例,這些案例直觀展示了組件變體的正確選擇和使用方式,進一步降低了規范的理解成本,有效輔助設計決策。同時,我們專門維護了一個固定區域,用于平鋪展示所有組件變體。為了確保能夠輕松點選,我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設計師一目了然地看到所有變體,從而快速選擇所需的組件。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          在組件配置階段,有三項注意點能讓組件更加易用,即“重視組件的可視化效果、設置高效易用的配置項、貼心地保存修改”。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          考慮到C端組件的多樣性和用戶的使用習慣,我們應避免使用過于復雜的分組方式。相反,應更注重組件的樣式展示,并盡量簡化組件的層級結構。這樣,設計師在使用時能夠更直觀地看到組件的外觀,而無需深入復雜的層級去查找。
           
          另外值得注意的是,Figma會默認用組件集合中最左上角的組件生成預覽樣式,因此應當把視覺上最有代表性的變體放在左上角,這個效果在切換變體(Swap instance)時很重要,因為目前在該面板中沒法查看組件細節,只能靠縮略圖和名稱來推測是哪個組件。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          其次對于配置項的設置也大有講究,業界有組件庫為了實現C2D2C,從源頭上將設計組件和前端組件的配置項打平,這是不錯的思路,但有可能會提升設計側的理解成本。針對搜索業務的特殊語境,我們還是選擇了從「規范理解」角度去設置組件的配置項,將所有允許自定義的配置盡可能外露,并清晰地說明修改限制,如字數限定、選項個數等,這樣能夠在使用的過程中強化業務設計師對規范的掌握。
           
          另一個常常被忽視的關鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率,建議對選項和選項之間,以及外層的不同配置項,都按照一定的邏輯順序進行排序。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          最后一點,我們稱之為
          “貼心地保存修改”
          機制,這個針對的是文字修改的場景。
           
          在實際操作中,使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內容后再去調整其他配置時,已修改的文字會被重置。這時文本屬性(text property)的設置就顯得尤為重要,它能夠記憶并保存修改過的文字內容,從而免于重復輸入。
           
          還有一些情況是,某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值),用戶切換后就會發現組件完全變了,只能撤回。為了避免這類情況,建議使用另外的標記來表明組件某個設置項是不可切換的。
           
          關于設計組件庫,我們有一些新思考
           
           
           
           
          關于設計組件庫,我們有一些新思考
           
           
           
          完成了組件的搭建和檢查,接下來讓我們聚焦于組件的日常維護。
           
          這一環節可以從兩個維度展開,一是依托中臺的日常數據監控進行維護,二是通過團隊內部的緊密協同機制來保障。后者更多側重協作流程和機制上的建設,在本文中我們不做更多展開,重點討論前者。
           
          數據監控的方式主要依托Figma中的組件數據看板(查看路徑:View libraries-Analytics),看板中展示了各個組件的調用數和解綁數數據,這些數據不直接反映組件的優劣,但如果我們觀測到某個組件解綁率偏高,我們會考慮直接把它
          作為模板
          而不是創建成組件。
           
          關于設計組件庫,我們有一些新思考
           
           
           
           
          總結
           
          以上是百度搜索設計團隊在設計組件庫升級過程中的心得分享,包括搜索業務對于“好的設計組件”的訴求,以及一些搭建和優化組件的實用思路,核心是探討如何從組件庫建設的角度入手,成功助力團隊提升設計資產消費效率。
           
          關于設計組件庫,我們有一些新思考
           
           
           
          當前我們已經完成設計資產工程化的前序環節,我們對設計資產的升級和探索并沒有結束,未來我們將持續探索設計系統工具化的形態、與AI大模型結合的機會,通過豐富消費途徑,實現在業務交付的不同階段下全方位提效。這部分內容后續有機會也將會和大家見面,請大家期待!
           
          感謝閱讀,以上內容均由百度MEUX團隊原創設計,以及百度MEUX版權所有,轉載請注明出處,違者必究,謝謝您的合作。申請轉載授權后臺回復【轉載】。


          作者:百度MEUX
          鏈接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

          設計的兩面性:理性決策與感性表達

          天宇

          引言
          設計應該是感性的還是理性的?設計是感性重要還是理性重要?此類問題一經出現便會引起爭議無數,每個人對此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點看似正確,卻缺乏任何實質性的指導價值。
          實際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設計”?有些人認為是設計決策的過程,而有的人則認為是最終產出的設計作品。大多時候,理性和感性兩種觀點看似針鋒相對,實際上是站在設計的不同層面進行討論。
          設計的兩面性:理性決策與感性表達
           
           
           
          01|設計決策
          從設計決策的角度來看,感性設計指的是設計師在設計過程中主要依靠個人情緒或情感進行創作。許多人誤認為,只要在設計時能與用戶產生共情,理解其情緒波動,并將這些喜怒哀樂、喜好厭惡融入設計作品,就算是感性設計了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對外界事物產生的直接感受和情緒反應,強調的是個人視角。
          在藝術領域,感性占據主導地位,但設計并非藝術。設計的主要目標是解決問題和滿足特定需求,而藝術更多地關注自我表達和情緒傳遞。設計始終受到客戶需求、商業目標、市場趨勢和技術可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發揮。這也是設計與藝術的顯著區別。
          設計的兩面性:理性決策與感性表達
           
           
          站在感性“對立面”的理性,將設計視為一項工程或科學,力求流程化和系統化,講究方法論,注重各方面的調研,一切動作因問題存在而起,以問題解決而終
          。甚至在實際場景中持續觀察作品表現,以期得出可復用的設計模型或定律,為后人更加高效地解決類似問題提供幫助。
          所以,從解決問題的本質屬性出發,理性應該才是設計的底色。數據驅動、方法論支撐、可用性測試、競品分析、用戶研究等都屬于理性思維的具象化體現。
          由于大部分設計師的出身多以藝術打底,所以一旦設計與藝術的界限在心中變得模糊,會習慣性地
          將產品看作自己的"作品",而非用戶的"解決方案"
          。如此一來,當面對來自各個方向的邊界與不確定性,本能的反應就不是思考了,而是抵觸,尤其是“完美”的方案已在腦中形成,如果突如其來的新要求打亂了這一切,哪怕假以用戶之名也要選擇懟回去,并不斷美化、合理化自己的設計理念。對設計師來說,這是一種自私、不負責任和缺乏職業素養的表現。
          設計的兩面性:理性決策與感性表達
           
           
          接下來,想象一下你的手中有一把槍,準備射擊某個目標。你的第一個動作是什么?大概率是瞄準。因為大家都知道,射擊前通過瞄準鏡或者準星,先對目標位置進行瞄準校正,射擊時才能提高命中率,這也正是理性對于設計的重要性所在。
          理性在設計中的作用類似于瞄準動作,它幫助我們在設計過程中做出科學的決策,確保設計方案的準確性和可執行性。未經理性思考的設計,就像是不瞄準就立即開槍,其結果往往難以預測。當然也可能會擊中目標,這基本上取決于兩個因素:
          1.  
            目標遠近:
            近處的目標,即使不瞄準,也很容易擊中;但對于遠處的目標,命中率則必然大幅下降。我們可以把目標遠近理解為設計需求的難易程度,對于簡單需求,不用過多的理性分析,直接設計也能完成任務,但面對復雜的設計項目,如果不進行充分的理性分析上手就畫,大概率就要偏離產品目標了。
          2.  
            個人經驗:
            經過反復練習,可以練就不瞄準也能遠射的本領,隨著經驗積累還能不斷提升距離值;在經驗不足的情況下,還不瞄準,就只能選擇一些近距離的射擊目標了。設計也是這樣,對于某類產品的設計經驗較多,不用太多理性的分析決策,也能達成設計目標;缺乏經驗時,還憑借直覺草率地進行設計,再簡單的項目也可能會搞砸。
          設計的兩面性:理性決策與感性表達
           
           
          所以,沒有理性支撐而完全依賴直覺經驗的設計,一個致命性的問題就是
          不穩定
          !日常工作中,設計師的有效輸出和穩定輸出至關重要。
           
          02|設計表達
          假設經過瞄準后的射擊都能順利擊中目標,那么接下來要關注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設計作品。在這一環節,理性設計指的是方案完全圍繞產品功能來呈現,追求效率與極簡認知,較少運用裝飾性設計元素,即使使用,也大多兼具輔助內容理解的功能性目的。
          而感性設計,我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強調的是個人出發的情緒表達。其實,“情感化設計”才更負荷大家口中常說的“感性設計”所想表達的含義,相比“理性”的設計作品,情感化設計更具有“一擊必殺”的效果。
          在滿足基礎功能需求的基礎之上,通過色彩、排版、圖像、動畫等元素給予用戶充分的情感體驗,也可以利用敘事、對話、情景、微交互等策略引發共鳴。豐富多樣的情感化設計策略,讓用戶與產品之間更容易建立情感連接。
          設計的兩面性:理性決策與感性表達
           
           
          在設計決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設計表達具有深入人心的穿透力和影響力。典型設計案例如Apple、Tesla等產品設計無一不是理性決策和感性表達的充分結合。因此,回到開篇提出的問題,設計應該是感性的還是理性的?我的回答是:
          作為設計師,要
          堅持理性的設計決策
          ,同時
          追求感性的設計表達
          設計的兩面性:理性決策與感性表達
           
           
           
          03|兩者關系
          很多人認為,不同的設計領域對理性和感性的要求有所不同,在B端產品中,理性占據主導地位,而C端產品更強調感性。從設計最終所呈現的效果來看,這種觀點在一定程度上是合理的。B端產品多用于生產場景,追求的是可用性,是克制和效率;C端產品面向普通大眾的各種生活場景,因此關注體驗的愉悅感受。兩者往往在風格調性上差異化很大。
          但是,對于設計決策來說,無論C端、B端還是G端,都屬于設計項目,都要進行理性的需求分析和策略制定,即使某些產品類型最終選擇了偏感性的或情感化的表達手法,也是
          基于理性決策后的一種選擇
          ,是實現目標的一種手段。
          所以我想說的是,理性和感性兩者既不是對立關系,也不是并列關系,而是先后關系或嵌套關系:
          理性是設計的基礎和第一步,感性則是在理性之上的選擇和展開
          。
           
          最后的話
          作為設計師,對于設計中的理性與感性之問,不應停留在非此即彼或既要也要的簡單認知里,任何深入的思考都是有意義的。在這個存在分歧的問題上,希望我的觀點可以為你提供一點點啟發,也希望各位設計師既能夠通過理性的分析制定出有效的設計策略,又能夠通過感性的表達手法創造出動人的設計作品,不斷提升自身的設計價值,與產品實現共贏


          作者:設計來電
          鏈接:https://www.zcool.com.cn/article/ZMTYyNjY2MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          設計的意義

          藍藍設計的小編

          保羅·蘭德說:“設計是一種行為,是想象力馳騁的過程和產物。”

          作為設計師,設計是我們的專業,也是我們用來解決商業問題的工具。

          我們過去也許都曾思考過類似設計的價值、意義或是本質之類的問題。思考這類問題在某種意義上或許都是為了當我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。

          設計師在從業的不同階段,對設計的理解不同。從追求工具技能到表現力、方法論、風格到影響行業甚至社會審美意識等等。不斷的錘煉之后,對設計意義也會有不同理解。

          我們奉為的大師,都擅長用自己的知識架構定義對設計的理解。

          保羅·蘭德就是一位我們公認的設計大師、藝術家。他是當今美國乃至世界上最杰出的圖形設計師、思想家及設計教育家之一。他最出名的企業標志設計,包括IBM,UPS,ABC標志以及為史蒂夫·喬布斯設計NeXT.那段經典橋段。

          去研究這些前輩們如何看待設計、理解設計以及如何與設計相處一生,是另一種設計哲學的思辨。

          保羅·蘭德說:

          “設計是一種行為,是想象力馳騁的過程和產物。”

          設計表現可能看似是簡單的組裝、排序或是美化的過程,但設計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后,設計就是把散文變成詩歌的過程。

          設計師是孤獨的,大部分時候他們是一個人在戰斗。

          設計是個人行為,即便在設計成熟度較高的國家、企業或是大型團隊,設計師仍需在一線才能真正掌控在這場戰斗中可能遇到的極其細節的變化和給人傳達的感受。

          設計需要沖突來加深傳達的“戲劇性”。但設計過程也面臨種種沖突。這是設計的商業價值與藝術價值平衡的過程。正是因為這種關心很難平衡,才會出現雇主與設計師之間的沖突。

          企業的目標是達到商業、經濟、政治甚至社會性目的。對設計師而言,設計是一種創造和實驗行為。通過這種行為來平衡之前的目標。

          設計品質最終決定設計師與核心決策者之間的關系。關心越是緊密,設計的產出就越有可能出彩。這其實并不難理解,對設計完成度有高追求的企業,CEO也大多都跟設計團隊或是設計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認的CEO與設計師高緊密度關系的典范。

          當今社會,市面上依然存在太多糟糕的設計。

          一來,核心的決策者對設計專業的理解度不夠。

          二來,很多決策依賴于市場調研,既得利益的權重大于長遠利益。

          再就是我們回避不開的話題,設計師在某種意義上話語權不夠。

          抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見,他們有評價權,但卻缺乏對設計專業知識的儲備。所以就會普遍出現外行指導內行的情況。過往(現在好一些),他們將設計師看做一套繪圖工具,一個合作供應商而不是一個業務團隊里重要的組成部門。

          體系完整的企業可能會引入市場調研團隊,調研團隊為營銷提供定位信息,設計師來解讀和演繹那些信息。如果調研團隊能理解設計師的工作過程與其產生共鳴,就有可能促成正確決策甚至產生驚喜的創意作品。

          但很多時候,我們聽到了太多這樣的回復:

           

          我喜歡它;

          我不喜歡它;

          它太簡單了;

          它太復雜了;

          它讓我想起某某...

          常常一句“我不喜歡”就可以終結任何設計作品。就像當初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

          每個人所能感知的信息都不盡相同。

          有人既看不到logo的意義,也看不到它的功能。也正因為過于用喜好而不是專業去評判,才讓糟糕的設計一直留存于我們的世界。而大眾對糟糕的設計要比對好設計更加熟悉,于是大家習慣于選擇不好的設計,因為和他們朝夕相處。

          新事物讓人感受到威脅,而舊事物讓人安心。

          要判斷一個設計的內在價值,決定性因素不是使用期,而是它所設定的“品質預期”。這是設計師的價值,也是設計師該練就的“知覺”。

          何為知覺?

          我們可以把知覺暫定為“瞬間的洞悉”。設計師在做設計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試,都是通過瞬間對各方向的可能性判斷。

          本能、預感、沖動、洞悉之后的綜合“洞悉”,這就是知覺。

          說到logo,我們常把logo當成品牌價值傳遞的重要符號。

          它是一面旗幟、一個簽名、一個路標。大部分時候,雇主期待logo能描述一個行業,但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認的是它們都是歷史上最成功的logo,但它們卻無法做到能傳遞它們的行業屬性。因為logo遠不如它所代表的產品重要,它所代表的比它看起來的樣子更重要。


          因為只有logo與它所屬的公司、產品、服務聯系起來時,它才具備真正的意義。一流的產品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的,那么它的logo最終也會被歸為二流。

           

           

          logo首先要告訴人們“是誰”,而不是“是什么”。這才是它最基礎且最重要的功能。它所扮演的角色就是“指示”。“簡潔”是達成指示的手段。所以設計過程中的特點、好記以及清楚都是需要設計師在打磨細節前首先要做好的決策。一個復雜、挑剔、模糊的設計潛藏著自我毀滅性的風險。

           

          “好的設計帶來好的生意”。但不可否認,即使不好的設計,也可能帶來好的生意(比如下圖)。如果這樣,還需要好的設計么?

          好的設計可以增添額外的附加價值,很多時候,也許光看著它就能給人們帶來快樂。它們更尊重感官,并通過這種友好的感官體驗,給企業帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全,目標明確的企業,反映了它的產品或者服務的品質。所以,這個世界需要好的設計,設計師要做的就是用設計向世界傳遞一些更有價值的觀點。這是設計師的工作,也是設計該有的意義。

          「大寶推薦閱讀書單之《設計的意義》」



          作者:大寶頻道
          鏈接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

           

          優秀的設計就是帶給用戶驚喜!

          藍藍設計的小編

          優秀的產品設計是能帶給用戶驚喜的,在不經意間讓用戶感受到溫度,也是提升用戶體驗的關鍵。
           
          隨著行業的進步,產品設計師也在不斷優化體驗,輸出一個一個優秀的解決方案。近期黑馬哥也發現了一些比較驚喜的設計,來和大家一起欣賞一下吧!
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          體驗目錄
          一、降落傘帶來的營銷廣告
          二、動效反饋商家備餐過程
          三、這個廣告驚不驚喜意不意外
          四、Banner 廣告的視覺沉浸感
          五、待機狀態下的實時動態
          六、小圖標里的細節反思
          七、輪播式的懸浮設計
          八、氛圍熱烈的底部標簽欄
          九、收縮式交互設計
          十、形象化的進度設計
           
           
          一、降落傘帶來的營銷廣告
          在這個廣告滿天飛的年代,用戶已經逐步開啟廣告免疫模式,如何提高用戶對廣告的關注度至關重要。
           
          近期在體驗餓了么時,等待送餐界面中空降一個降落傘,從左上角飄到右側懸浮,彈出紅包懸浮廣告。降落傘飄浮的動態過程吸引了用戶的關注度,進而提高了營銷廣告的點擊率,雖然廣告大家都比較反感,但是一個伴隨著驚喜的廣告也會讓你放下戒備心理。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          二、動效反饋商家備餐過程
          提升等待過程對于用戶體驗來說尤為重要,降低用戶等待過程中的焦慮感,才能讓用戶愿意為此停留。
           
          通過餓了么點餐之后,商家需要一定的時間完成餐飲的制作,必然需要用戶等待一些時間。在這個備餐過程中,當前界面以一個翻炒動效表達,情感化的動效不僅提示用戶當前狀態,也提升了設計表達的感官體驗。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          三、這個廣告驚不驚喜意不意外
          意料之外的廣告是帶給你驚喜還是反感呢?平臺為了提高變現能力,各種層出不窮的廣告玩法也讓你猝不及防。
           
          之前在體驗騰訊視頻 App 時,從閃屏廣告過度到 Banner 圖的過程中,經歷了多個廣告新花樣。首先從閃屏切換到自動輪播的彈窗模式,再演變到放大版的多個廣告切片(占 Banner 位呈現),最后再恢復到 Banner 的正常布局中。這個過程無疑是把廣告的存在感拉滿了,讓你對廣告的記憶形成硬性要求。
           
          無論這個廣告設計方案是否讓用戶反感,但是這個呈現的互動方式還是比較新穎的,相信廣告的點擊率必然有所提升。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          四、Banner 廣告的視覺沉浸感
          Banner 圖在產品中是非常普及的,各類形式的演變也層出不窮,產品設計師都在探索更多可能性。
           
          在騰訊視頻 App 動漫欄目中,發現一例很有想法的 Banner 表現。Banner 上面新增了一個懸浮的火焰燃燒的動效,提升了整體的氛圍感,動效與 Banner 畫面完美貼合,視覺沉浸感十足。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          五、待機狀態下的實時動態
          隨時讓用戶感受到你的存在,才能讓人感到安心,服務過程中狀態實時可見至關重要。
           
          通過餓了么點餐之后,就算處于待機狀態時,只要點亮屏幕即可看到當前出餐狀態??梢暬膱D形結合時間提醒,讓狀態一目了然,使得點餐到用餐之間的過程更有用戶可控性。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          六、小圖標里的細節反思
          產品中有很多輔助功能/信息等表達的圖標,既要能準確表達主題,也要讓用戶易于理解。
           
          在汽車之家 App 發現了一個值得反思的圖標案例,在掃一掃的圖標中結合了汽車外形輪廓,不僅不會影響掃描的功能表達,也進一步表達了該功能的差異。和別的產品掃描功能不同,這個是對準汽車進行掃描,體現出了業務的差異化。一枚小小的圖標體現出了設計師的能力,用最簡單的方式表現自身產品的差異,以此提升用戶的操作體驗。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          七、輪播式的懸浮設計
          懸浮設計非常普及,因為占比小和滑動頁面會隱藏,對用戶的干擾比較小。
           
          最近在芒果 TV 首頁發現了懸浮窗口的輪播式表達,芒果卡和活動中心會自動輪播顯示(也能手動切換)。讓我們對懸浮窗口的設計又多了一種設計理解,可以呈現更多不同內容的表達,提升了窗口的利用率。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          八、氛圍熱烈的底部標簽欄
          底部標簽欄的設計在圖標創意層面發揮較多,各類風格的圖標讓該欄目更加豐富多彩,除此之外也有在背景層渲染氛圍的案例。
           
          近期恰逢芒果 TV 十周年之際,在底部標簽欄背景層也加強了氛圍感。豐富多彩的元素和配色,結合主題化的圖標設計,使得整體氛圍感拉滿。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          九、收縮式交互設計
          通過交互方式應對用戶操作過程,特別是在滑動界面時,交互方式的優化可以降低干擾,提高當前界面的利用率。
           
          在 Blurrr App 創作界面,默認以 3D 動態圖標展示“開始創作”按鈕,當滑動界面時按鈕會收縮展示。通過收縮式的交互設計,讓界面可以展示更多內容,也不會影響用戶點擊按鈕進行創作。即通過 3D 動效加強了功能的曝光度,又通過收縮式交互提高了內容的展示空間,可謂是一舉多得的設計解決方案。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          十、形象化的進度設計
          進度設計是反饋狀態變化的關鍵,通過可視化的表達讓用戶一目了然,提高用戶對服務過程的把控。
           
          當用戶通過攜程旅行 App 訂票后,在行程訂單界面可以看到列車行駛狀態的進度提示。通過可視化的列車形象的表達了行駛狀態,讓用戶清晰的看到行駛方向和抵達站點示意。不僅信息傳遞高效,形象的表達也使得感官體驗更佳。
          優秀的設計就是帶給用戶驚喜!
           
           
           
           
          小結
          優秀的產品總能在細微之處帶給你驚喜,讓你感受到產品服務的情感化和溫度。本文觀點僅代表個人體會,希望可以和大家一起共勉。
           
          作者:黑馬青年
          本文由 @黑馬青年 原創發布。未經許可,禁止轉載。


          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTYxODE4MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          日歷

          鏈接

          個人資料

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

          存檔

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