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

          首頁

          項目不同階段 UED如何發力

          ui設計分享達人

          項目有自己的生命周期,我們作為設計師也應該學會變通,在項目的不同生命周期采用不同的設計策略,脫離現實情況空談體驗往往難以推進……
          設計的本質是解決問題,守住內核,保持匠心……

           

          文章來源:站酷   作者:小木喵


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

          深度分析動效設計原理,提升產品可用性!

          ui設計分享達人


          動效對產品的可用性體驗有多維度的影響。在界面中動效不僅僅是一種視覺裝飾,它能夠提升產品的參與度并擴展交流的范圍。

          本文追根溯源,先從動效的起源講起,一步步推進與產品、體驗之間的關系,最后通過案例分析動效設計的原理和應用。一起來看看吧~

          一、動效設計的起源

          動效與用戶體驗的結合相對較新,其根源是迪士尼動畫設計的十二個條基本原理。迪士尼動畫原理是為了講故事而提煉出的基本的物理運動規律。這些原理能讓繪制的卡通角色移動和表演,但不能充分滿足現代UI界面的交互需求。

          為了彌合這個差距,動效專家Canedo Estrada改編的《動效設計的10條原理》更適合應用到數字產品設計中。

          在圍繞界面元素建立用戶體驗時,重新定位動效原理的關鍵在于:

          • 將動效設計與UI動畫區分開;
          • 闡明動效如何幫助可用性;
          • 解開核心動效的內部工作機制。


          二、動效設計與用戶體驗

          在討論動效設計的原理之前,重要的是要強調動效不僅僅是裝飾,而是一種用來幫助用戶體驗的行為。動效設計涉及兩種基本的交互類型:實時和非實時。

           實時 

          當用戶在屏幕上點擊UI元素時,實時交互提供即時反饋,會對用戶的操作做出即時響應。

           非實時 

          非實時交互發生在用戶操作后,這意味著用戶需要經過短暫的轉場才能看到結果,然后再繼續。

          另外動效設計通過四種不同的方式來提升產品的可用性:

          1.期望:當用戶與界面交互時,他們期望看到哪些行為?動效是否符合預期或引起混亂?

          2.連續性:交互在整個體驗中是否發生一致的運動行為?

          3.敘述:觸發的動作是否與滿足用戶意圖的事件的邏輯進程相關聯?

          4.關系:UI界面的空間、美學和層級結構如何相互關聯并影響用戶的決策?動效如何影響各種元素的關系?

          三、產品動效設計原理

          這里提供12種動效設計原理的解析,每一種對應不同的案例,從更直觀的角度來解讀抽象的原理。

          1、緩動(Easing)

          緩動效果模擬了現實世界中對象隨時間加速或減速的方式。它適用于所有運動的UI元素。下圖中的卡片和對應的椅子移動速度很快,但由于緩動效果它們可以平穩地受到控制。

          2、偏移和延遲(Offset & Delay)

          當多個UI元素同時快速移動時,用戶傾向于將它們組合在一起,而忽略了每個元素自身的功能性。

          偏移和延遲會在移動的UI元素之間創建層級結構,并傳達它們相關但又不同的消息。元素的時間、速度和間距不是完全同步的,而是交錯排列從而產生一種微妙的“一個接一個”的效果。

          當用戶在屏幕之間穿梭時,偏移和延遲表明存在多個交互選項。

          3、父子關系(Parenting)

          父子關系將一個元素的屬性鏈接到其他元素中。當父元素中的屬性更改時,子元素的鏈接屬性也會更改,同時所有元素的屬性都可以相互鏈接。

          在下圖中,將父元素(藍色滑塊)的位置與子元素(燈泡發光效果&光照強度)相關聯。當父元素左右移動時,子元素的發光效果的范圍和光照強度的數值會發生變化。

          父子關系在元素間創建關系并建立層級結構,允許多個元素同時與用戶交互。因此這種效果非常適用于實時交互中。

          4、轉換(Transformation)

          當一種UI元素變成另一種形式時就會發生轉換。例如,轉換展示了下載的開始、中間和完成狀態——下載按鈕轉換為進度條,進度條轉換為完成圖標。

          從UX角度看,轉換效果告知用戶元素的狀態發生了變化并將信息傳遞給用戶,提高了用戶的認知度。

          5、數值變化(Value Change)

          數值的變化(數字、文本或圖形)在數字界面中非常豐富,從銀行APP到日歷到電商網站的各種產品中都會出現。

          在某種程度上,數據的動態表達和交流可能會對數據的價值產生影響。例如下圖中的數值被動態引入,向用戶顯示他們有能力影響數據,提升了參與活動的意愿。

          6、遮罩(Masking)

          遮罩是對界面上的部分內容進行戰略性的顯示和隱藏。通過改變元素的形狀和比例,在改變元素效果的同時允許元素本身保持可識別性。因此,照片和插圖等視覺形式是理想的選擇。

          從可用性的角度來看,設計師可以通過遮罩向用戶展示產品正在進行一系列的交互。

          7、覆蓋(Overlay)

          二維空間中沒有深度,元素只能沿X或Y軸移動,疊加在界面中創造出前景/背景相區分的位置關系。通過模擬深度,覆蓋可以根據用戶的需要隱藏和顯示元素。

          在使用覆蓋時,信息層級結構是重要的考慮因素。例如,用戶在筆記應用中首先應該看到的是筆記列表,然后使用覆蓋來顯示每個筆記的輔助選項,如刪除或歸檔。

          8、克隆(Cloning)

          克隆是將現有的對象拆分成新對象,這是一種突出顯示重要信息或交互選項的方法。

          通過克隆將元素與界面相鏈接,如果元素只是突然出現或消失沒有關聯性,那么用戶將缺乏信心去交互。

          9、模糊(Obscuration)

          想象一扇磨砂玻璃門,雖然看不清門后的東西但是我們能察覺到門后事物的存在。

          模糊的工作原理是一樣的。它為用戶提供提示,讓用戶意識到自己正在操作的界面之后還有其他的層級結構。導航菜單、密碼屏幕和文件窗口是常見的示例。

          10、視差(Parallax)

          當兩個(或更多)元素同時以不同的速度移動時會構成視差效果。

          視差的主要目的是劃分層級結構:

          • 可交互的元素移動速度更快,出現在前景中;
          • 非交互式元素移動速度較慢,退到背景中。

          視差引導用戶點擊可交互的元素,同時允許非交互的元素保留在屏幕上并保持設計的統一性。

          11、維度(Dimensionality)

          維度使界面元素具備具多個方向的交互,這種行為是使元素看起來是可折疊、可翻轉、浮動的或具有深度。

          作為一種敘述性工具,維度意味著元素的不同側面是相互聯系的,并且可以實現無縫的屏幕過渡。

          12、平移與縮放(Dolly & Zoom)

          平移與縮放通過視角的變化能產生更多空間上的體驗,逐級遞進顯示更高級別的細節。

          平移:點擊元素后發生距離遠近的平移,用戶的視點會越來越接近圖像。(一個人拿著照相機走到一朵花前面近距離拍攝)

          縮放:用戶的視角與圖像的距離保持不變,但圖像在屏幕中的比例會增加。(這個人站在原地不動,只利用相機的變焦功能使花顯得更大)

          四、總結——動效即交流

          互動體驗要求動效具備敏捷和微妙的形式。堅持動效設計原理,即使最基本的界面元素也能成為交流的復雜媒介。

          動效設計與產品用戶體驗之間的關系正在迅速成熟,而且動效跨越了二維屏幕上元素的抽象運動和3D世界中對運動的感知之間的鴻溝。



          文章來源:UI中國   作者:Clip設計夾


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


          實用的組件庫詳細制作邏輯和注意點

          ui設計分享達人

          成長到一定階段是方法論的比拼。

             17年開始進行視覺組件庫的搭建,也出過一個B/G端設計分析方法的文章總結,里面從大的方面介紹了組件。后來看到很多關于組件庫的文章,但是大都是從“分子原則”等很寬泛的方法來講,很少去細講實際搭建過程中會遇到的問題,甚至有些方法深究或者實際做下去是有問題。這里會全面的寫下sketch搭建組件庫(或者說是視覺規范)的邏輯,以及容易混淆思路的點。

                

              為了讓大家容易看完,先簡短說下制作組件庫的目的,再分三點講搭建方法。


              一 為什么制作組件庫

           

              Q1:很多人認為table、tabs等通用組件不需要再搭建,很多大廠已經出來規范,可以復用,為什么還要單獨制作自己的

              A1:這些通用組件都是由基礎的樣式粒子:填充色值、描邊大小與色值、圓角大小、文字大小與色值等組成,就拿form表單來講,不同的描邊、行高、圓角、文字樣式營造的感覺也完全不同。


              Q2:搭建后能發揮什么作用呢

              A2:統一性:避免多人多風格的現象,保證所有產品都呈現一致的設計語言,新成員加入,也可快速接手工作; 性:改一個組件,可以使用該組件的全部設計圖更改;在現有組件庫的基礎上,也可通過修改,生成不同項目的組件庫。

           

              Q3:搭建后如何確保大家都能正確使用?

              A3:需要大家了解自身項目組件庫的搭建邏輯,統一講解遠程組件庫使用方法,并有專人定期維護更新遠程組件庫。


              二 組件庫具體搭建方法

           

              分三方面說明:(一)、內容架構;(二)、注意點;(三)、遠程協作。

           

              (一)內容架構


              內容架構要考慮的是兩方面:一個是文檔的邏輯,二是組件的邏輯。三哪些制成組件,哪些制作成樣式。

           

           

           

              文檔的邏輯

           

           

              如上:點擊創建組件按鈕后,所有的組件都會出現在“圖層/組件”界面,默認的排序方式是軟件自定的,不好分類和查看,除非每次創建后再進行挪動。第二個“組件》”這個位置是不能直接切換看到組件的,只能在左側看到所有的組件名稱。再加上制作之前,也需要繪制出內容,所以我們需要在圖層處建立界面,繪制我們的內容。樣式也是如此,只能在“組件》”看到所有的樣式名稱。

          所以我們整理出:“樣式”page——所有需要創建樣式的內容在此處整理分類繪制;“components組件”page——所有組件在此處分類繪制,再進行創建;“layout 布局”page——說明系統的布局和響應方案;“examples場景模塊”典型場景模塊,“更新日志”page——標明每次變動,當然sketch是自動導出“組件”page。另外根據系統特性,比如數據統計類界面多的情況,可以增加“data visualization數據分析”page

           

              組件的邏輯

           

              很多組件庫向左圖一那樣,直接把所有組件擺了出來,非常凌亂不便使用。再對比element和antdesign,后者的分類整合地更干凈整齊,涵蓋的全面,整合后的大類別少,分類相對清晰,可以借鑒,后續有自己系統常用模塊需要制作成組件,可以單獨增加一個分類模塊。當然也可以按著自己的邏輯重新整理。

           

              哪些制成組件,哪些制作成樣式


           

              先說樣式吧:1 文字(也有些會選擇直接做成組件,但我一般會制成樣式,感覺更輕量化些);2顏色——背景色、線條色(分割線、描邊)、主色調、圖標配色、功能色;3 容器(需制作全不同狀態的容器,內容卡片、輸入框、標簽等都會用到);4投影。指的注意的是,這里的樣式基本涵蓋了所有的基礎樣式,后續大部分的基礎樣式都要盡量在在此處引用。

           

              哪些制成組件:本質上講就是兩大類,1是icon;2是其它無法用簡單樣式的常出現內容(也就是上面按“組件邏輯”整理出來的內容”

              何時需要制成復合組件:1需要通過很多基礎樣式切換才能改變狀態時候。而且通過多個樣式切換不同狀態,麻煩的地方在于覆蓋層的優先級比較高,即使切換成了同類其他組件,也還是被覆蓋,必須更新

          如下:

           

              我們可以在創建symbol后,在右側取消內部相應的樣式覆蓋,然后建立所需的多個狀態的平行組件,通過直接切換不同組件來切換狀態。

           

              2如果該組件有上一級組件,并且要用到該組件的不同狀態,就要把該組件的不同狀態改為組件,不然一層一層改很麻煩。

           

              (二)、注意點

           

              制作組件的過程中雖然按著大的架構走,還是很容易混亂或者卡住。以下注意點,可以幫助我們理清關系。這部分其實也是我重點想說明的內容。

              命名


           

           

              1無論是組件還是樣式的名稱,最后一級相平行的,最好是可以相互切換的狀態。這樣就可以在右側屬性中直接切換。

              2 組件只能切組件,樣式只能切樣式。—— 也就是說定好一個基本元素是樣式,那么與它平行的切換內容也需要是樣式。

              3 如何修改已制好的組件或樣式名稱


           

              截圖1(圖層》組件page)和2處,選中進入后,均可找到對應的修改。修改后其他頁面已放置好的組件名不被修改,反過來,在圖層處其他位置修改,亦不能修改好組件的命名。

              4 sketch里默認的分組是通過命名時的“/”,要修改組件或樣式加載時的分組,需在切換到此處,進行拖拽。修改后,組件的名稱也會被修改。

           



           

              5 要將一個元素的組件命名到一處去,理清楚如上的關系。如果遇到無法用到的基本元素搭建,需要新的元素,可放到該組的element里(如上圖)

           

              樣式或組件的修改

           

           

              樣式變化后,更新按鈕變為可點擊,點擊此處可以更改樣式,重設樣式可以還原

              組件編輯覆蓋層后在右側更新,如果想修改組件,通過編輯母版

           

              響應

           

              要考慮好響應方式,每個組件在此處做好設定

           

              (三)、遠程協作

           

              遠程原因


           

              如上,只要復制過來的新內容中有組件,就會再下面自己建立出組件,很不方便組件管理,團隊人多時,容易使組件發生變化,用遠程組件能夠做到完全統一。

           

              遠程方案


              1 藍湖



           

              無論樣式還是組件添加后,還得自己分組重新整理,組件使用方法,在“藍湖設計規范云”中找到相應的,自己拖過去用,很麻煩。

           

              2 語雀

              可以通過語雀的sketch插件上傳或者下載,加載后便是類似遠程組件的使用方法。

           

              3 sketch clould
          |

           



              單獨通過線下傳library文件加載使用,比較不容易統一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帳戶云能力創建的 Sketch的云端設計庫,使用前需要對其進行設置。使用時,打開 Sketch 左上角第一個菜單的 Preference,選擇 Libraries 卡片,將本地 iCloud Drive 中的規范文件拖拽進這個區域,然后關閉該窗口。

           

              綜上所述,我們常選sketch cloud或者 語雀的kitchen插件來進行遠程使用。另外會線下發送整個文件,方便整體復用一些組件和example里的頁面。

              

          文章來源:站酷   作者:youngLion0610


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

          深度解析設計系統

          ui設計分享達人

          你覺得設計系統重要嗎?那目前手里的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范?那怎么避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感?


          設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規范、設計模式、設計語言、設計原則有什么關系?


          設計系統

          設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。


          設計模式

          設計模式是一種經常性,可重復使用的解決方案,可用于解決設計問題,我們經常會說解決整個方案我們要運用什么樣的設計模式。


          設計語言

          設計語言是把設計作為一種“溝通的方式”,用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。


          設計原則

          設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。


          比如Airbnb的設計原則可以簡單歸納為幾點:

          設計規范

          設計規范對于設計師來說并不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。


          那是不是只要制作一套設計系統,在團隊進行擴散就可以了?那平臺的統一性就解決了?


          我曾經加入一個設計團隊,看到平臺風格不統一,當時很自豪很堅定的制定了一套平臺設計規范,從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平臺統一性指日可待,沒想到這個規范就成了我自己的規范,僅僅是我在自嗨。

          為什么已經建立設計規范了,還是沒能解決平臺統一的問題?這里延伸出另一個問題,為什么其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什么推不起來?


          那要追溯到設計體系的目的是什么?它的意義何在?

          1-建立統一的設計文化體系

          2-保證多團隊成員共同參與的項目視覺一致性

          3-提升品牌調性

          4-節省與研發人員的溝通成本

          5-將元素組件化,提升設計師和程序員的工作效率

          6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。

          7-在用戶層方面,對某產品的體驗一致性得到落實

          8-減少設計出錯率

          ……


          整體可以歸納為

          1-對內統一,對外區分

          2-管理與協作變得方便

          3-建立設計文化體系,建立品牌感

          4-減少、優化錯誤出現


          對內統一,對外區分

          規范定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別于同類競品的,比如阿里云、騰訊云,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站,各個頁面的設計差異明顯,像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。


          undefined



          管理與協作變得方便


          for Designer:

          多個設計成員協同一個產品,迭代與更改規范都能更快的同步。可以試著想象一下一個幾十人的設計團隊,如果沒有統一設計規范,那網站會變成什么樣子。


          for Developer:

          在UI還原中,設計需要經常與前端進行溝通“這里這里這樣做,那里那里這樣做”,對于每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。

          設計規范統一后,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。


          建立設計文化體系,突出品牌感

          做品牌的時候需要制定一整套VI規范手冊,那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。



          undefined


          你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎?


          減少、優化錯誤出現

          設計經常碰到設計完后需要修改一個點,然后就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。


          設計規范的意義這么強大,對網站及品牌有至關重要的作用,那為什么還會出現沒有應用起來的情況呢?

          很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規范是不是就失去了變化和新鮮感?那設計還有什么意義?開發都可以做設計的事情了。”


          這里就要看設計規范理解的深度—設計規范是分層次的,平臺規范歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本


          對無法拆分的底層基礎元素做嚴格規定

          底層基礎元素也可以說是全局樣式,比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素,給用戶一種統一的視覺形象,在跨界面、跨端、跨系統間有熟悉感,從而潛移默化地進行品牌的滲透。



          增強界面設計的靈活性和可維護性

          對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的復合組件減少過于局限的限定條件,考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態,多種可能。



          設計規范隨著業務的發展或技術的變革終究是會過時的,是需要迭代的。

          設計規范是需要迭代的,而不是我只要制作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻

          ~~希望我每天都有新衣服穿,做夢中~


          對設計體系的誤解

          設計體系最大的重要性毋庸置疑就是規范節省人力,設計師可以更多的時間去發揮創造性。


          誤解1-設計系統限制了設計師的創造力

          很多設計師覺得統一了規范,那我的創造性從哪發揮,界面都長的差不多。在設計中,設計目的是解決商業或用戶的問題,并不僅僅是為了有創意而引入新的樣式或交互方式。


          有了設計體系,統一了整體品牌風格,不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上,更多的回去關注更全局的設計策略。


          誤解2-設計系統只關乎設計,可由設計師獨立完成

          它僅僅是設計軟件上可復用的組件,所以可由設計師獨立完成,這種想法是錯誤的,是需要來自不同角色支持和參與的,這里包括前端、品牌、動態設計、 用戶研究等。


          誤解3-設計系統是一勞永逸的

          有時候會想只要完成了規范就大功告成了,其實不然,對待設計規范就像對待產品一樣,是需要維護和改進的,包括兩個方面:一種是對內部使用的開發以及同事,一種是對用戶的,應該定期收集用戶以及同事的反饋,確保及時更新迭代。


          誤解4-設計系統的重要性

          1-提高設計開發效率,最顯而易見的好處就是,組件庫的可復用性。

          比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。

          2-確保設計一致性,為用戶提供連貫一致的用戶體驗,設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。

          網站統一的視覺規范、交互體驗,會讓用戶產生一種掌控感。

          3-設計系統促進了公司內部的合作和交流,一個成功的設計系統是需要跨功能團隊參與,設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。


          那我們要如何去執行呢?

          已經了解了規范的目的/意義,那該怎么去著手呢?


          • 對于設計規范的意義要同步給設計人員,提高認知,這是一件提率的規范,規范必須落地。

          在制定規范前期,不應該是一個人規定這個規范,設計團隊的成員應積極參與,前期先把規范的基調定好,人人都參與進來了,規范也就能更好的運營,當時我就是一個人定了規范,只是單純把規范發給其他設計人員,他們沒有參與,自然不會使用規范,對里面的設計元素沒有加深理解。


          主導人

          這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力,這樣能把紕漏降到。

          undefined


          • 應用規范里的界面、交互規范必須得遵循

          大家一般說的設計規范是界面的視覺規范,從UI的定義,User Interface—用戶界面,用戶與界面之間的交互關系,可以歸納規范其實可以包含兩大類,一類是視覺規范,一類是交互規范。


          視覺規范可以給用戶傳達統一的品牌形象,確保視覺一致性。后期的設計元素須復合規范的原則。


          交互規范可以減少用戶的學習成本,讓用戶有歸屬感。交互規范在制定的過程中,需要寫好交互規則與條件,不然后期維護會混亂。像蓋房子一樣,地基都沒打穩的話,整個樓都是偏的。


          那在使用規范時,一定要遵循規范里的要求進行應用,否則會亂套,不僅起不到統一的品牌風格,反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。



          設計規范的節點

          節點和公司的進度搭邊,看當前的產品是應該先獨立風格還是先統一基礎規范。


          1-固定的設計風格規范,比如:google的“扁平”,微軟的“磁貼”,可以全局使用,并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊,定好基調,不會走偏。


          2-不斷優化的設計規范,根據公司的節奏,有些產品目前比較迫切的是需要界面統一性、交互統一性?;A做完以后,進而考慮產品固定風格。這種比較適合小團隊協作??梢噪S時調整。



          建立規范


          ·制作原理—利用粒子構成的原理與三維解構

          利用粒子構成的原理與三維解構,一個組件被科學的三維解析后由粒子再構成,理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變,高度靈活


          ·具體過程

          建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。


          ·元素是工具庫的必要部分

          并不是每個時刻都能夠直接使用完整的組件,元素是我們工具庫必不可少的部分,它可以更大的方便你修改組件,再造組件以及特殊的排版,方便拖拉拽。


          ·組件的命名規范化

          規范組件命名,方便查找、方便協作。


          協作

          一鍵導出/同步組件到Sketch模板。

          標注方面,目前我們團隊使用的是藍湖私有化。



          那是不是所有的公司都需要創建設計系統?

          一般情況下,公司有不同的產品線,且都需要長期的開發與迭代。

          公司中,越來越多的設計師加入,設計風格需要統一。


          那建立一套設計體系會面臨什么挑戰?

          設計體系里面包含了設計語言、設計規范,需要與前端、品牌、動態設計、 用戶研究等溝通,還是需要迭代優化的,這是非常繁瑣耗時的項目,初期會非常的艱難,當設計師開始做組件時,也是非常耗時的工作,需要考慮不同場景下的使用情況以及設計的延展性,都需要投入大量的設計人力。


          聊了這么多,大家對設計系統有了一定了解,建立好設計系統可以事半功倍,以此提升效率才能提升UED價值。


          思考點:

          1-對于設計團隊只有一兩個人的時候,是否需要建立設計系統?

          2-你是否愿意把時間花費在前期建立設計系統,后期更多時間用于創造性地東西?

          3-建立設計系統前很枯燥,你會怎么堅持,怎么讓設計體系價值更大化?


          文章來源:站酷   作者:瑪麗的設計筆記

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


          榜單排名數據,如何做好看?

          ui設計分享達人

          排名榜單數據在我們日常生活中經常會遇到:


          比如微博、抖、快的熱搜榜單、各省份之前的GDP對比、雙11的現場的榜單數據等等


          都會涉及到,可以說排名數據已經涉及到了我們生活中的方方面面。


          那我們應該如何做好榜單排名數據可視化呢?


          我們常遇到的榜單排名數據主要分為兩種:

          ↑ 榜單排名數據分類


          1. 一種是無數據的排名,也就是只有排名和名稱;

          2. 另外一種就是有數據的排名,也就是包含了具體的數值;



          那么,本篇文章我將按無數據的排名和有數據的排名,給大家帶來,當我們遇到榜單排名數據時,應該如何將圖做的更好看!

          總共涉及到大于15種可視化表現形式,希望能夠對你有所幫助!




          一 沒有數值的排名數據,如何做得好看?


          1 基于數字本身去做變化


          最簡單的方法,我們可以從排名的數字本身去做優化,比如將排名數字1、2、3....去做內容的填充豐富,改為TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...


          還可以基于數字本身所處的環境去做優化,比如在其底部加入填充形狀墊底,讓數字排名更突顯出來(如正方形、矩形等等)。



          通過這兩種形式,可以讓單調的排名數字有了更多的細節,內容更豐富,展示更好看。

          ↑ 基于數字本身去做優化的案例



          2 基于整體,通過形狀元素去做變化


          在數字本身變化的基礎上我們還可以加入對文字的變化,比如在文字的底部墊上形狀(如圓圈、條形圖等等)。這樣通過對數字和文字本身的設計強調,就從整體上得到了優化。

          ↑在文字底部墊上圓圈,在整體上突出設計感


          雖然排名沒有具體的數值,無法生成條形圖,但是依舊可以通過等比縮放的矩形來強調文字,比如倒立金字塔和橫向柱狀圖。

          ↑通過矩形形成倒立金字塔和條形圖,在整體來突出設計感



          3 基于內容主題傳達,來做變化


          3.1借助icon元素,來做變化

          如果排名數據內容所傳達的主題是品類、物品、或者城市,那么就可以借助icon來豐富可視化。


          3.2 借助定制插畫,來做變化

          排名的數據如果涉及的是品類中的細分物品,比如生活中常見到的吃的、穿的,用的,那么就可以使用定制插畫來豐富排名可視化。


          3.3 借助頭像、品牌LOGO、產品實景圖,來做變化

          當我們的排名數據中涉及到了人物、品牌、產品之間的排名時,我們可以通過與之對應的頭像、品牌LOGO、產品實景圖來豐富排名的可視化表現。


          3.4借助地圖,來做變化

          如果排名數據講的是省份之間的排名對比,那么我們就可以借助地圖元素來豐富排名的展示。但是如果要用到中國地圖,一定要注意使用中國標準的地圖,當然基于設計的風格,你也可以使用簡約風格,去掉地圖元素,只保留可視化的部分。




          4 借助背景設計元素,去做變化


          排名數據也可以借助視覺背景模板來做變化,比如在涉及某個主題排名榜單時(如淘榜單、星數榜單等)就可以通過背景視覺元素來突出排名。

          其實這種背景視覺模板,對可視化的要求并不高,你只需將排名通過單一表格的形式展示出來,但需要一個很強的視覺背景版來做襯托,這樣,做好一個模板,其余的榜單都可以進行復制使用了。





          二 如果排名數據包含數值,如何做得好看?

          1 基礎可視化排名數據圖


          如果數值單一,那么可以通過常規的可視化表現形式進行展示(如基礎柱狀圖、餅圖、圓圈大小、直角三角形柱狀圖、180°變形柱狀圖等等)。


          1.1 橫向柱狀圖展示

          結合第一節講到的基礎排名樣式再加上橫向柱狀圖來進行展示。這樣的排名展示形式簡單、直觀,特別適合單一排名數據之間的對比展示。


          1.2 餅圖、圓圈大小占比展示

          如果排名數據中數值所傳達的是占比,那么便可使用餅圖或圓圈大小的形式對排名數據進行展示。


          1.3 直角三角形柱狀圖(柱狀圖變種)展示

          通常我們會使用常規的豎向柱狀圖來表現數值的大小,但其實還可以對其進行一點點變形,比如將柱子的右側直角邊去掉,那么就變身成為了直角三角形柱狀圖。

          這時如果排名的文字比較多,我們還可以將排名和文字置于柱子的上方進行展示,一方面節省了空間,另一方面在視覺上也起到了美觀度。


          1.4 180°變種柱狀圖展示

          柱狀圖的變種,在《如何做出比別人好看的柱狀圖?》系列文章中有講到,大家對如何實現這種形式感興趣的可以看下之前的文章,同樣的排名數據也可以基于180°的變種柱狀圖來進行展示。


          2 將主題元素和基礎可視化排名圖進行結合

          除了基礎的可視化展示和排名數據結合外,如果排名數據所涉及的是一些主題元素(如生活中吃的、穿的、用的等等)。那么就可以將基礎的可視化和icon、頭像、產品實景圖、插畫等等去做結合來豐富可視化。


          3 使用?;鶊D來體現排名

          當排名的數據中,還多了一列數據涉及到分類, 那么就可以使用?;鶊D來進行可視化的展示(如國家屬于什么地區、公司屬于什么行業、城市屬于什么省份等等)。對如何實現?;鶊D感興趣的可以看看之前發的?;鶊D教程。


          4 排名連線圖展示

          如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。


          4 排名連線圖展示

          如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。


          5 地圖展示

          和第一節講到的地圖一樣,如果排名數據中涉及到了地理位置數據,那么可以結合地圖進行排名數據的展示。通常情況下,完成地圖可視化后,可將具體的排名信息以表格的形式羅列在地圖的空白區域內,這樣結合地圖和具體的詳細排名數據,就會更加的直觀和豐富。


          6 組合圖展示

          如果我們的排名數據維度非常的豐富,數據所包含的信息點在3個以上,那么就可以通過將多種可視化的表現來進行結合,通過組合式的可視化來進行展示。




          7 動態柱狀圖、動態折線圖展示排名


          7.1 動態柱狀圖

          排名數據也可以通過簡單的動態柱狀圖來進行展示。如果只是單一的排名沒有涉及年份的變化,那么可以通過柱子從上到下一個一個地出現來進行展示(如下圖左),如果涉及到年份的變化, 那么就可以通過柱子隨著年份的上升或下降來進行動態的展示(如下圖右)。

          動態柱狀圖的實現方法也很多,我在想做出漂亮的圖表,這12個網站不能錯過!中有講過,可以通過flourish網站(https://flourish.studio/)來快速的實現。同時如果想自己DIV得到更定制化版本的動態柱狀圖,也可以使用B站UP主見齊的開源可視化項目(http://r6d.cn/JdYy)進行實現。


          7.2 動態折線圖

          同樣的我們還可以通過動態折線圖的形式進行展示,這種表現形式主要看的是排名的趨勢變化,同樣的,借助flourish網站(https://flourish.studio/)就可以實現這種動態折線圖的展示效果。

          8 3D建模渲染可視化展示


          當然,我們的排名數據也可以使用現在市面上很火的3D可視化的表現形式來進行展示,比如隨著攝像機移動的3D柱狀圖、還有基于主題而自定義化的3D場景排名展示等等。


          8.1 3D柱狀圖展示

          將基礎的柱狀圖,通過3D立體柱狀圖的形式進行展示,排名的結果并不是啪的一下直接公布,而是隨著鏡頭慢慢地公開,對觀眾來說隨著鏡頭的視角觀看有一種慢慢揭秘的感覺!


          8.2 3D內容場景展示

          如果我們的數據,所要傳達的信息非常富有主題場景感,那么就可以通過3D場景渲染的形式進行展示,比如下圖GIF中,在表現《哪個國家上班族工作時間最長》就可以將各個國家的學生,置于一個教室中,再通過鏡頭的移動位移來進行展示。

          這種展示形式,實際投入成本還是很大的,從建模到渲染至少也需要2-3天的時間。所以最好基于一個好的選題再選擇這種形式,要不然就會出現”雖然視頻本身展示酷炫,但是由于選題不好,最終播放量不高“的尷尬情況。



          三 做好排名數據的一些小事項


          1 時間緊急時,一切從簡

          比如說,當我們在時間非常緊急的時候,排名數據如果是和地理數據相關的,那么我們會盡量避免使用地圖元素來豐富可視化,因為這會增加我們審核檢查地圖正確性的時間成本。我們可采取常規的可視化表現形式進行展示,雖然會丟失掉一些美觀度,但是正確性會有更高的保障。


          2 強調重點數據

          基于文章內容,需要在圖中重點強調某些數據時,可通過填充顏色、框選、重點信息豐富(比如展示TOP3)的形式來對排名進行強調.




          四 總結


          排名數據看似簡單,但其實所包含的展示形式和細節還是非常多的。希望當你在遇到排名數據時,這篇文章能夠對你有所幫助!

          文章來源:站酷   作者:鄒磊ZouL


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

          構建用戶畫像的流程與方法

          ui設計分享達人

          用戶畫像作為一種設計工具,可以很好得幫助設計師跳出“為自己設計”的慣性思維,聚焦目標用戶,發現核心價值,賦能產品。


          前言

          在產品研發過程中,產品、設計、研發等人員經常會提到“我們要為目標用戶設計”、“我們的用戶是誰”等字眼,可見找準目標用戶在產研過程中至關重要。用戶畫像作為一種設計工具,可以很好得幫助設計師跳出“為自己設計”的慣性思維,聚焦目標用戶,發現核心價值,賦能產品,在互聯網各類型產品中有廣泛的應用。

          本文將介紹用戶畫像概念、價值以及如何從0到1構建用戶畫像,希望閱讀后能讓大家了解用戶畫像相關理論,并有助于后續對用戶畫像的深度學習。

          什么是用戶畫像?

          目前業界常使用的用戶畫像概念有2種,一種是User persona,一種User portrait,也有翻譯為User profile。

          第一種用戶畫像,即User persona,根據Alan Cooper的《About Face》,是基于產品對真實世界的觀察,抽象出來的具有代表性的虛擬用戶模型,有時也被稱為綜合的用戶原型(Composite User Archetype)。這個概念最早由Alan Cooper在《The Inmates are Running the Asylum》(軟件創新之路)一書中提出,后續在多處書籍進行了不停的完善。

          這個畫像主要特征如下:

          1、描述一個用戶畫像包括角色描述和用戶目標

          這里角色描述是指如名稱、年齡、位置、收入、職業等,這類角色描述主要是為了使用戶畫像更豐富、真實,具象;重點關注的是用戶動機,用戶目標是其動機。

          2、可以代表相似的用戶群體或類型,也可以代表個體

          User persona是抽象的、虛擬的,代表一個典型的用戶群體;雖然也可以代表個體,但個體并不是實際獨立的個人,而是從實際觀察研究中綜合而來。

          3、須針對具體情境-具體產品的行為和目標

          User persona研究的是用戶在具體情境下對產品的使用,關注其在一定范圍內的行為、態度、能力、動機等。即使同一個角色,在不同產品下的動機也是有差異的,一般來說不輕易在不同產品間復用,需要考慮不同類產品的切入場景。

          第二種用戶畫像,即User portrait,是指用戶信息標簽化,通過收集用戶多維度的信息數據(如人口統計屬性、社會屬性、行為偏好、消費習慣等),并對其進行統計、分析,從而抽象出的用戶信息全貌,相比user persona,它更側重于數據挖掘、標簽體系搭建。

          這類畫像主要特征如下:

          1、真實性:集合了每個個體的真實信息,如既有人口統計屬性等靜態信息,也有用戶行為的動態信息。

          2、時效性:用戶動態信息并非一層不變,可以實時追蹤其變化。

          3、覆蓋度廣:既能監測到用戶感興趣的內容,也可以看到其不感興趣的內容,維度眾多,顆粒度粗細均有。

          以下是這2類用戶畫像的簡要差異對比:

          本文重點介紹第一種用戶畫像(user persona),至于如何創建數據畫像標簽及應用,會在后面的文章中介紹到,此處不再贅述。

          用戶畫像的價值

          用戶畫像作為一種設計工具,其作用貫穿產品生命周期的前中后。結合設計工作的幾個階段,畫像的價值主要有:

          1、設計前:幫助確立產品定位、目標

          2、設計中:幫助確立設計目標、設計策略與準則

          3、設計后:促進其他工作,如市場推廣、運營活動、銷售規劃


          用戶畫像的構建流程

          整體來說,用戶畫像(user persona)多采用定性的研究方法來進行角色劃分,主要可采用的資料來源有:人種學研究、情境調查、觀察法、訪談法、桌面研究等,具體實行時會根據業務情況稍作調整。

          本文結合酷家樂-快搭、贏客2條業務線經驗,梳理了從0到1構建畫像的流程與方法,如下圖所示:

          Step1:確立目標與畫像維度

          明確業務目標與用戶角色,不同的角色與目標在收集信息時有所差異,進而影響到最終得到的畫像結果。因此在做畫像之前,需要考慮清楚畫像目的。明確目標后,就可以結合目標與角色,制定出畫像信息維度。

          此處有2個注意點:

          1、通用信息有哪些?2、如何篩選出目標用戶?

          針對第一點,通用信息維度可以結合用戶畫像的構成要素,自身業務情況有選擇性的摘取。這里需要注意,to C和to B類的信息維度會有些許差異,比如to C屬性產品會關注用戶的性別、年齡、家庭情況、愛好習慣等,而to B類則不太關注這些,它們會更側重用戶的工作能力、工作內容、使用工作等等。

          用戶畫像構成要素匯總:


          針對第二點,由于是創建用戶畫像,我們需要盡可能覆蓋不同用戶。那找誰進行研究呢?這里介紹2個小tips。

          Tips1:用戶篩選條件

          尋找與業務緊密相關的產品、運營,一起討論確定用戶類型,在討論中我們會定義符合條件的用戶,得出一張用戶篩選條件表,進而根據這張表邀約用戶。

          Tips2:工作職能篩選

          針對一些to B類崗位職能劃分清楚的產品,可以基于工作職能尋找用戶。實操中需要結合實際情況,看是否需要區分管理崗與普通執行崗。

          以快搭智能設計業務線為例,在用戶畫像項目中

          業務目標:整體全面的了解用戶特征、產品認知、使用場景與痛點

          目標用戶:考慮目標是希望先對快搭工具側使用用戶有個全面、整體的認知,問卷法中D端&B端用戶有訪問&開通過快搭行為都算,而在深入挖掘場景與痛點時,結合問卷的反饋,D端和B端重點尋找活躍用戶,并細分了用戶身份類型。

          這2者結合,最終梳理出快搭的用戶畫像維度。


          Step2:確立調研方法

          確立畫像信息維度后,需要結合用戶、時間精力、經費等因素,選擇合適的調研方法以實現信息收集。常用的調研方法有3種:

          定性研究:如訪談法、二手資料研究

          定量研究:如問卷調研、數據分析

          定性+定量:上面2種方法的結合。


          每種方法如何選擇?可以從調研方法的差異性、產品所處生命周期,再結合實際時間精力、經費等情況酌情選擇。

          1、調研方法的差異性

          定量和定性是一個相對的概念,定量法著重了解“是什么”,即發現用戶做了什么,挖掘事實信息。而定性方法著重了解“為什么”,即挖掘用戶行為背后的原因,從而理解現象。

          2、與產品生命周期對應的調研方法

          新生期:這個時期產品尚未定型,目標用戶也在市場探索中,可以嘗試通過訪談法,找專家用戶或競對產品的用戶,重點挖掘TA們使用產品的場景,核心痛點是什么,以便進行MVP版本的驗證。

          成長期:這時產品已經進入用戶快速增長時期,隨著體量的變大,用戶會出現分層,暴露的問題也會越來越多,可以嘗試通過定量法進行用戶分層,再輔助定性了解每類用戶,針對性解決問題。

          成熟期:用戶體量趨于平穩,產品一方面需要維穩,持續滿足現有用戶的需求,提升產品體驗;另一方面需要嘗試突破,找到細分市場,以挖掘新的增長點。可以嘗試先定性挖掘藍海,再定量進行驗證。

          衰退期:定性了解原因,調整產品。


          以快搭智能設計業務線為例,綜合了目的、產品周期、調研方法、時間精力等因素,采用了數據+問卷+電話訪談三種方法結合。

          Step3:制定計劃與數據收集

          在明確目標與方法后,需要對整個研究進行細化,制定具體詳實的執行計劃并落地,把控整體節奏以收集有效的信息。

          例如,若使用問卷法,則需要進行問卷設計——被訪者選取——問卷投放——問卷回收。若使用訪談法,則需要準備訪談前中后的相關資料。采用不同方法,執行環節需要注意事項有所不同,可以針對性查閱相關方法的工具書、文章,此處不再贅述。

          Step4:分析資料,角色聚類

          第三步驟收集整理到有效信息后,需要識別關鍵的行為變量,將調研到的用戶與行為變量進行一一對應,并識別差異化行為模式。

          在尋找可能導致用戶間行為差異變量時,結合以往經驗,筆者總結了一下可供參考的維度。

          以行為變量為依據進行用戶對應時,不必追求絕對的精準,只要相對能映射清楚即可。梳理完后,觀察可發現某些用戶群體聚集在幾個行為變量上,它們構成了一個顯著的行為模式,由此聚類出某個角色類型。依此類推,可以發現幾個不同的行為模式。為保證全面,映射完最好遍歷一下,檢查是否有用戶或變量的遺漏。

          以快搭為例,用戶在使用智能設計工具時,行為變量可細分為:職業類型、專業技能水平、使用方式、看重因素等等,一一對應后聚類出幾大類角色類型,比如其中一類追求速度,看重整體效果;另一類,重過程,講究細節。

          除了上述方法外,針對to B類的企業級產品,當用戶的職能屬性很強時,可以將企業職能作為劃分角色類型的依據。這時,只要針對每類角色抽樣出典型樣本,保證完整性,進行調研即可。

          Step5:綜合特征,產出畫像

          完成角色聚類后,梳理每類角色的行為、目標、痛點等維度特征,形成畫像的基本框架,并對每個角色進行屬性信息、場景等詳細描述,讓畫像更加豐滿、真實。

          此時需要注意:

          1、雖然網上有提供很多畫像模板,但只是參考示例,大家需要根據自己收集到的信息,制作屬于自己業務的畫像;

          2、最好為每個畫像貼上一張符合角色特征和所處環境的照片,傳遞更加情感化的信息,帶入感更強。

          3、確立畫像優先級。根據Alan Cooper的建議,一個產品最好不要超過3個用戶角色,在得出畫像后,需要結合覆蓋人群基數大小、收益潛力、競爭優勢、業務規劃等維度去評估重要程度,定義好主要角色、次要角色、補充角色等

          4、用戶畫像作為一種設計工具,不是一層不變的,需要隨著時間推移不斷進行迭代,在產品積累了一定用戶量時,可以使用定量法進行驗證,補充優化更多維度信息。


          用戶畫像框架

          以快搭為例,某類角色-銷售型導購畫像如下:

          Step6:結合產品,畫像落地

          用戶畫像只有落地,助力產品設計,才能體現其價值,否則就是空中樓閣。

          在創建完畫像后,可以組織分享畫像結果,讓團隊內成員對服務的用戶達成共識,進而探討產品的新機會點或改進點,逐步落地到產品設計、推廣營銷中。用戶畫像在設計前中后如何應用,后續有文章進一步詳解,本文不再贅述。

          文章來源:UI中國   作者:酷家樂用戶體驗設計

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


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

          ui設計分享達人

          結合理論落地項目功能,從邏輯層面思考問題。

          1、從單復選組件反思功能設計問題


          節前有一位讀者問了一個關于單選與復選框樣式選擇的問題,大概是:

          看到很多單選與多選的設計形式,多種多樣,以前看到「圓點+圓圈」就知道是單選,但是為什么現在單選與多選的設計樣式五花八門,都沒有遵守前面這種規范呢?這些組件的樣式到底該如何確定呢?為什么會有一種模糊不清,不知道如何使用的情況?


          我發現許多人都有一個習慣,就是喜歡把某個具象的內容抽象化,把某個具體的問題概念化。

          比如認為單選就應該是「圓圈+圓點」的形式,但似乎從來也沒有任何明文規定單選就必須是這樣的形式,只不過大家看得多了,就習慣認為是這樣,覺得就是這樣規定的,但其實并沒有過這樣的規則。

          要知道,樣式常常根據功能在變化。比如功能優化了,樣式也需要進行修飾,并不是說這里有一個單選操作,就必須是「圓圈+圓點」的形式給用戶選擇。無論是在電腦還是手機上,都是一樣的道理。


          這樣去處理問題,常常會把實際的業務問題給處理沒了,最后變成控件選擇的問題,而不是功能本身的問題。

          比如普通的彈框,也是一種單選狀態,為什么不也改成下圖右邊這樣的呢?不就是操作路徑長,點擊起來麻煩,多此一舉,而且也不好看么?

          即便真的在某個場景下,非得使用上圖右邊的單選形式,那么把樣式改成下圖這樣,又有何不可呢?

          只不過常規的「圓圈+圓點」被使用得多了,大家形成了共識而已,但并不代表它就是一種標準。


          如果有一個規則規定說,單選必須是「圓點+圓圈」,那么各位目前所設計的絕大部分組件都將不能使用,包括各類菜單或開關。比如下圖這樣的 action sheet 就不應該存在,而它的出現也是因為功能屬性、設備遷移、操作形式等內容的演化所呈現的結果。

          這就是大家在處理設計問題時,習慣做一種概括,希望能復用于絕大多數場景而導致的錯誤情況,沒有落實具體問題具體分析的原則。


          包括這位讀者的問題,也是希望能夠明確單選與復選樣式的選擇問題,以便往后能夠更有條理的使用。但可惜并不是這樣,從上述我舉的控件例子可以看出,單選形式早就已經變了模樣,而多數人并沒有注意到,還在認為單選與多選就應該是圓圈與方框的形式。

          設計工具/方法論,確實是有部分指導作用,但不能作為絕對性或權威性的內容來吸收,應該辯證地去看。

          而之所以在移動端延伸出許多自定義組件(形式并沒有遵循所謂的市場常見規范),正是因為業務與功能的多樣性導致的結果。

          樣式的選擇不單單是看到的那部分,它還可以任意變化地處理,無論是單選或者是多選,不該被樣式套牢了。而它的決定因素應該是內容。


          比如,iOS 鬧鐘的鈴聲選擇,有許多可選項。

          但是因為內容的明確性,大家都知道,鬧鈴只能選擇一種,不會同時有 2 個鈴聲響起來(當然也可以這么做),所以即便鬧鈴的單選形式再如何變化,大家也都知道它是單選的,這就是功能決定了操作形式的例子。


          類似于,再如何變化選擇樣式,無論是圓圈、方框,或只有勾,甚至是其他情況,大家也都知道它就是單選。

          而之所以用勾或圓點表示被選中狀態,只不過是人的一種正常認知意識,即使改成三角形,只要能說清楚是被選中狀態,那也不是不行,只不過三角形沒有勾來得清晰罷了,而并不是因為有什么特殊含義。

          所以只要梳理出符合自己產品的「單多選」樣式,形成規范即可。一些人會感到模糊不清的原因是它本來就沒有所謂的標準,又何來的清晰呢?


          寫到這,想到之前有讀者問:什么時候該遵循設計規范,什么時候不該?

          要知道,設計規范本身就是基于某個具體產品內容所構建的一個整合標準,為了規范化存在共性的功能形式。而對于共性的判斷也應該是從功能來定義的,比如返回都在左上角類似的,但是一定么?

          單拎出來說什么時候該遵循,什么時候不該遵循,是很概念化的一個問題,不可能存在一個具體話術標準,說什么時候應該,什么時候不應該的。


          如果我回答,符合規范中已有的形式的,就遵循,不符合的就不遵循。那就是一句典型的廢話了。但除此之外,我也就不知道如何解答了,除非你把規范和具體問題發給我,我可以跟你一起討論討論。


          寫這篇文章的時候,看到一位朋友發的信息:

          為什么手機刷新都喜歡下拉?因為神經科學研究表明,這個動作,更容易讓人產生對不確定性和驚喜的期待,原理和賭場的老虎機類似。


          很多人都會習慣性給一些操作或交互形式做類似這樣的定義。

          但這么定義是不對的,因為這相當于前面說的,把業務給解釋沒了,成了形式上的討論。而為什么會使用下拉、以及下拉會有什么情況,包括它所解決的問題,都沒有任何的分析。

          比如,下拉之所以讓人上癮,并不是因為「刷新」本身。下拉只是一種交互行為,它的出現也只是為了解決早期刷新按鈕占據屏幕空間的問題,希望通過下拉進行刷新,以隱藏掉屏幕上的刷新按鈕,給屏幕留出更多可用空間。

          而采用下拉是因為它更符合人的直覺 —— 往下拉能看到更多新的內容。


          但是人之所以會對下拉上癮,并不是因為下拉這個行為,而是因為下拉能看到更多信息。下拉本身只是解決了屏幕空間的問題,而人其實是對內容上癮。

          比如我在騰訊新聞里看 NBA 的資訊,通常只會直接上滑,看下面的內容,看完了就關了,不會進行下拉刷新。

          因為在騰訊新聞里,下拉刷新的新聞并不是的內容,更多是今天或今天之前的信息,不刷新反而是剛剛更新的資訊,那么下拉刷新雖然也是刷新,但是刷新出來的內容是舊的,也并不吸引我,反而成了我要避免的操作,因為只要一下拉,的資訊就會被舊的資訊擠掉,要刷掉進程重新打開 App 才會重新再顯示的。

          所以就不能簡單的定義說「下拉刷新是一個容易讓人上癮的操作」,而是要關注內容,如果刷新的信息都是舊的,或者是用戶沒興趣的,那即便刷新了,也不會引起用戶的注意,也更不可能讓用戶上癮了。


          2、標題文案溢出使用「…」合理嗎?


          讀者:

          呆呆,這個圖的卡片列表里,標題用省略號合適嗎?

          (因為原圖涉及讀者項目隱私,所以重畫了個草圖。)

          又是一個沒有業務背景的問題。不過這個問題比較簡單,可以展開來說一下。


          通常,我們會在各類產品里面見到諸如「標題超出部分用省略號顯示」這樣的設計,譬如上面這圖。

          于是,許多人在自家產品的設計過程中,遇到此類情況,被開發問到時,也會搪塞一句:文案要是超出就「…」顯示吧。

          大多數遇到這種情況的,都是因為之前沒考慮好,才臨時想了這個解決辦法。

          而很多時候,一些產品之所以用「…」顯示,并不是因為單純地文案溢出,可能是專門設計過的。

          所以,如果簡單地認為「…」就是解決溢出而使用的方法,那就有問題了。


          下面舉幾個例子。

          有些產品,我們幾乎看不到列表視圖里的標題是有省略號的。

          因為這類產品的目的就是讓用戶讀到完整的標題信息,對眼前的內容好做判斷,從而考慮是否點進去看詳情。

          所以在設定的時候,界面中標題字數的規定,與界面樣式就已經提前規劃好了,可能在后臺設置就限定死字數,要求運營人員上新時要統一界面的展示形式。

          這種情況下,一般就不會再有省略號的問題,譬如一些知識付費類產品。

          比較典型的還有 TED 演講視頻的標題,在《設計體系》這本書里專門提到了這個案例。

          對于 TED 來說,演講標題的信息優先級是最高的,所以他們寧可保留所有標題文案,也不對文案做截斷用「…」顯示。

          因為對標題做截斷是很容易的,而難的是把一個演講主題提煉成一句簡短句子,所以他們為了展示更清晰的標題,寧可在界面上保留長標題,甚至為長標題的顯示而專門設計相符合的展示形式。

          反過來,他們也因為這一點而確定了界面上標題字數的上限,確保文案不會超過界面顯示的最大臨界值。


          包括一些資訊類產品,在標題上也會做限制,以滿足最大化呈現且不使用省略號。意思是:假設界面上文案范圍定了 30 個字符,那么配置的時候就必須 30 個字符以內把內容表達清楚,且必須完全顯示在界面上。

          所以經??吹揭恍?UGC 產品之所以會限制標題字數,原因除了常見的標題不能過長之外,還有一點是為了在列表頁就能顯示完整。

          各位在設計這類產品功能時,也要注意到這一點,而不是隨意說一個「字符不能超過 50 吧」。

          而有些產品的內容列表,之所以頻繁使用省略號,它的目的是為了引導用戶點擊用的。

          這類形式一般出現在營銷號發的文章里,多是營銷人員自己為了文章點擊率而做的。很少會有一款產品的所有內容都是這樣的,除非是一些內容產品,運營方是企業自己,為了讓產品上的內容有更多人點擊而這樣去設計,當中可能涵蓋了廣告,以此賺取廣告費。

          不過這類內容的設計已經讓用戶開始反感,所以如果不是特殊情況,最好少這樣去做。

          當然,還有同類型的,一般出現在頁面面積小且需要展示更多信息的集合類視圖,比如:

          這種形式的設計,就是因為頁面上想展示的信息太多,以至于通過這類合集來展示某個模塊里的內容,營造出一種很豐富的感覺。

          也就是利用「…」引導用戶點擊,表示信息沒有展示全,如果要看,就點開詳情,進二級頁面。


          還有一些產品的省略號,純粹就是大家理解的,溢出就省略號顯示。

          比如同樣是資訊或內容類,以文字為主的產品,雖然標題超出范圍用了省略號,但用戶基本也已經知道是什么內容(上面那個集合類視圖也是一種),且還有摘要引讀。


          比如下圖:

          這種標題字符限制在了兩行以內,多余字符用「…」展示,基本上已經是一句完整的話,能讓人大致了解這條信息的意思。并且還有部分摘要,已經足夠用戶判斷是否對它有興趣,如果沒興趣,直接刷走也無所謂。

          包括一些電商類產品,用戶多以商品圖片為主要決策因素,商品標題作為輔助信息,優先級不高,所以標題溢出是否省略號顯示也無所謂。

          這其中有一個特殊情況,就是有些產品的標題即不展示全,同時又沒有省略號,比如淘寶的商品搜索結果頁面。

          因為這類列表實質是一個產品賣點集合的濃縮詞,不是完整的一句話,多余字符展示或者不展示,都不會有太大影響,所以也不重要。


          當中我比較反感的還要數農藥了。

          好友邀請的列表視圖里,常??床蝗欠Q,因為好友會有游戲昵稱,微信備注會展示在游戲昵稱后面,以至于要點到游戲關系里先看全昵稱,再到匹配界面邀請好友。

          既然已經區分了微信好友與游戲好友,為什么昵稱上面不也加以區分呢?

          當然,經常玩的好友可能沒這個必要,畢竟頭像或昵稱都可以很快識別出來,但是偶爾一起玩的好友通過這樣的識別方式就比較難了。

          這里就是簡單提一句。


          通過上面提到的一些例子,以及不同場景下標題省略號的處理方式,相信大家對這塊的理解會比之前更深。

          同樣,對于開篇讀者提到的問題,更符合的情況可能類似于知乎這種,有完整句子,所以標題是否省略號處理也就沒太大影響。

          但具體的還是要結合業務詳情仔細考量。

          而標題內容的展示是否要用省略號處理,優先要看這條信息的業務權重,以及是否會影響用戶決策。

          所以各位在設計這類內容標題是否要用「…」顯示時,也要注意判斷自己的產品特性符合哪種類型,而不是隨意一句話,說「超出就省略號顯示好了」。


          3、怎么判斷輸入框里放不放清空按鈕?


          最近收到兩個問題,正好都與輸入框有關:一個是怎么判斷輸入框要不要放置清空按鈕;另一個是輸入框超過限制后,是禁止用戶繼續輸入,還是允許超出但會警告提示。

          在一定程度上,這兩個問題的分析邏輯是類似的,所以放到一起聊正合適。


          先看第一個問題:怎么判斷輸入框里要不要放置清空按鈕?


          原問題是這樣的:

          呆呆,我最近在優化公司的產品,遇到一個問題,就是 PM 想在聊天輸入框里加一個「清除按鈕」,可我覺得不太合適,但是說不出原因,只能說沒見過在聊天框里加清空按鈕的。這個問題要怎么判斷呢?


          我們一般會在搜索、手機號輸入框里看到類似的清空按鈕,比如輸錯了就點一下,清空后再重新輸入。但是很少會在聊天框里看到清空按鈕,為什么呢?

          主要是「時效性」…算了,這種概念詞用多了,發現現在人都不會講話了。說白話就是「要快」。

          無論在登錄注冊還是搜索的場景下,除了內容本身之外,最注重的就是效率。


          譬如有個數據大概是說,用戶登錄注冊花的時間超過某個范圍,轉化率就會對應逐步降低。而率,就是讓用戶能快速登錄注冊賬號,使用產品功能。所以設計師們會在登錄注冊的操作流程里抓住可提率的每個細節,輸入框使用效率就是其中之一。

          搜索也是一樣,當用戶有明確目的使用搜索框時,關鍵詞就是用戶當下最關注的信息,如果輸錯,再一個個刪除,顯得麻煩,所以清空按鈕能在這里提高用戶的操作效率,甚至 iOS 的搜索組件也會自帶一個清空按鈕。如果是電商產品,率是能間接提高成交率的。

          這里的輸錯,也有兩層意思,一個是用戶在輸入過程中發現錯字,比如登錄注冊時,發現手機號輸錯了,一個個刪除反而沒清空重新輸入來得快,因為刪了之后,號碼要重新背一遍,具體到某個數字,然后接著輸,特麻煩。

          或者搜索內容時,發現有錯別字,刪除某個字再重新輸入,反而沒有清空重新輸入來得快,畢竟輸入法有串聯關鍵詞組的功能。


          另一個是反饋的結果不符合用戶的心理預期。比如輸入手機號已被注冊,或者搜索結果不滿意要重新輸入關鍵詞,使用一鍵清空都是比較的。

          而且輸入之后,系統需要給用戶呈現結果,如果結果不滿足用戶預期,還會存在短時間內多次輸入與清空的情況。那么,無論是錯字還是對結果不滿意,清空按鈕都可以非常便捷地幫助用戶一鍵清除上次輸入的字段,讓用戶更快速地重新輸入新字段,從而提高用戶的操作效率。

          于是,我們會把這類場景下的「清空」說成是「一鍵清空」,主要是因為方便。而它的作用就是,在出錯的場景下,更快捷地給用戶重置的操作。


          反過來,各位可能要說:那聊天框不滿足這個條件么?


          我們接著看聊天輸入框。

          我們知道,聊天輸入框的內容不是固定的,它是根據對話內容而變化的,用戶甚至需要花時間持續輸入并糾正自己的用詞,以及話術的準確度。過程中,如果輸入的內容多,而且又是即興的,耗費的時間與精力也是很大的,清空后也難以再恢復。

          它不像登錄或搜索,固定的輸個數字串或關鍵詞,它是一段完整內容。雖然也會有某一句話或者某個詞輸錯的情況,但是一鍵清空的操作成本太低,對應著聊天框的高輸入成本,一鍵清空的存在與之并不相符。

          于是,這里就引出了一個概念,叫做「輸入成本」與「修改成本」。

          清空按鈕對應的,就是低修改成本,因為簡單點擊一下,就清空了。它所適用的場景就是低輸入成本的情況,也就是前面提到的登錄注冊或搜索 —— 輸入的內容相對固定,且可能反復。

          對于登錄、搜索等指向性比較明確的輸入框來說,用戶在乎的是輸入和反饋的效率高不高。一鍵清空操作能帶來效率上的提升,而且操作后帶來的損失成本是很低的。因此,一鍵清空操作在這個場景下,對用戶來說是安全且的。

          但是在聊天場景下,一鍵清空作為低修改成本的作用是不適合的,因為這時候輸入成本比較高。

          用戶在聊天輸入框內表達清楚自己的想法是為了讓對方理解,達到交流的目的,這樣的內容是不確定的。而且在聊天輸入出錯情況下,我們有多種操作方式讓用戶重輸,比如鍵盤快滑定位,觸摸定位錯字等,都比一鍵清空重新輸入的成本低很多,而它所謂的「便捷性」在這里意義也就不大了。


          于是乎,在衡量輸入框是否需要清空按鈕時,我們首先要知道,清空按鈕是低修改成本,那么如果輸入框的輸入成本比較低時,我們就會使用清空按鈕,來提高操作效率。而當輸入成本比較高時,一鍵清空的操作就顯得配不上這個輸入框了。所以,它在聊天框里就沒有存在的必要了。

          包括其他非固定內容的輸入框,也是一樣的道理。


          接著,延伸出第二個同學的問題:輸入框超過限制是禁止用戶繼續輸入,還是允許超出但會警告提示?


          相信各位讀完上面的,再看這個問題,應該也能分析出原因了吧?邏輯跟上面的也差不多。

          也看輸入成本,比如是固定內容的手機號,我們正常會禁止多余輸入,因為這樣用戶更容易判斷手機號是否正確。

          如果是短長文,說明用戶可能是手打字超出限制,這時候如果禁止輸入,用戶不好在輸入框里做內容刪減或修改,也會打斷用戶的輸入流,畢竟還沒寫完就限制了,那得先刪掉前面的,再來思考后面怎么寫,會亂。而且如果是復制的,禁止輸入的話,超出部分就被截斷了,也要先刪減,再繼續復制剩余部分,非常麻煩。除非先在別處刪減到限制字數內,再復制過來,但這樣又增加了用戶的操作成本。

          如果允許輸入但警告提醒,那么用戶就可以根據自己已經輸入完的內容做刪減修改。


          所以對于這個問題,我們從這個視角出發,也能了解一二,就是通過適用場景與輸入成本來分析。


          當然,以上所有內容更偏向于通用性說明,針對具體業務還需要具體分析。


          文章來源:站酷   作者:呆總、

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


          設計源于生活——淺談格式塔原理

          ui設計分享達人


          設計源于生活,本文通過生活視角溯源格式塔原理,從生活到界面設計感受格式塔原理應用在方方面面。


          一、什么是格式塔原理

          格式塔即Gestalt,是德語中“形狀”和“圖形”的意思。是基于心理學對人類視覺系統的研究,人類的視覺系統自動對視覺輸入構建結構。

          最重要的格式塔原理有:接近性原理、相似性原理、連續性原理、封閉性原理、對稱性原理、主體/背景原理、共同命運體 原理。

          下面將進行詳細分述


          視覺會把互相靠近的物體看成一組,反之則不是。

          下方示意圖中A被看作三排,B被看作三列


          【 生活中】

          無論是在看閱兵還是軍訓,我們都有所經歷,左右間距為一拳,前后間距為一臂。

          列與列之間的間距遠大于每個人之間的間距,互相靠近的則被看作一列。

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          個人中心中,同一組信息之間的間距遠小于不同組,下圖中我們明顯可以感知到7組由圖標和文字組成的信息。

          (圖片來源于網絡,僅供交流學習)


          建議

          設計過程當中可以控制元素與元素之間的間距,從而對元素進行視覺分組,就像排隊一樣,有利于元素排列更有規律,主次分明,易于用戶獲取信息。



          視覺會把相似的物體看成一組,反之則不是

          下方示意圖中顏色相似的被看成一組,顏色較深的兩個圓被看作一組


          【 生活中】

          大家都玩過跳棋,在全部棋子形狀相同的情況下,通過顏色進行陣營區分。相同顏色的棋子很容易區分被分為一個陣營。

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖中01、02、03三個圖標區域呈現不同的圖標樣式,通過樣式的相似性進行了合理分組,體現了個人中心圖標的強弱層級。


          建議

          設計過程當中可以通過制造相似性,包括:顏色、形狀、格式、質感等,使某些對象在視覺上成組。



          視覺傾向于感知連續性,而不是零散的事物

          下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊,甚至是一個X。而不是一條淺色線段,兩條深色線段


          【 生活中】

          被切開的水果我們依然可以感受到完整的樣子,一看便知這是一個完整的橙子被切開之后的樣子

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          利用連續性原理,我們將上圖中的會員等級曲線看成是完整的曲線,而不是兩段不同顏色的曲線

          利用連續性,下圖中依然可以感受到完整的一盤食物

          (圖片來源于網絡,僅供交流學習)


          建議

          設計中可以利用連續性原理,只露出部分元素暗示完整元素,或用連續性來暗示走向趨勢等。



          視覺會將敞開的圖形封閉起來,從而感知完整的物體

          下圖中我們不會將其看作三段曲線,而是很容易感知到是一個圓


          【 生活中】

          劃分停車位的時候,即使不畫出四面封閉的四邊形,我們依然可以感知到完整的四邊形車位

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖中的斷點式icon設計,即使圖形沒有完全連續,我們依然可以感受到完整的圖形

          (圖片來源于網絡,僅供交流學習)


          建議

          設計中可以利用封閉性原理合理刪減、斷點等方式增加設計感、豐富度,強化頁面趣味感、精細度



          視覺會將復雜物體解析為符合對稱規律的更簡單的物體,從而降低復雜性

          我們可以很快感知到下圖是兩個圓交疊,而不是其他更復雜的圖形,因為一對圓的復雜度遠小于其他


          【 生活中】

          河對岸的房子倒影在水面上,我們通常會最快地自動解析出水平的對稱線,將其視為上下對稱的兩組房子

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖的網頁排版,我們的視覺自動梳理出了左右對稱的規律,即使左右的顏色并不一樣,也有其他小字信息干擾。但對稱的解析方式極大地降低了頁面的復雜性

          (圖片來源于網絡,僅供交流學習)


          建議

          設計中復雜圖形可以通過簡單圖形復用得出,降低視覺理解難度。復雜的排版中可以制造對稱性,從而降低頁面的理解成本。



          視覺將聚焦部分解析為主體其余解析為背景,或改變焦點時呈現不同的主體

          大的矩形和圓形交疊時,我們傾向于把小的看作主體,矩形則視為背景。


          【 生活中】

          下圖中將深色區域視為主體時我們看到了建筑,把淺色視為主體時我們看到了五角星,在五角星中我們把美隊看作主體,天空看作背景

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖中彈窗的出現轉移了頁面的主體

          (圖片來源于網絡,僅供交流學習)


          建議

          可以通過控制主體與背景,改變用戶視線焦點,從而起到引導用戶視覺的目的。



          一起運動的物體被感知成一組或彼此關聯

          下圖中三個運動的小球被看作一組


          【 生活中】

          舞蹈表演中,通向運動的舞蹈演員被我們歸位同一組

          (資料來源于網絡,僅供交流學習)


          【界面設計中】

          背景的文字擁有一致的運動速度,因此原本零散的文字在動效過程中被我們視為同一層元素

          (資料來源于網絡,僅供交流學習)


          建議

          設計中不僅可以通過接近性、相似性,還可以通過同樣的動態特征將物體成組,減少視覺凌亂感。



          文章來源:UI中國   作者:JuneW

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

          寫給設計師看的廣告史18:麥肯與可口可樂的百年傳奇

          ui設計分享達人

          哈珀開創了廣告行業新紀元。



          無論是羅瑟·瑞夫斯提出的“USP”,還是奧格威所推廣的“品牌形象”,又或是里斯和特勞特提出的“定位”……這些都可以看成是一種單一的主張。


          而行業中成立時間更早也更大的一批元老級公司,他們并不推崇這些創意先鋒們的單一廣告主張。他們認為廣告公司要根據企業的不同,自由地從所有門派中組合出最有效果的方法。


          BBDO一位資深人士自豪地說,“你常??梢钥闯鲞@是奧格威的廣告,那是達彼思的廣告,但你無法認出哪個是我們的廣告,因為我們會去整合每個人的構想?!?/strong>麥肯則更加瘋狂。他們認為做廣告并不是它最重要的工作,他們要處理“整個營銷”的問題。


          本文便是麥肯的傳奇故事。




          一、麥肯早期的發展



          麥肯的歷史最早可以追溯到1902年成立的埃里克森廣告公司。在1930年,埃里克森與晚自己九歲的麥肯合并,合并后的新公司名稱是這兩者的組合。不過不叫埃里克森-麥肯,而叫麥肯-埃里克森廣告公司,也就是后來的麥肯世界,一般仍然簡稱麥肯。


          合并后的麥肯迅速發展,最主要是把握住了兩大先機。第一個先機是新媒體的興起。



          當時兩家公司的合并,正趕上了廣告業第一次變革。全行業正新興起一個新媒體——廣播媒體。由于無需識字,廣播收聽量遠遠超過報紙的閱讀量,當時每個家庭平均每天要收聽四個小時的廣播節目。在合并的前一年,麥肯就收購了一家廣播節目制作公司,得到一批廣播創作人才。合并后的麥肯高度重視廣播媒體,而公司的規模也直追當時的巨頭。



          在廣播之后,又興起一種有圖像的“廣播”——電視。按照人們的習慣,美國的電視臺不叫某某電視臺,而叫做某某廣播公司。盡管當時電視才剛剛起步,而且還只是黑白的,但麥肯認為電視的傳播威力有超過傳統報刊媒體的趨勢,便投入大量精力將已有的廣播業務優勢發展到電視上。到了1950年代電視占據主導地位,成為媒體之王,麥肯也水漲船高成為電視廣告業務量最大的公司。


          第二個先機是拓展海外市場。


          創始人哈里森·麥肯早在1917年就說,“海外其他國家的生活與生產水平比我們要低,所以他們的產品會以極低的價格在當地銷售,我國的制造商在海外市場將面臨巨大競爭,我國制造商在海外必須大做廣告才能在競爭中站穩腳跟?!?nbsp;


          1927年,麥肯在歐洲建立了分公司。雖然發展得十分艱難,但它還是跟隨標準石油公司的腳步,開設各地分公司,這樣廣告創作可以在當地進行,可以提高服務效率。


          第二次世界大戰使麥肯在歐洲的分公司受到嚴重威脅。倫敦分公司有人回憶,在戰爭激烈的時候,公司員工要沖上屋頂,清除燃燒彈,夜間還要輪流放哨。二戰后情況還沒有好轉,海外業務讓哈里森·麥肯很頭痛。沒有盈利,加上各國反對情緒和高壓管制,讓海外業務前景不容樂觀。不過1947的實施馬歇爾計劃,西歐各國接收美國包括金融、技術、設備等各種形式的援助合計131.5億美元。經濟的逐漸恢復,讓麥肯的海外業務起死回生,并成為海外廣告市場的領跑者。


          麥肯把握住了新媒體與海外市場的時代機遇,成為了行業中堅。不過,它帶給行業最大的驚喜,是哈珀的到來。




          二、哈珀的到來



          1939年,耶魯大學心理學專業畢業生哈珀進入麥肯公司,當時他只有23歲。


          一開始,哈珀在郵件收發室工作。心理學專業的學習經歷,讓哈珀對研究很癡迷。由于他對研究的諸多見解對公司內部有很大啟發,三年后哈珀成為文案測試部門主管,四年后哈珀又成為研究部總監。



          在研究部,他發起一個名為“因素分析”的關于廣告如何吸引讀者的研究項目,并在全公司推廣,他說服創意部,因素分析不會危及他們的創造性。


          在哈珀成為研究部門主任的兩年后,也就是1948年,32歲的哈珀被哈里森·麥肯指定為公司新總裁。哈里森·麥肯說,“他在研究領域所取得的成就,使得他對重要事實的了解獨特而有見地,而這正是一切策劃的基礎。我覺得像哈珀一樣能把研究做得有生有色的人會成為公司鼓舞人心的總裁。”


          成為總裁的哈珀聘請了多位博士加入麥肯傳播研究所,不斷研究改進廣告方法論,使得麥肯公司在廣告研究及業務應用等方面處于領先地位。


          傳播研究所擁有很多研究工具,這些工具僅從名字上就讓客戶覺得很放心。比如:相對銷售傾向測試、感知實驗室……這些金光閃閃的名字,讓人覺得廣告只要通過這些測試,就一定能獲得成功。這些測試在當時是十分創新的,比如在分析觀眾對廣告的反應時,引入眼球攝影新技術與廣告效果研究結合起來,記錄瞳孔對視覺刺激擴張程度。


          這些引領時代的研究成果,吸引了大量客戶的青睞。而哈珀并未滿足,他在多年研究心得的基礎上,創造性地提出了他對“未來廣告公司”的構想。


          哈珀對“未來廣告公司”的構想是采用平行子公司的結構組建廣告集團。這看似簡單的構想,實在是了不起的創想。集團公司在其他行業中雖然已被普遍采用,但廣告行業卻受到天生的限制,一直無法集團化運作。


          主要原因是當時廣告公司的客戶們不喜歡和競爭對手共用同一家廣告公司。這意味著廣告公司在每一個行業只能有一家客戶,他們只能為一個品牌的汽車、一個品牌的啤酒、一個品牌的計算機做廣告。如果一家廣告公司收購了另一家,那么兩家公司此前可能擁有的同一領域的兩家客戶就必須放棄一家。


          這個問題是致命的,而哈珀構想的“未來廣告公司”則解決了這個問題。




          三、哈珀發明廣告集團



          1934年,麥肯公司的大客戶標準石油公司,被一家叫馬肖爾&普拉特的小型廣告公司插了一腳。當時報刊行業利用自身的主流地位阻止新興的廣播媒體進入廣告市場,導致企業無法順利投放廣播廣告。這家小型廣告公司建議標準石油暫不投放廣播廣告,轉而贊助制作一個全新的廣播節目,這樣可以繞開廣告投放的限制,這個全新的節目在全國各大廣播上播出。由此,馬肖爾&普拉特成為標準石油在美國主要的廣播廣告代理商,然后又成為電視廣告代理商之一。


          馬肖爾&普拉特公司非常小,卻奪走了標準石油的一大塊廣告資源。這讓麥肯創始人哈里森·麥肯對此耿耿于懷,而一直琢磨如何創建“未來廣告公司” 的哈珀,卻在馬肖爾&普拉特公司那里看到一個絕好的機會。


          1954年,麥肯收購了馬肖爾&普拉特公司。但哈珀并沒有簡單地把它合并到麥肯,而是讓它成為一個單獨的公司,讓它擁有原來的名稱和客戶,甚至可以與麥肯的客戶之間存在競爭關系的客戶。哈珀跳出傳統管理方式的藩籬,以平行子公司的結構成立廣告集團。讓被收購公司獨立于收購公司運作,兩家公司的財務由集團公司來控制,而業務上則由各自獨立經營,無需放棄業務相沖突的客戶。


          這一大膽的做法震驚業界,受到業界的抨擊。也有不認可的客戶中止了合作,但最終吸引了更多的客戶。


          隨著質疑的聲音漸漸減少,哈珀的廣告集團慢慢體現出自身的優勢。集團公司擁有大量后臺人員同時為旗下所有廣告公司提供行政和財務,更重要地的是將媒體采購獨立出來,這種集團集中采購媒體的方式大大強化了自己的地位,這就能夠實現廣告行業的規模經濟。在此之前,廣告公司被視為創意經濟,很難形成規模。不要小看規模優勢,列寧有一句名言:“數量本身就是質量?!?/span>



          麥肯于1954年買下馬肖爾&普拉特公司初嘗成果之后,陸續又收購了其他一些小型廣告公司。1960年,哈珀將集團公司更名為IPG,這原本是旗下一家公關公司的名字。1971年,IPG集團上市,有了資本市場的加持,收購更加大手筆。1990年收購了著名的靈獅廣告;2001年更以21億美元將行業元老FCB納入旗下(FCB的前身是拉斯克兒和霍普金斯奮斗過的洛德暨托馬斯廣告公司)。哈珀用極具創想的方式,一手締造了自己的廣告帝國。


          哈珀締造的IPG廣告帝國,為全行業集團化發展指明了方向。麥肯這一模式后來也被其他廣告集團廣泛采用。到1990年代,全行業進入了集團化時代,形成WPP、宏盟、IPG、陽獅、電通、哈瓦斯六大廣告集團。



          這些廣告集團也像IPG一樣瘋狂并購知名廣告公司。比如WPP收購了智威湯遜、奧美、楊羅必凱;宏盟則擁有恒美、天聯;陽獅則并購李奧貝納、盛世長城。


          這些廣告集團正是用哈珀的平行子公司模式組建的。




          四、哈珀的另一個偉大想法



          在IPG集團取得成功后,哈珀的視野早就超出廣告集團之上。他又想一個新概念,這個概念不僅改變了麥肯,也改變了整個行業。


          在1950年代,由于新媒體——電視的強勢崛起,大家一致認為進入了“電視為王”的時代。但是哈珀并沒有將注意力僅僅局限在電視上,而是十分重視新老媒體的整合運作,乃至營銷傳播的整合運作。


          所以,哈珀另一個偉大的想法,就是“整合營銷傳播”。麥肯公司認為:哈珀是實事上第一個提出此思想的人,比舒爾茨教授整整早了30年,但是哈珀并沒有得到“整合營銷傳播之父”的榮耀。


          哈珀認為整合營銷傳播的目標是創作過程的核心,它是一種站在戰略高度促進創意思維的手段。在1952年,哈珀就強調,應當擴展廣告業務范圍,建立起一個能夠適應營銷活動從產品概念、產品設計一直到把產品送到消費者手中的各環節的需求的組織體系。但在傳統廣告公司結構中,這些重要形式常被廣告的風頭蓋過。它們被認為與廣告公司現有業務沒有多大關系。


          哈珀覺得需要重建廣告業務方式本身,廣告公司也應該向生產廠家一樣,研究和開發自己的產品。1956年哈珀說,“我們為客戶所做的并不僅僅是充當版面購買的經紀人或只為那些版面做設計與文案。我們為客戶做的更多,我們幫助他們特色營銷經理,幫助他們設計新產品,并安排生產?,F在我們經常參與他們的銷售會議,評估營銷方式,參與他們的高層決策。我們還要在許多與廣告不相關的領域幫助他們。”


          對于提供營銷附加服務,麥肯也早有這個傳統。早在1933年麥肯就設立了促銷部。專門為客戶制作各種促銷品,包括目錄、小冊子、掛歷等,還提供櫥窗設計、柜臺、賣場、陳列等服務,并負責直郵廣告活動的執行。在哈珀的時代,麥肯除了并購其他廣告公司之外,還成立一批專職營銷附加服務公司。包括市場研究公司、公關公司、品牌咨詢公司、銷售渠道拓展公司等。他要在原有的廣告公司之外為客戶提供全面的營銷服務。



          1960年,哈珀公開宣講要“整體性”解決營銷問題。他認為做廣告并不是他們最重要的工作,麥肯要處理“整個營銷”的問題。


          麥肯為什么要從做廣告變成處理“整個營銷”呢?喬治·帕克解釋道:“廣告公司一定要與客戶最高層做經常性聯絡。然而如果你只帶著廣告設計稿來,你就無法接觸那個階層。要接觸客戶最高層,你必須提出營銷咨詢意見?!?/strong>


          哈珀是第一個將廣告描述為營銷傳播的人,等到30年后“整合營銷傳播”才被廣泛使用,到1990年代,哈珀首創的理念仍然是廣告行業討論的重點。他幾乎以一人之力完成了行業管理模式與業務模式的升級?!皬V告集團+整合營銷傳播”也成為下一個階段行業大發展的兩大引擎。




          五、哈珀拿下可口可樂全球廣告業務



          哈珀的努力沒有白費,麥肯在1955年成功接下可口可樂的全球廣告業務。


          此時的可口可樂正面臨百事可樂日益強勁的挑戰。可口可樂營業收入下降,新任總裁比爾·魯濱遜終止與達美高長達50的合作,因為他意識到有必要進一步統籌其海外和美國本土廣告。而此時麥肯由于哈珀的前瞻性布局,已經建立起跨國業務體系,差不多是當時唯一的選擇。


          哈珀帶領團隊克服重重困難,全力以赴,匯報提案長達6小時,充分展示麥肯全球服務能力以及“整合營銷傳播”思維與市場調研強度結合起來所能達到效果的大好機會。最終贏得了可口可樂的全球廣告業務。麥肯隨即組建的可口可樂工作組,一開始就有121名職員,涵蓋了麥肯公司各個部門的職能。此外,還有20人的推銷小組被派往18個重要的食品分銷中心城市。像可口可樂這種跨國廣告業務,需要協調進行,又要適應不同的市場條件。麥肯的原則是“分散行動,集中策劃”,由一批分公司在世界各地分別運作,而總部則負責協調整個組織在全球范圍的活動。


          可口可樂在品牌史上占有重要地位,全球各大品牌排行榜,只有可口可樂一家公司從來沒有跌出過前10名。因此,我們簡單回顧一下它的歷史。


          1885年,美國頒布禁酒令,禁止銷售各類酒水,關閉各地酒館,這給酒業帶來滅頂之災。一個叫彭伯頓的藥劑師,手下擁有一家古柯酒廠。為了減少禁酒令帶來的損失,他改進當時古柯酒的配方,仍以古柯為原料,加入可樂果,經過不斷實驗,終于在1886年研制出一種不含酒精的全新飲料。



          這種冒著氣泡的飲料被魯濱遜取名為“Coca-Cola”。這個名字包含飲料的兩種主要成分,還十分押韻,得到了彭伯頓和其他股東的認可。(Coca-Cola最早的中文譯名是——蝌蚪啃蠟,導致當時進入中國的產品無人問津。后來由蔣彝重新譯為——可口可樂,這個新譯名在音譯的基礎上還具有實際含義,成為品牌中文譯名的典范。)





          魯濱遜早些年通過推銷印刷機認識了彭伯頓,入伙了彭伯頓的公司。魯濱遜不但為產品取名,還手寫了延用至今的斯賓賽體可口可樂標志,同時他策劃從零起步的廣告宣傳。1886年3月29日,魯濱遜發布了第一個報紙廣告,上寫著“可口可樂,美味、清爽”。可口可樂從此開始了萬里長征第一步。




          六、可口可樂成為美國文化象征



          最早的可口可樂是在藥房及店鋪的冷飲柜中以5美分的價格出售,由售賣者將可口可樂糖漿加冰水現場制作。



          到1899年,有兩位律師向當時的負責人阿薩·坎德勒提出建議采用瓶裝生產。這樣在沒有冷飲柜的鄉村地區,瓶裝可口可樂的銷售前景會跟城市的冷飲鋪現做的一樣好。


          但阿薩·坎德勒怕力不從心,因為“瓶裝項目有太多細節需要處理”。為了打消阿薩·坎德勒的顧慮,兩位律師做出承諾:保證瓶裝可樂不會爭搶冷飲柜的生意,而且可以擴大糖漿的銷量,還不用花公司一分錢,廣告都由瓶裝廠自己投放。最終雙方簽訂了合同,公司以每加侖1美元的價格賣給他們糖漿,允許對方使用可口可樂品牌。這個合同沒有約定有效期,也沒有約定價格是否可以浮動。這為后面雙方長期糾纏埋下隱患,但也正由于各地瓶裝廠的加盟,真正讓可口可樂全國暢銷。


          隨著瓶裝可口可樂的暢銷,各地紛紛出現仿冒品。仿冒品采用相同的筆直的瓶子,采用相同的鉆石形標簽,裝著同樣焦糖色的飲品。普通不認字的消費者常常無法分辨誰是可口可樂。


          可口可樂公司的赫希認為,應該拋棄現有大家都在用的瓶子,另外生產一種特征鮮明的新瓶子。他勸說瓶裝廠不要將眼光局限在換用新瓶的短期花費上,要生產一眼就消費者被看出的瓶子,“在黑暗中僅憑觸覺即能辨認,甚至摔碎在地上也能一眼識別”,這瓶子根本不用貼紙質商標,商標要直接印在瓶子上。



          1915年,設計師迪安以當時流行的一種裙子為靈感,設計出弧形瓶。這個瓶子手感很好,拿取非常方便,而且十分獨特,人們一眼就能看出這是可口可樂?;⌒纹亢芸毂簧暾埩送庥^專利,其他廠家不能仿制這種瓶子,這讓仿冒者們紛紛陷入絕境。此后40多年,可口可樂堅持以弧形瓶作為唯一的產品包裝。最終,弧形瓶就像手寫體的商標一樣,成了可口可樂的品牌“視覺錘”。



          弧形瓶讓可口可樂大獲成功。使得公司越來越重視品牌形象,在1931年,邀請藝術家海頓·珊布為可口可樂創造了一個全新的圣誕老人形象。他一改之前嚴肅的精靈形象,成為一個永遠樂呵呵、胖乎乎的圣誕老人。他紅色的外衣,白白的胡子,與可口可樂紅白形象一脈相承。



          圣誕老人的推廣,大大增加了冬季的銷量。此后,可口可樂的廣告不斷強化紅白衣服打扮的圣誕老人形象,圣誕老人派發可口可樂成為小孩子們的最愛。隨著強大的營銷攻勢,“可口可樂版”圣誕老人漸漸定格在了人們的腦海中,并流傳至今。


          1942年,美國參加第二次世界大戰。董事長伍德拉夫希望將可口可樂列入軍需品的行列,這樣可以隨著軍隊的步伐征戰世界,但軍方一開始并不同意。伍德拉夫召開多次新聞發布會。將可口可樂抬到“戰時休息”、“鼓舞士氣”至關重要的地位,宣講可口可樂對調整士兵狀態的意義。伍德拉夫還宣布“不管我國軍隊在什么地方,也不管公司的代價有多大,我們一定保證每個軍人只花5分錢就能買到一瓶可口可樂?!币粫r民意沸騰,最終軍方同意讓可口可樂走向前線,并幫助可口可樂在當地建廠。



          道格拉斯·霍爾特在《品牌如何成為偶像》中說,這是有史以來最成功的公關。


          可口可樂不惜工本,滿世界送可樂,無論是歐洲小鎮,還是亞洲孤島,只要5美分,駐扎美軍都能買到??煽诳蓸凡粌H緩解著戰爭之痛,更成為士兵們對家鄉的寄托。在前線,可口可樂被送到每一位士兵手中;在后方,它又印刷大量廣告來慶祝每一場戰斗的勝利。當戰爭結束時,人們對可口可樂懷有宗教般的虔誠,喝出一種民族自豪感,成為美國文化的象征。




          七、“給世界來瓶可口可樂”



          在麥肯與可口可樂合作期間最經典的作品,當屬1971年推出的“山頂”廣告。


          這支廣告教全世界唱一首廣告歌,成為前所未有的、最為流行的廣告歌曲。也是電視廣告史上巔峰杰作之一。廣告內容如下:


          在意大利的某座小山頂,兩名短發的青春少女在歌唱:“我想給世界一個家,用愛來灌溉它……”隨著歌聲悠揚,鏡頭拉遠,越來越多不同國家、不同種族的年輕人加入歌唱隊伍。歌聲越來越洪亮,匯成美妙的合唱:“我想讓世界學會歌唱,人們和諧歡暢……”最后成百上千不同種族的年輕人齊聚山頂,每個人手里捧可口可樂,仿佛手擎著一面旗幟,高聲歌唱:“我想給世界來瓶可口可樂,讓它永遠陪伴我的快樂!” 



          這個廣告先在歐洲播出,不溫不火。但在美國一播出,迅速引起巨大轟動,沒有人對可口可樂誓志拯救世界感到荒謬,人們紛紛點播這首廣告歌曲,寄來超過10萬封信函索取樂譜,可口可樂公司將歌曲唱片贈送給索取者們。這首廣告歌去掉了中間的商品信息后,被重新錄制成一首單曲,在各大電臺播出,最終登上一些音樂排行榜冠軍寶座?!都~約周刊》寫道:“這是肯定會紅火的潛意識廣告。”雖然歌詞中沒有提及可口可樂,但是每個人只要聽到這首歌,都自然會想起可口可樂。


          這個創意據說源自麥肯創意總監比爾·巴克爾。他乘坐的航班,因為重霧而在香農機場迫降。原本要乘坐飛機的旅客們,不得不擠在條件簡陋的旅館房間里熬過一晚。人群中到處彌漫著憤怒與不滿。第二天早晨,在等待航班放行時,令人意外的一幕出現了,前天晚上情緒最激動的那些旅客,正一起邊吃著零食喝著可口可樂,邊“吐槽”開著玩笑,怒火似乎已被手中的可口可樂澆滅,平靜放松下來了。比爾·巴克爾回憶道:“那一刻,可口可樂的意義早已超越了一瓶飲料。它是把人們聯結在一起的紐帶,是提供陪伴的一劑良方。”之后就創作出“我想給世界來瓶可口可樂”的廣告歌曲。


          不過,提出“文化品牌戰略”的道格拉斯·霍爾特認為“山頂”廣告巨大成功的關鍵,并不是廣告公司所說普通人的陪伴良方,而是可口可樂緩解當時激烈的種族文化沖突。


          在二戰后很長的時間內,可口可樂一直擁有美國文化象征的這份殊榮。然而到了20世紀60年代,美國爆發民權運動,美國黑人民眾為獲得平等權利而進行斗爭達到高峰,引起強烈的文化沖突。民權運動的吶喊,撕碎了原有的民族團結,可口可樂原有的品牌力量隨之消減。


          在這個背景下,“山頂”廣告吸收了嬉皮士反文化的形象與和平運動的內容,認識到當時充滿沖突的社會現實,呼喚對人性的理解和容忍。廣告中溫暖人心的歌詞和朗朗上口的旋律,以及一群不同膚色、不同國籍的年輕人共唱“給世界來瓶可口可樂”,這一“世界大合唱”告訴人們:想平息看上去十分激烈的社會沖突,最簡單的方法莫過于拿起一瓶可口可樂。



          麥肯公司的李·塔利認同道格拉斯·霍爾特的觀點,他說:“百事可樂更擅長定位,只瞄準一個市場——二戰結束后的嬰兒潮一代年輕人。而我們努力使可口可樂成為適合所有人的東西,這樣做反而使我們迷失了方向,并且不記得自己本該有的形象?!?百事可樂保持與充滿活力的年輕人市場同步前進的策略讓可口可樂一度十分被動。麥肯公司連續三年進行深入調查,最終確認可口可樂的主要作用是作為社會催化劑,聯結人們情感的紐帶。


          可口可樂作為聯結情感的紐帶,通過象征性地化解美國社會中尖銳的文化沖突,增加了人們的凝聚力,也增加了人們與可口可樂之間的情感紐帶。難怪有人說:“無論膚色是白是黑,也無論是總統還是平民,我們喝的都是相同的可口可樂?!?/span>


          可口可樂這種“平等”性,捍衛了自身作為美國文化象征的殊榮,這一超然地位,讓可口可樂在大多數的時間里,始終壓住百事可樂一頭。




          八、可口可樂引發的危機



          時間來到1985年,可口可樂發生了史上最大危機。


          此次危機讓人們發現:盡管可口可樂是一個超級品牌,但卻沒有一個成體系的品牌理論來指導實踐,以至發生此次危機。


          從這次危機后,品牌理論成為全行業關注的焦點,迅速構建起品牌理論的大廈。


          文章來源:站酷  作者:趙義

          淺談服務設計與應用

          ui設計分享達人

          本文通過結合日常生活中的案例,來淺談什么是服務設計及服務設計的應用場景

          來自項目《云樂匯兒童玩具租賃服務設計項目》

          來自項目《云樂匯兒童玩具租賃服務設計項目》



          來自項目《云樂匯兒童玩具租賃服務設計項目》



          文章來源:站酷   作者:Amy_Zhanku

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

          日歷

          鏈接

          個人資料

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

          存檔

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