<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設計者

          當互聯網不斷的深入到我們的生活中,我們對安全感的需求也延續到了互聯網使用中,特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點,用戶對于資產安全的掌控感更為關注,產品使用體驗欠佳也直接影響客戶安全感。


          以下將基于自身工作總結和行業經驗,聚焦互聯網金融產品分享和總結如何向用戶營造安全感。


          目錄:

          一、需要什么樣的安全感?

          二、如何傳達出安全感?

          三、怎樣體現出安全感?




          需要什么樣的安全感?


          安全感是人類最底層的需求,但不同類用戶群體需要的安全感也各有千秋,我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告,將線上理財的人群分為四類:

          分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后,成為金融移動互聯網的中堅力量。


          這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點,當市場普遍行情下跌時,更容易產生焦慮的情緒而導致“割韭菜”,進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示,在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍,而當時對應的市場行情正為基金普遍大跌。

          因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。


          而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示,理財知識更充足,理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。




          如何傳達出安全感?


          安全感是一種感性的心理感受,而人類的情感由本能、行為、反思三個層面共同決定的。

          這三個層次作為人類大腦的運作的規律,映射到設計當中,同樣是可供遵循、值得探究的。



          本能層

          先于意識和思維,它是外觀要素和第一印象形成的基礎,著重于產品的外觀、觸感等?!懊烙^即實用原則”人們會潛意識里認為好看的東西也是好用的,所以在界面設計當中,主要設計對象是視覺設計。


          而金融產品中,常用藍、綠等冷色調的色彩,給人以冷靜,穩定的感覺,表現金融產品的科技感和可靠性;常用紅、黃、橙等暖色調,代表著熱情、溫暖與責任。


          行為層

          是人類身體日常行為的運作,行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性,以及正面的心情感受。在界面設計當中,主要設計對象是交互設計。(將在下文通過投資場景詳細分析)



          反思層

          超越了本能層和行為層,存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度,主要的設計對象是正向情感的結果反饋以及品牌信任。


          良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時,往往強大的品牌背書起到了關鍵作用,即使是同一只基金,用戶也會選擇在自己信賴的平臺里購買。

          我們可以通過在頁面設計中加入更多的品牌元素,如品牌主題色、LOGO、品牌IP形象、品牌slogan等,來潛移默化地讓用戶感受企業的價值:


          另一種常見于一些平臺利用強大的背書以及所獲的成就,清晰地向用戶展示可以提供的保障權益,責任條款及資質介紹等來傳達企業對用戶負責的態度,提升用戶對產品乃至對企業的信任感:




          如何體現出安全感?


          我們將金融的生命周期分為三個階段,分別可以概括為:投資前(產品選擇)、投資中(產品交易)、投資后(產品管理),不同階段的關注點不同,而對于安全感需求各不相同:



          投資前

          結合文章一開始對人群的分析,由于投前的行為特點更多聚焦于產品的選擇,因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢?”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等,尤其存在于一些新形式的理財組合產品和策略智能投產品中。


          在這個階段的安全感維護,除了相關頁面的信息降維、必要的投教啟蒙以外,還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動,讓小白用戶通過更有趣的方法了解產品,了解自己適合的產品。

          而對于較有經驗的理財“老司機”而言,安全感的缺乏更集中于“過往表現怎么樣,如最大回測率等”、“市場行情、政策是否利好”、“基金經理的資歷”等,而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。


          投資中

          當投資者已經選擇好信任的理財產品時,在產品交易的各個界面也需要關注交易流程中安全感的反饋。

          其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時,系統給予用戶的正確引導,可以幫助用戶打消顧慮,建立信心,讓用戶感受到一切都在順利地進行著,這對那些在設備操作方面缺乏信心的用戶來說尤為重要,用戶不會對自己的操作或對平臺產生質疑,如:專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等


          反向反饋是指用戶在操作過程中出現或疑似出現誤操作時,系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作,及時更改,使流程順利進行,尤其是對于一些理財小白而言,合理的容錯設計更促進有效投資,提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。

          引起思考:

          雖然天天基金的撤單確認展示了退回帳戶,但是此彈窗的取消按鈕引導性過強,首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作(還以為是可選擇退的帳戶)。



          投資后

          產品交易成功后,投資者的關注會更集中于自己的資產的變化,產品的未來走勢等,因此在安全感的提供上,需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等,甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等

          引起思考:

          在支付寶的基金總金額中,存在交易進行中的提示文案為“買入待確認*元”,但不少小白會產生疑問,當前展示的基金總金額是否包含提示的待確認金額,此時是否可將文案改為“含買入待確認*元”(畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中)


          另一方面的更需要考慮當基金產品存在虧損時,及時向投資者傳達情感陪伴和合理的投資交易,以促進投資者優化持倉或保持中長期持有,避免頻繁的短期交易而導致不良的盈利體驗。

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

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


          文章來源:站酷 作者:陳皮紅豆沙

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)

          前端達人

          input輸入框在獲得或失去焦點時隱藏或顯示文字,這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧,本文使用jquery實現以下,感興趣的朋友可以參考下哈

          大家可以看效果圖的搜索輸入框,默認顯示著“用戶名/Email”的提示,當這個 input 輸入框獲得焦點時,就自動清空等待用戶輸入,當用戶啥也沒輸入就離開這個 input 輸入框時,輸入框內又再次顯示“用戶名/Email”的提示。是不是很常見?很多搜索、登錄、表單都會用到這個效果,但是我看了N多個網站,有90%以上是這么實現的: 

          <input type="text" value="搜索關鍵字" onfocus="if(this.value == '搜索關鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關鍵字'" /> 

          我是非常反對把 javascript 寫在 html 標簽里的,這和 style 寫在 html 標簽里一樣,雖然不違反 W3C 標準,但也不推薦這么寫。因為: 
          1.完全沒有復用性可言,如果是個表單,輸入框很多,每個都需要這樣的效果,那就每個都這么處理嗎? 
          2.如果要修改其中的提示文字,費時費力又不好維護。 
          3.我們倡導結構(html)、表現(css)、行為(javascript)三者分離,這才是一個好的頁面。 
          那要怎么寫才能實現這個效果,而且既有復用性,又好維護,又不需要把 js 寫進 html 里呢? 
          具體方法如下: 
          首先肯定是引入jQuery 
          Html代碼: 

          <div><input type="text" value="提示測試" class="input_test" /></div> 
          <div><input type="text" value="請輸入搜索關鍵" class="input_test" /></div> 

          jQuery代碼: 

          復制代碼
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
          <script type="text/javascript"> $(function(){ 
          $('.input_test').bind({ 
          focus:function(){ if (this.value == this.defaultValue){ this.value=""; 
          } 
          }, 
          blur:function(){ if (this.value == ""){ this.value = this.defaultValue; 
          } 
          } 
          }); 
          }) </script> 
          復制代碼

          只要在實現的input輸入框加上”input_test”這個class就可以輕松實現了 




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

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



          文章來源:博客園

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

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

          jquery控制元素的隱藏和顯示的幾種方法

          前端達人

          使用jquery控制div的顯示與隱藏,一句話就能搞定,例如:

           

          方法一

          顯示:

          $("#id").show()表示為display:block,

          隱藏:

          $("#id").hide()表示為display:none;

           

          方法二

          $("#id").toggle();

          切換元素的可見狀態。如果元素是可見的,切換為隱藏的;

          如果元素是隱藏的,則切換為可見的。

           

          方法三

          顯示:

          $("#id").css('display','block');//顯示

          隱藏:

          $("#id").css('display','none');//隱藏

          或者

          $("#id")[0].style.display='none';

          display = none 控制對象的隱藏

          display = block控制對象的顯示

           

          方法四:

          元素顯示:

          $("#id").css('visibility','visible');//元素顯示

          元素隱藏:

          $("#id").css('visibility','hidden');//元素隱藏

          CSS visibility 屬性規定元素是否可見。
          visible 元素可見。 
          hidden 元素不可見。 
          collapse 在表格元素中使用時,此值可刪除一行或一列,但它不影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 "hidden"。 
          inherit 從父元素繼承 visibility 屬性的值。

          注意:

          display:none和visible:hidden都能把網頁上某個元素隱藏起來,在視覺效果上沒有區別,但是在一些DOM操作中兩者有區別:

          display:none ---不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失,通俗來說就是看不見也摸不到。

          visible:hidden--- 使對象在網頁上不可見,但該對象在網頁上所占的空間沒有改變,即它仍然具有高度、寬度等屬性,通俗來說就是看不見但摸得到。

          
          
          1. //第1種方法 ,給元素設置style屬性
          2. $("#hidediv").css("display", "block");
          3. //第2種方法 ,給元素換class,來實現隱藏div,前提是換的class樣式定義好了隱藏屬性
          4. $("#hidediv").attr("class", "blockclass");
          5. //第3種方法,通過jquery的css方法,設置div隱藏
          6. $("#blockdiv").css("display", "none");
          7. $("#hidediv").show();//顯示div
          8. $("#blockdiv").hide();//隱藏div
           


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

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



          文章來源:csdn

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

          藍藍設計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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          做了5年設計,還是這個設計技巧實用??!

          seo達人



          終于迎來了一年中最熱的時候,整個人都感覺熱膨脹了,似乎空調也變弱了許多,每天只想著一頭扎進冰箱,可能這才是夏天的最優解。今天就以大暑為主題設計一款字體,看看如何讓一個字看起來非常熱。

           

          首先將文字整理好。

          圖片

           

          STEP 01 > 分析屬性

          接著我們分析字體屬性,上次小暑是想體現涼爽,那么這次我們來表現特別熱的感覺。

          圖片

          根據分析出的屬性,我們先構思好風格方向,胖胖的字體,要體現熱的感覺。

          圖片

           

          STEP 02 > 設計字體

          下面將編排形式以圖框形式畫出來,這里可以看出是烈日和主題字結合的形式,筆畫風格就是比較胖的設定。

          圖片

          我們開始具體操作,這里我們用畫筆先畫出大概的草圖,接著細化文字。

          圖片

          做好字形之后,我們將兩個字靠近,很擠的感覺,中間可以加上一些連接特征,減去部分筆畫線條,使層次疊壓更明顯。

          圖片

          然后我們再繼續增加特征,加一些汗珠和流汗的感覺。

          圖片

          接著我們需要對字體進行編排,按照之前畫出的圖框,畫好烈日與文字疊壓。

          圖片

          最后我們可以用褶皺工具做出抖動的效果,熱浪的感覺就有了。

          圖片

           

          STEP 03 > 搭配顏色

          最后就是搭配顏色,這里底色我用了深藍色,可以更好的突出設計效果。

          圖片

          OK,字體做完了,學會提取屬性的特征,會使你的設計更有意思,技法只是其中一個環節,想法是非常關鍵的一步。

           

          原文地址:趣投記(公眾號)

          作者:趣趣熊

          轉載請注明:學UI網》做了5年設計,還是這個設計技巧實用?。?br />

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

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


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

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

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



          深度解析螞蟻Ant Design的設計原則

          ui設計分享達人



          『 Ant Design是什么 』


          眾所周知螞蟻集團的B端產品是一個龐大的系統,數量多且功能復雜,而且變動頻繁,常常需要設計師和開發人員能快速做出工作上的配合。同時這類產品中有存在很多類似的頁面以及組件,根據原子設計理論可以得到一些穩定且高復用性的內容。

          隨著這兩年B端產品的逐漸白熱化,越來越多的用戶對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標,螞蟻集團體經過大量項目實踐和總結,逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design。通過組件化設計規范,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。



          『 Ant Design設計原則是什么 』


          針對B端產品反復出現的一些設計體驗等問題, Ant Design 給出標準的設計原則,實現跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面,既減少了不必要的認知成本,又能夠提升設計的效率??紤]到需要適應各種定制化的業務場景,設計原則具有一定的靈活性,萬變不離其宗,通過了解設計原則的構建邏輯,高效組織信息、幫助建立用戶與界面的互動等原則性要求,可以衍生出更具場景特性的設計方案。


          ① Ant Design設計原則的由來

          可以說 Ant design的設計規范攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則,并做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充,我在看書的過程結合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明,這也是為什么國內的企業一直以來都很喜歡使用這套組件的原因。


          ② Ant Design設計原則的適用范圍

          1. 我們先說說『Ant Design 』的適用范圍:

          稍微了解 Ant Design 的小伙伴都知道,本系統是針對B端后臺系統,承載媒介是PC端的瀏覽器。使用的人員主要包括:用戶體驗設計師、交互設計師、UI設計師、前端程序員等。

          2. 再說說 『 Ant Design 設計原則 』的適用范圍:

          顧名思義『 設計原則 』主要是針對設計師在創作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統的一部分,但是前文已經提到,此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華,所以設計師可以把這些原則運用到任何的設計領域,并不要局限于企業后臺系統的PC端產品。

          為了方便大家理解,講一個小故事。故事來自于《寫給大家看的設計書》,作者有一年圣誕節收到一份禮物——一本關于植物的百科全書。作者翻閱之后,發現其中有一顆叫約書亞樹的樹,造型奇特,自己從未見過。于是決定出門轉轉,然而發現外面到處都是這種樹。故事到這里就完了。

          可能大家會想,這個故事要講一個什么道理呢?簡單來說就是,當你手中有個錘子,滿世界都是釘子。當你了解到下面要講的十個設計原則后,你會發現它們處處都適用。


          ③ Ant Design設計原則的內容

          十大原則如下:

          • 親密原則(Proximity)

          • 對齊原則 (Alignment)

          • 對比原則 (Contrast)

          • 重復原則 (Repetition)

          • 直截了當 (Make it Direct)

          • 簡化交互 (Keep it Lightweight)

          • 足不出戶 (Stay on the Page)

          • 提供邀請 (Provide Invitation)

          • 即時反應 (React Immediately)

          • 巧用過渡 (Use Transition)



          『 如何運用Ant Design的設計原則 』


          對于一個初級設計師而言,想要了解UI用戶體驗等知識,學習 Ant Design 的設計原則算是比較快能上道的,因為 Ant Design 是吸取了很多前輩的精華,提煉而成的系統。打個簡單的比喻,對于設計師而言 Ant Design 就是設計師學習『 視覺規范 』,掌握『 設計原則 』最好的字典。

          接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設計原則并運用到工作當中。

          Ant Design 定義了10條設計原則,根據『 席克定律 』選項太多不易記憶,于是我找到了這些設計原則的共通性,將其歸為4類,也就是大家只需記住四類設計原則,在工作中適當延展即可。


          ① 視覺層級清晰

          包含 Ant Design 的設計原則有:『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。

          「視覺層級清晰」的重要性體現在 交互前 用戶看到的內容結構是清晰明確的 。一個層級混亂的界面,任何信息的傳達都是無效的。所以保證清晰的排版布局是人機交互前的基礎。


          1. 親密

          如果信息之間關聯性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層次一目了然。


          1.1 縱向間距關系

          • 縱向間距:在 Ant Design 中,通過「小號間距」「中號間距」「大號間距」這三種規格來劃分信息層次結構。這三種規格分別為:8px(小號間距)、16px(中號間距)、24px(大號間距)。


          • 增加元素:通過增加「分割線」來拉開層次。在這三種規格不適用的情況下,可以通過加減「基礎間距」的倍數,或者增加元素來拉開信息層次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是縱向間距,8 是「基礎間距」。


          1.2 橫向間距關系

          • 組合排布:為了適用不同尺寸的屏幕,在橫向采用柵格布局來排布組件,從而保證布局的靈活性。(注:柵格是另外一個模塊的內容,這里不贅述。)


          • 復選框內:在一個組件內部,元素的橫向間距也應該有所不同。


          2. 對齊

          正如「格式塔學派」中的連續律(Law of Continuity)所描述的,人類的視覺系統往往傾向于將看到對象的直線繼續成為直線,曲線繼續成為曲線。在界面設計中,將元素進行對齊,既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。

          格式塔學派(德語:Gestalttheorie):是心理學重要流派之一,興起于 20 世紀初的德國,又稱為完形心理學;主張人腦的運作原理是整體的,「整體不同于其部件的總和」。——摘自「維基百科」


          2.1 文案類對齊

          如果頁面的字段或段落較短、較散時,需要確定一個統一的視覺起點。


          • 推薦使用:標題和正文左對齊,使用了一個視覺起點。

          • 不推薦使用:標題和正文使用了兩個視覺起點,不推薦該種對齊方式,除非刻意強調兩者區別。


          2.2 表單類對齊

          • 冒號對齊:冒號對齊(右對齊)能讓內容鎖定在一定范圍內,讓用戶眼球順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率。


          2.3 數字類對齊

          為了快速對比數值大小,建議所有數值取相同有效位數,并且右對齊。


          3. 對比

          對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。

          注:要實現有效的對比,對比就必須強烈,切不可畏畏縮縮。


          3.1 主次關系對比

          為了讓用戶能在操作上(類似表單、彈出框等場景)快速做出判斷, 來突出其中一項相對更重要或者更高頻的操作。

          注意:突出的方法,不局限于強化重點項,也可以是弱化其他項。


          • 需要區分主次場景:


          • 不需要區分主次的場景:「通過」和「駁回」都使用次按鈕,系統保持中立。在一些需要用戶慎重決策的場景中,系統應該保持中立,不能替用戶或者誘導用戶做出判斷。


          3.2 總分關系對比

          • 總分關系:通過調整排版、字體、大小等方式來突出層次感,區分總分關系,使得頁面更具張力和節奏感。


          3.3 狀態關系對比

          常見類型有「靜態對比」、「動態對比」。


          • 靜態對比示例:用不同顏色的點,來表明不同狀態。


          • 動態對比:鼠標懸停時,該項和其他項呈現出明顯不同的視覺效果,響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比,以便用戶更好的區分信息。


          4.重復

          相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。


          4.1 重復元素

          重復元素可以是一條粗線、一種線框,某種相同的顏色、設計要素、設計風格,某種格式、空間關系等。


          • 線框重復:


          • 設計要素重復:


          • 文案格式重復:


          ② 交互操作高效

          包含 Ant Design 的設計原則有:『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。

          「交互操作高效」的重要性體現在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題,卻忽略用戶能否理解流程如何操作,那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短,而是用戶的心理時間是否太長的問題,就像我們打游戲往往會覺得時間過的很快,但是在等待頁面加載時卻不耐煩。


          1. 減少打斷

          能在這個頁面解決的問題,就不要去其它頁面解決,因為任何頁面刷新和跳轉都會引起變化盲視(Change Blindness),導致用戶心流(Flow)被打斷。頻繁的頁面刷新和跳轉,就像在看戲時,演員說完一行臺詞就安排一次謝幕一樣。

          變化盲視(Change Blindness):指視覺場景中的某些變化并未被觀察者注意到的心理現象。產生這種現象的原因包括場景中的障礙物,眼球運動、地點的變化,或者是缺乏注意力等?!浴毒S基百科》

          心流(Flow):也有別名以化境 (Zone) 表示,亦有人翻譯為神馳狀態,定義是一種將個人精神力完全投注在某種活動上的感覺;心流產生時同時會有高度的興奮及充實感。——摘自《維基百科》


          • 氣泡提示:對于操作的反饋是必要的,下文會提到,但是為了減少打斷用戶,輕量級的反饋氣泡提示即可。


          • 輸入覆蓋層:鼠標「點擊」圖標觸發;鼠標「點擊」懸浮層以外的其他區塊后,直接保存輸入結果并退出。不用彈窗或跳轉的形式編輯,只需要在觸發圖標附近彈出浮層即可,這樣避免用戶視動線的混亂,減少打斷用戶操作的心流。

          2.縮短步驟

          正如 Alan Cooper 所言:「需要在哪里輸出,就要允許在哪里輸入」。這就是直接操作的原理。eg:不要為了編輯內容而打開另一個頁面,應該直接在上下文中實現編輯。


          常規的編輯模式,界面都會跳出一個彈窗或者是一個頁面跳轉,無形之中用戶走了更多的流程路徑,如果能在當前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設計原則。

          • 文字鏈/圖標編輯:

          狀態一:在可編輯行附近出現文字鏈/圖標;

          狀態二:鼠標點擊「編輯」后,出現「輸入框」、「確定」、「取消」表單元素,同時光標定位在「輸入框」中。


          • 多字段行內編輯:編輯模式在不破壞整體性的前提下,可擴大空間,以便放下「輸入框」等表單元素;其中,在 Table 中進行編輯模式切換時,需要保證每列的不跳動。


          • 拖放圖片/文件:在早前很多產品在上傳功能上,都是跳出彈窗再選擇文件上傳,現在基本都可以實現拖拽上傳了。這樣的設計大大提高了用戶使用上傳功能的效率。


          • 模糊搜索:系統根據用戶所查詢的關鍵詞,智能匹配可能的結果。


          • 定時自動更新:新增的列表項「高亮」,持續幾秒后恢復正常。不需要用戶手動刷新,減少不冗余的操作。


          3.避免回憶

          人們在思考的時候,是需要依靠大腦神經元之間相互傳遞信號,而回憶是需要調用更多的的神經元傳遞信號,簡單地說就是非常費腦子。


          • 搜索歷史:搜索歷史的功能,可以減少用戶的回憶,使得整個體驗更加輕松愉悅。


          4.信息降噪

          根據費茨法則(Fitts's Law)所描述的,如果用戶鼠標移動距離越少、對象相對目標越大,那么用戶越容易操作。通過運用上下文工具(即:放在內容中的操作工具),使內容和操作融合,從而簡化交互,起到信息降噪的作用。

          費茨法則 :到達目標的時間是到達目標的距離與目標大小的函數,具體:。其中:1.設備當前位置和目標位置的距離(D);2.目標的大?。╓)。距離越長,所用時間越長;目標越大,所用時間越短。


          • 列表嵌入層:將列表為多層級時,隱藏弱層級列表內容,可以讓用戶更加直觀地看到重要信息。當我在聚焦某一個列表模塊的內容,鼠標懸浮即可展開。


          • 標簽頁:標簽也換可以將信息內容進行分類,讓用戶更易理解。


          • 漸進式展現:用戶在填寫表單時,會根據當前錄入的數據,展現下一項需要填寫的內容,這樣的展現方式可以屏蔽掉無關緊要的內容。


          • 懸停即現工具:鼠標懸停時,出現操作項。這樣將不重要信息或者操作隱藏起來,不會干擾到用戶瀏覽其他重要內容。


          ③ 系統反饋即時


          包含 Ant Design 的設計原則有:『 簡化交互 』『 巧用過渡 』『 即時反應 』。

          「系統反饋及時」的重要性體現在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣,用戶進行了操作或者內部數據發生了變化,系統就應該立即有一個對應的反饋,同時輸入量級越大、重要性越高,那么反饋量級越大、重要性越高。


          1.實時反饋

          雖然反饋太多(準確的說,錯誤的反饋太多)是一個問題,但是反饋太少甚至沒有反饋的系統,則讓人感覺遲鈍和笨拙,用戶體驗更差。

          牛頓第三定律 :當兩個物體互相作用時,彼此施加于對方的力,其大小相等、方向相反?!浴毒S基百科》


          • 實時預覽:根據用戶的輸入,提供關于密碼強度和有效性的實時反饋提示。


          • 文字鏈熱區:當懸浮在 ID 所在的文字鏈單元格時,鼠標「指針」隨即變為「手型」,單擊即可跳轉。


          2.過渡反饋

          人腦灰質(Gray Matter)會對動態的事物(eg:移動、形變、色變等)保持敏感。在界面中,適當的加入一些過渡效果,能讓界面保持生動,同時也能增強用戶和界面的溝通。

          Adding: 新加入的信息元素應被告知如何使用,從頁面轉變的信息元素需被重新識別。

          Receding:  與當前頁無關的信息元素應采用適當方式移除。

          Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。


          • 表格加載:網絡不好或者表格數據過多,都有可能導致加載緩慢,這時有一個小動畫可以緩解用戶的焦慮感。


          • 富列表加載:用戶在打開列表時,頁面無法做到一次性加載所有的數據,同時有為了減少翻頁的繁瑣操作,就有了下拉自動加載的。


          • 頁面加載:當用戶訪問的頁面體量過大時,系統會通過給出倒計時或完成百分比,來緩解用戶焦慮,并且給用戶友好可控的感覺。


          • 滑入與滑出:可以有效構建虛擬空間。  


          • 折疊窗口:在視圖切換時,有助于保持上下文,同時也能拓展虛擬空間。


          • 對象增加:在列表/表格中,新增了一個對象。


          • 對象刪除:在列表/表格中,刪除了一個對象。


          • 對象更改:在列表/表格中,更改了一個對象。

            • 狀態一:用戶更改了「詳情」中的值;

            • 狀態二:用戶點擊「保存」后,詳情所在的網格出現「黃底」,表明該對象發生了更改;

            • 狀態三:底色持續幾秒后,恢復正常。


          • 對象呼出:點擊頁面中元素,呼出一個新對象。


          3.結果反饋

          用戶常常會疑惑自己的操作是否成功了,哪怕是失敗了也是需要系統反饋,這樣才能安心進行下一步的操作。


          • 頁面反饋結果:


          • 氣泡反饋結果:


          ④ 用戶自由可控


          包含 Ant Design 的設計原則有:『 提供邀請 』『 足不出戶 』『 即時反應 』。

          「用戶自由可控」的重要性體現在 交互前對下一步操作的預判;交互時 不論操作后的結果多嚴重都要允許用戶自主決策;以及交互后 能否對自己的操作結果反悔。


          1.未來預判

          很多富交互模式(eg:「拖放」、「行內編輯」、「上下文工具」)都有一個共同問題,就是缺少易發現性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示,以表明在下一個界面可以做什么。  這樣人機交互的過程往往更加自然、順暢。



          • 點擊刷新:對于設計師而言,最常見的例子要屬花瓣了,我們時長會沉浸在我們瀏覽的瀑布流卡片中,如果系統強行刷新當前頁面,用戶很有可能迷失。邀請用戶主動更新,既不會錯過新的消息,又不會導致我們的心流被打斷。


          • 未完成邀請:用戶在當前頁面無法完成登錄操作,為了減少用戶迷茫的焦慮感,系統告知用戶點擊“更改”鏈接,可以去向何處。


          • 懸停邀請:鼠標「懸?!箷r,出現「選擇此模板」的按鈕。


          2.自主決策

          雖然系統中缺少不了一些危險操作或者不可逆操作(eg:刪除、重置、重裝系統等),但是仍然要用戶自主決定是否繼續,我們能做的就是讓用戶再三確認。


          • 彈窗提示:雖然彈窗打斷用戶心流,但是對于重要的操作,這樣是最保險的方式。


          • 刪除知識庫提示:是釘釘中,刪除「知識庫」這一重要內容,是不可逆的,系統需要用戶謹慎操作。


          3.準許反悔

          如果說「自主決策」中提到的案例都是不可逆的,那「準許反悔」的后果嚴重性會弱一些,系統對用戶的操作沒有那么強的阻斷性,所以要準許用戶反悔的,


          • 刪除撤銷:用戶點擊「刪除」后,直接操作;出現 Message 告知用戶操作成功,并提供用戶「撤銷」的按鈕;用戶進行下一個操作或者 1 分鐘內不進行任何操作, Message 消失,用戶無法再「撤銷」。



          『 Ant Design的優點與缺點 』


          ① 優點


          1.助初創團隊快速產品快速上線

          Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業務產品能否成功,但是能幫助業務產品『正確的成功』或者『正確的失敗』?!?

          如果團隊有一個產品idea,我們需要通過最少的資源開發此產品并投入到市場中,通過聽取用戶反饋,驗證idea是否可行,快速迭代最終做出更完善的產品。但理想是美好的,但現實是骨感的,在前期研發的過程中通常會出現兩個情況。創業團隊沒有足夠的設計資源和時間,前幾個版本的產品通常用戶體驗非常差,這種情況體驗差有可能讓用戶放棄這款產品。創業團隊沒有好的方法論和協作模式,需要磨合,設計和開發進度一延再延,結果錯過了風口,市場被競品搶占,還沒上線就倒閉了。

          Ant Design提供了一套完整的界面實現方案,即有代碼框架能直接拿來提高開發效率,每個界面組件都經過螞蟻金服多個項目的考驗,具備優秀的用戶體驗。用Ant Design來做0-1,能快速發布用戶體驗優秀的產品,聽取用戶反饋,快速迭代。


          當然,創業是九死一生,市場和用戶口味都充滿了不確定性,誰也沒有能力保證產品是否成功,但是只要你能高效的產出質量優秀的產品,不斷試錯,說不定以后就能成功。


          2.減少設計和開發的不確定性。

          用 Ant Design 就能高效的產出高質量的產品,減少設計和開發的不確定性。

          因為我們公司就使用了 Ant Design 的系統,所以時常會與前端小伙伴溝通,以下都是他們在使用過程的感想。

          Ant Design 提供的大量功能比較全面且UI風格統一的組件,能幫助開發者快速搭建通用場景下的應用界面。這大概是得益于螞蟻金服業務線上極為廣泛的應用場景,驅動了 Ant Design 團隊通過對使用情況的觀察匯總,整理出來了這么一個組件庫。他們的經驗積累如此之豐富,足以讓這個庫支持大部分其他前端開發者的需要。

          其設計團隊給出的設計規范相當詳細且經得起推敲,令許多其他團隊獲益匪淺。


          3.節省設計與開發的人力成本

          我見過太多宣稱自己在乎用戶體驗的公司,給用戶的產品質量確實比較高,但是自己員工內部使用的系統和管理一團糟。種種不便讓員工經常加班,情緒消極,這樣的團隊抄抄競品達到行業標準體驗還行。要想突破是不可能了,因為創新需要員工有充沛的精力和主動性,天天加班誰還有這精神。

          用 Ant Design 系統提供的設計工具和組件框架能給設計師和開發者減少負擔,能用更少的時間呈現給用戶體驗好的產品。這樣帶來的好處不僅僅是設計師和開發者覺得少加班成就感高而幸福,他們重新恢復活力和激情能做出更有創意和競爭力的產品,給公司帶來更大的收益,這是一個三贏的結局。


          ② 缺點


          1.無法根據業務場景定制組件,靈活度不夠

          一定有小伙伴會有這樣的疑問,目前市面上有這么多的第三方設計規范,例如 Ant Design ,Element UI,有必要自己造輪子做一遍嗎?

          這里要視情況而定,如果公司產品是初創期,而且研發人手不足,那確實沒有必要自己造輪子。反之在資源足夠的情況下,是有必要設計團隊重新做一套屬于自己產品的規范組件庫的,因為B端自身的業務性決定了市場上沒有萬能的設計規范,那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范,在此基礎上進行修改,效率很低,適配的復雜度和重新開發相差無幾。


          2.組件細節深入度不夠,只能“將就”使用

          對于比較普通的設計解決方案是可以的,但是 Ant Design 包含的組件細節仍有不足,畢竟 Ant Design 沒必要投入過多的精力在組件細節深入度上,規范定義的越是精細,對于產品組件而言可延展性就越差,限制也會越多。而 Ant Design 只需要解決80%企業,80%的通用問題即可。


          3.競品同質化嚴重,視覺上無法脫穎而出

          當市場大部分產品都在使用 Ant Design 設計系統時,產品的同質化就會很嚴重。為了避免這種情況發生,我們就有必要從設計語言、設計原則、設計組件三個部分開始,設計自己的規范。那些大廠的成熟的組件庫該如何用呢?我認為應該把它當成一個字典,有不會的地方,可以去參考人家的成熟的解決方案。



          『 總結 』


          這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設計原則是什么以及 Ant Design 的優缺點。當然也重點總結了一下,設計師如何運用 Ant Design 的設計原則,可以將這些原則分為四類:視覺層級清晰、交互操作高效、系統反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設計原則,并將其靈活運用到設計工作中。




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

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


          文章來源:人人都是產品經理    作者:菜菜不甜

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          體驗度量深度實踐

          ui設計分享達人

          前言


          體驗目標的達成,需要合理且客觀的度量方法,體驗度量的實踐,需要度量框架的有力支撐。提高競爭優勢,提升客戶態度,保障產品可以即時的響應客戶的需求。本篇文章的實踐方法全部來源于酷家樂B端產品業務中的實踐案例,重點在于度量框架的深度實踐,如果我們的經驗能夠幫助到您,歡迎交流討論。 


          一、體驗度量怎么做?


          “體驗”是用戶純主觀的感受,從這個情況來看是很難被度量的?!绑w驗”同時也是一個比較抽象的概念,如果把一個抽象的概念拆解成一個可執行的策略,拆解的過程如何保證策略的有效性,是我們一直在思考的。面對酷家樂工具型、SaaS型、平臺型并存的產品體系,且存在錯綜復雜的用戶需求和業務訴求。在這樣的前提下對方法的確立需要更加的冷靜。 

          如何確定方法?我們需要的是一個完整的度量框架,以及能夠聚焦用戶體驗層為驅動,分解并有力的去解決問題。經過大量的實踐和驗證得到,抓住一個擊破點作為產品體驗提升的目標,并一種合理的方式進行推導和驗證,這是一種最直接度量體驗的標準流程性方式,這里的目標必須是:


          • 體現用戶主觀感受或者具有行為驅動的目標。

          • 基于業務目標定義+用戶訴求了解后,得到的以用戶為中心驅動的用戶行為。



          二、度量模型怎么選?


          面對設計圈內已經存在的和部分大廠創造的度量模型,評估優劣后最終我們選取了HEART模型。因為HEART是個比較全面和具備更多擴展性的分析框架,同時足夠的權威和標準,而且市面上的模型基本都被HEART的五維囊括。除了這些考慮因素外,再給出以下幾個明顯的優勢點:


          • 1、HEART同時涵蓋了定性和定量的不同數據維度。

          • 2、HEART框架同時包含了:宏觀和微觀的層面

          • 3、HEART模型并不單純的再定義體驗質量,同時也鏈接了商業價值。把用戶體驗的原則和收益驅動的指標關聯在了一起。


          undefined


          三、HEART模型簡介


          1.什么是HEART模型?


          多個大廠利用HEART模型拆解框架得到了深度結合業務的度量框架。是個比較全面和具備更多擴展性的分析框架。HEART是GOOGLE公司在實踐中提出,基于產出更好產品為目的,用來衡量產品整體體驗的度量評估模型。 

          它包含五個維度Happiness(愉悅度)、Engagement(參與度)、Adoption(接受度)、Retention(留存度)、Task success(任務完成度)組成,是Google用戶體驗研究團隊在實踐中為了準確的度量用戶體驗而總結提煉出的一個框架。 


          2.HEART模型的特性與應用場景


          目前市面上還存在PTECH、TEENS等體驗度量模型,而HEART模型的特性在于它”以用戶為中心“進行度量,同時度量維度全面,既包含宏觀的愉悅度,也有微觀的任務完成率,同時關注產品上的留存率,與業務目標保持緊密。在評估方式上,既有定性評估的愉悅度,也有定量評估的參與度、留存率等,可對用戶使用產品情況做一個完整的評估。 

          undefined



          四、HEART模型的詳細拆解指南


          undefined


          第一步:確定體驗目標

          體驗目標是體驗度量的開始,準確的目標決定了度量的質量。要提煉出準確而有效的體驗目標并不容易,通常會引入產品功能等業務因素,使體驗目標不夠單純,拆解出來的指標所反映的數據也很難歸因到體驗。故復雜項目可提煉多個體驗目標相互補齊,但每個都必須準確而具體。 

          那么如何確定體驗目標呢?

          體驗無法脫離于具體的產品服務存在,用戶的整體體驗感知積累于每一個接觸觸點,大多觸點常規而平庸影響不大,必須識別出達成業務的關鍵觸點進行深入分析,已提煉出體驗目標。 

          整體的思路是:首先分析業務目標,并就業務目標所落地的產品服務的鏈路進行拆解,分析鏈路后,找到其中對體驗有決定性影響的因素,提取其因素后,即形成體驗目標。


          undefined
          1.確定業務目標
          業務目標是整個產品服務的最終目的,體驗作為產品服務的重要評估維度,需要與之對齊。業務目標與所選取項目范圍有關,從整個產品到特定功能模塊,或者某個行為鏈路都可作為參與項目。根據選取的項目來確定業務目標,如“保持產品新舊改版的平穩過渡,降低改版造成的斷約率”、“提升用戶自主解決問題的能力,降低運營服務的壓力”等。注意業務目標與產品目標的差異,后者是對前者的產品化闡釋,可以具體到某項產品服務目標上。產品目標和體驗目標可以共同服務于業務目標,實現價值的達成。 

          ?示例:
          業務目標:在設計工具中商品素材的查找效率,輔助家裝設計師快速構建方案,提升其簽單率 
          產品目標:優化現有商品素材的查找邏輯,降低家裝設計師查找商品素材的成本 

          2.拆解產品鏈路
          產品目標需借助于功能鏈路來達成,將該目標達成過程的邏輯呈現出來,并分析其跳轉路徑、操作觸點,就是鏈路拆解過程。整個鏈路過程是用戶價值的直接承載,任何一個觸點的失效都將影響到整條鏈路順暢和效率。就鏈路整體而言,觸點越多、鏈路越長,操作成本越大;就某個具體觸點而言,其效率、易用性、易理解度也將影響整體的價值傳達。 

          為完整的拆解出整個產品鏈路,需要從“用戶側”、“系統側”進行分析,用戶側代表用戶視角下的功能使用流程,是主要考慮的維度,體現了以用戶為中心的設計思路;系統側代表系統在用戶交互過程中的需要執行的行為,是系統邏輯的直接體現。兩者的交互作用,將完整表達“信息”的流轉過程,最終作用到產出物上。 

          ?示例:商品素材搜索鏈路




          3.分析觸點并提取決定性因素

          選取對整個鏈路有重要影響的觸點進行設計維度上的分析,以找出決定觸點目標達成的決定性因素,這個決定性因素就是我們體驗上需要著重優化的點。在尋找“決定性因素”的過程中,避免將系統性能、業務功能、業務信息因素篩選出來,需要聚焦在設計維度上,諸如交互行為、界面布局、信息呈現、系統反饋等。 

          ?示例: 
          “確認輸入行為”、“搜索結果分類”、“不同分類的區塊劃分”、“結果數量”等。 

          對已拆分出來的各種設計因素來說,哪些算是決定性因素呢?一個很簡單的判斷方式是:反向判斷,即假設缺失這個設計因素,或不完整是否會對該觸點有“阻塞性”影響。 

          如有嚴重阻塞影響,則證明該設計因素很大程度上決定了觸點的目的達成,屬于決定性因素;若設計因素有中等的、輕微的影響,則可能不是本次優化的重點,不作為決定性因素。如“搜索結果的分類”影響用戶對搜索結果的信息獲取,是決定性因素?!按_認輸入行為”是常規設計行為,不算決定性因素。 
          當然,具體問題具體分析,在不同的功能場景下,同一種行為的影響程度可能不同。 

          需要注意的是,決定性因素的選取必須在具體的觸點中才有意義,脫離后無法判斷是否有阻塞性影響。另外,某些設計因素是否是決定性可能在跨觸點中體現出來,需要聯系整個鏈路進行交叉分析確定。




          4.體驗目標的提取與表述

          找到決定性因素及其為什么決定性的原因后,需要為其設定一個設計目標,來指示應向什么方面優化這個決定性因素。決定性因素只是現有功能的一種解法,可能存在其他更優解法或優化方向,我們需要基于決定性因素概括出“設計目標”,以新的設計目標來指引我們的優化設計。 

          ?示例: 

          決定性因素“搜索結果的分類”,引申出的設計目標為“更清晰的信息層級”、“更完整的信息”。



          通過鏈路觸點的分析,決定性因素的提取,設計目標的匹配,我們已對設計優化方向有了準確的了解。這個時候需要從設計師視角做一個完善而精準的”體驗目標“的表述。


          一個體驗目標需要與具體設計場景關聯后,才能產生具體而明確的價值,即設計目標落地到場景中后產生價值,表述思路是:在某個具體的鏈路觸點中,我們期望怎么達成這件事??赏ㄟ^格式進行填寫: 
          使/什么用戶/用什么  做什么事/設計目標/完成什么事 

          ?示例: 
          家裝設計師  使用搜索功能  搜索素材時  對結果展示清晰的信息層級  來快速找到需要的商品 


          第二步:確定度量維度

          引入HEART模型的重要原因,正在于它的度量維度。由于它的度量維度多方位的表述了產品的使用情況,度量緯度不是一種標準,是一種分析框架和角度,決定了體驗目標應該被如何度量,進而影響信號的確定和指標的拆解,因此度量維度的選取至關重要。 

          HEART提供了豐富的五個維度,根據其定義,提供了你幾個可以衡量的視角。在實踐過程中,因每個體驗目標所對應的觸點的場景、交互、產品目的不同,我們只需要找到符合定義的維度即可。反過來看,一個與體驗目標不相關、不匹配的度量維度不能很好地度量體驗。 

          需要注意的是,HEART模型因其維度的廣泛定義,不僅僅可用于體驗目標的度量,也可以對產品目標、業務結果進行度量,對體驗目標的度量因要從產品因素中剝離出體驗問題,相對來說較為復雜,是本次敘述的重點。



          第三步:確定信號

          首先信號可以被定義為是一種信息的載體,其承載的信息往往反映的是用戶對體驗目標的成功或是失敗的結果,對信號的準確獲取將直接影響到對下游指標的確立。 

          信號的確定需以上游度量維度為標準范圍并引用體驗目標為重要判斷依據,避免過度發散,保證精準規范的同時,去結合當前有無體驗變量基準值作為條件,并使用成功或者失敗的結果來評估體驗目標的達成情況,最終提煉出信號。 


          以度量維度為標準并引用體驗目標確定信號

          通過逐一對度量維度進行體驗變量提取,有基礎值則進行對比的方式,無基礎值則使用趨勢的表述方式,結合業務目標的情況下,去概念性假設體驗目標的正向或反向結果,最終通過標準的格式提煉出信號,信號的提煉的可以用固定的格式進行書寫: 格式:用戶   用什么   做什么   體驗變量   趨勢&數值


          尋找體驗變量
          基于HEART模型的整個分析框架,拆解出最高頻和貼合體驗目標的常見體驗變量庫。在此框架的指導下,可以快速尋找需要的體驗變量。 

          ?示例: 
          (體驗變量:易操作度;有基準值) 家裝設計師 使用搜索功能 搜索素材時 易操作度 達到4.2
          (體驗變量:易操作度;無基準值) 家裝設計師 使用搜索功能 搜索素材時 易操作度 上升

          確定信號的注意事項
          ①信號的成功或失敗要能在行為或態度上準確的體現出來,失敗信號可能比成功更容易定義; 
          ②信號要易于被追蹤; 
          ③信號的敏感度要高,易于被檢測; 
          ④信號應與目標有高的相關度,同時避免被其他因素影響; 
          ⑤一個目標可能對應多個信號; 

          第四步:確定指標

          指標是衡量目標的參數,用于準確的描述目標。但通常很難直接從目標中確定出指標,需要借助于對信號的分析。信號是信息的載體,其中包含著變量信息,提取其中變量信息,即可獲得一個初始指標。 
          初始指標反映了客觀的原生數據,需要對原生數據做處理后,可得到一個能精準描述體驗目標的指標。 



          對數據進行處理

          體驗變量所直接產生的屬于原生數據,而一組數據通過某種分析加工后,可以成為一個更有價值的信息,如均值、中位值。選擇對數據進行哪種方式處理,受目標的影響較大,每一種數據處理方式,都有指向特征,通過與目標的匹配,可以選取出合適的數據處理方式。




          確定指標的注意事項

          ①指標應與目標和信號密切相關,指標越明確越清晰越好; 
          ②標應方便被持續追蹤,對信號的描述更敏感,方便做A/B測試。 


          五、總結


          看似復雜的體驗度量監控指標的拆解,可以概括為“體驗的問題定位”——“體驗的目標度量”——“體驗的客觀追蹤”。 

          1.“問題定位”是監控目標的根據,必須來源于具體的業務鏈路才有被分析和量化的可能,它是體驗問題在業務鏈路中被抽取出來的關鍵,并轉化為可度量的指標來進行監控,最終為后續數據洞察和可視化提供準確的數據來源,否則流于主觀,監控體系建立在不可靠的體驗目標之上,當然也就不可能有助于解決體驗問題。 

          2.而“目標度量”所運用的HEART模型作為度量維度,相當于一種體驗的定義標準,闡釋了什么是它所定義的用戶體驗。HEART模型以其全面的度量維度,能很好地實踐這一點。必須注意的是,對HEART模型下的五個度量維度的細化闡釋可能受不同產品特性、產品階段影響而不同,最終轉化出不同的客觀指標。 

          3.“客觀追蹤”是對在度量標準下的客觀變化的捕捉,捕捉其變量特征,建立常態指標,成為可靠的可監控的指標。 

          4.另外,除了準確的定位、度量、轉化的邏輯推導外,參考業務目標進行范圍收斂,也是非常重要的工作,它影響著每一個推導環節,以避免偏離產品方向,有效的過濾弱關聯或無關聯的因素。

          文章來源:站酷    作者:酷家樂UED

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          js 獲取當前元素的父元素的父元素的id

          前端達人

          情景一:用onclick觸發的函數

          
          
          1. html代碼:
          2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
          3. <div>1111</div>
          4. <div class="original">
          5. <div id="chartx1" class="chartstyle"></div>
          6. <div id="charty1" class="chartstyle" ></div>
          7. <button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
          8. </div>
          9. </div>
          10. <script>
          11. function getDetail(obj){
          12. alert(obj.parentNode.parentNode.id); //1
          13. }
          14. </script>

          運行結果:

          情景二:直接用click觸發的函數

          
          
          1. html代碼:
          2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
          3. <div>1111</div>
          4. <div class="original">
          5. <div id="chartx1" class="chartstyle"></div>
          6. <div id="charty1" class="chartstyle" ></div>
          7. <button class="info_detail" style="width:100%;height:30px;">查看信息</button>
          8. </div>
          9. </div>
          10. <script>
          11. $(".info_detail").click(function(){
          12. id=$(this).parent().parent().attr('id');
          13. })
          14. </script>

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

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


          文章來源:csdn   作者:

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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





          jquery 延遲執行方法

          前端達人

          setTimeout方法使用時需注意: 

          復制代碼
          //以下兩種方式都行: setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000);
          function test(){
           alert("aaaa");
          } //以下是錯誤示例 setTimeout(test(),2000); //會馬上執行,沒有延遲效果
          復制代碼

           




          jQuery fadeToggle() 方法

          jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

          如果元素已淡出,則 fadeToggle() 會向元素添加淡入效果。

          如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果。

          語法:

          $(selector).fadeToggle(speed,callback);

          可選的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。

          可選的 callback 參數是 fading 完成后所執行的函數名稱。

          下面的例子演示了帶有不同參數的 fadeToggle() 方法:

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

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          APP設計:小易移動端 | B端銷售平臺移動化

          seo達人



          2020年的湖北疫情對公司的業務造成了一定的影響,為了避免不可控情況下的業務損失,復工后公司啟動了智能銷售平臺移動化項目(即小易APP)。經過近一年的試運行,在廣州發生疫情的時候,小易APP已經能支持業務基礎需求。

          備注:
          為避免不必要的誤會(xiemi),所有的客戶、銷售顧問、部門、套餐的名稱都是虛擬命名。所有數據均為虛構,請勿過度解讀。
          love&peace

          收藏

          原文地址:站酷

          作者:牙線y2x

          轉載請注明:學UI網》APP設計:小易移動端 | B端銷售平臺移動化

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

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


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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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