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

          首頁

          花了很多時間做設計分析,但對畫稿子沒什么幫助?

          ui設計分享達人

          如何產出一個對實際落地更有指導性的設計分析?本文結合實際項目中常常會遇到的一些問題,總結了前期設計分析的一些實踐經驗。

          設計分析是作為交互設計師必備的一項基礎能力,一套有效的分析思路可以幫助我們找準設計發力點,更效率的推導出合理的設計方案,它是一種思維能力,也是一種方法工具,但是在我們的實際項目中,常常會遇到這樣幾種場景:

          • 新手設計師或者第一次做活動的設計師,設計分析不知道要如何入手

          • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

          • 分析過程中發散了很多很好的點,但最后大多都落不了地

          這些情況常常會導致設計分析流于形式,套用了很多方法、花了很多時間、輸出了很長的文檔,內容看上去似乎很豐富,但落地的方案卻平平無奇,甚至也會自我懷疑設計分析真的有用嗎?

          總結下來,會出現這些場景的原因有兩點:首先是設計分析太泛,沒有聚焦到核心問題;其次是時間分配不合理,沒有抓到發力重點。那么結合我們目前的項目來看,怎樣做一個更有用的設計分析呢?

          活動中常見的項目類型

          根據活動產品化設計思路,可以把我們的日常項目分為兩類:迭代型項目以及探索型項目。

          迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經比較固化的經典業務,或基礎的功能類業務;探索型項目則是一些全新的業務方向,例如下沉會場、直播會場等等,剛處于進入期或成長初期。

          undefined

          如何完成一個有效的設計分析

          1. 迭代型項目

          迭代型項目容易陷入的一個誤區是時間分配不合理,沒有抓到發力重點,尤其是對于很多新手設計師來說,往往大部分的精力花在重復之前已經做過的內容,比如花了很多時間重新去分析用戶、分析方向、分析行業趨勢等等,但是對于已經比較穩定的迭代型項目來說,這部分背景內容相對來說已經比較固化(除非有明顯的變化),這就可能會導致重復分析出來的結論跟之前的差別并不大,也很難帶來實際業務提升。

          undefined

          既然迭代型項目過往已有過經驗和策略的沉淀,也經歷過多輪的數據迭代,核心思路應該是先定義要解決什么問題、然后才是如何解決,這樣才能找準關鍵發力點。

          要解決什么問題

          首先要思考是不是真的有問題,沒有問題的項目也可以不用再花時間做分析,效率做即可,例如像全部會場,本身的業務模式就比較簡單,過往的效果也相對比較穩定,如果不考慮進行突破性的創新,通常是可以效率復用的,這種時候則不需要再去做分析,畢竟也要考慮投入產出比。

          那么怎么定義要解決什么問題呢?有三個常用的思路:看數據、看用戶反饋、看運營策略。

          第一,從數據分析中找到關鍵問題,例如根據618的項目數據復盤,我們發現預售會場、品牌會場的頁面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進行分析,從而推導出更有針對性的設計策略。

          undefined

          第二,根據用戶反饋來找到關建問題,例如過往的主會場,用戶調研一直都會反饋主推樓層太長而找不到感興趣的內容,那么可以圍繞“如何更好的進行需求匹配?”“如何提升屏效?”來思考和分析,解決實際存在的問題,才更有可能提升體驗和數據。

          undefined

          第三,結合運營策略,很多業務雖然已經相對穩定,但隨著每次大促戰略的變化,運營策略上也會有一些新的需求,那么就根據這些差異化的訴求去找到發力點。例如針對我的專屬會場,在原會場定位不變的情況下,在近兩次大促中運營側都提出需要由這個會場來承載平臺服務內容曝光的訴求,那么服務內容如何匹配“專屬”會場的用戶心智,則是這個會場可以重點解決的問題。

          undefined

          如何判斷真正有效的解決方案

          在定義清楚核心要解決的問題后,就可以按照常用的設計方法進行方案的推導,在發散解決方案的過程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們設計分析有價值的關鍵,因此總結了兩個常用的技巧。

          首先要理解業務邏輯,減少無用的策略發散,很多時候我們的方案很難推動落地的原因,是沒有考慮到業務的訴求,越能夠深入的了解業務,才能更好的解決業務側的顧慮,保證方案的可落地性。

          其次是要跳出來從整體來看優先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節,有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關注到整體優先級,因此要學會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

          2. 探索型項目

          探索型的項目沒有過往的參考依據,相當于需要從零開始去探索如何做,對于設計分析的能力要求會更高,那么常常容易陷入兩種極端相反的誤區,要不就是容易被方法論套路,設計分析過泛但得不出實際有價值的結論,要不就是完全沒有頭緒,屬于想一步做一步的類型,分析的內容之間缺乏邏輯。

          undefined

          因此,探索型項目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過程一樣,需要先定義交互框架,縱再進行交互細節的打磨,才能夠保證設計效率及效果。

          確定分析框架

          確定分析框架的過程主要分為兩步,一是先想清楚要分析哪些內容,包括哪些環節是必要的,哪些是重點的,時間要怎么分配。例如當我們第一次做寵物品類活動時,需要對這個品類有深入的理解,因此我們在前期需要去分析養寵人群的特征、寵物行業的發展現狀、京東寵物貨品的優勢等內容,而如果我們做的是一次大促的綜合會場,其主要用戶群體如果跟常規站內主流群體并無差異時,則不需要再花費大量的時間單獨去分析用戶畫像,因此,需要結合項目情況先想清楚需要分析的內容、以及這些內容的必要性和優先級。

          undefined

          第二步是梳理清楚內容之間的邏輯關系,常見的邏輯結構有兩種,一是遞進式的推導(A→B→C),分析維度之間是先后關聯的,通過嚴謹的邏輯步步推導而來,例如先梳理用戶畫像、才能進行用戶行為痛點的分析、進而推導解決方案;另一種邏輯結構是進行綜合歸納(A+B→C),即通過幾個不同的維度綜合推導,例如經典的五導家分析方法,結合用戶目標以及業務目標綜合推導出設計目標。

          undefined

          在很多設計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應用。以下是根據我們日常項目梳理的一些常用分析框架。

          undefined

          縱向深挖如何得到有價值的策略

          有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

          首先,策略要足夠具體、有差異化,盡量避免提出過于籠統的結論。例如針對如何提升流量利用率比較泛的策略就是要進行流量精細化運營,這個大的方向沒有錯,但如果只到這一步是很難指導具體內容落地的,所以需要細化到流量的渠道有哪些、這些渠道有什么樣的特征、針對不同的渠道用戶可以用怎樣的內容吸引他們,才能夠更準確的判斷是否會存什么問題。

          其次,策略最好能夠關聯驗證指標,可以參考UGD數據增長思路,在推導策略時要能預判它能帶來哪些數據指標的提升,以保證設計分析的結論是有理有據的。


          文章來源:站酷   作者:大蔥設計

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

          花了很多時間做設計分析,但對畫稿子沒什么幫助?

          ui設計分享達人

          如何產出一個對實際落地更有指導性的設計分析?本文結合實際項目中常常會遇到的一些問題,總結了前期設計分析的一些實踐經驗。

          設計分析是作為交互設計師必備的一項基礎能力,一套有效的分析思路可以幫助我們找準設計發力點,更效率的推導出合理的設計方案,它是一種思維能力,也是一種方法工具,但是在我們的實際項目中,常常會遇到這樣幾種場景:

          • 新手設計師或者第一次做活動的設計師,設計分析不知道要如何入手

          • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

          • 分析過程中發散了很多很好的點,但最后大多都落不了地

          這些情況常常會導致設計分析流于形式,套用了很多方法、花了很多時間、輸出了很長的文檔,內容看上去似乎很豐富,但落地的方案卻平平無奇,甚至也會自我懷疑設計分析真的有用嗎?

          總結下來,會出現這些場景的原因有兩點:首先是設計分析太泛,沒有聚焦到核心問題;其次是時間分配不合理,沒有抓到發力重點。那么結合我們目前的項目來看,怎樣做一個更有用的設計分析呢?

          活動中常見的項目類型

          根據活動產品化設計思路,可以把我們的日常項目分為兩類:迭代型項目以及探索型項目。

          迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經比較固化的經典業務,或基礎的功能類業務;探索型項目則是一些全新的業務方向,例如下沉會場、直播會場等等,剛處于進入期或成長初期。

          undefined

          如何完成一個有效的設計分析

          1. 迭代型項目

          迭代型項目容易陷入的一個誤區是時間分配不合理,沒有抓到發力重點,尤其是對于很多新手設計師來說,往往大部分的精力花在重復之前已經做過的內容,比如花了很多時間重新去分析用戶、分析方向、分析行業趨勢等等,但是對于已經比較穩定的迭代型項目來說,這部分背景內容相對來說已經比較固化(除非有明顯的變化),這就可能會導致重復分析出來的結論跟之前的差別并不大,也很難帶來實際業務提升。

          undefined

          既然迭代型項目過往已有過經驗和策略的沉淀,也經歷過多輪的數據迭代,核心思路應該是先定義要解決什么問題、然后才是如何解決,這樣才能找準關鍵發力點。

          要解決什么問題

          首先要思考是不是真的有問題,沒有問題的項目也可以不用再花時間做分析,效率做即可,例如像全部會場,本身的業務模式就比較簡單,過往的效果也相對比較穩定,如果不考慮進行突破性的創新,通常是可以效率復用的,這種時候則不需要再去做分析,畢竟也要考慮投入產出比。

          那么怎么定義要解決什么問題呢?有三個常用的思路:看數據、看用戶反饋、看運營策略。

          第一,從數據分析中找到關鍵問題,例如根據618的項目數據復盤,我們發現預售會場、品牌會場的頁面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進行分析,從而推導出更有針對性的設計策略。

          undefined

          第二,根據用戶反饋來找到關建問題,例如過往的主會場,用戶調研一直都會反饋主推樓層太長而找不到感興趣的內容,那么可以圍繞“如何更好的進行需求匹配?”“如何提升屏效?”來思考和分析,解決實際存在的問題,才更有可能提升體驗和數據。

          undefined

          第三,結合運營策略,很多業務雖然已經相對穩定,但隨著每次大促戰略的變化,運營策略上也會有一些新的需求,那么就根據這些差異化的訴求去找到發力點。例如針對我的專屬會場,在原會場定位不變的情況下,在近兩次大促中運營側都提出需要由這個會場來承載平臺服務內容曝光的訴求,那么服務內容如何匹配“專屬”會場的用戶心智,則是這個會場可以重點解決的問題。

          undefined

          如何判斷真正有效的解決方案

          在定義清楚核心要解決的問題后,就可以按照常用的設計方法進行方案的推導,在發散解決方案的過程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們設計分析有價值的關鍵,因此總結了兩個常用的技巧。

          首先要理解業務邏輯,減少無用的策略發散,很多時候我們的方案很難推動落地的原因,是沒有考慮到業務的訴求,越能夠深入的了解業務,才能更好的解決業務側的顧慮,保證方案的可落地性。

          其次是要跳出來從整體來看優先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節,有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關注到整體優先級,因此要學會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

          2. 探索型項目

          探索型的項目沒有過往的參考依據,相當于需要從零開始去探索如何做,對于設計分析的能力要求會更高,那么常常容易陷入兩種極端相反的誤區,要不就是容易被方法論套路,設計分析過泛但得不出實際有價值的結論,要不就是完全沒有頭緒,屬于想一步做一步的類型,分析的內容之間缺乏邏輯。

          undefined

          因此,探索型項目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過程一樣,需要先定義交互框架,縱再進行交互細節的打磨,才能夠保證設計效率及效果。

          確定分析框架

          確定分析框架的過程主要分為兩步,一是先想清楚要分析哪些內容,包括哪些環節是必要的,哪些是重點的,時間要怎么分配。例如當我們第一次做寵物品類活動時,需要對這個品類有深入的理解,因此我們在前期需要去分析養寵人群的特征、寵物行業的發展現狀、京東寵物貨品的優勢等內容,而如果我們做的是一次大促的綜合會場,其主要用戶群體如果跟常規站內主流群體并無差異時,則不需要再花費大量的時間單獨去分析用戶畫像,因此,需要結合項目情況先想清楚需要分析的內容、以及這些內容的必要性和優先級。

          undefined

          第二步是梳理清楚內容之間的邏輯關系,常見的邏輯結構有兩種,一是遞進式的推導(A→B→C),分析維度之間是先后關聯的,通過嚴謹的邏輯步步推導而來,例如先梳理用戶畫像、才能進行用戶行為痛點的分析、進而推導解決方案;另一種邏輯結構是進行綜合歸納(A+B→C),即通過幾個不同的維度綜合推導,例如經典的五導家分析方法,結合用戶目標以及業務目標綜合推導出設計目標。

          undefined

          在很多設計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應用。以下是根據我們日常項目梳理的一些常用分析框架。

          undefined

          縱向深挖如何得到有價值的策略

          有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

          首先,策略要足夠具體、有差異化,盡量避免提出過于籠統的結論。例如針對如何提升流量利用率比較泛的策略就是要進行流量精細化運營,這個大的方向沒有錯,但如果只到這一步是很難指導具體內容落地的,所以需要細化到流量的渠道有哪些、這些渠道有什么樣的特征、針對不同的渠道用戶可以用怎樣的內容吸引他們,才能夠更準確的判斷是否會存什么問題。

          其次,策略最好能夠關聯驗證指標,可以參考UGD數據增長思路,在推導策略時要能預判它能帶來哪些數據指標的提升,以保證設計分析的結論是有理有據的。


          文章來源:站酷  作者:大蔥設計

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

          辭典精譯 | 怎么做響應頁面?柵格系統來幫忙!

          ui設計分享達人

          柵格系統知識點 


          使用柵格系統很有幫助,它有助于在不同布局之間保持一致性,并加快設計決策的速度。柵格可更地控制不同屏幕尺寸之間的對齊方式及布局。本文重點介紹響應式柵格的重要知識點,以及產品設計師如何在設計工作流中調整柵格。


          柵格結構

          柵格由3個主要組件構成,包括列、槽和邊距。

          列是虛構的垂直塊,用于對齊內容。我們用百分比(%)或固定值定義列寬。


          柵格中的列


          它是列與列之間的空間,有助于分隔內容,我們將槽的寬度定義成固定值。


          柵格中的槽


          邊距

          邊距是內容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值,該值決定每個屏幕尺寸的最小空間。彈性邊距指的是列,槽和側邊距組成柵格后剩下的空間,它會根據不同的屏幕尺寸而變化。


          柵格中的頁邊距和靈活邊距


          如何使用柵格設計界面?

          信息內容(圖像,文本或UI元素)常常會被放置于可見和不可見的內容塊中。可見內容塊具有明顯的邊框或填充區,而不可見內容塊則不具備,多數是透明底??梢姷母讣墐热輭K包括卡片,橫幅等組件。


          卡片形式的可見內容塊


          不可見的內容塊包括文本或功能按鈕。


          內容塊應與列的邊緣對齊,避免與槽邊緣對齊。內容塊中的信息是獨立的,不一定非要與列對齊。


          內容塊的列對齊


          列結構

          用于構成柵格的列數稱為列結構。8、12、16和20是用于響應式布局的一些最常見的列結構,設計師可以根據設計要求選擇具體結構。


          8/12/16/20列柵格結構


          12列結構是最靈活的,它可以進一步分解成為4–4–4或3–3–3–3大小的內容塊。


          響應點

          當屏幕尺寸到達響應點,那么頁面布局也會有對應更改,以實現最佳的布局視圖。列結構,列寬,槽寬度和邊距都取決于響應點。內容塊則根據不同的響應點堆疊或縮放,以重新調整獲得最佳視圖。


          柵格縮放和堆疊


          如果較小的屏幕具備足夠空間來呈現,其實縮小比例就能展示完整了。如果屏幕實在是太小,就會垂直堆疊成一列。


          柵格的呈現類型

          柵格有3種呈現形式,一起來看下吧!

          固定柵格

          固定柵格有固定寬度的列以及頁面邊距,且固定的柵格具有固定的內容塊寬度,該寬度在響應點范圍內不會出現變化,并且頁面邊距會占據剩余的空間。


          固定寬度柵格


          流動或全寬柵格

          流動柵格列的寬度是不定的,但槽和頁面邊距都是固定的。流體柵格具有靈活的內容塊寬度,該寬度根據屏幕大小來變化。流體柵格中,列會隨著可用空間變大或是縮小。


          流動柵格


          混合柵格

          混合柵格同時具有流動寬度和固定寬度。在現代布局中,一些元素會完全脫離柵格。常見的例子比如頁眉,頁腳,或是出血的圖片內容塊。


          混合柵格


          如果內容塊寬度大于可用的屏幕尺寸,則固定柵格會轉變為流動柵格來適應屏幕。


          如何在原型制作工具中設置柵格系統?

          電腦視窗

          不要以1440×900、1600×900或1920×1080等高分辨率進行設計。1280×800是電腦端內最小的分辨率,以1280×800設計的流動與固定寬度的布局都可以適應更大的屏幕。


          固定寬度柵格設置

          要設置固定寬度的柵格,我們對槽和列都應固定好數值。建議設置列寬為74px、槽寬32px以及16px的邊距。


          固定寬度柵格設置


          列寬74px、槽寬32px可以生成1240px的內容塊寬度(不包括兩端的16px側邊距),最大化的利用了可用屏幕尺寸。在不同的響應點,固定內容寬度大于當前屏幕尺寸時,則固定寬度柵格開始變為流動柵格。


          流動柵格設置

          要設置流動寬度柵格,對槽使用數值,對列使用自動計算的值(以%為單位)。


          流體布局柵格設置


          流動柵格利用整個屏幕尺寸作為主要內容的寬度,每側留出16px的側邊距。


          移動視窗

          在移動端使用流動柵格,槽和頁邊距的寬度推薦設置成16px。因為移動設備的屏幕分辨率較小,若再分成12個獨立的列、槽和邊距的話,設計起來也會很麻煩。


          移動端的流動柵格設置


          因此,我們將3列中的每列合并以創建4個粗列,從而使布局柵格既簡潔又方便,快速對齊。


          平板視窗

          平板設置柵格的方式與移動設備非常相似,推薦槽寬和邊距分別設置為32px與16px,可以在768×1024大小的畫板上為平板設計界面。


          平板電腦流動柵格設置


          將12列優化成6列,讓柵格清晰明了,谷歌的材質設計曾建議使用24px寬的槽與頁邊距,實際應用時,不妨都試下看哪個效果更好。


          布局樣式

          柵格布局的變化決定了主要內容的結構,針對不同的布局要求,使用不同的柵格系統,而頁面中的內容塊數量決定了頁面布局的變化。


          單列布局

          單列布局或全寬布局,是著陸頁和首頁的風格之一。還可以合并12列來創建一個單列內容塊,也可以將12列分配到父級內容塊中。


          一級頁面常應用單列或全寬柵格布局


          雙列布局

          該布局有兩個內容塊。通常,其中的一個內容塊會占據比較多的區域進行信息展示。



          在雙列布局中,列要么分布在9–3或8–4父級內容塊中,其中的一個組合列區域,用來創建主要內容。帶有單個邊欄的界面是兩列布局的常見呈現形式。


          三列布局

          三列布局具有三個內容塊,主要內容塊占據最大的展示區域,在三列布局中,列分布在3–6–3或2–8–2父級內容塊中。


          固定寬度的側邊欄布局

          固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應點范圍內固定,剩余空間由固定寬度或流動寬度的內容塊占用。


          側邊欄固定布局


          移交開發

          在原型工具中,設計布局和編碼有很大的不同。代碼可以合并列或將其堆疊,比如合并12列以創建單個列布局,或將12列分布到一組,用來創建不同布局變化的內容塊。在原型設計工具中設計布局時,你需要確保開發人員清楚了解電腦端,移動設備和平板設備上設置的列寬、槽寬及邊距。像Bootstrap,Zurb Foundation等開發軟件,其中對柵格值的設置會有出入。


          自定義柵格


          設計師可以多嘗試不同的柵格值設置,以找到最適合自己的呈現形式。如果交付開發的時間非常緊急,請使用文中建議的數值,更保險也不會出錯。


          文章來源:站酷   作者:UX辭典

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

          通知系統的設計規則 | 深度解析

          ui設計分享達人

          本篇文章從通知模塊的組成部分,到通知模塊的設計規則,進行了一個詳細的講解,幫助讀者更好理解對于通知的設計。

          我們通過門鈴聲兒得知門外有人來訪,也能通過電話鈴聲得知正被人呼叫。短信通知也有著類似的作用,包括各類產品的消息推送。


          但不同的是,消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大,包括短信現在也大多是垃圾信息。


          而且,通知越來越多地通過各種方式去觸達用戶。比如消息未讀的紅點提示,或者顯示消息的數字統計,以及手機使用過程中的頂部提示與聲音或震動的提醒,等等。


          但我們還是無法抑制點擊圖標的沖動,這僅僅是因為它具有未讀的計數或紅點提示,即使我們已經知道當中的內容并不重要。


          而我要說的是,當通知內容變得次要且被濫用之后,它仿佛成了一種違背設計原則的功能 —— 中斷用戶當前行為。因為它打破了用戶與產品之間的層級關系,破局至產品之外來吸引用戶的注意力,這是一個非常打擾的行為。如果我在看書,突然收到一條并不重要的消息,那我一定會非常反感。


          所以,為了不被「紅點」支配,以及不讓通知所打擾,我會把手機里所有產品的消息推送都給關了。


          但是,以上內容并不能說明通知的無用論。同樣有許多用戶還是沉迷于通知的使用上,它所控制的是用戶對于某個產品的控制欲,擔心錯過某條消息,就好像我在豆瓣寫了篇隨筆,就想看別人給我點贊評論的消息,但我又不可能一直盯著,所以通知這時候就起到了一個很好的作用。


          以至于對于優秀的產品人或設計師,包括運營來說,利用好通知,就能掌握用戶心理,巧妙的將用戶留在產品中。它們甚至有助于與打算放棄產品的用戶建立聯系并促進互動。


          那么,我們應該如何更合理的設計通知呢?下面我們通過「通知的組成部分」以及「通知的使用類型與規則」來詳細做一次拆解。


          通知的組成部分


          關于通知的簡單定義:它是一種吸引用戶注意的功能模式,讓用戶獲悉新事件的信息動態。產品將其發送給用戶并與用戶產生交流。


          因此從這個定義中我們可以知道,通知有兩種形式,分別是被動只讀型和操作反饋型


          被動只讀型,是指該信息可讀,但不可進行操作;操作反饋型,是指用戶可對該通知進行操作,如某寶訂單支付成功后的地址信息確認通知。


          所以在梳理組件的時候也要注意掉這個差異。


          1.消息中心

          這里的消息中心,是一個信息匯總中心,但并不一定是信息來源。意思是,信息來源可能是有很多用戶在你的文章下面點贊了,而這個點贊行為被匯總到了消息中心,再用消息中心指引作者去到文章頁面查看具體詳情。


          所以它是一個匯總表。但也有可能它就是信息來源點,比如一些系統通知,告知要升級,因為它沒有其他功能可承載,所以只會在消息中心里出現。


          或者類比 iOS 系統的通知中心,如果通知是 App 推送的,那么它會指引用戶進入某個 App;如果通知是系統行為,如勿擾模式,「6:00 前來電和通知將會靜音」這個通知,是只可在通知中心進行操作的。想要更改,就需要手動打開設置。


          2.通知指示符

          它可以是點,也可以是計數器,只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數人養成強迫癥的罪魁禍首。


          3.信息標題

          它主要是指該信息來自于誰或屬于什么子類型,比如用戶互動點贊消息,評論消息,系統消息等等。用戶可以通過標題來獲悉該信息類型,再通過內容摘要來判斷內容是否重要。


          當然,這里的摘要如果過長,就需要省略處理,引導用戶進入消息源或消息中心。


          4.推送時間

          推送時間是一個看起來簡單,實際上也好像不是很復雜的邏輯。只要說明該通知的發送時間即可,但是需要注意的是時間段問題。比如幾分鐘前,幾小時前,幾天前,這里的邏輯是按照時間推進規則持續增加來告知用戶該消息的推送時間節點的。也就是過得越久,時間概念就越大。


          5.通知圖標

          上面講到消息類型,我們也經常會在各類產品中發現不同通知的類型會匯總在各自的類型下。包括用戶所接收到的信息,通常也會告知用戶該信息屬于什么類型。有時候,標題可能會更細,但是用戶通過圖標可以判斷該信息屬于什么類型,甚至都不需要仔細查看標題與內容。


          但是,并不是所有產品的信息都可以通過圖標來判斷,有時候圖標只是一個大方向,如果手機鎖屏,相對于用戶來說,這條通知只是告訴用戶該信息是由什么產品推送,而并不能指向至該產品的什么類型的信息。所以在使用的過程中,同樣需要根據業務的場景,謹慎地選擇圖標。


          6.閱讀指示器

          它就像是上面提到的紅點,這里指的是進入 App 的消息中心之后,所顯示的內容。


          7.操作行為

          這里的操作行為分兩種,分別是 App 外與 App 內,它們之間的操作邏輯是不同的。iOS 系統通知的清除操作,只是在系統的通知中心將該信息清除,進入具體 App 后,這條消息還是會存在。而在 App 內刪除該條信息,則該信息才會真正消失。


          所以從上面可以看到,通知推送,是有兩大類別的,分別是 App 外與 App 內,它們之間的邏輯關系與展示形式會有所差異,需要根據具體情況進行設計分析。


          8.小結


          對上面的內容進行總結,可以得到這樣一幅畫像:

          大部分系統或產品的通知組成,都可以通過此圖概括,唯一不同的是,它們會隨著不同的業務而發生變化。


          比如豆瓣的推送消息告知用戶近期有新的電影上映,那么通知來源要么是電影模塊的功能詳情頁,要么是通知中心的系統消息;而通知類型就是內容更新;詳情則根據具體內容來組合排列;最后送達至用戶。


          而其中的差別就是,如果是通知中心推送的,用戶點擊之后則是進入通知中心列表。如果是具體功能推送的,那么用戶點擊進入的就是具體功能頁面。如下圖所示:

          從這里可以看出,通知是有具體模式的。


          一旦確定了通知的主要目標,以及想要解決的問題,包括它們如何對業務產生作用以及對用戶形成吸引力,就可以確定通知的具體樣式了。


          在這一節里只要知道通知的組成部分與通知模式如何指引用戶進入 App 即可。后面我來帶大家理一遍邏輯,以及在設計通知時要注意哪些問題。


          通知的使用方法


          聊完上面的內容之后,我相信大家對通知的組成與使用模式已經有了全新的認識,但也僅此而已,我們還是不知道一個優秀的通知功能應該從哪些方面去提升用戶體驗。這里面所包含的不止是表象,還有內在的規則邏輯。所以從這一節開始,我們仔細來梳理一遍。


          從我們平時使用到的,以及上文提到的,可以大概先梳理出幾類常見的通知類型。


          1.用戶信息類通知


          這種類型的通知有很多,比如微信消息發送,知乎私信,手機短信等等,它們主要由用戶主動生成發送至其他用戶被動接收,作用就是促進用戶與用戶之間的互動關系,以提升用戶使用產品的頻率與時長。


          這種通知,可給予用戶操作也可不給予操作,不操作就是讀取,并回復;操作就是可對該用戶的信息進行屏蔽、已讀、刪除等設置。


          這是最常見的通知類型,在多數社交產品與有社交特性的產品里都能看到。


          說明


          之所以給予用戶信息的操作行為,是因為用戶信息可分為感興趣的與不感興趣的,它主要取決于人。不感興趣的人,頻繁的發送信息,會影響用戶對產品的好感度,畢竟有很多用戶消息并不是用戶想要接收的,所以在社交產品里,用戶可刪除好友,或拉黑好友;在有社交屬性的產品里,用戶可拉黑賬戶,以達到不被騷擾的訴求。

          如果沒有到達刪除好友的程度,也可對該好友的信息進行屏蔽,甚至對該好友信息做已讀而實際上未讀的處理;或者對重要信息做未讀而實際上已讀的處理。


          當然,用戶還能對群消息做更復雜的設置。這就是產品對這類通知的一種優化方式。


          2.系統推送類通知


          我們經常會在手機上收到一種系統類通知,或者在 App 中也會收到類似的系統通知。大多是關于系統升級,密碼更新等。


          這類通知多數是用戶被動接收,且對于系統與用戶來說是較為重要的。當然也有不重要的,比如 App 更新說明的通知,告知用戶新功能有什么變化,或系統更新了什么等等。


          對于這類通知,用戶大多無法進行設置,因為它們比較強制,沒有可以商量的余地,類似于告知用戶:我們有新的消息,比較重要,你來看看,即使你不打算更新或執行也來看下。


          說明


          系統類通知,通常來說較為被動,要么強制用戶執行操作,要么就是提醒用戶系統近期做了更新,或者是一些并不重要的信息提示,比如勿擾模式。


          強制類系統通知不能頻繁,否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產品需要對產品享有控制權,現在反而被產品控制了。這是不行的。


          3.通用推送類通知


          這類通知就是第一節中提到的那些,比如點贊/評論,內容更新等等,這類通知如果是忠實用戶,那么或許不會反感它的頻率,當然還是需要適當。但如果是普通用戶,那么造成的影響就是直接關閉該 App 的所有通知。


          我們現在的很多人,之所以開始反感通知的主要原因,就是這類通知所造成的。內容不斷更新,隨著時間的推移,每天推送多條對于該用戶來說無用的通知。包括只適合一些符合條件的用戶參與的活動通知也推送給所有人,那么用戶就會逐漸對這類產品的通知失去興趣,造成無法彌補的損失。


          即便像某團一樣,經常彈出開啟通知的彈框,也依然無法召喚回用戶。這就是很典型的下場。


          說明


          通用型通知,如果是業務很復雜的產品,就必須建立通知推送的功能模塊,給予用戶進行選擇接受哪類信息的權力。允許用戶進行相應的設置,如活動類推送可拒絕接收。


          在很多產品中都已經置入這樣的推送模塊設置,如下圖。

          這類內容就是針對于產品的具體業務進行細分。


          比如興趣精選,私信消息等做好類別劃分。用戶可對自己感興趣的通知做選擇性的推送接收。


          另外就是,在相同賬戶的不同設備之間,推送應該同步推送與被處理。不能這邊推送了,那邊沒推送,或者這邊處理了,那邊沒被處理。


          4.智能推送類通知


          不知道大家是否有印象,在使用如大眾點評等產品時,只要你切換了城市,產品就會推送通知告知用戶該城市有哪些值得游玩的景點與品嘗的美食。


          雖然這類通知還算不上多少智能,但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知,因為用戶可能會想不起來通過哪類產品來查找附近美食。當這么一條通知出現的時候,正好解決了用戶的問題,反而提升了用戶對于產品的好感度。


          現在很多產品的通知都逐漸智能化,不會像以前那樣,三更半夜發來一條無關緊要的通知。而出現這類問題的主要原因還是在于產品、設計、運營,在這方面沒有下過功夫,只將通知作為一種普通的工具來使用。導致用戶開始排斥通知,將其強制關閉。之后,就很難再讓用戶開啟了。同理心效應,當做這類功能的時候,可以回想一下自己是如何被其他產品打擾的。


          隨著大數據的發展,我相信未來的通知系統會更加全面,且能做到千人千面的模式,不過在此之前,各位產品設計師,還需要對通知下一番功夫才是。


          5.小結


          我們還可以繼續舉例說明,但是基本大同小異,所以到這里為止,我再對上面的內容做一次總結,梳理出一個好的通知應該是如何設計的。


          干擾最小化:通知本身具有強制性和干擾性。它的目的是把用戶的注意力吸引到產品上來,所以要認真思考發送通知的內容、時間、頻率;不要提醒用戶當前屏幕上已經處于展示狀態的內容;也不要推送與用戶無關的系統信息。


          跨設備:當用戶讀過了某條信息,這條信息應該不再做展示。同理,用戶也應該能夠在其它更適合接收消息的設備上找到已讀信息。用戶通知應該在所有設備上進行同步。


          允許設置:允許用戶在「設置」中禁止或調整通知的形式。如案例一,通過選擇推送內容,來影響接收推送的頻率。案例二,可選消息提醒的形式是紅點+數字,或僅是紅點。

          時效性:良好的通知應盡可能實時推送。而不是等這件事情都過去很久了,才推送給用戶知道。


          支持匯總:把同類型的通知合并為一條,并顯示信息未讀數量。也可以考慮一鍵展開通知,顯示信息詳情。


          可操作性:把通知和操作結合在一起,讓用戶不需要打開首頁就能對特定通知進行常規操作。操作應該清晰明了,且僅在未重復默認操作時提供。同時操作應該是有意義、實時、和內容對應的,并且能讓用戶完成某個任務。如案例一,可以在不打開郵件的情況下,直接對通知進行管理、查看和清除。案例二中的操作針對的是未讀郵件,可便捷地在通知板面進行回復、刪除、標為已讀或垃圾郵件。

          小結


          對本篇文章的拓展總結:

          1.通知具有召喚屬性,但是頻率過多就會變成打擾,所以要注意通知的頻率與內容重要性;

          2.設計師或產品經理應該將通知的內容分類梳理出來,以便維護或新增必要需求可能需要用到的推送信息。

          3.通知一般為兩種類型,一類是推送只讀型,一類是操作反饋型;設計師需根據不同類型的通知做好對應的設計,針對具體問題具體分析;

          4.想要利用好「通知」,也需要對業務有詳細的了解,再代入本文所列舉的注意點,就可以設計出一個體驗更佳的通知模式。


          通知規則不會脫離本篇文章的范圍,所以只要詳細研讀,必會有所收獲。


          轉自:站酷-呆總丶

          ui組件系列之文本框和表單設計

          ui設計分享達人

          當你在設計表單時,是否對文本框和表單的規則有疑惑?本文的一些簡單的規則將幫助你完成設計用戶希望完成的表單。

          上圖是表單的發展歷程,由石刻上的表單到紙質表單再到電腦上輸入的表單。印刷式的表單已存在多年,我們可以從其設計中學到一些技巧。


          一、文本框剖析

          文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對話框中。文本字段組件設計應為交互提供明確的可見性,使字段在布局中好發現,填充且容易理解。



          這些是基本文本字段的重要元素:


          1.容器-可交互輸入文本的區域

          2.輸入文本-輸入文本字段

          3.標簽文本(標題)-告訴用戶給定表單字段中屬于什么信息

          4.占位符文本-是所需信息的描述或示例,在用戶輸入文本后會被替換

          5.幫助提示或驗證文本(可選) -提供其他上下文或驗證消息

          6.頭部圖標(可選) -描述文本字段所需的輸入類型

          7.尾部圖標(可選) —對輸入的文本的附加控制,例如清除,隱藏/顯示等


          二、文本框類型

          它們大多數基于基本文本框,為了更好地展示特定類型的信息而做的演變,例如輸入信用卡號的文本框。以下是我們創建的整個UI中最常用的輸入類型的一些示例:

          三、使用恰當的輸入框類型來收集數據

          為收集的數據提供正確的文本框類型,將幫助用戶以正確的格式輸入信息,并避免錯誤,從而使填寫過程盡可能簡單。

          四、文本框需要根據狀態和用戶的交互來及時變化外觀

          可以通過提供視覺上的變化來傳達文本框的狀態。輸入文本字段可以具有以下狀態之一:未激活,懸停,激活,禁用,校驗,報錯。大家在做表單設計時最好的做法就是遵循這些狀態的變化,不要挑戰已經形成的用戶思維模型。

          五、選擇最佳的文本框樣式

          通常,文本框的標題有三種常用的位置可選擇:頂部,左側對齊和右側對齊。采用哪種樣式將取決于表單的主要目標和表單的大小,組件庫以及要設計的平臺。它們各自具有一些優點和缺點。

          我已經根據大型設計研究的研究結果進行了匯總,最開始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是,同一項研究表明,用戶更喜歡帶有圓角的輸入。

          (1)標題左對齊

          當用戶不熟悉所要填寫的內容時,這是一個不錯的選擇


          優點:標題易于拓展;充分利用垂直空間

          缺點:標題和相應的輸入內容之間的距離過長,而且不一致的距離會增加文本輸入的完成時間

          (2)標題右對齊

          與左對齊的標題相比,完成時間快將近兩倍


          優點:文本的標題和輸入內容的位置更緊密,減少了了眼睛的運動次數,從而縮短了完成時間

          缺點:難以快速掃描表單并了解所需的所有信息

          (3)標題頂對齊

          這是在大多數情況下最快的時間和最全面的選擇。在移動端上效果很好,因為它們不需要很多水平空間。


          優點:能夠讓用戶單一眼球移動即可了解輸入標題和輸入文本,能夠更快的完成

          缺點:需要更多垂直空間

          六、文本框的長度應與預期的用戶輸入內容長度成比例

          為表單中的所有文本框都使用相同的輸入長度會使它們在視覺展現上令人愉悅,但是卻很難完成填寫。

          七、占位符文字不能替代標題

          輸入信息后文本框內占位文本的消失,會對用戶的短期記憶產生壓力。沒有標題,用戶將無法在提交表單之前檢查他們提供的所有信息。如果您需要極簡的表單設計,則可以使用“Material design”浮動標題的方法。
          表單內的占位符文本有時會使用戶感到困惑,最好在字段外使用提示文本。


          八、幫助用戶填寫表單

          • 使用自動完成功能幫助解決部分查詢功能,在用戶的輸入框中,用戶可以按Enter或“右箭頭鍵”使用它。

            使用自動聯想值搜索相關的關鍵字和建議使用的內容列表。列表以下拉彈層形式顯示多個建議列表。

            預填充字段并使用智能默認值。通常,您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據最常見的方案進行分析,我們一般可以定義默認情況下應選擇的內容。

            提供上下文信息。為了用戶做出正確的決定或避免錯誤,用戶在進行轉帳時將需要一些其他信息,例如帳戶余額,如果能夠從上下文中獲取這些信息,就請及時給出。

            九、使用實時校驗

             “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性,而不是在用戶提交表單時一次性檢查全部輸入:

          • 驗證消息顯示在靠近輸入的區域,并一起顯示

          • 不要太過于激進的方式提示錯誤消息,應該告訴用戶如何解決問題,而不是責怪他們

          • 當字段在用戶完成輸入之前就被標記為無效時,請避免“提前驗證”

          • 考慮使用“正向校驗”,可以增加一種愉悅感和成就感

          十、讓表單看起來更簡潔

          (1)減少字段數

             它將消除視覺和認知負擔,并且看起來更簡單。

          • 不要將全名和日期之類的文本分成多個字段

          • 不要多次詢問相同的信息

          • 使用標簽和提示復制以盡可能地縮短它

          (2)隱藏不相關的字段

            我們僅展示基本要點,通過逐步顯示信息的方式來幫助用戶管理信息的復雜性,在用戶需要的時候再展示出來。比如加個開關按鈕把不重要的信息隱藏。

          (3)使用條件邏輯

          使用條件邏輯能夠根據用戶的答案,自動顯示或隱藏某些字段,并可以在表單中t跳過頁面。這種方法不僅可以減少字段數,而且可以使填寫過程更具個性化和對話性。



          (4)相關字段打組

          簡化復雜表單的最簡單方法之一就是開始對相關字段進行分組。格式塔心理學中有多種分組原則,可以使項目感覺相關:接近度,相似度,連續性,閉合性和連通性。將數十個非結構化字段分組為幾個可管理的集合將顯著提高表單的可用性。

          (5)將復雜的表單分為幾個簡單的步驟

          有時即使刪除了所有不必要的內容,某些表單也會很龐大。將大型任務分解為一系列較小的任務看起來容易得多,并促使用戶將填寫過程進行到最后。

          • 顯示步驟條,以視覺方式傳達用戶的進度,這可以提高滿意度并激發用戶繼續填寫的動力

          • 不要過于細化表單,太多的步驟將無濟于事,只會惹惱用戶

          • 對關鍵信息進行匯總以減輕用戶的焦慮,最后需要進行復查

          (6)避免使用多個列布局

          一列布局為用戶創建了一條清晰的完成路徑。使用多列表單布局的后果包括:用戶跳過他們實際要輸入數據的字段;將數據輸入到錯誤的字段中;或者只是想暫停一下而可能導致放棄。


          十一、讓用戶沉浸在表單填寫,盡量少的顯示表單外的功能

          如果表單足夠大,可以分成多個步驟,則應該為它分配一個單獨的,清晰明確的空間。顯示常規導航或任何會破壞表單填寫過程的鏈接/按鈕,只會造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。

          十二、顯示恰當的鍵盤類型

          Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在促進不同類型的輸入。為了簡化數據輸入,在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型。注意鍵盤將出現的位置。為了避免不必要的頁面滾動,請將文本字段放在上方區域。


          十三、停止荒謬的密碼創建設計

          • 允許用戶取消隱藏密碼,而不是要求他們輸入兩次密碼,這對于生成密碼的應用程序也將更有效

          • 始終顯示密碼要求,并顯示用戶在滿足填寫條件方面的進度。嘗試簡化對用戶的要求

          • 使用強度計量條以鼓勵用戶創建更強的密碼


            文章來源:站酷     作者:ZZiUP

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


          國際設計手法:液態設計

          ui設計分享達人

          2020又過大半了,去年這個時候我們研究了目前國際大廠在使用的一些趨勢-晶白,點線底紋,光感,那么到了今天又有哪些新的趨勢映入眼簾呢,你還在使用那套舊的設計風格來做設計,今天帶大家來看看今年哪些性格值得我們學習呢?


          什么是液態視覺

          參加過去年UCAN的同學應該對于這個水的主KV印象深刻,當時是以水,宇宙概念做的整個視覺。整個視覺最讓人深刻的莫過于這個畫龍點睛的水滴液態效果。

          整個水滴流動感,運用到整個KV各個地方,背景還有底紋等等,印象深刻。

          在2020年,液態視覺毫無疑問是當前最受關注的視覺風格之一。這種效果看起來像流動的各種液體,在設計中不僅可以很強的吸引人眼球,同時無論是作為背景元素,還是裝飾都讓人過目難忘。

          液態視覺除了視覺感官層面會讓你記憶深刻,它的整個視覺概念也可以講很多故事,比如你可以說整個設計概念,是圍繞”水“來設計,水是流動的,水也是生命之泉,能賦予很多產品很強的概念,所以也就是為什么今年會被很多大型KV所運用的原因。同時這種流動感也可以比如宇宙萬物,生命不息,也可以運用在很多大型的科技發布會上。


          所以作為設計,今年我們勢必要去關注這個趨勢和理念,嘗試如何去運用到我們產品中去。


          液態視覺的情感感受

          1、生命力


          使用過siri的朋友對這個效果應該不會陌生,液態視覺一個非常直觀的感受就是具有生命力,可以隨機的發生各種各樣的變化,正是如此,被很多語音產品在頁面中使用。

          在很多科技類產品,智能功能這塊都會看見這種風格的運用,所以假如你今天需要設計一款智能,很未來的產品,這種液態風格設計一定需要去關注。

          比如這款科技類產品,在啟動頁面時候,就直接跳出一個類似水滴的機器人,用智能語音和你對話,然后隨著人機交互,它會變成不同的形態。


          2.流動運動感


          液態視覺另外一個特點就是具有流動感運動感,在很多智能家居中被廣泛運用,比如圖中這個智能水壺頁面設計,隨著水溫度的變化,顏色和形狀都會發生變化。

          在很多發布會中,營造一些比較大氣的感覺,或者宇宙場景時候經常運營到這個風格,在空間上和視覺上都有方向和動態效果。

          這組海報設計,就非常有方向感和宇宙未來感,整個圖形都朝著一個方向走向,這也是其他圖形元素很難表達的風格特點。

          GlebKuznetsov的作品中這個動態效果,隨著液態效果的流動,整個畫面呈現出非常有程序的水流動效果。


          3.科幻未來感

          液態效果另外一個視覺感受就是未來感和科技感,因為它造型的變化,抽象圖形的表達,給人很神秘,抽象的視覺感受。

          如上圖,通過將流動的圖形,進行旋轉,形成蟲洞感覺,不由自主想起宇宙和未來感。


          液態視覺的技法特點

          1.質感柔軟呈現透明

          液態風格特點雖然視覺沖擊力強,但是視覺表現上,柔軟和透明是非常大的一個特點。整體的材質比較輕,加上透明效果運用,整體會非常的輕盈。通常人工智能頁面場景運用比較多。


          2.色彩豐富大膽漸變


          液態風格另外一個特點是什么。色彩豐富,大膽的漸變色,形成很強的視覺沖擊力。

          整個色彩類似彩虹,或者霓虹燈反射效果,這也是它在設計中能吸引人很重要的一個原因。

          Kikk的官網設計,和Ucan有些神似,也是采用的的一個液態的玻璃球,配色大膽的漸變在視覺表現和沖擊力讓都讓人印象深刻。


          3.塑料質感運用

          塑料質感:液態視覺視覺質感豐富,質感也很大膽,比較常用的有塑料質感,配合燈光,如上圖就是運用是塑料質感,配色彩色的漸變,非常夢幻。

          這種塑料質感不止是在設計中用到,在時尚攝影中也被經常使用。


          4.玻璃質感運用

          玻璃質感的運用,一般會運用玻璃這種效果,出現在畫面中,隨著玻璃的折射效果進行變換,玻璃的質感和平面這種強反差的設計,讓你過目不忘。

          玻璃質感的折射效果,結合后面文字的透出,很好的將這種液態融合效果運用到了。

          在越來越多的國外設計中,都經??匆娺@種玻璃液態圖形和平面設計的融合。


          5.水的質感運用

          水的質感,毋庸置疑,但是這個水的質感一般是運用氣泡的表現形式,再結合折射效果,整個視覺水泡就是核心視覺元素。

          Ucan的主視覺效果,就是采用類似的手法,這類設計很巧妙,同時簡約又不失大氣。


          6.點線面結合運用

          除了塑料,扁平質感以外,點線的運用在液態設計中非常多,比如上圖的OPPO和colo的海報設計,就是運用了流動變化的線條,讓整個設計呈現出簡約高科技之美。

          用線成為整個設計主體,通過流動的線勾勒出一幅場景,在科技類產品中運用較多。支付寶很多理財產品都曾經運用過類似風格。


          在界面中運用

          天貓雙11的很多場景中,其實都有用到液態設計元素,比如雙11的潮流盛典舞臺設計,就是運用的液態當元素,整個畫面非常潮。

          在AI人工智能的產品設計中,液態設計經常被廣泛使用,無論是智能語音設計,還是說智能家居是使用,都能看見它運用的影子。

          這組機器學習的網站設計,通過液態設計,講玻璃元素設計成動態的方式非常的逼真。整個設計給人空間和未來感展現。

          這個液態網站的設計,大膽的漸變,流動的液態效果,讓整個頁面充滿了時尚感。

          液態設計除了一些抽象元素,一些3D的元素也可以使用,整體呈現出來的效果,也非常的有吸引力。當然得結合設計整體來平衡。

          目前來說液態設計在界面中運用,一般在科技網站,AI或者機器人場景比較多,一般液態會呈現多種變化趨勢。


          在平面中運用

          在平面設計中案例比較多,目前很多商業設計中都運用到了一個液態的圖形配合一些幾何圖形,干凈利索的文字都能搭配出不錯的視覺效果。

          這組海報,看似簡約但是充滿了設計感,除了液態的核心元素,字體運用,板式空間的利用都體現出設計師極高的功底。 

          在韓國很多藝術展的設計中,抽象的幾何圖片配合液態的動態變化。整體非常強的視覺沖擊。

          如果你今天做設計,找不到感覺了,不如放棄下你之前的設計套路。嘗試一下新的設計思路,說不定可以打開不一樣的視角。


          在品牌中運用

          今天除了頁面是動態的,在很多時候品牌LOGO也是動態的液態的,會變化,如上圖這個logo他會隨著不同的方向去旋轉變化。LOGO一定要是靜態的么?不可以是動態的?甚至液態么,我覺得一定有可能會出現液態的圖形。

          電信OI公司的logo就是液態呈現的,他的變化有幾十種展示方式。

          整個圖形以明亮,形狀變化的“氣泡”為液態容器,可根據客戶的聲音改變LOGO的顏色和形狀。

          或許在未來,液態的LOGO會成為一種新的主流,只是作為新時代的設計師,我們必須要去了解和關注。


          最后

          趨勢是變化的,唯一比變的就是變化,作為處在互聯網中的設計師,我們身邊的一切都是變化的,身邊的人,身邊的事兒,甚至是商業模式都在變化,學會擁抱變化, 并且讓自己持續的成長和變的更好,是每個設計師都要學習的。


          文章來源:站酷  作者:我們的設計日記



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



          輕量化設計總結

          ui設計分享達人

          「輕量化」是近兩年來設計圈一個比較火的話題,什么是輕量化?從字面意思上來看「輕量」的反義詞就是臃腫、拖沓,反映到產品設計中就是界面內容過載,操作步驟繁瑣。如果非要用一個字來定義,那就是“多”,內容多,步驟多。


          我們需要清楚,“多”來自于用戶的主觀感受,我們無法給出一個具體的數據指標來判定到底是不是“多”。用戶會在什么時候覺得多呢?日常生活經驗告訴我,當對方覺得你沒用的時候,你就會顯得多余。如果這個界面中的每一個功能對于用戶來說都是高頻操作,那么用戶是不會嫌多的。所以「輕量化設計」的主要思路可以歸納為:在用戶不需要你的時候不要出來瞎得瑟。


          場景


          問題來了:用戶什么時候需要我?首先我們應該從功能層面入手,因為產品是一個個功能的組合體。頁面內容臃腫問題的源頭是功能過載,在這個問題上,很多設計師吐槽自己扮演的是一個背鍋俠的角色。其實我也不想在這個頁面里塞這么多東西,但是這些功能我們必須展示給用戶啊,要不然用戶都不知道還有這個功能。


          要解決這個問題,我們需要引入「場景」的概念。什么是場景?我們可以將場景理解為「外部環境」。


          外部環境影響用戶的感知,感知決定了用戶的行為。只有身處于特定的場景,用戶的行為才會被觸發。在有網場景下,用戶啟動網易云音樂,進入的是首頁。在無網場景下,用戶進入的是我的音樂。因為有網,用戶“聽新歌”行為的可能性更大,無網聽已經下載好的歌曲。


          功能也是一樣,用戶需要這個功能,但并不是每一個場景都需要這個功能。有些比較冷門的功能,用戶只有在特定的場景才會想起使用,那么我們就可以只在那個特定的場景中展示該功能。


          我們看一下兩款競品的歌曲播放界面,我們可以很明顯的發現,酷我音樂的界面更加簡潔明了。當然你可能會說,那是因為酷狗音樂給用戶提供了更多的功能。

          undefined

          其實并沒有,兩款產品提供的功能都是一樣多的。只是酷我音樂做了場景化區分,以K歌功能為例,酷我音樂的處理方案是:當用戶點擊查看歌詞的時候才會展示“K歌”的話筒圖標,因為當用戶查看歌詞的時候,提醒引導用戶去K歌更加合適。


          undefined

          這個方案的確可以簡化界面元素,但是也帶來了另一個問題:如果用戶不查看歌詞,那就不知道原來還有k歌功能,無法給K歌功能做到有效的引流。的確如此,沒有一個完美的設計方案,任何一個設計方案都無法做到可以兼顧各方的利益。設計師的作用就是盡可能去發現和解決界面中最主要的矛盾點,而不是所有的矛盾點。


          我們再來看一個歌曲播放界面的例子,現在很多產品都提供了AI電臺功能,所謂AI電臺就是根據你的聽歌記錄,分析你的喜愛,據此來給播放你可能感興趣的歌曲。我們之前聽歌需要手動搜索相關信息,在搜索結果(歌曲、專輯、歌單等)里查找。AI電臺的出現大大節省了用戶的操作步驟,那么我們來思考一個問題:與常規的場景相比,在AI電臺里播放的歌曲,界面上我們應該做哪些改動?


          undefined

          AI電臺模式最大的區別就是隨機性。因為這歌是根據你的喜好隨機推薦的,你不知道會聽到這首歌,也不知道這首歌后面有哪些歌。這個就導致了播放模式這個功能很雞肋,蝦米音樂的AI電臺就沒有提供切換播放模式功能。


          1 列表循環 :我都不知道列表里有哪些歌曲,怎么循環?


          2 隨機播放 :現在不就是隨機播放嗎?


          3 單曲循環:這是唯一一個用戶有需求的場景;


          其實AI電臺推薦的歌曲也是有歌單的,用戶點擊播放列表圖標就可以看到。這里提供了切換歌曲模式的功能,讓用戶看到了播放列表才可以選擇歌曲模式。


          undefined


          入口


          當我們確定了功能的最適用場景,我們接下來的任務就是如何合理的設計功能的入口。


          1)入口分類


          不同的層級的功能,在界面中的展示方式是不一樣的。這里我們可以分為三類:常態類、更多類和隱藏類。


          比較重要的功能一般都在界面中有常態的入口,而優先級比較低的功能,我們會選擇使用臨時視圖來承載,入口放到“更多”類按鈕里,用戶需要點擊才能查看。


          undefined

          優先級的功能在界面中沒有實體的入口,需要用戶的手勢來觸發。例如,在抖音中,用戶長按視頻可以喚起三個功能:保存、收藏不敢興趣。這三個功能抖音做的如此隱蔽,就是希望用戶不去使用。


          undefined

          1 保存:為什么保存到手機看?來抖音看吧


          2 收藏:既然喜歡這個視頻,為什么只收藏不轉發一下,讓更多人看到


          3 不感興趣:emmmm


          2)入口分類


          哪怕是同一個功能,位于不同的場景,我們也要對入口樣式做出調整。例如,在音頻類產品中,為了方便用戶在不同的場景都可以快速的進入播放界面,會在界面底部加上播放條。


          undefined

          但是我們也可以發現上圖中企鵝FM播放條的空間利用率很低,有大面積的留白。那么到了二級頁面,我們可以嘗試修改播放條的樣式,減少對界面內容的遮擋。


          undefined

          類似的處理方式還有淘寶,當用戶在首頁下滑一屏左右,那么底部欄原首頁圖標變成了火箭,用戶點擊火箭可以直接返回至頂部,不用額外新增一個浮動按鈕作為入口。


          undefined


          總結


          以上就是我個人對于「輕量化」設計的簡單思考和總結,如果您有不同的意見或者看法,歡迎留言或者加群討論。

          轉自-站酷

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

          現實世界的畫布——解讀地圖設計(上)

          ui設計分享達人



          地圖基礎知識及通用設計原則


          Part 1. 地圖的發展     


          地圖作為記錄地形傳遞路線信息的載體,在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術的發展而變化,從石板、動物皮革,到絲綢、紙張。當互聯網走進千家萬戶,地圖也步入電子化時代。


          相較于紙質地圖,電子地圖優勢顯著:更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖(后文簡稱地圖)的出現也影響著人們的出行方式,尤其當智能手機普及,我們可以隨時查詢地點、發起導航,再也不需要提前記下高速出口和轉向路口了。


          Part 2. 地圖在滴滴的重要性


          滴滴擁有網約車、代駕、騎行、公交、自駕導航等眾多業務,是一站式出行平臺。而地圖作為承載出行服務的重要載體,橫向支撐著各業務線的發展。以網約車業務為例,調研結果顯示絕大部分乘客都會關注并使用地圖。


          隨著各業務線對體驗的要求不斷提升,單一的地圖模式已經不能滿足業務訴求及用戶需求,需要進一步細分場景、精細刻畫地圖樣式,于是地圖的設計也變得愈發重要。



          Part 3. 解構地圖


          地圖承載的信息種類復雜、數量巨大,初期可能會找不到設計切入點。我們可以先了解下它的定義和實現方式,或許就能從中找到答案。


          定義地圖是依據一定的數學法則,采用地圖語言,經過制圖綜合來表示地球表面的圖形。


          實現流程

          • 采集真實世界的地點信息,經過編譯轉化成數據

          • 數據信息中包含了地點的坐標、分類、名稱等

          • 數據經過渲染形成可視化雛形地圖

          • 雛形地圖經過設計最終變成策略完整、視覺美觀的電子地圖。



          結合“從雛形到完整地圖”這一步流程的實現方式,進而可將地圖拆分為基礎層、策略層和感官層。幫助各職能角色找到對應切入點。


          基礎層,指的是地圖的數據和能力。數據大家已經有所了解了,能力指的是引擎渲染能力、定位能力、圖像識別能力等。有了數據及各類能力作為基礎,才能設計出信息精準、交互明確的地圖。

          策略層,則指的是如何使用這些基礎數據和能力。地圖數據量非常龐大,無法全部展示,需要結合不同的場景及用戶需求,有重點的呈現。

          感官層,便是我們給數據穿上的衣服,會根據品牌調性、對應場景訴求等去設計最終的配色、圖標等。

          解構地圖后,我們不難看出,感官層是設計側需要關注的重點層級。



          Part 4. 地圖設計原則


          - 元素分類

          面對如此復雜的地圖信息,為了梳理出清晰的思路,我們會對地圖元素進行分類:根據數據的類別和呈現狀態,可拆分為點、線、面三類元素。


          點元素地名、POI*等。數量龐大,是城市規模的體現,尤其POI信息,它是地圖中顆粒度最細的位置信息。

          線元素道路、地鐵線、水系線、鐵路線、航線、邊界線等。線元素呈現了道路的走向、區域的劃分等,描繪出了城市的樣貌。

          面元素陸地、草地、湖泊海洋、AOI*。面元素以色塊形式出現,很大程度上決定了一張地圖的色調。

          *名詞解釋:POI, Point of Information的縮寫,即“信息點”。一個POI可以是一棟房子、一個商鋪。

          *名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區域狀的地理實體,如醫院、小區等。



          - 核心設計原則


          從定義可以看出,地圖是一種特殊的圖形語言,是以上所有元素的集合體。相比我們所了解的UI設計、運營設計,地圖有屬于自己的設計原則。以下為大家總結了一些核心的原則:


          1、符合制圖學和公眾認知

          地圖發展到現在已經成為了一門學科,我們會發現即使語言不通,拿到一張地圖時也能看懂,這是因為有制圖學和公眾認知在規范著地圖設計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知,大大降低了用戶的學習成本和記憶負擔,使地圖可以作為一種世界通用語言流通起來。


          2、保證識別度

          地圖屬于信息類工具,其上出現的元素均需清晰可識別,保證可讀性是最基本的設計原則。所以在設計時會限制顏色對比度、最小字號等,而具體規則會根據場景確定。


          3、清晰有層次

          地圖的層次清晰包含了兩個方面:信息主次清晰,視覺具有整體性。


          信息主次清晰,地圖信息龐雜,沒有主次關系會影響用戶的讀圖效率。在設計時需要考慮元素本身的特點、重要性,可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關聯性,不同元素有差異性。同時,信息主次也會根據比例尺的變化有所調整。


          視覺具有整體性在滴滴的業務場景中,地圖通常作為最底層組件出現,上層還會有很多業務組件。因此在設計時需克制用色,既要保證地圖中各元素之間的區隔度,又要保證地圖整體與其他業務組件拉開視覺層級。這樣才能更好的突出當前業務模塊的重點,提升整體的使用效率和體驗。


          4、細分地圖模式

          地圖在各業務模塊中應用廣泛,用戶需求也不盡相同,設計時需要根據使用場景區分不同模式。以網約車場景為例,業務信息始終處于上層,地圖用來幫助用戶定位、快速發單。因此,網約車場景的地圖整體性強、色調偏冷、視覺層級后退,能更好的搭配網約車模塊的整體設計,保證用戶的操作效率。



          5、具有品牌特性

          品牌調性一直是滴滴設計層面非常關注的原則,品牌基因貫穿了所有產品,始終具有獨特的視覺風格。遵循品牌的視覺語言,使地圖可以更好的融合到產品中,保證了設計的統一性。



          文章來源:站酷    作者:CDX創意設計中心


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

          標簽: 交互設計 交互設計公司 用戶研究公司 共情設計




          阿里設計官方年度重磅:2020天貓雙十一品牌設計全案

          ui設計分享達人

          內含2020天貓雙十一全套設計高清圖集

          友情提示:史上最全案例解析,2020天貓雙十一全套設計高清圖集可在文末找到獲取方式。


          一年一度的雙十一今年又迎來了高峰,在今年全球疫情蔓延、國際局勢風云突變的背景下,天貓雙十一再一次刷新世界的認知,把世界記錄推上一個新的巔峰。


          「 羅馬不是一天建成的!」

          天貓雙十一的奇跡,也不是一蹴而就。
          奇跡的背后,是所有人十年如一日的自我挑戰、追求的共同結果。但同時,對于阿里小二來講,雙十一也成為了一項無比艱巨的任務,他們需要在所有人的期待和關注下,頂住壓力給大家一個驚喜。

          這其中,就有一支神秘的隊伍:天貓雙十一品牌設計團隊,正是他們在背后持續的耕耘,不斷刷新“雙十一”的顏值,在潛移默化間,讓一個購物節,開始真正擁有了“節日”的味道,讓設計和設計師,在整個雙十一中發揮出越來越重要的價值。

          他們有著怎樣的堅持?又是如何突破自我?相信聽完他們的故事,你自然就會有答案。

          2020天貓雙十一主LOGO

          多語言版本LOGO

          今年是雙十一的第12年,基本上每年雙十一品牌設計一發布,我和團隊就會陷入深深的焦慮?!懊髂昴銈兇蛩阍趺赐??”熟悉我們的朋友總是在和我打趣,其中一半是玩笑,一半也確實是我們內心的真實寫照。

          記得前兩年我就提到,天貓雙十一logo可能是最難的logo之一... 他的難點在于,在「 貓頭+11.11 」框架不變的基礎上,我們如何在僅剩下的20%設計空間中去傳達每年不一樣的主題,賦予雙十一1個新的內涵。

          一年一度的挑戰

          其中最大的挑戰,還是這個符號本身,這些年我們以每年幾百個方案的量來嘗試不一樣的表達、能玩的形式基本都嘗試了個遍。

          在今年項目最初期,我確實也在想,“不就設計個logo嘛,想這么多有的沒的干嘛?”所以,我們倔強的嘗試從純粹的設計形式上去尋找突破口,在出了一版又一版的方案之后發現,要么似曾相識,要么完全看不懂... 這顯然是一條不歸路,但時間的壓力卻擺在那里。在這個關口,我們將何去何從?

          LOGO前期DEMO


          一個聲音開始不斷在腦海中響起:「 全局著眼,細節著手 」

          這些年,每當項目進展陷入僵局的時候,我都會想起它。

          “全局著眼”講的是不能單一、片面的看問題,要把事物放在全局里考慮,不僅要考慮事物本身,還要考慮它和其他事物的聯系和關系。只有這樣,才能洞察到事物的本質,往往無從下手是因為看的不夠廣,不夠深,找不到切入點,“眼盲所以手瞎”。

          “細節著手”講的是全局的思考最后要巧妙的落在細節上,深入淺出,用細節的力量觸動人心。

          共創過程

          那么,我們應該如何“全局著眼” ?

          首先,回到設計的本質來看,“設計的本質是將一個想法和觀點,通過設計的轉譯,巧妙的傳達給受眾?!逼渲械暮诵氖且纫业健跋敕ê陀^點”,而“想法和觀點”來自于如何通過一個全新的視角看待原本熟悉的事物。

          因此,團隊的小伙伴們,開始在不斷的問自己一個問題:對于雙十一,我們還有什么新的想法和看法?“全年最便宜的一天”、“購物狂歡節”、“買買買”、“不只5折”…這些都是大家耳熟能詳的東西,是不需要去說而大家都知道的事。

          那么今年這個雙十一,又和過去有什么不一樣?

          今年確實不平凡。

          疫情產生的連鎖反應,影響到每一個人。大家開始關注新冠肺炎的確診數、關注熔斷后的道瓊斯指數、關注受災的地區和人數、關注銀行里的存款數 … 而本該體驗美好生活的計劃被擱置或者延后,原本觸手可及的理想生活,在這一年變的異常難得。


          「 生活,本該是我們珍惜的一種經驗,而不是要一起捱過去的日子 」

          文學大師莫言的金句,放在當下,十分應景。假如沒有疫情的影響,我們的生活會更加理想。這是深藏在我們每個人內心的真實訴求 ...

          「 理想生活,本該如此!」

          一句感嘆脫口而出,它就是我們當下內心真實的寫照,是所有人都能感受到的共鳴!這一刻我們仿佛被點亮,心中莫名興奮,激動不已…

          當激動的心跳逐漸平緩,頭腦恢復冷靜,我們又陷入了深深的沉思...

          「 理想生活,本該如此!」然后呢?行動號召是什么?

          和雙十一又有什么關系? 

          洞察

          回顧過去,每當我們民族或自身遭遇困境的時候,總能激發起骨子里那股不服輸的精神。不管眼前有多難,現實如何殘酷,你總能見到身邊那些勤勞積極的人,面對生活的艱辛,默默的付出,想盡一切辦法讓自己好起來。這是最樸實而真實的愿望,也是扎根在我們每一個中國人骨子里的“大智慧”,正是這種“大智慧”,讓我們總能一次又一次的從困境中走出,然后又一步一個臺階,讓生活越來越接近自己理想中的樣子。


          「 理想生活,本該如此!」
          所以我們要“想盡一切辦法好起來” —— 每一份認真生活的理想,都值得被鼓舞。

          今年的雙十一和往年相比有著更加特殊的意義 —— 作為一個國民級的購物平臺,面臨后疫情時代振興經濟的使命,我們不僅要將雙十一這個節日延續下去、同時我們還要通過這個節日讓廣大的商家和消費者,重振信心!

          品牌溝通策略

          因此,天貓雙十一在業務上也和往年有很大的變化:
          首先是新供給:今年的雙十一,會讓更多的品牌和商家入場,不僅將原有的品牌翻倍擴充到25萬家,同時還把重點放在扶持更加需要幫助的500萬中小商家、新國貨商家、外貿企業、產業帶工廠、農產品商家,讓他們借助雙十一走出困局,煥發新生。

          其次是新玩法:將原本“雙十一全球狂歡節”升級為“狂歡季”,把全年最便宜的一天,變成兩波售賣期,拉長了狂歡的時長。一方面是幫助商家帶來更多增長、更多機會,讓商家真實感受到“生意在變好”;同時也讓消費者有了更多選擇、更多便利、更低價格、更大實惠,讓消費者切身感受到 “生活在變好“。讓雙十一,通過“買買買”所帶來的理性價值,最終轉化為 “天貓雙十一,讓我好起來”的情感價值。

          我們把這個情感價值,翻譯成為了和所有人溝通的語言 —— 

          「 Cheer Up! (生活會更好,加油?。?/span>

          core idea

          想到這里,今年品牌設計的方向越來越清晰,這就是我們通過“全局著眼”得到的設計方向。

          接下來的任務,就需要我們從“細節著手”把「 Cheer Up! (生活會更好,加油?。咕呦蠡谋磉_出來。我們再一次回到了「 貓頭 + 11.11 + ?」的公式,和之前不同的地方在于,再次回來,方向變得清晰了很多。

          「 Cheer Up! 」通過什么具體的畫面能夠直觀的感受到?

          當我們把這些畫面集合在一起細心的觀察,不難看出這些畫面多少都有些共同之處的細節:就是大家都會情不自禁的伸出手臂,內心活動配合肢體傳遞出自己的能量;這個動作非常直觀的讓我們感受到了向上的正能量,這是不用解釋就能理解的語言。

          而當我們再把「 貓頭 + 11.11 + 振臂高揮 」結合在一起的時候,渾然天成;只是增加了一個小細節,整個符號突然有了生命力。

          ———  天貓伸出圓(援)手,為你加油!

          尤其是配合動態表達,一目了然... 這就是我們要的深入淺出!

          把難以理解的圖形,直接轉化為一個活生生的形象,面對面 和所有人溝通。

          動態Logo設計

          Slogan設計

          當然,搞定了Logo和Slogan,還只是整個雙十一品牌設計中的第一步。

          接下來,我們還要把「 cheer up! (生活會更好,加油?。惯@個核心創意延展到線上線下各個場景,讓大家全方位的感知到這股振奮人心的力量。

          2020雙十一品牌全鏈路體驗地圖

          天貓雙十一 · 全世界的狂歡季


          2020雙十一Format 「上揚的生命力 ╱ Up」 

          首先,通過提取品牌心境映射中「振臂高揮」的積極態度,結合其視覺映射「上揚的生命力」的明確感知,我們定義了簡潔有力的品牌Format:「 Up ! 」

          2020雙十一品牌Format「 向上的生命力 ╱ Up 」

          同時我們將標識動態與品牌Format結合在一起,定義了線上動態品牌版式。不僅為適應日漸多媒體化的投放環境,也進一步增多與用戶情感化溝通的場景。

          2020雙十一品牌Format動態版「 向上的生命力 ╱ Up 」

          2020天貓雙十一線上會場設計

          2020雙十一貓頭海報:天貓與超級品牌們、1起挺你!

          2020天貓雙十一定制禮盒

          在過去幾年,我向大家介紹過天貓雙十一的主風格來龍去脈;而在今年,我們在傳承雙十一節日氛圍的同時,于視覺主風格上做了進一步創新:同樣通過提取品牌心境映射中「振臂高揮」的積極態度、結合視覺映射「上揚的生命力」的感知,我們嘗試用更明確的視覺系統來傳達「Cheer Up! 」這個核心創意。
          相比符號,視覺風格更直觀易感知,它可以通過形色質構形成全方位的表達。


          2020雙十一視覺系統 「向上的生命波長 ╱ Up」

          置身于晴空萬里無云,噴薄而出的、充滿力量的上揚繽紛飄帶 ...

          當我們將這些元素結合的時候,就形成了今年雙十一獨特的視覺語言;再通過加入溫暖并有力的手寫Slogan與形色質構的拆解,應用到各個場景。

          2020雙十一主視覺系統:「 向上的生命波長 ╱ Up 」

          2020天貓雙十一新聞發布會:開啟的儀式!

          2020天貓雙十一直播開幕盛典:天貓與眾明星1起挺你!

          天貓雙十一 · 理想之城:攜手8座城市、與全中國1起挺你!

          天貓雙十一主題曲:天貓 × 易烊千璽 ×千喵、1起挺你!

          2020雙十一限定天貓形象「給力貓」

          更為突破的是,天貓在今年、繼貓頭海報品牌資產落成后 —— 通過雙十一限定天貓形象,集結全球8個國家、108個IP,組成「挺你天團」!一起為年輕人的生活態度發聲!

          「 罕見名場面!」天貓與百大IP、世紀大同框 ...

          天貓攜手百大IP聯名:世紀天團集結、1起挺你!

          全套高清圖集獲取方式請看文末

          天貓與變形金剛、小豬佩奇、hello kitty、泡泡瑪特、海爾兄弟等世紀大同框!他們1起組成劃時代的超級聯名,為年輕人的生活態度發聲!力挺你盡情熱血、盡情自我、盡情燃、盡情佛、盡情旅行、盡情閱讀....


          每一種理想生活 —— 都有我們、

          以及這顆星球上的超級IP們 ... 

          1起挺你!


          天貓雙十一,1起挺你、盡情生活!



          文章來源:UI中國  作者:Ali ba baDesign

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

          用戶行為分析和以用戶為中心的設計

          ui設計分享達人

          用戶行為分析,認識用戶滿足用戶最直接要求為設計中心


          用戶行為分析

          用戶行為是指用戶在使用產品時的行為,針對網站而言,就是用戶在進入網站后所有的操作。網站用戶行為分析,就是在獲得網站王文量基本數據的情況下,對有關數據進行統計、分析,從中發現用戶訪問網站的規律,并將這些規律與產品目標及策略相結合,從中發現目前網站存在的問題,為進一步改善網站,滿足用戶需求,提升用戶體驗提供依據。


          常見的用戶分析內容包含以下幾個方面內容:

          (1)用戶在網站的停留時間、跳出率、回訪率、新用戶、回訪次數、回訪相隔天數;

          (2)注冊用戶和非注冊用戶,分析二者之間的瀏覽習慣;

          (3)用戶所使用的搜索引擎、關鍵詞、關聯關鍵詞和站內關鍵詞;

          (4)用戶選擇什么樣的入口形式(廣告或者網站入口鏈接)更有效;

          (5)用戶訪問網站流程,用來分析頁面結構和網頁覆蓋數據;

          (6)用戶在頁面上的網頁熱點圖分部數據和網頁覆蓋圖數據;

          (7)用戶在不同時間段的訪問量情況等;

          (8)用戶對于網站的設計及字體配色的喜好程度等。


          通過研究發現,80%的用戶僅僅使用了軟件20%的功能,而那些沒用的功能不僅浪費開發時間,也使軟件更加難以使用。一個成功的軟件應該是簡練精干的,可以單獨職能化的化解決的單個問題,要以滿足用戶最直接要求為 i設計中心。


          一、了解用戶需要什么

          很多網站往往為了滿足不同用戶的需求而增加功能,增加的功能必然需要再界面中用視覺呈現出來,這就會使網頁內容越來越多,很多的功能摻雜在一起,如果不經過過濾,必然會違背原來閱讀的初衷,所以每一個功能的增加都要慎重。


          用戶對于互聯網功能需求也和對軟件的功能要求一樣。既喜歡簡單的,也喜歡復雜的。而且用戶的體驗需求也會隨時隨地的發生變化。這里的復雜不是指很難用、流程超級復雜、容易出錯的用戶體驗,而是指豐富的功能。


          首先如何讓用戶體驗更簡單呢?當然將復雜的功能去除是最好的,如果實在無法去除某個復雜的功能,那就應該將其隱藏。因為大多數情況下,不常用的功能要比經常使用的功能占據更多的空間。


          真正好的用戶體驗其實是給用戶所需的任何功能,為用戶設計一款“復雜”的產品,并將這款產品從表現上簡化,讓基礎功能操作簡化,給擴展功能保留使用入口即可。這個設計思路最具代表性的例子就是Microsoft Office和Adobe

          系列產品。

                        


          用戶的需求并不是一層不變的,短期內用戶會因為某種強烈的需求要一個產品。隨著市場和行業的不斷發展,用戶對于一個產品的評價也會隨之發生變化。例如肯德基剛進入中國市場,被人們認為是一種的象征,小朋友以吃一次肯德基為榮。隨著經濟條件的發展,人們對于肯德基的體驗就完全不一樣了,熱量過高,不利于健康。這是一個很典型的對一個產品評價的變遷的過程。


          用戶的期望值會因為因素而發生變化,有的來自外部的環境,有的來自產品自身,有的來自用戶成長。這些影響期望值的因素都會相輔相成的影響。有的時候不是我們的體驗或者產品變了,而是用戶發生了變化,所以用戶體驗的設計,除了要考慮產品本身以外,還要考慮用戶所需要的。


          二、遵循用戶的習慣

          用戶通常會根據個人喜好做事,這就是習慣。習慣沒有好壞之分,關鍵要看根本的是什么。從用戶體驗的角度來說,任何產品都可以分兩種:遵循現有用戶習慣的產品和顛覆用戶習慣的產品。


          在設計網站時可以在技術上創新,在業務模式上改變,也要在以下幾點上遵循用戶的習慣。


          1、用戶的生活背景及文化背景

          生活和文化背景是必須要遵循的習慣。想去顛覆或是磨滅一個群體甚至是民族的習慣,基本上會付出慘重的代價。例如使用紅色表現喜慶,白色表現悲傷,是中華民族幾千年的一種傳統習慣。如果想去改變這個習慣,使用其他顏色肯定起不到好效果。比如:可口可樂官網就是用紅色做的主色調,而紅色也與“可口可樂”品牌主色調相統一,點綴少量黃色,非常符合中國的傳統文化,也更容易使中國人接受。


          2、用戶的生理狀況與需求狀況

          在設計網站頁面時,還要考慮到網站用戶群體的基礎屬性,例如年齡層、身體承受力等??梢詫㈨撁嬷械奈淖趾蛨D片做放大處理,使老年人可以清楚的看到內容。比如一些老年網站,會采用大號字體,強對比色便于閱讀,而且在設計的時候也不會使用過多的色彩,雖然整體視覺可能顯得簡陋不夠豐富,但是充分的考慮了老年人人群的特點。


          2、以“自我為中心”的心理

          人在評定事情好壞的時候,通常喜歡以自我為中心,所以用戶體驗設計時,必須滿足用戶這種需求。使每個用戶可以體會到以“自我為中心”的優越感,這樣用戶就會成為最忠實的客戶。例如很多人沉迷于網游就是因為在現實生活中會受到各種各樣的限制,而無法實現真正的以自我為中心,而在網游的世界里卻可以完全實現。


          二、顛覆用戶的習慣


          在設計網站時,設計師通常會根據網站內容把網站劃分為不同的區塊,然后在分別進行美化。設計師在思維定勢中 自我感覺良好,一旦突破了思維定勢就會有新的收獲。作為用戶體驗的設計師來說,有下面兩個方面可以顛覆。


          1、改變一些有獨特性的頁面設計

           在設計網站時,有很多頁面都具有獨特性,例如注冊頁、登錄頁和搜索頁。這些頁面用戶只會訪問一次或者幾次,而且這些網頁本身也是在網站發展的同時逐步完善的。所以,在用戶體驗的設計中,這些習慣就可以顛覆的。設計師可以根據個人的喜好對這些頁面進行設計、優化和修改,而不會影響用戶的習慣。


          2、發展中的知識和技術

          在網站設計中需要結合當前的潮流趨勢和的技術來表現網站,這樣才能給用戶帶來全新的體驗。頁面中流暢惡化便捷的交互應用,可以給用戶帶來良好的體驗。

          尊重用戶秀感可以快速讓用戶接受網站,同時也會由于尊重了用戶的習慣而減少產品對用戶的刺激,會使得用戶很難成為網站的忠實用戶。另一方面,如果不尊重用戶習慣,用戶可能很難馬上接受。所以在用戶體驗設計時,要根據網站具體情況自我權衡。

          最好的辦法就是在網站核心用戶體驗不變的基礎上,增加新功能、設計風格逐步變化、進行網站整體融合。

          轉自:站酷-忻蕓



          日歷

          鏈接

          個人資料

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

          存檔

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