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

          首頁

          用案例和方法,帶你剖析「情感化設計」

          seo達人



          最近在產品體驗中,發現了不少有意思的情感化設計案例,有些讓人眼前一亮,有些很好的滿足了用戶情感需求,所以今天就匯總一下分享給大家。
          文章主要內容包括:
          1、如何理解情感化設計
          2、結合案例分析情感化設計
          3、3個情感化設計方向
                        

          一、情感化設計

          什么是產品的“情感化設計”呢?先說2個小故事。
                     
          故事1
          我兒子今年5歲了,周末帶他去游樂園,他拿著我的手機看導航。突然說了一句“你的導航真厲害啊,還顯示天氣呢~”。這些成年人眼中習以為常的內容,卻成了孩子驚喜的認知。
                      
          故事2
          某天傍晚,南京地區的微信朋友圈忽然掀起了夕陽美景“攝影大賽”,成為了迅速傳播的話題,大家都在曬照片,驚嘆轉瞬即逝的美景。這里面可能有很多因素,諸如參與感、分享的欲望、跟風等,但是美景才是打動用戶的真正原因。
          圖片
          通過這2個小故事,我們可以總結下情感化設計的要點:
          • 對不同用戶,情感化設計的感知是有所差異的,需要設計師擁有不同的價值視角,甚至是對一切事物抱有好奇感的童心。
          • 情感化設計需要帶給用戶美好的感受,也是符合大多數人共同的認知體驗。無論是會心一笑,還是形成深刻記憶,都必須能夠激發出用戶情感。
          • 情感化設計一般只能引起用戶短暫的情感變化,當用戶形成了認知之后,可能就失去了最初的魅力。

           

          二、情感化設計案例分析

          諾曼的《情感化設計》指出,人的3個認知層次:“本能層、行為層、反思層“,構成了用戶認知事物的過程,每個層次都會產生不同的用戶情感。
          圖片
                       
          01/本能層
          視覺信息激發情感
          所謂“愛美之心,人皆有之”,人們對美好事物的追求是一種本能反應。因此可以利用色彩、質感、圖形建立場景氛圍,激發用戶情感。
                                     
          1、品質感渲染氛圍
          最近支付寶818理財節界面設計,利用金色很好的營造了節日氛圍。而品質感極強的金色卡片,增強了用戶的獲得感,更好的激勵用戶參與活動。
          圖片
                                
          2、真實場景再現
          在虛擬的互聯網中,建立符合真實生活場景的認知體系,是體驗設計的一個重要方向。
          在正常比例下,高德地圖采用藍色表示水域,例如河流、湖泊等。當地圖比例放大到一定程度時,水域會有水紋波動的效果。通過場景仿真再現,帶給用戶“近大遠小”的真實體驗。
          圖片
                         
          3、關懷體驗
          相比界面設計傳遞出的偏主觀的感性理解,文字可以帶給用戶直接而明確的情感體驗。
                                     
          1)語言文字中的情感表達
          用戶在被邀請加入微信群時,下方信息會提示群中有哪些好友,從而幫助用戶做出入群判斷。另外提示信息還告知入群后可能產生信息干擾,在一味強調利益點,引導用戶行為的商業化設計中,這樣的提醒給了用戶更多的人文關懷。
          圖片
                           
          因偶感風寒,朋友下單買了感冒靈顆粒,美團外賣小哥在送藥時,說了一句“早日康復”,讓她對美團的服務驚嘆不已,甚至有一絲感動。雖然不確定這是不是美團的標準化服務流程,卻提升了她對美團服務體驗的滿意度。
          圖片
                                   
          2)安全感彰顯用戶關懷
          iOS多任務管理頁中,支付寶、銀行等金融類應用會增加遮罩效果,保護用戶隱私,通過差異化的展現形式,增強了用戶的信任感。
          而用戶在支付寶“付款/收錢“界面截屏時,系統會主動給出安全提示,讓用戶感受到來自支付寶的關懷。
          圖片
                                               
          3)滿足用戶的內心渴望
          粉絲數是公眾號運營的重要指標,特別是新的玩家,漲粉的渴望是不言而喻的。
          前幾天,我突然發現公眾號粉絲從1.0K變成了1.1K。當時內心一陣狂喜,立即查看了具體粉絲數,結果并沒有超過1.1K。原來粉絲數的顯示規則是四舍五入,也就是說當粉絲超過了1050后,都會顯示為1.1K。
          這比我們常見的1.0K+的形式,數據上做了適當的夸大,但是并會對用戶判斷產生大的偏差,反而滿足了用戶的虛榮心。即使看到具體數據時,內心會有小失落,但也不會造成用戶反感。
          圖片
          當然本能層的情感設計,通常只能帶來的用戶情緒上的微小變化,或者短暫的刺激,無法強烈的改變用戶對產品的認知,或者觸發更多的用戶行為。
                               
          02/行為層
          行為過程強化情感
          用戶的參與可以帶來更強的的情感反饋和認知,并且更容易形成持久的用戶記憶,甚至會培養新的用戶行為習慣,從而增強產品粘性。
                                    
          1、動效設計融入情感表達
          TIM 聊天列表頁面,用戶可以拖拽消息數量角標,快速消除未讀提示,同時帶有灰飛煙滅的動效。
          相比較常見的點擊消除,或者向左滑動后標記已讀,這種交互方式既提高了用戶操作效率,又增加了消除提示的暢快感,仿佛幫助用戶甩掉了各種煩惱和壓力。
          圖片
                                
          即刻APP在用戶頭像中增加了拖拽反彈動效,除了視覺上愛心碰撞帶來的爽感,過程中還增加了震動效果,傳遞給用戶力度回饋。碰撞之后頂部出現的嘴角上揚的笑容,又帶給用戶無盡的想象空間。
          圖片
                                          
          2、創新玩法賦予產品情感體驗
          最近微信推出的“拍一拍”功能,創造了新的用戶溝通方式和使用場景,簡單的玩法激活了用戶獵奇心理和表達欲望。所以功能剛上線時,借助社交關系迅速傳播,并衍生出了各種趣味玩法。
          傳統廣告主要是通過視頻播放吸引用戶點擊,用戶更多的是被動接受。而微信朋友圈廣告則是播放廣告片段,激起用戶的好奇心,并結合手勢玩法提升了趣味性,吸引用戶主動參與其中,從而形成更強的用戶認知和記憶。
          圖片
                                           
          03/反思層
          價值影響情感認知
          前幾天很多朋友發現螞蟻莊園養的小雞不見了,只留下了一封雞毛信。
          圖片
          當用戶都在猜測支付寶是不是要出現新玩法的時候,支付寶公眾號給出了答案。

          “我雞呢???我一把屎一把尿的把它養大,怎么就剩根雞毛了?” 
          “嘿嘿,上支付寶搜「找小雞」,你就知道了?!?nbsp;
          “都是同事你裝雞毛啊!直接說。”  
          “三年來有4.5億網友在螞蟻莊園捐出240億顆“愛心蛋”,90%以上的公益項目都與孩子相關,小雞去看看這些孩子們。” 
          “中午回來吃飯嗎?“ 
          “12點前就都回來了,能趕上吃飯?!?nbsp;
          “行叭,我剛給它換的衣服,別玩臟了?!?、
                                              ——來自支付寶公眾號

           

          支付寶的創新玩法,引發了用戶的猜想,增強了活動的話題性,精彩的文案對白,既宣傳了支付寶的公益行為,又收獲了用戶對品牌認知 。

           

          三、情感化設計的方法

          情感化設計在用戶體驗圈早已不再是新鮮話題了,但是如何做出符合用戶情感需求的設計呢?我覺得可以從3個方面入手。

           

          1、天時——關鍵時刻激勵
          抓住用戶關鍵的時間節點,通過設計手法增強用戶的情感效應。例如微信設定了生日、春節等關鍵詞觸發飄落動效,讓蒼白的文字信息更加富有場景化情感;
          根據用戶生命周期,電商平臺會推出相應的禮包,促進用戶轉化的同時,讓用戶產生被關注的情感體驗。
          圖片

           

          2、地利——用戶場景引導
          根據用戶行為流程,在關鍵的行為節點中增加情感化設計。
          花小豬在成功約車后,滿屏飄落的花瓣動效,烘托了場景氣氛,有利于緩解用戶等待焦慮。
          特殊天氣狀況下,高德地圖會顯示天氣情況,為用戶出行提供參考。
          圖片

           

          3、人和——挖掘用戶內心訴求
          利用用戶自身的情感訴求,滿足用戶內心的渴望。
          拼多多“多多夢工廠”游戲中,用戶在加油之后,快遞車會有明顯的加速效果,很好的滿足了用戶急切收到商品的情感訴求,也更好的激勵了用戶持續加油。
          圖片

           

          寫在最后

          情感化設計更多的是帶給用戶瞬間感動,很難形成長期的用戶激勵。因此情感化設計主要目的是通過情感累加,提升產品品牌形象。
          不過情感化設計在落地時,會面臨一些困難。
          • 一方面互聯網已經發展了這么多年,大家對一些小的趣味細節,很容易視而不見,或者只能會產生一點點情感波動就結束了。
          • 另一方面商業化的設計,更加注重投入產出比和眼前收益,當情感化設計無法確定可以帶來直接的經濟效益時,很容易被pass掉或者無限延期。
          所以設計師也需要不斷的去總結和反思,如何堅守心中的那點兒設計情懷~
          今天先說到這兒吧,下期再見~
                             
          原文地址:子牧UXD(公眾號)
          作者:子牧先生
           轉載請注明:學UI網》用案例和方法,帶你剖析「情感化設計」

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          干貨|如何通過設計傳遞「信任感」?

          seo達人



          眾所周知,一個可以讓用戶充分信任的產品,才能可能與用戶建立起良好的關系,在用戶信息獲取、產品目標實現上成為可能。對金融類、社交類產品而言,安全可信的需求更是用戶最核心的訴求。

           

          信任感維度梳理

          客觀技術 + 主觀體驗

          信任感包括兩個維度:客觀信任感和主觀信任感。

          客觀信任感通常體現在技術層面,依賴于交互設備和網絡環境等;

          主觀信任感則體現在交互體驗層面,通過交互流程和視覺效果對用戶進行引導。

           

          1 、客觀|技術系統

          通過技術安全和策略,傳遞給用戶穩定的產品功能和策略,主要體現在以下兩點:

          圖片

          (1)穩定性

          • 不易出系統問題和 bug
          • 在各種應用設備上可以保證順利切換
          • 在各種應用環境中可以保證流暢使用

           

          (2)安全性

          • 身份驗證
          • 隱私保護
          • 賬戶、密碼安全
          • 功能使用過程安全
          • 其他

           

          2、主觀|交互體驗

          通過產品的設計和交互流程,傳達給用戶可靠的產品感受和體驗,主要體現在以下四點:

          圖片

          (1)可掌控

          • 給用戶更多的操控權限:餓了么的推薦卡片設計,右上角的“…”,點擊后會顯示“不喜歡”,以此讓用戶感覺自己有更多的選擇和操控權。

          圖片

           

          • 任務定制化,匹配用戶能力:大眾點評對于不同等級的用戶安排的賺取積分的任務也不同,給初級用戶降低難度,好上手;給中、高級用戶提升挑戰,有效促活。

          圖片

           

          (2)可理解

          • 給用戶盡可能提供全面、完整的信息:鏈家 App 在看房的時候,不僅有 VR 全景功能,還增加了“設計效果”方案。當用戶點開“設計效果”后會看到分屏對比的效果,給用戶對于房子空間的全面體驗。

          圖片

           

          • 信息條理清晰,有章可循:支付寶相互寶的 “大病醫療” 需要閱讀的信息很多,產品設計了目錄作為引導,并將重要信息采用不同的背景顏色標記出來。

          圖片

           

          (3)可依賴

          • 幫助用戶輕松完成任務:產品了解用戶的操作行為,縮短用戶路徑,例如京東等 App 在收貨地址的填寫時可以粘貼整段文字(地址,收件人,電話),然后“智能識別”到對應的文字選項中,優化了用戶填寫資料的體驗,讓用戶完成任務毫不費力。

          圖片

           

          • 給出有利于用戶決策的提示:下雨天美團外賣針對用戶所在區域,提前推送天氣變化,提醒用戶提前下單。

          圖片

           

          • 給出的信息詳實,以用戶利益為出發點:使用支付寶理財在買基金時,產品會評估基金的風險和用戶的承受能力是否匹配,并給予相應的提示。

          圖片

           

          (4)可挽回

          • 非正常信息、錯誤內容及時同步:高德打車企業版如果發現用戶的行程訂單金額與預估金額差距較大時,會給用戶發短信提示,并給出客服和投訴渠道,尤其是對于對線路不熟的用戶。

          圖片

           

          • 從根源防止用戶出錯:天貓購買產品添加購物車時,沒有貨的標簽會變成禁用狀態,避免用戶下單。

          圖片

          技術安全是可信性的保障,但并不是有了技術安全就足夠了,還需要通過交互層面引導和優化使用戶產生對產品的信任感。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》干貨|如何通過設計傳遞「信任感」?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          UI動效設計之設計原則

          seo達人



          小編:動效已經成為UI行業里流行的趨勢了,特別是游戲APP、短視頻分享和直播類的APP或多或少都會有動效這樣的元素。本文將來分享一些作者過往在動效設計過程中的基礎知識沉淀,主要集中于探討動效設計原則和運用的內容。

           

          前言

          前人已經總結了讓動畫生動的技巧,早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則,該法則也是受用至今。法則雖是針對傳統動畫而制定,但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。

           

          目錄

           

          這次分享分為三個內容,第一個是介紹一下動畫設計的“十二大原則”是什么?;第二部分是結合幾個案例說明如何將這些原則運用到具體的項目中去的。最后就是動效設計流程的一個總結。

           

          【1】動畫設計技巧

          如上圖;動畫的十二大原則又可以拆分為兩類,動畫設計技巧和動畫表現技巧。

          第一部分設計技巧是增添動畫細節的方法,可以用這些原則讓動畫更有細節更生動。

          第二部分表現技巧是提升整個動畫在畫面中全局表現力的,這個主要是多用在動畫里。

          在產品動效設計中還是常用到設計技巧,所以這次著重分享設計技巧這一部分。

           

           01 擠壓和拉伸

          【擠壓和拉伸】是動效設計中最常用到的設計技巧。使用擠壓和拉伸來強調物體的質感、重量、速度。我們可以根據物體的質感去決定擠壓伸展的具體幅度。可以很好的表達出不同物體的不同質感。這里需要注意的是,物體擠壓拉伸的面積盡可能保持視覺統一。以免動畫前后造成不協調。

           

          02 預期動作

          【預期動作】可讓用戶感知到該物體即將發生運動,以及具體運動的方式和方向。讓用戶對動畫效果有一個提前的預判不會太突兀。也可以根據預期動作去引導用戶的視線。比如起跳時雙腿先要彎曲,踢球向前射門時腿要向后擺動。所以在動效設計中我們運用好預期動作會讓用戶做好心理準備,讓這個動畫更加真實。

           

          03 跟隨與重疊動作

          【跟隨與重疊動作】這個技巧也是表達運動速度和物體質感的重要技巧之一。

          跟隨簡單說舉個例子就是揮棒球棒,棒球棒是手帶動棒球棒轉動,當手停止發力時,棒球棒不會立刻停止,會隨著發力的方向擺動減幅,直到完全停止。擺動的幅度和持續時間會根據不同的力量及速度進行相應的調整。

          重疊動作就是想象棒球棒如果是橡膠材質的,那么揮舞棒球的時候就會有一定程度的彎曲,所以速度越快,材質越軟,彎曲程度也會越大。

           

          04 緩動速度曲線

          【緩動速度曲線】動效設計中最離不開的參數。不同的速度曲線也會給人不一樣的感受,運動曲線較陡會感覺元素的質量更重沖擊感更強,比如適用于我們競爭向的場景中。反之較平緩的曲線元素運動則較為輕盈。更適用于我們關系向的場景。

           

          05 控制時間偏差

          【控制時間偏差】運動物體的主要運動和附屬運動不會同時發生,用時間偏差,會讓動畫更加真實自然。也可避免動效過程出現空檔期,或者一次性出現過多的元素,增加認知負荷。信息離場時則需要快速高效,不需要人為的制造信息偏差。

           

          06 弧形運動軌跡

          【弧形運動軌跡】當自然運動的物體運動時都會受到引力的影響,簡單解釋就是速度越快弧線越平滑,移動距離越遠。速度越慢弧線越彎曲,移動距離也越近。

           

          【2】結合案例應用

          下面就舉幾個案例,這些原則在具體工作中的應用。

           

          01福袋:短觸區引導動畫 

           

          這個是直播間福袋倒計時五秒開獎時播放的動畫,目標是為了告訴用戶福袋即將開獎,同時在這五秒內拉升福袋的價值感,提高福袋的參與率。

           

          確定好動效的目標后,就要圍繞這個目標對動畫進行拆解。

          • 【第一步】是預備動作,在進行主要的動畫之前需要有一個較強的視覺引導,讓用戶提前注意到福袋接下來會會有動作發生,這里采用的方式是抖動。
          • 【第二步】是體現價值感,這里采用的是金色粒子加發光的效果。
          • 【第三步】倒計時結束福袋準備離場。

           

          動畫步驟拆解完后就分析每一步動畫需要用到的動畫原則。比如第一步的抖動引起用戶注意的同時下一步就需要噴出粒子,所以在抖動的這一步就要增加一個預期動作。在這里設計了兩個預期動作:一個是粒子向右上角噴出,所以預期動作設計成向左下角提前移動收起,同時給下一步的粒子動畫留出足夠的空間出現。第二個是收緊口袋,為下一步的打開做準備。

          然后福袋的繩子也會跟著福袋運動,這里用到了“跟隨與重疊動作”“附屬運動”,因為繩子材質比較軟,所以抖動頻率和幅度設計的時候都會相應的增加一些。

          第二步動畫當福袋打開時有一個“擠壓和拉伸”的效果,一個是為了表現福袋的材質,再一個是為了體現福袋突然打開的速度感。

          最后一步就是噴完粒子后的消失動畫,這里加了一個位置移動的‘預期動作。然后在配合速率較快的緩動曲線最后完成  消失。

          可以看一下運用動畫原則之前和之后的對比,這個沒有用動畫原則的案例會有明顯的頓挫感,整體動畫不夠自然,就會顯得動畫呆呆的。嗯。那這個用了動畫原則之后整體動畫會顯得比較流暢,中間也沒有空檔期。這里說一下,基本上每個動畫都會用到前面說的時間偏差控制來調整節奏,所以就沒有在案例里單獨列出來。

           

          02. 盲盒:盲盒游戲引導入口動畫

           

          先拆解動畫,再分析需要運用到的動畫原則。這里主要說下不同點,第二步中用到了“弧形運動”的原則?!ず袊姵龅牟蕩Ш托切菚小煌摹俣龋俣瓤斓脑剡\動的路徑會比速度慢的更平滑一些。

           

          03. 拼圖:拼圖游戲引導入口動畫

           

          由于拼圖本身造型比較單一,材質也相對偏硬。所以不好在拼圖本身上去做動畫。然后這里處理的方式是利用光感帶出一個縮放的效果來進行視覺上的引導。這里同樣控制了時間的偏差。先通過光感帶動拼圖禮物放大提供一個拍下去的預期動作。然后拍下去的同時掃光到邊緣處立刻釋放粒子,達到視覺上的同步。

           

          04. 段位勛章 降段動畫

           

          這個案例是段位勛章的降段動畫,前幾個例子中動畫的元素材質都偏軟。所以這個案例主要是想對比一下材質比較硬的表現樣式。

           

          最后就簡單總結一下動效設計的方法。一共拆解為四步,首先確定好需求方的目標和預期。然后再進行具體的腳本步驟的拆分,然后再聚焦到每一步需要用的的動畫原則。最后再開始動效設計。設計前對需求進行充分的思考,讓動效在助理業務發展的同時也能夠做到有理有據。

           

          原文地址:站酷 

          作者:HEBBEN軒 

           

          轉載請注明:學UI網》UI動效設計之設計原則

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          明星百科LOFT創新設計

          seo達人



          在日常產品設計中要考慮產品體驗、豐富內容形式,用戶的互動性,打造互動空間,增強用戶粘度和特色內容建設同時通過設計創新為產品帶來更多的收益空間。

          前言

          《明星百科》是百度百科的重點垂類,用戶的瀏覽量一直很高,也受到眾多粉絲用戶的關注。隨著5G時代的到來,競品富媒體形態的發展,使產品體驗突顯單一,不能滿足用戶多元化的消費需求。為提升產品體驗、豐富內容形式,增加與用戶的互動性,產品層決定升級明星垂類定位,從 UGC 維護內容升級為“粉絲共建的明星百科”,打造粉絲用戶與明星的互動空間,增強用戶粘度和特色內容建設,提升內容富媒體化的轉變,同時通過設計創新為產品帶來更多的收益空間。

           

          /// 從“產品目標”中拓展設計思路

          與產品側進行項目溝通,了解產品目標是激勵粉絲用戶貢獻內容,在百科詞條形成“明星安利”特色版塊,豐富百科內容維度的同時提升與競品的差異化。我們分析產品目標,逐步確定設計目標和方向:

          圖片

           

          /// 提取設計關鍵詞

          圍繞設計方向進行創新思考,從產品“體驗、內容、互動”三個維度確定設計核心“沉浸、專屬、有趣”,為用戶群打造專屬的互動空間,增加用戶黏度的同時促進內容轉化。

          圖片

          /// 制定設計策略

          考慮產品和粉絲用戶訴求,重構框架、界面、內容展現等層面,增加明星效應,帶動粉絲用戶消費,提升差異化體驗。

          圖片

          /// 打造復式結構,提供專屬空間

          百度百科以權威、豐富的知識內容,滿足用戶瀏覽和編輯分享,但從內容承載到用戶日益多元化的消費趨勢,原有基礎框架已不能很好支撐產品發展和提升競爭力。對標競品,挖掘粉絲用戶的消費訴求,我們以創新的復式結構擴展信息層,在不影響詞條信息瀏覽的前提下,為多元化的信息內容提供展現空間。

          圖片

          /// 增加差異化感知,滿足情感訴求

          圖片

          為強化loft層在首屏的展現,增加差異化和氛圍感,兩個信息層在首屏的展現比重設計為8:2,提升loft層瀏覽空間和操作引導。

           

          /// 復式結構瀏覽交互方式

          圖片

           

          /// 針對粉絲用戶核心訴求,打造互動空間

           

          圖片
          了解粉絲用戶消費特點和訴求, 通過展現多元化富媒體內容,增加專屬感和互動氛圍,提升用戶黏度;
          圖片
          針對多元化內容形式的展現,設計和規范內容模版,規范單圖、多圖或橫、豎版視頻等內容狀態;
          圖片

          /// 增加專屬感和互動氛圍

          促進用戶情感化消費,設計話題、發布、評論、點贊等功能模塊,調動用戶參與和內容建設,促進站內導流;
          圖片

           

           

          /// 搭建發布能力,實現內容共建

          搭建發布能力是實現內容共建的重要環節:搭建發布流程,滿足用戶上傳圖片、短視頻等需求,及時分享明星動態、資訊或最新作品,實現“粉絲共建”的目標;
          圖片
          在發布功能為用戶提供添加內容標簽,表達態度和觀點,增加專屬氛圍;發布的內容可與相關詞條進行關聯,增加內容互聯和導流;功能體驗簡潔、易用,實現內容生產和共建的體驗閉環。
          圖片

           

          /// 規范設計模版 形成體驗的一致化

          在確立明星百科loft設計形態后,為保持在其他垂類建設中設計與體驗的一致化,對loft層的內容模塊和控件進行設計梳理規范,提升模版的通用和復用性,并針對不同方向垂類的特色內容,擴展模版,不斷滿足產品和用戶的消費訴求。
          圖片
          設計制定單圖、多圖,橫、豎版視頻模塊的排版組合規則,交互規則,細化功能控件;針對垂類特色(如人物類/商業類),設計擴展模版形式;并在垂類產品建設,節約設計成本,實現快速搭建。
          圖片

           

          /// 復式結構為多元化體驗帶來更多可能

          明星百科LOFT的創新設計,通過對產品目標的分析和設計目標的逐步確定,從設計視角進行探索和創新推動,不僅突破產品固有框架,滿足產品與用戶的訴求,提升產品差異化體驗,還在垂類產品橫向建設中打開了無限可能,實現設計賦能。
          圖片

           

          原文地址:百度MEUX(公眾號)
          作者:愛分享的
          轉載請注明:學UI網》明星百科LOFT創新設計

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          做好大平臺忽略的細節,這購物網站連獲三大設計獎

          seo達人


          不知道大家有沒有聽過 Aesop(伊索)這個澳洲護膚品牌子?以天然有機植物草本為賣點,大部分產品在小幾百到大幾百之間。產品的網站上線后連獲三獎,網站做得好,我覺得是定位清晰,想清楚產品的戰略層和范圍層定位定位,并運用到結構層、框架層、表現層。下面我們從各個層面分析一下網站的有哪些可以學習借鑒的地方。

          圖片

          Aesop 的天貓國際店截圖

           

          他們本來是特別注重線下體驗店的,除了裝潢考究之外,里面的護膚顧問也都是經過專門培訓的。

          這樣一家原本挺傳統的中高端護膚品牌,與知名設計公司 Work&Co 合作推出了自己的購物網站。

          圖片

          這個網站確實做得很有特色,而且把護膚購物的體驗細節打磨到位,做到了大型網購平臺做不到的事情。

          上線后連獲三個獎,我們來看看有什么可以學習借鑒的地方。

          圖片

           

          信息架構

          由于 Aesop 注重商品在精不在多,所以網站在導航里就直接將商品目錄列出了,當然還是根據用途和膚質進行了分類。

          圖片

          這種商品名稱列表的展示方式,還真不是什么電商都適用的。

          但是 Aesop 的商品不多而且包裝設計非常統一幾乎沒什么可預覽的,而老顧客大多更需要快速補貨或者找到新品,所以就不需要像普通電商那樣一層一層地靠預覽圖尋找。

          以及購物車的設計也非常簡潔,沒有圖片只有文字,而且換成深色的背景以提醒用戶注意。

          圖片

           

          內容策略

          護膚品這類產品非常特殊,不像服裝或者日用品那樣看著不錯就買了,而是需要向用戶提供很多輔助信息才能促使其下單。

          一般在門店里,顧問都會詢問顧客的膚質和需求,向他們推薦合適的商品,并介紹其功效、用法、成分等信息,并打開讓顧客聞一聞、試一試。

          圖片

          網上購物時,雖然聞一聞和試一試提供不了,但其它的部分還是要想辦法提供。

          Aesop 的官網的商品詳情頁里,第一屏圖片旁邊會提供的基本信息包括:標題+功效說明+適合膚質+皮膚觸感+主要成分+容量+價格。

          第二屏會提供一張使用商品的視頻或者圖片,并提供更多信息:用法+用量+材質+氣味。

          第三屏會告訴用戶,做一套完整的護膚流程是怎樣的,以及還可以購買哪些配套的商品。

          圖片

          另外,回頭客會收到基于購買記錄的個性推薦,內容也會根據季節和地域氣候量身定制。

          圖片

           

          視覺語言

          Aesop 的產品包裝非常簡潔,深棕色的瓶子上,貼著米黃色的包裝紙,上面印著深灰色的字,除了一些矩形框之外,幾乎毫無裝飾。

          圖片

          線下門店的也是在結構上規整干練,但因為多用木質材料,所以沒有工業風格那種冷冰冰的感覺。

          圖片

          Aesop 的網站設計使用了與包裝紙類似的色調,把白底換成米黃色,上面無論是線條還是文字,都是統一的深灰色。

          而且整個網站在布局上運用了很多大方框和抽拉效果,與線下門店的設計風格像呼應。

          圖片

          對于商品展示的風格,設計團隊也是給出了一套與網站設計匹配的范例,Aesop 未來如果要增加新品,也可以在此基礎上進行拓展延伸。

          圖片

          另外,配套的活動頁也設計也挺有特色的。

          圖片

           

          思考總結

          雖然國內購物都是平臺的天下,但是很多大品牌還是沒有放棄做自己的網站。

          Aesop 這個網站,不論是在視覺風格、內容策略還是信息架構上,都是為這個品牌量身定制的,在細致程度上有統一模板的電商平臺難以企及的地方。

          我想未來哪怕平臺再強再大,小而美的電商如果能夠把細分領域的體驗做到極致,還是有自己的生存空間的。

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》做好大平臺忽略的細節,這購物網站連獲三大設計獎

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          UI設計細節連載系列① | 讓設計細節更高級的12個實用小技巧

          seo達人



          大家好,我是彩云。在做UI界面設計時,有時候看著設計出來的界面總覺得不大好,但又不知道問題出在哪,這里其實考驗的就是設計觀察力。資深設計師之所以強,往往就是強在對設計細節的把握能力,他們總能找到你所看不到的細節問題。大的問題往往一眼就能看出來,但設計品質高低往往就藏在這些設計細節中。觀察力的提升也是來自于平時項目中的經驗積累,為此,彩云圍繞設計細節計劃出一個系列文章,今天這篇文章是第一期,感興趣的同學保持關注,后續會有更多設計細節干貨文章連載更新,保證看完就能用到自己的工作中。

           

          圖片

          當你在設計一個高效、美觀的UI界面時,有時只需要一些小的調整,就能快速提高設計的品質。有時候僅僅是簡單的調整就能設計出讓客戶、用戶和你自己真正滿意的界面。

          在這篇文章中,我整理了一些小的設計技巧,來幫助你快速改進自己的設計,提高用戶體驗。

           

          1.適當使用文本裝飾元素

          圖片

          有些人會拿極簡設計出來說事,認為不應該加多余的文字干擾 ,界面上的內容都應該遵循有意義這個原則,這沒有問題。但有時候增加文本的目的只是簡單的為了“裝飾”,這樣是可以的。我們不希望所有的設計都變得平平無奇。

          純粹出于裝飾原因而加入一些比較特別的元素也完全沒問題,它可以不遵循可訪問性標準,比如顏色對比度特別淺,看不清都沒關系。只要這些元素不影響用戶體驗就可以。

           

          2.UI界面中的不同元素要有區分度

          圖片

          按鈕、通知(文字鏈接)是用戶界面中兩個獨立又重要的元素。如果可以的話,一定要確保用戶在瀏覽你的網站或應用時能夠快速且輕松地將它們區分開來。

          按鈕,在大多數情況下都是最重要的,所以在界面中一定要確保是最突出,并且很容易區分其他元素(例如:文本鏈接)。

           

          3.使用更自然的投影

          圖片

          設計過程中我們通常都會用到投影。投影的恰當使用,可以有效提高視覺品質。在設計界面時,避免使用比較重的投影,降低不透明度,讓界面看著更加自然。

           

          4.使用讓視覺更加清晰的字體

          圖片

          在設計中,字體適當都使用大寫也是很不錯的。它可以幫助你在設計中實現元素之間的多樣性和對比度,提高視覺的整體效果。但要確保選擇是合適的字體,行高和字重粗細,確保給用戶呈現的內容清晰度。

           

          5.面包屑導航設計要便于用戶理解

          圖片

          導航的設計無處不在,通常會應用在內容比較多的網站上,但有時很難理解它所表達的意思。如果將字體顏色和粗細稍微調整下, 就可以讓用戶快速確定自己所在站點中的位置,以及他們可能需要去的其他地方。

          例如:如果他們通過搜索跳轉到某個站點的某個位置,這就特別有用。像上圖中的設計一樣,始終讓導航鏈接中的最后一項讓它在視覺上與其他有明顯區別,這樣用戶更加容易理解。

           

          6.少用過高飽和度的顏色

          圖片

          高飽和度的顏色(明亮的藍色、紅色、綠色等)在網站上是挺有視覺沖擊力,并能吸引用戶的注意的。但是如果過度使用它們可能會讓用戶的眼睛感到疲勞,尤其是結合文本內容一起使用的時候。

          盡量少地使用高飽和的顏色,你可以嘗試把飽和度降低,增加顏色中的灰度來使顏色變淡,這樣不僅能避免用戶視覺疲勞,還能更加突出重點內容,讓用戶閱讀起來更加方便且不被視覺干擾。

           

          7.使用用戶熟悉便于識別的圖標

          圖片

          在設計中使用圖標時,最好使用用戶熟悉并便于識別的圖標,讓用戶能快速理解使用它能做什么。使用不能傳達正確含義的圖標,只會變成視覺噪音,引起用戶混淆,成為用戶的認知障礙。

           

          8.使用親密性原則來表達元素之間的關系

          圖片

          版式設計四大基本原則:對比,重復,對齊,親密性,其中親密性原則是把畫面中相關元素進行分類,建立某種視覺上的關聯,實現頁面整體結構清晰度,加快用戶在瀏覽網站或應用時的認知。

           

          9. 使用4pt基線網格+8pt網格來做字體排版

          圖片

          進行文字排版時,將 4pt 基礎網格 與 8pt 網格 一起使用可以為設計帶來更加和諧的垂直節奏。

          你只需要使用 4 的倍數(16、20、24、28 等)的行高值將字體與 4 的基線網格對齊。為什么是 4? 好吧,就我個人而言,我發現在處理某些文本大小時,過去以 8 的倍數進行縮放并不是那么通用。

           

          10. 減少標題的行高

          圖片

          冗長的正文需要足夠的行高來增加可讀性,而標題通常要短得多,所以你可以稍微減少間距。

          標題的推薦行高通常是文本大小的1 – 1.3倍,標題文字越大,需要的行高就越少。

           

          11. 使用色輪上的鄰近色不容易出錯

          圖片

          鄰近色,是最和諧的配色方案之一,當你在挑選顏色遇到困難時,它能給你很大的幫助。

          一組由“主”、“次”、“再次”組成的鄰近色可以幫你快速構建一個簡單的、不會出錯的配色方案。

           

          12. 在設計中最大化信噪比

          圖片

          設計中的清晰度和可用性可以通過“最大化信號”和“最小化噪音”來實現,這反過來又產生了高信噪比。

          你可以通過確保相關信息(信號)有效地呈現,而不相關的信息(噪聲)被完全減少或刪除來實現這一點。剪掉絨毛。使事情更加清晰,刪減無關信息,強化重要信息,提高信噪比達到提高界面設計品質的目的。

           

          彩云注:由于篇幅有限,今天是設計細節系列文章的第一期,下一篇會繼續更新更多設計細節,感興趣的同學保持關注,保證看完就能用到自己的工作中。如覺得有學到,一定要給彩云點個贊,我會更有動力,哈哈~

           

          本文翻譯已獲得作者的正式授權(授權截圖如下)

          ??????

           

          原文地址:mediue

          作者:Marc Andrew

          譯文地址:彩云譯設計(公眾號)

          譯者:彩云Sky

          轉載請注明:學UI網》UI設計細節連載系列① | 讓設計細節更高級的12個實用小技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          出色的圖標是如何一步步設計出來的?來學學這些實操方法!

          seo達人



          圖標是設計中不可或缺的一部分,是引導各種操作的視覺提示,可以賦予產品獨特的身份。文章通過設計實操來幫助大家發現圖標設計的更多可能性。

           

          01 谷歌Material Design原則

          使用簡單的幾何形狀和大膽的顏色

          圖片

          扁平化的設計趨勢啟發了Material Design,它也是基于基本的扁平形狀,仔細選擇最能代表圖標所描繪的元素的形狀。

           

          用細微的陰影增加深度

          圖片

          陰影是為設計賦予深度感的好方法,可以展示光線投射到物體上的效果。另外需要注意的是,模擬的自然光通常來自左上角。

           

          使用顏色替換陰影

          圖片

          ▲ 每種顏色通過多種色調的變化來模擬視覺深度。在上一版的Gmail圖標中,可以看到M的形狀使用了不同深淺的紅色,而信封下面使用了多種灰色陰影。

           

          02 分步進行圖標設計實操

          了解了基本原則,接下來就到了實操環節,通過下面這些圖標的實操演示一步步掌握這種簡潔易用的設計風格。

           

          閃電圖標

          圖片

          ▲ 通過在兩個形狀的相交處創建陰影,實現頂層形狀懸浮的效果;使用三種黃色陰影–頂層較淺、底層較深和最深的陰影。

           

          聊天圖標

          圖片

          ▲ 復制頂層聊天氣泡,并將副本向右下移動來作為顏色最深的陰影。

           

          標記圖標

          圖片

          ▲ 復制圖標,并刪除右上角多余的點;復制左側形狀,并移動到右側形狀的頂部;兩個形狀相交以創建陰影效果。

           

          旗幟圖標

          圖片

          ▲ 將圖形導角,提取標志底部的錨點繪制兩條相交的線來創建折疊效果。

           

          心形圖標

          圖片

          ▲ 復制心形圖標,隔離形狀的左半部分;從右上角向下畫一條對角線;將生成的形狀與心形重疊,然后向右移動以減去陰影形狀。

           

          山峰圖標

          圖片

          ▲ 創建兩個不同大小的三角形;將較小的圖形向右移動,并將得到的重疊部分作為陰影形狀;最亮的顏色保持在左側;最后運用圓角來調整圖形。

           

          人物圖標

          圖片

          ▲ 選擇并復制左側人物形狀的下半部分;將副本與右邊的形狀對齊;擇三個重疊的形狀,使用路徑查找器做出陰影形狀。

           

          浮動圖標

          圖片

          ▲ 把下方的形狀向上移動至中點;復制上面的菱形,并將副本向下移動10-20像素;選擇下面的兩個形狀,使用路徑查找器保留陰影形狀。

           

          信封圖標

          圖片

          ▲ 使用“直接選擇工具(A)”,選擇信封形狀的第二高的點;使用“鋼筆工具”在線段右側添加一個點;抬起上面的兩個點并向左右移動(如圖所示),將負空間看著像抽出來的信紙效果。

           

          蛋糕圖標

          圖片

          ▲ 隔離蛋糕底部的形狀并復制;縮小寬度并向內移動;將生成的形狀移動到原始圖標的頂部,并延伸較高的點以與上方的形狀重疊。

           

          03 最后:嘗試改變圖標的感覺

          跟著過程一步步來設計,你也能做出效果很棒的圖標。最后幫大家整理了圖標實操詳細GIF教程,關注公眾號,后臺回復: 實操 即可獲取!

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》出色的圖標是如何一步步設計出來的?來學學這些實操方法!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          干貨|移動端·表單設計有方法!

          seo達人



          不論是 toB 還是 toC 的移動端設計中,都會遇到一些表單填寫和上傳證件信息的情況。面對移動端要手動填寫的表單,用戶通常期待有高效的解決辦法可以立即完成填寫任務。本文為你總結出了幾種移動端表單設計的實用原則,可以有效解決表單不夠友好、用戶填寫錯誤、費時費力的問題,希望對你有幫助。

           

          一. 信息內容層級化——信息分層次、分步驟、分頁面呈現

          1 . 表單結構分層

          從表單結構層面來看,內容過長的表單,信息可以分步驟、分頁面處理。

          使用條件

          • 表單內容過長,用戶填寫有壓力
          • 操作步驟較多,需要給用戶明確的步驟提示
          • 中途需要多次跳轉,接入第三方服務的表單

           

          案例分析

          做企業認證時,由于需要填寫的項目較多,步驟繁雜,因此很多產品會采用分步驟的形式,提示用戶當前進度。

          圖片

           

          2 . 頁面內容分層

          每個頁面的信息內容呈現,有層級,有重點

          使用條件

          • 表單填寫內容較多
          • 頁面內文字內容較多
          • 產品對于用戶填寫的內容有傾向(如對平臺來說更有意義、更希望用戶填寫的信息)

           

          案例分析

          大眾點評在設置用戶信息時,雖然要填寫的內容都是“設置”,但是重點需要設置的信息使用了鏈接顏色處理,做了強調。

          圖片

           

          二. 減少用戶輸入——用其他方式代替用戶手動輸入

          1 . 以選擇代替輸入

          如果用戶可以做選項時,就不要使用輸入,可以充分利用移動設備的性能,比如 GPRS 定位、通訊錄等,合理調用第三方或系統信息。

          使用條件

          • 填寫的內容邊界較為模糊,詞語不確定性較高
          • 選項數量控制在 3-5 個之間
          • 可以調用第三方或系統信息

           

          案例分析  

          • 案例一:知乎 App 博主認證 和 愛康國賓 App 個人信息都使用了部分選項替代填寫:

          圖片

           

          • 案例二:淘寶 App 可以調動系統定位,并提供幾個最有可能的選項,讓用戶選擇最佳定位。

          圖片

           

          2 . 提供默認選項,替用戶做選擇

          選取最大概率事件作為默認選項,減少用戶的手動調整

          使用條件

          • 系統能夠確定出符合用戶的較大概率選項
          • 選項數量控制在 3-5 個之間

           

          案例分析  

          螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區,幫助用戶默認選擇概率最大的選項,不需要用戶自己操作。

          圖片

           

          三. 定義鍵盤類型

          根據調用內容調動不同的鍵盤類型

          根據表單輸入內容的不同,調用出系統不同的鍵盤類型。

          使用條件

          • 填寫的內容有明確的輸入語言要求

           

          案例分析  

          航旅縱橫在航班查詢的時候,由于航班號都是大寫字母和數字的組合,所以鍵盤會默認調用出只有數字和字母的輸入法,同時默認開啟大寫形式。螞蟻鏈實人認證在用戶手動填寫身份證時也同理。

          圖片

           

          四. 避免重要信息被遮擋

          重要的信息要始終可以被看到

          需要避免輸入項被鍵盤遮擋,也要避免將重要的輸入提示作為占位符,不要在用戶填寫時被輸入的內容遮擋。

          使用條件

          • 表單的填寫位置剛好會被彈出的鍵盤擋住
          • 輸入提示很重要,需要用戶在輸入時隨時注意
          • 輸入提示很長,用戶短時間內記不住

           

          案例分析  

          大眾點評在寫評論時,一些可以激勵用戶寫點評的提示性文字,會在用戶輸入時始終存在。

          圖片

           

          五. 實時校驗

          重要的信息要始終可以被看到

          當輸入需要被判斷和檢驗的信息時,系統最好可以針對信息做實時校驗,避免用戶一直到最后提交表單時才發現填寫問題。

          使用條件

          • 輸入的信息需要判斷,并會影響最終的表單填寫通過率
          • 輸入內容的質量需要用戶知曉,如密碼的強度

           

          案例分析  

          證件號碼輸入錯誤時會給予相應的提示。

          圖片

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

           轉載請注明:學UI網》干貨|移動端·表單設計有方法!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          酷家樂B端線上增值營銷類視覺原則

          seo達人


          酷家樂的產品性質決定了其增值付費類活動的目標用戶從根本上說是真正意義上的b端用戶,這類用戶群體的審美喜好一直以來很難與視覺流行的趨勢和酷家樂品牌調性找到平衡點,這類視覺產出已經遇到瓶頸;而此類運營動作越來越多,并且作為公司營收的重要組成部分,在視覺側形成正確的指導方向具有非常重要的意義。

           

          背景與目標:

          背景

          • B端增值付費類用戶群體具有特殊性
          • 低成本的線上運營活動推廣逐漸增多
          • 在線增長是公司營收的重要部分,尚未形成視覺側的品牌形象

          目標

          • 符合用戶層且體現時下趨勢的視覺形象
          • 品牌刻板印象扭轉
          • 具有貫穿各類運營活動的可識別特性,形成視覺指導

           

          調研階段:

          用戶畫像

          圖片

          過半購買角色具備設計屬性,對審美也有一定的要求,所以推廣視覺表現可以也需要具備一定的設計感

          圖片

          購買角色年齡分布較廣,崗位屬性分布也比較平均,因此推廣視覺表現需要兼顧各年齡層,具有通用適配性

           

          視覺現狀

          圖片

          設計過于“用力”,為了在營銷活動中體現酷家樂科技屬性,與D端視覺產生差異,一味采用深色/藍色,硬朗機械感;營銷氛圍疊加后畫面過飽和,難以與傳統電商拉開層次。

           

          流行趨勢

          圖片

           

          關鍵詞提?。?/strong>

          圖片

          根據用戶畫像,結合流行趨勢與酷家樂品牌調性,我們得出了視覺關鍵詞,我們將它概括為“輕炫彩”。

           

          情緒板:

          圖片

           

          實戰案例:

          圖片

          圖片

          升級后的虛擬獎品全部采用3D設計,強化獎品的真實存在感,更容易吸引用戶注意;同時應用“輕炫彩”的設計原則,能夠普適于大部分增值營銷類活動頁面/海報中。

          輸出的系列圖標可以在不同場景下復用,提升了長期的設計效率。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:柚子、阿九

          團隊:柚子、阿九、九州、白夜

          轉載請注明:學UI網》酷家樂B端線上增值營銷類視覺原則

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          為什么以前的同學和你的差距越來越大

          seo達人


          之前刷到一條非常勵志的新聞:一個高中寢室的三個閨蜜都考出了七百多分的好成績,在為她們感到驕傲的同時,我也陷入了反思。這也許就是所謂的圈子,身邊的人都很優秀的時候,你自然不會太差。

           也讓我想起了之前一個伙伴通過努力進了字節跳動實習,帶動了整個寢室的都努力起來了。大家依然希望向優秀的人學習,以此作為自己的目標。一起讀書的時候大家都在一條起跑線,可是隨著時間的推移,你們之間的差距開始明顯。如果你跑在前面自然是好事,就怕落后的是自己。

           不進則退,工作多年之后反思自己,這些年是進步了還是原地踏步。如果想要縮短與他人的差距,或者拉開自己未來的優勢,在職場五年內需要重點對待。

          圖片

           

          五年內你要做好這十件事:

          一、確定職場路徑

          二、強化設計基礎

          三、打造精專技能

          四、勤于作品輸出

          五、培養總結能力

          六、加強提案能力

          七、疊加行業背書

          八、推開學歷門檻

          九、融入優質圈子

          十、積累職場口碑

           

          一  確定職場路徑 

          行業里面流傳著一句話:“三年入行,五年精?!?,職場五年對于設計師來說至關重要。想要在這個階段時間內把一個方向做精,需要早一點確定職場路徑,雜而不精很難邁上更高的臺階。

          圖片

           我們可以豐富我們的專業技能,但是要明確一點,這些多維度的技能都是為了輔助主方向的深入突破。專業化的職場路徑上比較忌諱舉棋不定,這樣就會造成能力平庸,沒有自己的差異化競爭力。

           也有初入職場的同學無法判斷哪一個路徑適合自己,就會需要時間來驗證,這種情況下可以找個有經驗的前輩為你分析各路徑的天花板在哪里。盡量縮短這個試錯的時間,畢竟五年也是一晃而過的。

          圖片

           大家進行自我評估,看看你的職場路徑是否清晰,及時穩固方向。

           

          二  強化設計基礎 

          大家不要一味的追求表面的高度,而忽略基礎知識的鞏固,這也是為什么大部分科班出身的設計師上手能力都會更好一些。不要局限于當前工作輸出的能力范圍,要加強更多關聯方向的基礎理論知識和經驗技巧。

          圖片

           一些基礎的美術知識、版式技巧、色彩理論、手繪基礎、造型透視等都要利用空余時間學習,有些內容短時間可能感受不出作用,但是在未來也許就是你設計瓶頸的突破劑。

          圖片

           給自己制定一些閱讀計劃和學習計劃,強化設計基礎,只有地基越牢固,職場大樓才能建得越高。

           

          三  打造精專技能 

          雖然我們都在說技多不壓身,但是這個作為滿足普通的工作需求沒問題,想要有自身的差異需要打造精專技能。我們缺少的永遠不是普工,而是高技能人才,要在一個垂直方向有自己的“拿手好戲”。

          想要在一個階段時間內快速突破,就需要縮短我們的技能范圍,重點強化一個方向。最快的方法就是通過輸出倒逼輸入,在一個精專的方向里面堅持日常輸出,不斷的進行復盤總結。對關聯的知識進行查漏補缺,對偏弱的技能反復磨練。

          圖片

           在設計職場中我們雖然講究“T”型發展,但是主干上的精專才是支撐技能高樓的關鍵。

           

          四  勤于作品輸出 

           技術能力的養成離不開點點滴滴的磨練,而對于設計師來說,證明自己能力最有效的方法就是作品。光說不練假把式,道理說得頭頭是道,作品做得一塌糊涂,肯定是得不到行業認可的。

           專業能力的增長都是需要自我驅動的,不要僅局限于工作環境中的積累,日常的學習沉淀、作品輸出、復盤總結等也是至關重要。要勤于作品輸出,反復設計才能找出更多問題,進而不斷解決問題,獲得經驗和技巧。

          圖片

           對于 UI設計師來說,當具備軟件基礎和設計基礎之后,剛開始可以每天練習 1-2 個界面(具備交互關聯的組合界面)。只要堅持下去,在視覺層面不難攻破。然后再逐步練習成套作品的輸出,鍛煉自己對于全案設計的把控,加強獨立完成項目的能力。后期也要培養寫作性質的作品輸出,加強設計總結能力和方法論的輸出能力,讓作品輸出的形式不局限于視覺層面。

          圖片

           

          五  培養總結能力 

          設計師的總結能力在初入職場的時候并不能被大家所重視,這個時候執行層面的能力比較重要,這是保障你完成基本需求的關鍵。隨著項目經驗的豐富和執行能力的成熟,我們會要求完成難度系數更高的項目,會去對設計經驗進行總結和研究設計方法論。

          對優秀設計經驗和設計技巧的總結,可以讓我們掌握設計的軌跡,沉淀于自己的項目中。對于 UI 設計師來說,培養總結能力要從產品體驗日記開始,訓練我們的觀察和記錄能力,也是養成習慣的關鍵。記錄過程中的文案描述,從最開始的口語化逐步培養行業術語的運用;從流水賬式的記錄逐步學會精簡,言簡意賅的說清楚所見所感。

          圖片

           總結能力的提升可以從教程式文章開始,把自己擅長的某個設計經驗梳理出來,這也是查漏補缺的過程。逐步過渡到對行業趨勢的總結、設計技巧的總結、項目經驗的總結、職場經驗的總結等。剛開始不要寫太寬泛的總結,以一個單一的點開始總結,以點帶面的總結出這類需求設計的方法和技巧,形成可供他人學習的方法論。

           

          六  加強提案能力 

          能夠做出好的設計,也要具備好的提案能力,設計需要被賦予詮釋才能打動人心。我們不能只是畫好圖就丟給需求方,這樣他們會使用自我主觀意識去判斷,無法真正意義上了解你的設計想法。

          提案能力對于設計師來說至關重要,分為設計思路整理、提案文檔制作、演講能力、臨場控制能力、答疑解惑能力等。在項目中能有機會進行提案千萬不要推辭,這是鍛煉自己的機會。有些設計師由于性格內向會讓同事代勞,這其實是在白白浪費機會,跳出舒適區才能更快的成長。

          圖片

           在職場中除了爭取機會進行項目提案以外,也可以多參與一些分享來提升這方面的能力,刻意培養自己。

           

          七  疊加行業背書 

          其實很多初入職場的設計師容易忽略行業背書這個概念,覺得只要有份輕松的工作就好,最好錢多活少離家近。工作幾年后才恍然大悟,發現行業背書的重要性。

          行業背書就相當于推動求職的“催化劑”,可以讓我們獲得更好的機會。組成我們行業背書的因素很多:好的學歷背景、大公司的工作經驗、知名項目的參與經驗、設計大賽的獲獎作品、專業設計平臺的推薦設計師、行業內的影響力等等。還有很多都可以疊加為我們的行業背書,我們要不斷去疊加,增加我們求職簡歷的“含金量”。

          圖片

           

          八  推開學歷門檻 

          對于設計師來說學歷是敲門磚的作用,特別是一些大廠的招聘需求,會對學歷有一個門檻限制。不過在日常工作中,你會發現學歷并不是絕對的能力體現,專業能力的強弱與學歷的高低并沒有太大的關系。如果學習能力比較強的,大學基礎知識學得比較好的,在職場中的適應能力也許會更好。

          圖片

           雖然專業能力是我們的首要條件,但是我們也不能被學歷限制,現在提升學歷的方法很多,宜早不宜晚。要早點做好時間規劃,把這個問題解決掉,后期才能把精力重點放在專業的精進上面。

           

          九  融入優質圈子 

          在一個行業工作時間久了,就會認識更多的同行設計師,久而久之就形成了自己的人脈和圈子。在后期圈子也會決定著自己的未來,比如想要去大的公司,要是有認識的朋友內推一下,效率就會比普通的投遞方式要快很多。在一個優質的圈子里面,大家都是優秀的設計師,自然會被帶動著互相進步。

          圖片

           在自己的第一個職場五年內,要不斷的積累屬于自己的人脈和融入優質的圈子,認識更多有能力的設計師。從優秀的人那里可以獲取更多優質的動態,建立一個印象之后,以后遇到問題也可以請教他人,獲得解決思路和方向。

          圖片

           通過一些設計公眾號的關注、設計平臺的交流、線下分享會的接觸、進階特訓的學習渠道、社群的加入等可以接觸一些設計圈子,篩選自己覺得優質的融入。有時候也要在圈子內解答別人問題和分享自己的經驗,以此來加深大家對你的印象,以后遇到問題拋出來的時候才會有更多人愿意交流,互相幫助!

           

          十  積累職場口碑 

          隨著我們工作年限的增加和工作單位的轉換,我們會接觸很多不同職業的同事,而我們在這些同事眼中的印象決定了未來的資源轉換程度。如果大家對你沒有印象或者印象不好,遇到設計需求或者機遇,估計也不會想到你,我們在職場中的口碑就顯得格外重要。

          我們在職場中都會被標簽化,大家都會在腦海中對你形成標簽記憶。比如你是靠譜還是不靠譜、專業還是不專業、好相處還是高傲難相處等等,和你接觸的人對你的標簽設定越好,以后無論是面對機遇,還是你有求于人的時候,都會因為這個好的印象而愿意幫助你。反之,可能會遺忘你,注定只是別人職場中的一個“過客”。

          圖片

           在職場中要注重職場禮儀,這個和你的專業能力同樣重要。不同的環境要學會約束自己的行為,而職場是一個帶著約束性的場景,你的態度也是別人對你的態度,都是互相作用的。

           

          總結 

           三年入行,五年精轉。對于設計師來說,第一個職場五年至關重要,不僅需要將專業能力提升到高級/資深的階段,職場經驗和人脈的積累也決定了第一個職場五年的變化。是原地踏步還是極速前進,都在五年之后開始發力。

          五年的積累可以讓我們具備專業層面的獨當一面,也能讓我們具備放手一搏的經驗和資源,想要突破瓶頸期就要打好基礎,這樣才能走得更高,看得更遠。

          希望這些個人的職場反思可以帶給大家拋磚引玉的思考,對于剛入行的設計新人有一個計劃的指導;對于在職的設計師有一些調整方向的參考。

          備注:本文配圖來源于 Unsplash

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》為什么以前的同學和你的差距越來越大

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

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

          存檔

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