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



          @大老虎:設計不是藝術,是一份職業。設計師即希望自己的作品能名利雙收,又希望能通過作品在藝術上有所成就。你的一生會有很多作品,可能有幾顆像珍珠般光華耀眼,也會有一些像砂石一樣磨人,但決定你能走多遠的,是你自己有多強韌。

           

          阿亦:大大你好!先向大家介紹一下自己吧~

          大老虎:大家好,我是兇猛的大老虎,平面設計師一枚,字體設計愛好者。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          阿亦:看到您之前很早的作品都是以電商平面的教程居多,現在傾向于字體設計這一塊了,一起聊聊你是怎樣與字體設計結緣的吧?

          大老虎:我從一五年開始工作,其實接觸設計行業也比較偶然,當時剛畢業著急找工作賺錢,剛好有一家品牌設計公司邀請面試,就這樣誤打誤撞開始了設計生涯。工作以后發現這行有很多細分,自己在工作前期也是不斷的嘗試和摸索,走了很多彎路,畢竟一個人精力有限,也不太可能去將每種類型的設計都去做到最好。

          最初做PS教程就是單純的感覺視覺效果很酷,而且當時的自己對于軟件也不太熟練,就利用業余時間一邊學,一邊把學習的過程記錄下來,再分享出來。后來感覺進步很慢,因為很多商業的設計不光是需要軟件技能的熟練,更多的還是需要設計師的想法和創意的表現,于是我開始嘗試其他方向。

          圖片圖片

          圖片

          圖片

          做字體設計也只有三年多時間,剛開始是單純的因為工作需要,就是你字體設計必須得會。我在這之前也沒有任何的基礎,開始總想著有沒有什么快速便捷的方法,能一下子做出來想要的效果,就在網上找相關的教程,發現沒有什么捷徑可以走,每個字都需要一筆一劃去做。后來發現字體設計的應用領域非常廣,是一個可以堅持去做的事情,而且可以帶來一些額外的收益,就這樣一步一步慢慢的堅持到了現在。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          阿亦:給大家講講你在學習和成長的過程中,極具意義或里程碑的故事吧~

          大老虎:最有意義的應該是第一次上站酷首推吧。去年三月份,記得當時是疫情最嚴重的時候,就宅在家里把以前的案例全部整理一遍,優勝劣汰挑選一些最滿意的,本只是為了打發無聊的時間,沒想到卻成功的上了首頁。

          就好比你買飲料,你買的是一瓶,打開一看,哇哦!蓋上寫著再來一箱!一轉眼已經1年多了,一切也都慢慢平靜,希望以后也能保持平常心,做好每一個字。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          阿亦:最近做過最喜歡的案例是哪個?創作它的期間有什么有趣的探索嗎?

          大老虎:比較喜歡瘦金體系列的案例,也是最近做的比較多字形,一種風格非常獨特的字體。字體方面結合自己的理解重新設定筆畫、結構等屬性。目前同類型的字庫字體幾乎沒有,是一款非常有潛力的字型。

          版式以古典中式的楷體結合無襯線英文字體,再加上現代的國際風格排版,從而到達粗與細、曲與直、銳與鈍、幾何與手寫、機械與人文的對比,產生很強的、很獨特的形式感。

          圖片

          圖片圖片

          圖片

           

          阿亦:在你字體設計中,最常使用的手寫感和毛筆元素,你覺得這種表達形式的優勢和劣勢是什么?

          大老虎:應用領域比較廣,很符合現在互聯網設計的快節奏。但局限性也很明顯,Good bat Old,普通大眾對毛筆字總會有些刻板印象,認為比較古老、傳統、文人氣息重等。

          圖片

          圖片

          圖片圖片

           

          阿亦:怎樣看待字體設計的發展趨勢,和目前的行業情況?

          大老虎:個人感覺字體設計目前來說還沒有發展的特別好,還是屬于一個相對小眾的領域,還只是我們一小撮人在這個圈子里小打小鬧。漢字每個人每天都會接觸,電腦里的字體是怎么制作的卻很少有人能知道。目前來說還是一個非常專業的問題。

           

          圖片圖片

          圖片

           

          阿亦:關于創作,未來有什么想要去突破或嘗試的方向嗎?有什么關于字體設計上想要和大家分享的建議呢?

          大老虎:就差一套的字庫了,現在沒出過字庫的都不好意思自稱是字體設計師了,哈哈。

          經??春玫脑O計,站酷、BE,優秀的案例,多臨摹,總結筆畫結構之間的共性。給自己設定一些小的目標,比如每周或每月要輸出多少案例,定期在網上發布出來,有了點贊和評論會更有動力。前期少動腦,多動手,堅持每天做練習,學習的過程也是一次又一次的重復鞏固已學的知識,在重復中不斷得到提升。

          設計不是藝術,是一份職業。設計師即希望自己的作品能名利雙收,又希望能通過作品在藝術上有所成就。你的一生會有很多作品,可能有幾顆像珍珠般光華耀眼,也會有一些像砂石一樣磨人,但決定你能走多遠的,是你自己有多強韌。

           

          圖片

          圖片

          圖片

          圖片

          圖片

           

          阿亦:感謝大大接受LEO設研所的訪談,祝大大創作出更厲害的作品!

           

          原文地址:Leo設研所(公眾號)

          作者:Leo設研所


          轉載請注明:學UI網 ? 【大咖專訪】大老虎:保持平常心做好每個

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

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



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

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


          互聯網B端設計不可缺失的一項技能——視覺校驗

          ui設計分享達人


          今天這篇文章,傳授我在工作中關于校驗的心得~





          01.  在工作中遇到的狀況

          不管是在大公司工作、還是小公司工作,設計師常常會遇到這樣的問題,在新產品發布之前,都會做一遍線上的ui視覺校驗,在這個過程中,前端開發工程師所寫的界面總會發生圖片變形,文字字號不對,元素與元素之間不對齊的事情發生。


          設計師給前端開發工程師標記了已經實現頁面中錯誤的地方,但是多數前端開發工程師一聽那么多頭都大了,在緊張的上線日期限制下更有甚者不予理睬直接上線,用戶吐槽設計不嚴謹,導致設計背鍋。

          為什么老板會覺得不好呢?其實是產品在用戶體驗的本能層次出現的不好的體驗。


          02.  好產品具備的特征

          全球的認知心理學家(美)諾曼在《情感化設計》這本書中講產品本能水平的設計——本能層;行為水平的設計——行為層;反思水平的設計——反思層。


          如果把產品做的做為產品一個目標的話,我們可以利用產品五要素把產品劃分5個層次,再用諾曼教授提出的感情感化設計的3個層次聯系起來,并把這些情感分為5個緯度進行考察就可以得到下面這張知識網絡圖。

          從上面這張圖我們可以看出用戶評判一個產品好壞的標準還是來自于產品的表現層、框架層、結構層中的直觀體驗也就本能層次和行為層次的感受,如果產品的吸引度、完成度、滿意度、忠誠度、推薦度的數據很高也就證明產品很好,如果數據表現不好那可以判斷產品還是有需要提升的地方。


          回到第一張圖片,老板覺得有問題的原因就在于產品在本能層次的不合格,那重點來了有什么設計方法可以避免本能層出現問題的情況嗎?我的答案是可以使用設計走查這個方法。


          03.  設計走查的意義

          一名專業的B端設計師,并不是說你把設計稿做的很完美,把標注和切圖完整的交給開發小哥哥之后就完事了,其實在這個階段設計只是完成設計工作中產出效果圖的工作,并沒有進行最后驗收的環節,如果開發還原出來的產品跟設計稿差距較大的話,設計其實也是要負很大責任的。


          就好比工廠的流水線中一臺電腦的生產,把電腦從工廠搬到運輸車上也算是電腦生產完畢,但是必須要送到客戶手里,客戶簽字確認,工廠才能算是電腦賣出去了,由此可見設計走查是保證用戶有高質量體驗的不可缺少的一個環節。


          我理解設計走查的意義在于3點:

          1、確保產品的設計細節的還原度合格,從而保證產品的視覺效果和交互體驗能滿足用戶需求。

          2、是設計師衡量設計師是否合格設計師的一項重要指標;

          3、通過細致入微的專業設計素質贏得公司團隊內部設計話語權的提升。


          既然設計走查這么重要為什么大家還會忽視呢?其實大家對設計走查的看法有一個誤區,如果你想成為一名專業的B端設計師,一定要改變以上的錯誤觀念,擺正一個正確的設計觀念。


          設計師在公司代表著視覺上的最高水準,設計稿則是設計師專業能力的體現,如果一個設計師的能力是100分,設計稿的分值90分,開發實現后的產品分值為50分,在沒有進行設計校驗的情況下,這時候將產品發布出去,用戶或者老板只知道該公司的產品設計只有50分,而不會知道背后設計師最高的水準是100分。


          慢慢的設計師就會在開發團隊中做設計變得很被動,越被動就會越沒有話語權,所以對一名專業的B端設計師來說,除了擁有很強大的效果圖設計能力之外,還需要有保證效果圖落地能力。




          01.  設計走查的種類

          設計走查是一種設計層面找尋問題的方法,多數應用在找尋產品問題或者是對項目開發過程中的測試環節。具體的方式我歸類為3種:


          1)體驗設計走查:是指人機交互之間的細節體驗、比如非力度測試、滿意度測試。可用性測試的調查這些方法都是體驗走查的一部分。

          2)交互設計走查:是指針對產品場景與場景之間的動態交互效果進行走查。

          3)視覺設計走查:是指前端開發出來的靜態頁跟設計師出得效果進行視覺細節的校對和檢查,確保開發出來的視覺和設計圖保持一致。


          02.  制作走查表的三種方法

          設很多人會納悶了,我們公司是沒有這種走差表的那怎么進行這三種設計走查呢?這里告訴大家我的一個工作辦法,總共分為3個階段“尋找·借鑒”——“思考·定制”——“優化·完善”。


          a.尋找·借鑒

          當大家有一個知識的概念如果想更深入了了解這個概念就需要在網上找一些關于這個概念的信息,這個過程就是尋找。如果大家沒有做過類似這種設計走查的經驗,那第一時間也是去尋找,尋找設計走差的概念甚至是做好了的走查表用過工作中,那有人會有疑問那不是抄襲嗎?我的回答“是的”,但是大家要想清楚一個問題,在工作中用最高效簡單的辦法是完成工作內容是最重要的。


          可能還會有人問,別的公司和我們公司做的行業不同,那別人公司的走差表我們公司能用嗎?我的回答是可以復用70%左右的,那剩下的30%就需要進入下一個步驟“思考·定制”階段了。


          b.思考·定制

          當我們完成第一步之后,就需要做自己所處的行業或者產品有一個認知,思考我們的用戶類型是什么,他們的使用場景是什么,他們最需要解決的需求是什么等等問題,然后在根據這些問題定制一系列體驗、交互、設計的問題,那就成為了自己產品定制的一份設計走查表了。


          c.優化·完善

          任何工作都需要持續迭代,為了變得更好的適合當前的工作。比如在第二階段定制的問題有些微交互動效果的問題前年是用戶比較在意的,現在很多產品都有了微交互動效了現在還問意義就沒有那么大了,我們的設計走查表也要根據互聯網的大環境不斷的進行優化和完善。



          03.  產品表現層——視覺校驗

          設計走查和設計校驗并沒有大的區分,但是我理解設計走查是一個比較新型的詞,設計走查的范圍要比設計校驗的范圍大一些。


          有些公司會把設計走查應用與改版之前當作找尋產品問題的一種方法,也有一些公司會把設計走查應用于項目做完開發在測試環節做測試的一種方法。比如在啟動產品改版前可以通過“視覺設計基礎自查表”來收集產品目前的視覺體驗問題;

          當項目處于即將上線在測試階段時候可以使用“視覺設計基礎自查表”來審查產品視覺實現層面是否合格,現在很多公司都用更簡單的“設計校驗問題記錄”表格來把視覺問題記錄。


          04.  視覺校驗需要審查那些緯度

          設計校驗驗收表可以簡單的理解為是用于審查產品表現層的“形狀、色彩、字體、構成、質感、動效這六點問題的記錄的表格。其實這六點也是諾曼教授提出的感情感化設計中本能層次和行為層次審查的六點。




          再講如何做之前,大家還是要先了解一下驗收流程中的步驟。


          01.  視覺校驗做什么

          這里描述兩點一個是開發階段、測試階段的流程。

          在公司的項目開發階段:是設計師設計完效果圖,進行標注(現在大家都是使用第三方標注軟件比如藍湖、摹刻、Sketch Measure 等),在交付開發。


          在項目測試階段:一般都是產品經理發起一個項目進入測試階段的通知把設計師、開發、測試、和產品經理都設置為參與者,之后由測試人員進行產品功能邏輯的測試、設計師進行視覺驗收;驗收完成后產品經理驗收測試結果,如有問題找開發進行修改;修改完畢再找測試、設計、產品進行確認,沒問題就封版了,產品經理確認發版日期,如果還有問題就再修改。


          02.  視覺校驗的驗收標準

          很多剛入行的設計新手,在校驗階段不知道那些緯度的視覺差別,以至于很多視覺元素都需要查看,對于c端誰是來說界面的場景因為交互比較簡單還能應付,


          但是對于模塊功能復雜、交互場景眾多的B端ui設計來說每個場景都要查看很耗費精力工作效率也不高。


          所以我總結以下幾個高頻出現問題的點供大家參考,大家可以按照以下幾個緯度進行視覺走查,提高自己在工作中的效率。


          a.檢查設計稿的可行性

          人無完人,再專業的設計師,也不可能100%保證自己的設計方案就是最好的設計方案,在交付設計稿前期設計師應該自我檢查自己的設計稿是否能清晰的傳遞信息,對于一些重要的模塊是否能凸顯出來,對于一些比較復雜的交互場景開發是否能夠實現,市場上眾多的屏幕尺寸,這樣的布局方式是否是最為合理的等這些緯度進行思考做設計,保證設計方案的可行性。

          這里我舉一個我真實的案例,起初我接到的需求就是設計一個模塊里面信息排版,如果我采用我直接采用第一個方案那肯定是不行,因為信息層級區分不夠明顯,所以第二個方案把數字標簽用顏色進行了區分,但是我又想如果出現文案比較多的場景,對齊方式都是左對齊那“指標值”的細心就不可能保持左對齊,所以我又出了第四個方案,目前來看第四種方案可是適應多種場景,算是最佳方案。


          假設當時我就交付前端開發第一種方案,上線后出現問題,還需要調整到第四種方案,慢慢的前端開發就會質疑設計的專業能力,后續合作也會難以推進了。


          b.組件調用是否正確

          B端產品的業務復雜、,模塊交叉設計數量多,所以在設計b端產品初級都是用原子化的思維搭建一個組件庫,前端是開發階段在樣式庫中寫一個標準的控件樣式,然后在不同的頁面場景中調用公共樣式,原理類似于我們在 Sketch 中搭建 Symbol。我們要從兩個方面看組件是否調用正確。


          1)公共組件是否正確

          公共組件調用正確,好處就是公產品的整體視覺風格是一致的,比如頁面的側邊導航,搜索場景、詳情頁場景布局是否一致,在斷網或者報錯的場景中出現提醒條樣式是否一致??蛇M行交互的按鈕樣式出現的交互狀態的按鈕是否一致等等。


          2)業務組件是否正確

          在真實開發場景中,有一些前端開發在雖然調用一個樣式,但是在設計規范中一個樣式可能會有多個尺寸,比如這個按鈕,在開發階段避免不了出現樣式雖然是對的,但是尺寸調用錯誤的情況出現,所以要查看一下組件的樣式和尺寸前端開發是否調用正確。

          按照這個思路去設計最為重要的就是要檢查開發人員調用的組件庫的規格是否是我們設計稿的規格,以此類推去整體的布局、按鈕樣式,報錯樣式。


          這里需要描述的內容相對較多,以后有機會我可以再補充一份關于《如何搭B端建組件庫》的文章,咱們詳細聊一聊。


          c.空間關系是否一致

          空間關系可以簡單的理解為模塊與模塊之間的“間距”關系和組件與組件之間“間距”的關系。


          1)模塊與模塊之間——間距

          所有模塊(卡片)之間的間距,這里具體指的頁面布局包括橫向間距和縱向間距,大家可以采用4px(或者8px)的倍數進行刪格布局,把刪格布局的基礎規范梳理出來,以這個規范當作標注來審查橫向間距和縱向間距。


          2)組件與組件之間——間距

          另外一點就是我們在搭建組件階段,組件與組件之間的間距關系是否一致,不要出現不對齊的情況出現。


          3)為什么要用統一間距

          大家了解空間關系都看那些緯度后,我們再來解答一下大家的心中的疑惑??傉f要間距要保持一致,但是為什么要保持一致呢?主要原因有以下三點:


          對于如何使用間距,我建議大家可以看一看《寫給大家看的設計書》里面關于版式設計四大原則的講解和有關格式塔原理的文章。



          d.文案的顯示是否清晰

          在ui設計中,我們總避免不了與字體打交道,字體也經常是我們在設計中容易忽視的部分,影響字體的清晰度無非是字體、字號,字重,段間距這幾個參數的設計。


          1)字體

          字體的實現其實是電腦渲染的一個過程,mac電腦默認字體是蘋方,wids電腦默認字體是微軟雅黑。在字體的選擇里面行業里是有標準的規范的,比如ont-family:serif、sans-serif、monospace、cursive和fantasy這無種字體,前端在編寫代碼時候會把這種多個字體名稱保存為“字體的回退機制”來定義,意思就是如果展示的設備(瀏覽器)檢索是沒有第一款字體就依次順延使用下一款字體,這個大家只需要了解就好,在字體選擇中使用頻次最多的還是對數字字體的選擇。


          對于數字的字體設計要提前查看是否字體有版權。這里分享一個可以免費查詢字體的網站:https://fonts.safe.#/?from=bd

          不同的網站對字體排序的方式可能不一樣,有興趣的小伙伴可以用下面這個的方法進行查看。


          2)字號/行高

          對字體的字號也要進行走查,因為在開發階段在不同的瀏覽器種顯示的字號會有變形的情況出現。


          另外考慮各個瀏覽器的兼容問題,pc端建議使用最好的字號是12pt,因為12pt可以保證在現在市面上的瀏覽器種是可以清晰顯示的,如果有特殊場景需要用到12pt以下的字號,需要和開發說明并且標注出來。


          3)字重

          設計區分文案層級的場景使用頻率最高、視覺效果最好的設計方法就是給字體加粗的字體樣式了。


          這里要注意的是初級設計師的眼力可能還沒有達到很高的水平,尤其是最小的字體顯示加粗或者不加粗的效果視覺在電腦那么大的屏幕上感官并不是很明顯,所以最好可以通過從代碼的層面進行核對,具體方式可以看圖:



          e.顏色的選擇是否科學

          產品是給用戶呈現面積最大的一個元素對用戶來說感官層也是表現最為明顯的一個元素,所以在校驗中“顏色”是最容易造成落地頁面與設計稿視覺差異的一個因素。


          1)色差

          因為大家屏幕的技術一般是LG屏幕(屏幕的使用時間越長色彩的還原度越低)。


          雖然有的時候在查看代碼時候色值是正確的,但是也要根據具體的場景進行分析,這里建議大家不要使用具有不透明度的色值(雖然在c端中經常會使用,有不透明度會使顏色比較透亮但是在B端產品中定位是工具,工具就要以效率在第一位,美觀在第二位,所以這個場景的顏色使用盡量以清晰展示為第一準則。


          2)顏色種類

          b端產品中,柱狀圖、折線圖的樣式比較多,在設計這類圖標時候盡量避免多種顏色的出現,還是因為B端產品定位的原因,太多的顏色設計勢必會干擾用戶進行判斷。



          g.圖標的尺寸是否合理

          不管是在C端產品還是B端產品中圖標的也是高頻出現的一個元素,圖標本身的意思就是簡化文字信息,通過圖形去高效的傳達一個固定的文案信息。


          對于圖標的設計走查大致分為兩點:


          1)大小

          我們在設計icon圖標時候,會根據不同的場景進行圖標尺寸的規范輸出,但是在真實的開發環境當中,開發在使用我們提供的插件(藍湖)進行icon下載時候,會提供3種icon的尺寸下載,前端開發在使用切圖時候往往會忽視掉圖標的尺寸問題,對于圖標的設計走查,是否圖標使用的尺寸是我們設計使用的規范,所以第一個就要看大小是否能清晰的展示。


          2)svg格式開發

          因為pc電腦的屏幕尺寸、分辨率往往是高于移動端的屏幕尺寸、分辨率,圖標的切片做的太小上傳到屏幕上會出現模糊的展示效果,如果圖標不能清晰的展示圖標所呈現的圖形,那就會造成用戶一定的識別障礙,所以一定要保證圖標不要有模糊的情況出現,盡量使用svg格式圖標切片給到開發。



          設計校驗工作不能說難,但是有耐心有細心的設計師都可以完成的,一遍視覺校驗需要1——2天的時間,相對來時比較耗費大家的精力。


          換個角度思考,如果我們從項目開發的前期就控制設計走查的工作量,那我們可能會減少了走查的工作量。接下來我們就聊一聊怎么減少設計校驗的工作量。


          01.  了解需要視覺校驗的原因

          前面我們一直講的是做視覺校驗需要校驗的維度,我相信更多的設計師還是希望把精力放在做設計效果圖階段,畢竟如何做只能單純的提高我們的校驗的效率,想要在開發過程中減少對項目的設計校驗的工作,


          我們需要清楚兩個答案,一個是“在開發過程中為啥需要設計走查”和“開發不愿意修改的原因”。


          a.誰負責實現樣式

          開篇我已經講了設計走查的意義(原因),為啥要做視覺校驗其實和設計走查的原因差不多,但是我想從開發流程再聊一聊。在一個產品開發中設計師下游需要對接人的人員角色統稱為開發工程師。


          但是在這類角色中其實也是會細分為三種角色:前端工程師、后段工程師、測試工程師。而前端工程師是我們主要對接工作內容的對象。

          因為做項目多數情況是多人寫作共同完成的工作可以從上面圖片可以看出,前端工程師是實現我們效果圖樣式的主要人員。


          b.前端工程師心里所想

          前端工程師的工作內容需要一一查看設計師提供的標注,然后再一一去實現,所以難免不了心里會這樣所想:好麻煩,如不我自己按照感覺寫。


          在真實的工作中,前端開發按照規范進行項目開發這種思路是對的,但是設計師強硬的要求前端開發工程師,按照規范進行開發是過于“理想化”的一種表現。


          所以我們還是要先從自身出發,循循漸進的要求前端工程師按照我們的設計規范進行開發,這就來到我們下一個話題。


          02.  如何避免呢

          那么接下來我們來聊一聊身為設計師我們要怎么做,才能避免進入過多的設計校驗呢。


          a.了解開發實現原理

          如果想成為一個高端進階的設計師,我們要給自己增加籌碼,那最為直接增加籌碼的方式就是——站在開發者的視野看待問題,了解開發思維。


          國內前端寫樣式的代碼基本上是HTML+css,jacascript,注意這不算是編程,只是一個寫樣式的語言,簡單的理解就是盒子模型(css語言)


          1)盒子模型

          CSS盒子模型 又稱框模型 (Box Model) ,包含了元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素。如圖:

          舉一個圖文模塊的例子:圖(1)是設計師輸出的設計稿, 圖(2)是開發需要的標注信息(我們實際給到開發的標注)開發需要的查看的就是色塊的尺寸和色塊之間的間距。



          2)用框架化思維做設計稿

          了解完前端制作咱們效果圖的原理后,我們就要用這個盒子模型的概念,像是搭建房子的原理去制作效果圖,所有的組件之間都是有理有據的,那這個專業術語就叫做框架化ui。


          前端開發工程師通過一個個盒子填充來將我們的組件元素放入其中,最終形成前端展示的頁面。

          注意:標準的額框架化就像前面的盒子模型是一塊一塊制作的,考慮到開發同學開發階段組件的嵌套邏輯。


          3)開發者模式

          如果還是不太了解盒子模型具體是什么的同學可以在線上使用下圖的方法自己去查看。


          設計師在視覺校驗時使用瀏覽器就可以看到開發寫的盒子,了解盒子也可以方便我們走查時知道問題在哪。具體操作步驟:



          b.檢查自己的設計稿

          在給前端開發工程師的提供設計標注階段需要提前保證自己出的效果圖是有效的設計方案,符合基礎的視覺需求,都能保證模塊設計的可擴展性及規范化,避免定稿后在反復修改設計方案。


          比如;當我們設計產品中的搜索條件模塊時候,我們需要考慮在一行展示3個搜索條件,一行展示4個搜索條件或者一行展示6個搜索條件并且放不下的情況下,那效果的展示樣式都是應該是什么樣式的這列問題。

          再比如,我們設計完一個場景的設計稿之后,還要考慮不同屏幕尺寸下這套效果圖的布局是否能滿足產品需求,如果不滿足在那設計稿需要調整成什么樣式的設計稿。



          03.  做好標注文檔

          除了確保設計稿的可行性之外,還要做好設計稿的標準文檔。如果項目是小版本的迭代就只需要進行簡單的描述即可,如果是組件庫的升級,那就需要 給前端工程師的標注文檔,盡量是詳細的、準確的。


          包括設計稿、切圖(規范的切圖命名、壓縮好的圖片文件)標注、設計規范已級交互文檔(包含標字體標注)。


          a.描述到什么程度

          那細致描述到什么程度呢?這里我簡單的說幾個點,比如:
          ·側邊導航欄在正常模式下、縮緊模式下,導航欄的寬度是如何變化的,
          ·如有有圖片信息的上傳,是什么圖片比例是什么,是21:9‘16:9,4:3.1:1?
          ·如果出現文案超長的信息場景,不可展示的文案信息是什么樣子展示,是文案后面是省略號展示?還是鼠標滑上去有氣泡彈窗的展示樣式。


          b.圖標命名的規范

          隨著業務增多,團隊內對圖標的隨意命名的習慣也開始凸顯出弊端,這種不好的習慣會造成同一類功能的圖標會出現不同樣式尺寸,所以我們在搭建圖標規范時候,就可以把切片的命名規范好。


          在圖標規范中,圖標需要有著單獨的后綴,這樣可以讓公用圖標與業務圖標更方便的溯源。值得注意的是我svg格式的圖標可以不用寫切片的尺寸,而png的圖標我建議寫上切片的尺寸。

          有些公司習慣于去icon進行英文的格式命名,左側是我整理的比較高平使用的命名,文章末尾我會分享出來文字格式,供大家使用。


          c.圖標的上傳

          可以在開發前在與前端開發溝通達成共識、圖標制作完成確認后,將圖標上傳到阿里巴巴圖標庫中,更方便前端調用圖標大小和調整顏色。


          如果開發需要自己去找到相關圖標,也可以給予權限讓開發從藍湖上傳圖標(前提是得整理好圖標到藍湖上)。




          04.  和前端開發工程師的溝通

          在雖然很多時候項目的到發版本時間、驗收標準團隊內部都是由明確的規劃和標準,但是有些問題還需要特別分析、特別對待:這里我就列舉幾點我在項目由幾個比較重要的點。


          a.進行設計宣講

          設計宣講最大的意義就是加深他們的印象,提前大家心里都有一個預估,把一些規范標準類的問題暴露出來,把關鍵核心點,規則講清楚,為了后面減輕設計走查的工作量,開發也輕松一些。


          1)用認知對齊,目標一致

          如果團隊內部四個角色成員大家的認知都是一致的——提升用戶體驗是我們公共目標。


          如果不一致,那就要說服其中一個角色,最好是項目負責人,說明校驗影響發版時間,如果大家都按照規范去完成自己工作內容,可提高效率。確保大家理解一致:設計師要和開發、測試確認視覺表現層的驗收內容、確保內容大家理解一致。


          2)做有效的溝通

          認真是前提、尊重是法寶。


          在部分開發團隊中,設計師的也不能太過于教條的對待自己的設計標準,畢竟開發生氣請假不修改了,那就真的沒有人可以進行代碼的修改了,設計效果更是顯示不了了在開發之前,就要和開發溝通,目前這些界面的效果在技術層面上是否能實現,針對比較復雜的界面場景,實現出來的代價有多少,權和利弊后在確定是否按照效果圖進行開發。


          針對復雜的頁面需要把標注標記的更加詳細,并且明確告知他們,我的刪格在哪里說明,布局規范在哪里說明,在這個交涉過程中設計師就需要尊重他人工作成果,明確自己的需要做的事情,把問題描述清楚就好,不可要求開發同學100%還原設計稿、過多的干預別的開發團隊的開發步驟和內容。


          3)不必焦慮

          前端開發工程師找我們溝通他們的疑問點時候我們要積極回應他們,并且和他們一起處理問題,比如某些復雜的頁面,避免不了實現效果圖不好的情況出現,這時候不要一口咬定就是開發的原因,先溝通具體原因,然后找出解決辦法。


          不必焦慮、遺留問題下一版再解決:開發人員在修改的代碼的階段,開發人員的效率是有限的,而且大家都是身兼多條業務線,在這種開發的場景中可以在不影響正常發版日期的階段,把不太重要的視覺問題,放到下一個版本中在進行修改。


          4)規劃時間節點

          而且在工作項目中也要注意分配自己的精力,我建議用對需求等級進行劃分。

          把問題的界面自己標記優先級,定期(每天定時)跟程序員溝通,跟他一起制定解決方案和時間。如果時間允許可以慢一點修改,只要改對了就可以,畢竟完成比完美更加重要。



          對于設計校驗的工具就一個原則:你開心就好,工具的最大作用就是提升工作效率,只要你覺得能提升你工作效率,你喜歡用啥就用啥。


          如果還在迷茫用什么工具進行設計校驗的同學,我把我使用的工具主要分類兩類工具,第一類是發現開發問題和效果圖的不符合的工具;第二類是針對如果高效記錄、追蹤問題的工具。重要目的就是提高設計師在設計走查中的工作效率。


          01.  4款發現問題的工具

          我在工作中發現很多時候開發不愿意檢查自己代碼樣式的一個原因就是不知道以下四種工具,在很多公司里面前端開發工程師都是多條業務線并行開發的局面,沒有更多的工作時間自己做設計審查,覺得又繁瑣又麻煩,


          這是時候我們可以提供工具給予開發,幫助他們提高工作效率。設計師同學也可以借助以下4款工具進行校驗:

          前三款都是Google Chrome瀏覽器的具體操作步驟可以看下面的圖片,如果還有不懂的地方可以在評論區給我留言,我看到后會為大家一一解答。


          至于“他山石”這款軟件大家有興趣的話可以在晚上直接打名稱就會出來軟件信息。


          02.  記錄追蹤問題的工具

          介紹完發現問題的工具后,咱們再聊一聊記錄追蹤問題的工具,有的人會問了,你前面講了視覺校驗都要看哪里,有推薦了視覺校驗的工具來發現問題,我直接把需要修改的地方告訴前端開發工程師不就可以了嗎?為什么還要知道這個記錄追蹤問題的工具呢?


          a.進為什么要使用記錄追蹤問題的工具

          在一些設計團隊稍微成熟的公司里面由于項目的規模比較大,涉獵的模塊多,參與的人員相對也多。


          面對這種體量的項目如果不進行問題的記錄的話,這周做項目里面的1號模塊,下周做項目里面的2號模塊,大下周要對項目里面的1號模塊進行修改,然后自己就會發現1號模塊當初的修改問題是什么忘記了,更有甚者都忘記一起協同工作前端開發工程師的名字了。


          這時“記錄追蹤問題的工具”就顯的尤其重要了,因為這種工具的出現可以幫助我們回憶起當初具體的修改問題和修改的進度,從而降低上線安全性的風險度。



          b.TO DO LIST 思維模式

          to do list是一種實際走查階段使用的一種走查模式。


          在設計走查階段,主要由設計師發現問題、記錄匯總遞交到前端工程師這里進行修改和跟進,主要的優勢是在于協助走查可以順利的開展,不遺漏掉任何信息。


          在輸出的表格比較注重3點,問題需要逐條記錄、需要截問題圖片及描述修改正確內容、相關對接人員的名稱和處理進度。

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

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


          文章來源:站酷   作者:斜杠7濕兄

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

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



          什么樣的設計才是好設計?

          資深UI設計者

          編輯導語:設計師在日常工作中經常與其他同事有些分歧,比如產品不理解你的設計,覺得頁面不夠好看等等,那到底什么樣的設計叫做好設計呢?本文作者分享了關于“好設計”的定義以及分析,我們一起來了解一下。

          有同學問我,說做設計好難,領導和產品不懂設計,每次給看設計,都說覺得丑,改了受氣,不改又說態度不行,那么到底什么是好設計。今天和大家聊聊到底什么是好設計?希望這篇文章可以幫到你。

          一、什么是好設計

          做設計這么久,我們先來看看什么是好的設計?好的設計到底是如何定義的。

          1. 得過設計大獎

          主管每次看我作品就說:好丑!

          ▲一組無印良品海報獲得了由日本平面最高獎項——龜倉雄策獎,被譽為日本設計界的「奧斯卡終身成就獎」,代表著日本平面設計的最高水平。畫面僅用色彩和幾何圖形的結合,完美構成了人在自然中露營的和諧場景。

          主管每次看我作品就說:好丑!

          ▲可以看到海報中有湖泊、藍天、山脈、森林和露營帳篷,而整個視覺效果是用廢紙板制作表現出來的,可以說非常有創意了。同時和整個商業很好的結合起來。

          主管每次看我作品就說:好丑!

          每年德國舉行的紅點設計大獎,有「設計界的奧斯卡」的美譽,是全球工業設計和發展趨勢的風向標。

          主管每次看我作品就說:好丑!

          ▲德國的紅點設計也是讓全球設計師狂熱的獎項,徠卡相機除了價格昂貴,在設計上也是獨具匠心,獲得過很多設計大獎,非常有代表性的大獎設計,同時商業上也很成功。

          主管每次看我作品就說:好丑!

          ▲自2015年發布以來,Apple Watch已經成為生活中必不可少的電子設備,獲得了無數設計大獎。

          主管每次看我作品就說:好丑!

          ▲除了工業設計,韓國我很喜歡的設計公司Plusx也獲得過很多紅點設計大獎。

          主管每次看我作品就說:好丑!

          所以判斷一個設計是不是好的設計或者商業設計,獲得過大獎是很重要的一個評判標準。

          2. 符合好的設計原則

          主管每次看我作品就說:好丑!

          在眾多設計準則中,其中特別受廣泛推崇的是Dieter Rams)所定義的“好設計的10個原則, 也即德國博朗公司設計十項原則。

          1)Good design is innovative

          好的設計是創新的

          主管每次看我作品就說:好丑!

          ▲日本設計大師深澤直人設計的這把傘,在傘柄彎曲的地方有一個小凹槽。當你在雨天去超市買完東西,提著袋子去乘公交車或者地鐵的時候,這個凹槽剛好可以在你站著的時候為你充當一個掛鉤的角色。這個設計非常自然又貼心,又有創新。

          2)Good design is aesthetic

          好的設計是美的

          主管每次看我作品就說:好丑!

          ▲產品的美感是實用性不可或缺的一部分,因為每天使用的產品都無時無刻的影響著人類和我們的生活。但是只有精湛的東西才可能是美的。比如蘋果iMac的設計,無論從第一代的半透明,到今天的超薄,無不是完美的設計,在各種電影,MV里,即使遮住了蘋果的LOGO你也知道是蘋果的產品。

          3)Good design makes a product understandable

          好的設計是易懂的

          主管每次看我作品就說:好丑!

          ▲好的設計自己會說話,簡單易懂,比如無印良品這個CD機,即使是老人和小朋友都會使用。

          4)Good design is unobtrusive

          好的設計是克制的

          主管每次看我作品就說:好丑!

          ▲很喜歡張小龍對微信的設計理念定義,克制帶有約束的,就從微信開屏來說,其它是APP早已經商業化了,而微信的開屏多年如一日。

          5)Good design is honest

          好的設計是誠實的

          主管每次看我作品就說:好丑!

          ▲不會故意夸大產品的價值,而是強調功能本身,也不會去欺騙消費者。比如現在很多廣告,特別電商里面,比如我經常買的這款牛奶,從廣告點進去第二件0元,興沖沖的加入購物車,發現還是原價。

          6)Good design makes a product useful

          好的設計是實用的

          主管每次看我作品就說:好丑!

          ▲無論APP也好,還是工業產品設計也好,都是用來用的,必須滿足基本的功能,好的設計會去強調實用性的同時也不會忽略細節,比如無印良品這個電飯煲外形圓圓的很可愛,同時還很多貼心細節,比如有凹槽放飯勺等等。

          7)Good design is long-lasting

          好的設計是經得起歲月的考驗

          主管每次看我作品就說:好丑!

          ▲這些產品或許隨著時代發展消失了,但是它們的設計永遠不會過時,和設計趨勢不同,它會成為一種文化,一種理念,博朗和蘋果早期的作品在今天看來也是經典。

          8)Good design is thorough down to the last detail

          好的設計是考慮周到并且不放過每個細節的

          主管每次看我作品就說:好丑!

          很多產品的設計,很容易在用戶關注地方做的很好,在用戶忽略地方做的很粗糙,就好比我們去了一個商場,一樓都是各種名牌,高大上,但是去了洗手間,去無法下腳;這種體驗估計用戶不會再去第二次,所以極致的設計不會放過每一個角落。

          9)Good design is environmentally friendly

          好的設計是環保的

          主管每次看我作品就說:好丑!

          ▲瑞典品牌freitag,以卡車車篷為材料的袋包作為材質,具有獨特的二手感,以及獨一無二的花樣及顏色,設計好用同時兼具環保。

          10)Good design is as little design as possible

          好的設計是盡量少的設計

          主管每次看我作品就說:好丑!

          ▲簡潔,并不是簡單,因為它濃縮了產品所必須的具備因素,剔除了不必要的東西。“大道至簡,平淡為歸”比如圖中這個時鐘設計,兼具美和實用,同時沒有一個多余的設計。

          3. 好用且銷量高

          主管每次看我作品就說:好丑!

          另外很重要一點,什么是好的商業設計,就是好用而且市場反饋好,用戶好評多,比如蘋果系列產品,設計本身獲得很多大獎,同時商業價值好,銷量很高。

          主管每次看我作品就說:好丑!

          同理還有戴森的產品,以黑科技為賣點,無論推出的吹風機,還是卷發棒都銷量非常的高,所以好的商業設計需要具備上述所說。

          二、產品設計好的設計標準是什么?

          主管每次看我作品就說:好丑!

          了解了好的設計標準,回歸到產品設計,那么什么決定視覺設計的標準呢,UI設計的標準又是什么呢,UI設計視覺元素有木有對應的表達標準。

          特別是在一些大公司,每個設計師的視覺表達手法是不一樣的,那么有哪些統一的設計標準么,在我認為一共有以下這幾個設計標準:

          1. 標準的網格系統

          1)PC網格

          主管每次看我作品就說:好丑!

          網格的重要性就不再詳細說,谷歌,微軟,蘋果,Naver,阿里都將網格系統作為設計的標準。明確網格系統,它是設計指南里非常重要的一部分,當然網格也不是絕對的,也是可以在基礎上變化。

          通常,在Web設計中一般采用12列作為網格標準,因為12列可以輕松的分成6列,4列,3列和2列。

          主管每次看我作品就說:好丑!

          主管每次看我作品就說:好丑!

          ▲PC中12欄網格運用案例,整個頁面會更加統一和標準化,有規律可循。

          主管每次看我作品就說:好丑!

          ▲網格是很多公司建立標準的準則,特別是響應式設計運用上。

          主管每次看我作品就說:好丑!

          主管每次看我作品就說:好丑!

          ▲reddit的官網設計也是采用的12欄設計,很好的將頁面進行布局。所以如果你做網頁或者PC設計,網格一定是一個好設計的基礎準則。

          2)移動網格

          主管每次看我作品就說:好丑!

          移動端一般采用6列網格,因為大多數產品6列就足夠了。6列在頁面中也很容易3等分或者2等分,6列也是比較常用的一些布局方式。當然也要看場景像淘寶,電商可能需要12列,因為頁面密度太高了。

          主管每次看我作品就說:好丑!

          主管每次看我作品就說:好丑!

          ▲Pin的界面網格系統,可以看出它們是運用一個6列網格系統,所有的圖片各占3列,按鈕占六列,每個頁面的左右邊距相同。

          主管每次看我作品就說:好丑!

          主管每次看我作品就說:好丑!

          ▲airbnb采用的左右邊距48,中間24的網格系統,可以看出這套柵格系統留白會比較多,所以我們在瀏覽airbnb的設計時候會發現他們頁面會非常舒服原因也是如此,airbnb設計和體驗都非常棒。

          主管每次看我作品就說:好丑!

          我們再來看看被稱為規范鼻祖的谷歌在最新的設計語言中,第一次把柵格系統提出來講,谷歌的產品覆蓋手機,web,以及平板,那么谷歌是如何去用柵格系統來定義它們產品體系呢?

          主管每次看我作品就說:好丑!

          主管每次看我作品就說:好丑!

          ▲谷歌的柵格系統除了傳統的邊距和水槽,內容區域外,同時也定義了4欄,可以看出谷歌也是第一次重點來講解他們的網格系統。

          2. 合理的比例關系

          主管每次看我作品就說:好丑!

          比例關系非常重要,可能同樣的內容,合理的比例和不合理看起來會相差甚遠。所以好的合理比例準則也是衡量一個設計好壞的重要標準。

          主管每次看我作品就說:好丑!

          說道比例不得不提黃金比例,是由幾何學的創始人Euclied定義的,大概在公元前300年前。黃金比例值是1.618,但是也有人質疑說,這里比例不是絕對。用黃金比例作為設計依據不合理。我的觀點是,黃金比例可以當做設計參加的基礎,但不是絕對的數字。

          主管每次看我作品就說:好丑!

          ▲蘋果設計中,運用黃金比例作為整個APP圖標的設計準則,在蘋果很多設計中都可以看見這種比例的運用。

          主管每次看我作品就說:好丑!

          ▲還有很多知名互聯網公司的品牌設計都運用著黃金比例。

          主管每次看我作品就說:好丑!

          ▲Facebook的官網設計比例,也是采用的接近黃金比例作為布局方式。

          主管每次看我作品就說:好丑!

          主管每次看我作品就說:好丑!

          ▲谷歌的material規范中有講到,如何定義布局。統一按照標準的比例16:9,3:2,4:3,1:1,3:4,2:3等標準的比例去做設計布局,來統一整個設計。

          所以,好的比例規則規范,是設計中非常重要的。我們的設計都應該遵循這種有規律的比例。

          3. 文字的易讀性

          產品設計中,文字信息節奏處理非常重要。我們應該通過各種手段去提升文字的易讀性。

          1)通過對齊方式提升易讀

          主管每次看我作品就說:好丑!

          ▲上圖是一個簡單的示范,3種不同的閱讀感受,如果閱讀節奏沒有做好,沒有對齊,那么閱讀效率就會變的低下,我們來看看上圖用戶是如何閱讀的。

          主管每次看我作品就說:好丑!

          ▲拆解上面的方案,你會發現不同的排版,用戶看的方式就不一樣,如果你間距過小,用戶就很難閱讀。間距過大也會出現難以閱讀,所以必須在合理的比例下面設計的閱讀性才會更好。

          2)通過文字大小提升易用性

          主管每次看我作品就說:好丑!

          ▲大多數信息都是由標題,副標題,正文組成。所以在組織信息的時候,可以通過文字大小,字體粗細來加強信息閱讀。蘋果還把黃金比例用于字體上。每個字體大小的對比都是1.7和0.7左右對比,非常接近黃金比例。

          3)通過對比提升易用性

          主管每次看我作品就說:好丑!

          ▲運用對比也是提升易用性經常用到的手段,比如通過文字大小對比,文字的透明度對比。但是要注意互聯網的文字的可訪問性,推薦使用web無障礙標準4.5:1

          主管每次看我作品就說:好丑!

          ▲蘋果的官網設計,就是將文字信息運用到極致,如上圖通過文字大小,文字顏色,文字透明度等方式,讓信息閱讀起來更加流暢。

          三、最后

          關于設計的準則有很多,設計的準則目的是讓我們的設計更加和諧,它是一個參考標準,但是又不是絕對的,你可以理解為它是一把尺子,這把尺子是保證設計有一個基礎。



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

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


          文章來源:人人都是產品經理   作者:sky

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

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


          如何通過設計驅動產品的增長設計

          ui設計分享達人

          在《增長黑客》中有這樣一句話“If you are not growing,then you are dying!”(如果企業不在增長,那么就在衰亡?。@話也適用于個人。人生畢竟不像企業,是非成敗,似乎都無可厚非,所以我們常常放飛自我偏離軌道,以至于有時候不得不提醒自己“不在成長,就在消亡”。我們來人間一趟,有沒有全力以赴想要成全的事?可以反復嘗試、不斷接近嗎?所以,我認為,增長它是一個永恒的話題,我們在學生時代讀書的時候希望自己的分數與排名能增長,在企業上班工作的時候,我們希望我們的收入能增長,當我們創業的時候,我們希望自己企業的業績能增長,增長是長期伴隨著我們生活的一個指數。

          《在大數據時代》一書中提出了“量化一切”的概念,即一切都可以用數據來衡量。其實,在“數字敏感”的互聯網時代,電商平臺“銷量”、電影票房、百大up主、文章閱讀10w+等等,我們其實早已在不知不覺中用數據丈量著一切。

          增長設計這個概念好像是最近幾年才廣為互聯網從業人員才熟知,成為每個互聯網er所討論的熱門話題,因為在過去的十多年,是中國經濟數字化騰飛發展的十年,我們90后更是親身見證著互聯網企業的成長,“眼見他起高樓,眼見他宴賓客,眼見他樓塌了”。

          我們關于用戶增長也是在不斷的迭代的,從最早期的雛形AIDA法則,由路易斯提出推銷模式,西方推銷學中一個重要的公式,AIDA法則也稱“愛達”公式,然后到2007年的facebook,提出這個概念,即,我們知道我們的廣告費是浪費掉了,但是我不知道是哪一半,于是,精于廣告投放的facebook便通過科學的,可復制性,可以被檢測的廣告投放可以幫助于其他企業做好用戶增長,然后便是我們知道后期比較流行的AARRR海盜模型這樣更加精細的用戶增長策略.


          2.1 關于增長設計


          在近幾年我們經歷了從互聯網市場在基本火熱到冷靜,尤其是隨著移動互聯網的流量紅利開始消失,“增長黑客”與“用戶增長”這兩個概念開始慢慢火爆開來,我們國內互聯網企業互聯網從業人員也開始重視用戶增長。

          企業的增長,也可以理解為企業的成長,所以企業能否保持增長,是老板和員工都比較關心的一件事,因為企業只有保持一定幅度的增長,才能保證大家在未來繼續過上好日子。以前傳統企業做增長可能就是通過贊助冠名一個很火的電視欄目,或者請個明星作為企業產品代言人,都可以在一定時期內來吸引消費者的關注,實現快速增長。但是這幾年我們可能也發現了,傳統意義上的營銷手段似乎不太管用了。因為以前我們從在電視和傳統紙媒上獲取信息的用戶都慢慢轉移到朋友圈、B站、抖音等互聯網頭部平臺,過去的傳統營銷三板斧來拉動企業業績的增長,已經變得越來越難。

          所以我們發現,在2017 年可口可樂宣布取消 CMO(首席營銷官),由 CGO(首席增長官)替代,以增長為中心的各個職位在招聘網站上也如雨后春筍一般涌出。

          看到這里,這些好像和我們從事Ui視覺工作的好像關系并不是很大,而恰恰相反,我認為用戶增長設計并不是一套虛無縹緲的說辭,而是一種能夠與團隊協助的工作形式,在一個產品團隊中,我們每一個人都應該了解一些關于用戶增長設計方面的知識。

          我們所知道的產品是為用戶在服務,是為了滿足用戶的實際的需求,所以我們所理解的增長設計便是產品創造了價值,而增長設計是將產品的價值放大傳遞,讓更多的人去發現。


          2.20 關于以用戶為中心的增長設計


          而我們體驗設計師更多關注在做產品增長設計的時候盡可能的不去傷害到用戶,以同理心去思考做增長設計的策略。這個我們會稱為用戶增長設計(User Growth Design),即簡稱UGD,簡單的理解為用戶增長設計要以用戶為中心,以用戶的角度和思維方式去想問題,去做用戶的增長。

          讓產品簡單到“傻瓜”也能操作,是喬布斯和張小龍做產品的核心理念。坐擁10億用戶的微信之父張小龍說過,產品經理要有傻瓜心態。“我要經過5~10分鐘的醞釀才能達到傻瓜狀態,馬化騰需要1分鐘,功力最深的是喬布斯,傳說他能在專家和傻瓜之間隨意切換,來去自如,即所謂的Stayfoolish。”

          當然,此傻瓜不是彼傻瓜,而是一種跳出當下局限的外行心態,是站在普通用戶的角度是操作、帶有同理心去思考產品,這樣才會更容易發現產品本質上的問題和抓住真痛點,找到影響用戶增長的關鍵因素。

          2.30 設計師該如何去做設計增長


          我們設計師要想所做的用戶增長肯定不是去街上發個小廣告,去地鐵上拿著產品的下載二維碼讓用戶去下載我們的產品,我們設計師著手的設計增長范圍還是從用戶體驗去入手的,所以我們在考慮提升產品數據的時候也需要考慮用戶的使用體驗,例如,公司現在想要提升產品的成交額,我們設計師肯定不會提出的方案肯定不會是讓公司去請個明星代言來吸引用戶下單之類的,我們設計事所要思考的是如何提升用戶在下單過程中的流暢感,如何縮短路徑,讓用戶能方便成交,所以我們設計師的增長觀一定是在產品現有的基礎上,提升用戶的體驗,盡量讓用戶有良好的體驗下來提升用戶的數據增長。


          2.40 什么樣的產品適合做增長設計


          那我們產品都是來自五花八門的類目,那什么樣的產品適合做增長或者以什么樣的形式做增長合適呢?在增長設計概念最火熱的幾年,我聽過這樣的一個有趣的故事,一個做服務于醫療聚合類的設計同學去給面試官講他們這個產品的怎么做用戶增長的,其中講到他們通過如何通過增長策略去拉動用戶增長,如何留住用戶,面試官聽完,反問了一句,那們這個增長設計的策略是通過給城市投病毒導致那么多人生病的嗎?

          所以,世間萬物的增長都需要條件,用戶的增長需要內在的動力,不能浮于表面,需要認清內在動力這樣才能有助我們找到增長的關鍵因素,從而合理有針對性的部署資源和策略。


          (1)C端產品如何做增長設計


          C 端的產品,一般是個人消費場景,單一決策購買,所以我們需要給用戶持續使用產品的動力,即產品可以持續給用戶提供其他產品無法提供的價值。用戶在使用產品獲得價值提升,例如獲得友情、愉快、知識、優惠、收入等等,用戶才會繼續使用,甚至會給身邊的好友去推薦。

          例如我們的國民軟件微信,拉進了人與人之間的距離,帶來了免費通話和朋友圈和這個門檻最低的社交網絡,我們可以通過朋友圈去展示和表達,我們微信上的各種”相親相愛的一家人“”多少級的同學“群成為我們去維系友情親情的寶地,現在我們通過掃一掃便可以完成生活中很多事情,都為用戶提供了極大的便利,微信獨有的社交屬性促成了巨大的網狀人際關系,讓用戶自發的去加入,并難以離開。在2020年3月底QuestMobile提供的數據來看,微信活躍用戶180日留存率為95.5%,位于常用APP用戶留存率排行的首位,擁有如此高的用戶長期留存,可見微信為用戶提供的價值之大。

          所以C端的產品只有能為用戶提供價值,用戶才會選擇留下,甚至會主動傳播為產品帶來更多有價值的用戶,這才是最理想的、良性的用戶增長。


          (2)B端產品如何做增長設計


          B端的產品和C端的產品不同,B端的產品往往是做決策的過程比較復雜,往往能決定購買的人并不是產品的使用者,他們只是負責采購的,另外有的采購量比較大的企業往往和銷售的人脈關系掛鉤,

          但是阿里的團隊通過不斷的深耕B端的市場發現,雖然 To B 增長很難,但在中小企業的增長很有機會。一般的中小企業,使用的人數不是特別多,一般都是5人以內的使用者,這類企業能決定購買和使用者是同一類的人,所以它會與我們C端的購買決策的路徑比較相似。另外中小企業的數量也是比較多,所以這塊的市場還是有挖掘空間的。


          2.50 什么是用戶的增長設計


          用戶增長設計設計其實就是從吸引新用戶的注意力到產品能給用戶一些價值最后用戶認可我們產品的過程,這是一個從短期流量到長效流量轉化的過程,


          (1)用戶的吸引力(獲客)


          我們一般獲取用戶的方式最直接便是去投放廣或者軟文推廣,用戶通過點擊下載APP來訪問我們的產品界面,在我們的產品中尋找自己想要的信息,一直周而復始,直到找到自己想要的信息,反正,產品的內容沒能吸引用戶,這時候,用戶便會退出產品,也就是用戶的流失。


          在這個過程中,一直圍繞著三個比較關鍵的因素“使用者(人)”、“使用場景”、“用戶行為”,我們需要明確用戶的使用路徑中,產生行為的原因和流失的因素。


          (2)用戶的注意力(激活)


          我們在設計中怎么通過設計策略去避免用戶的流失呢?我們需要去引導用戶的注意力,讓用戶在使用過程中對我們產品有認可,都可以有效的去避免用戶的流失,


          ·如何引導用戶的注意力


          我們怎么去衡量我們的產品是否吸引了用戶的注意力呢?根據Alibaba Design Ucan 2020所提出的一個公式。用戶的注意力=心理需求*視線所及,用戶的注意力是用戶的心里所想和目標所看到的交匯,當產品給用戶看到的信息是用戶想要的東西的時候,這時候,用戶便會點擊進入,所以通常曝光率則可以驗證用戶在產品使用中的注意力。


          例如,我們在瀏覽商品的時候,我們的目標首先關注的商品的品牌然后是名稱和價格,我們用戶心里想的可能是哪個品牌會比較可靠,哪個的價值比較低,有沒有我常用的品牌,視線所及便是我們展現給用戶的列表,當用戶看到某品牌有我喜歡的明星的代言或者喜歡明星的同款,這便是用戶所想的。當滿足這些前置條件,用戶便會產生點擊行為。


          ·如何引導用戶認同我們的產品


          我們想要用戶去認可我們產品的價值,我們需要了解用戶,了解用戶可以從三個關鍵因素去入手,1.用戶群體,2.認同目標,3.說服用戶



          例如當新用戶進去拼多多后,界面會彈出新人的專享紅包,引導新人用戶的點擊,下一個頁面便是彈出手氣最佳的紅包,最后展示頁面出現現在限時下單全額度返利的banner,每一個頁面的場景關聯度極強。一步一步的去說服用戶去下單、有效的提升用戶點擊率。從而提升新用戶的首次下單的增長。


          (3)用戶的安全感(留存)


          張小龍曾提出一個產品觀叫“用完即走”,與我們常常提到的“留存”“粘性”的原則是背道而馳的,其實我理解的用完即走便是產品其實不想讓用戶離開,我們的產品能給用戶一個確定性的答案,無論是在產品的易用性還是在產品體驗層面,都可以保持高效,讓用戶在使用過程中有愉悅感,讓用戶遷移成本提升,便是用完即走后的戀戀不忘、

          例如早期的打車軟件和團購軟件,那時候用戶在網上打車和線上支付習慣還沒養成,對產品的模式的認同度還不夠,所以,那時候打車軟件和團購軟件給予人的確定的心理印象便是,你在我這里支付購買會便宜。培養用戶的使用習慣,給用戶一個用了該軟件確實會便宜的心理安全感,從而實現了用戶的留存。

          我們平時準備出門或者去一些陌生的地方,我們都會使用高德地圖或者百度地圖看下路上是否堵車,我們這次出行走哪條路需要用時多久,以方便我們去選擇合適自己的出行方式。

          我們設計師在做設計的時候也是一樣的,我們通過之前的數據,也可以分析出產品一些不一樣的改版點,我們能把一些抽象的問題具體化,能更好的去度量我們的設計,所以設計師在學習如何增長設計前,我們需要了解一些關于產品的數據知識,我們分析一款產品的時候,通過比較關注的點是用戶、需求和數據。

          當我們的產品上線或者上新某一個功能的時候,往往用戶的意見反饋代表的是個體的聲音,而數據是用戶對于產品的客觀反饋,數據的變化能代表用戶對產品的態度,所以,設計師要是能讀一些數據報表,那么我們可以從體驗設計師角度去給產品迭代的時候能提出不一樣的觀點,輔助我們所服務企業的app的成長。


          3.10 數據是如何產生的


          數據如如何產生的,比較深的知識是不需要我們去深挖的,我們日常接觸到數據反饋都是來自產品的“埋點”,而埋點數據的獲取通常通過第三方的工具進行獲取,比較常見的數據分析企業有友盟、七麥、GrowingIO等,這些工具可以在我們想要的頁面或者功能按鈕上添加監聽功能,當條件被滿足的時候,便會完成一次數據的統計,埋點需要提供兩個關鍵的信息:一是需要埋點的內容,二是埋點的名稱,這可以方便我們以后快速的找到相關的數據,當埋點完成后,產品上線就會檢測用戶的行為動作,當用戶進入我們的“埋點"界面或者功能的時候,后臺系統就會上報數據,我們就會收到數據反饋,但是在現實工作的場景可能比這個要復雜的多,我們可以根據具體的場景在靈活應變。

          3.20 設計師為什么要了解數據


          我們對一款的產品的優化可能有很多層面的思考,但是我們去對用戶數據的分析則是對當前產品最有價值的參考點,數據的采集與分析無論是對產品的規劃還是對設計師下一步的工作開展都是比較重要的指標,因為用戶可能會因為一些客觀的原因可能不會說出自己內心的真心話。

          例如我們去面試的時候,在一番精心的準備和問答之后,我們在面試結束之后,如果去問面試官“您覺得我這樣面試表現怎樣”,有的面試官可能會就你這次的變現去做出比較切合實際的點評或者建議,但是有可能你那場面試因為外部的原因會失常發揮,但有的面試官可能會照顧你的面子,可能會說表現的還可以之類的話來安慰你,但是面試官最后會不會錄用你這點他肯定不會作假,所以有時候我們在分析用戶行為及操作路徑的時候,一些用戶的數據表現便是我們對產品優化的關鍵因素。

          我們通常將數據的指標分為三大類:1.用戶相關指標、2.用戶行為指標、3.業務數據指標



          3.30 用戶相關指標


          我們常見的與用戶相關的指數有像DAU、MAU、新增人數等,我們需要了解的數據為1.用戶的活躍指數,2.用戶的留存率,3.人均使用時長。

          3.31 用戶的活躍指數


          在互聯網行業里,通常我們會通過拉新把客戶引過來,但是經過一段時間可能就會有一部分客戶逐漸流失了。那些留下來的人或者是經?;卦L我們公司網站 / App 的人就稱為留存。

          在一段時間內,對某個網站 / App 等有過任意行為的用戶,稱之為這個網站 / App 這段時間的活躍用戶,這個任意行為可以是訪問網站、打開 App 等等。

          我們常見的用戶指標有「日活」 即日活躍用戶量,縮寫為DAU,,縮「周活」 即周活躍用戶量,縮寫為WAU,「月活」 即月活躍用戶量,縮寫為MAU。


          3.32 用戶的留存率


          留存率是最能反映一個產品是否對用戶有吸引力的指標,一般的留存率是基于某個時間段而得出的結論,例如我們常常聽說的次日留存和七日留存率。

          次日的留存率計算公式為:當天拉新的用戶中,次日留存率=在注冊的第二天繼續登錄/第一天拉新用戶的總數量

          七日留存率的計算公式為:在第一天拉進的用戶中,七日留存率=在注冊七天后還有登錄的用戶數/第一天拉新的用戶總數。




          3.33 人均使用時長


          人均使用時長通常是對內容和游戲類的參考價值的很大,它可衡量我們產品是否做的比較優秀,能不能留住用戶的注意力。如果我們做的是工具類的產品,例如計算機之類的,這個時候的人均使用比較長,說明我們的產品可能出現了問題,無法讓用戶在短時間內得到他想要結果。

          人均使用時長的計算公式為:人均使用時長= 總活躍時長 /總活躍用戶數。


          3.40 用戶行為指標


          用戶行為相關常見的指數有用戶的頁面訪問量率、轉化率等指標。



          3.41 頁面訪問量率


          我們對頁面的訪問流量的定義分為兩種,一種是PV(page View)即頁面瀏覽量,另外一UV(UniqueVisitor):獨立訪客數。

          PV(page View)也就是頁面瀏覽量,即你每觀看一次就會漲一個PV,類似于B站的播放量,我們每個賬戶只要點開觀看一次視頻,播放量就會增長一次,關閉在打開,也會在增長一次,所以我們每播放一次,便會漲一個PV值。

          UV(UniqueVisitor):也就是獨立訪客數,類似于騰訊視頻和優酷的播放量,每個賬戶點進去播放只會增長一個播放量,你再關閉再點進去也只漲一個VU值。在正常情況下是依靠瀏覽器的cookies來確定訪客是否為獨立訪客之前是否訪問過該頁面。


          (1) UV的類別


          在統計數據的過程中, 我們會將不同的點擊率來劃分,從而更好的可以來統計數據來分析。我們將UV分為:1.

          曝光UV ,2.點擊UV , 3.意向UV。



          ·曝光UV


          曝光UV即曝光在視野內的用戶數,例如我們在京東或者天貓去搜索某個產品進入了搜索的feed列表頁的時候,當我在當前的列表停留2-3秒的時候,都可以算一次曝光UV。


          ·點擊UV


          點擊UV即有點擊行為的用戶數,例如我們在京東或者天貓去搜索某個產品進入了搜索的feed列表頁的時候,我點擊某個商品進去了詳情頁,那么就可以算一個有效的點擊UV。


          ·意向UV


          意向UV即進入意向頁面的用戶數,例如我現在想去買一個Macbookpro, 我在B站看完關于Macbookpro,的評測視頻,在百度看完Macbookpro的參數后,我在去天貓和京東去搜索進行比價的時候這個時候我就屬于意向UV,在舉個我們比價常見的例子,當我們在百度搜索寶馬的時候,排在前面的經常是各種五花八門的關于車的廣告,在百度看來,我們便是想去買車的意向UV,是有機會促成交易的。

          所以我們看用戶對我們的產品或者活動是否感興趣,便可以看看PV和VU的數據如何。

          3.42 頁面的轉化率


          頁面的轉化率是任何一個企業都比較關心的數據為,我們的任何運營活動和產品的推廣都是為了轉化用戶的時間或者金錢,我們費盡心思的用戶點擊進來,也都是為了轉化用戶的購買。

          用戶的注冊、下單、登錄和復購都可以用轉化率來進行量化,我們根據產品不同的情況來制定轉化率的指標。通常我們計算轉化率:產生購買行為的戶人數/總的用戶訪客* 100%。例如我們這個頁面訪問人數是1000,接下來有100人進行了購買的行動,那么我們頁面轉化率為:100/1000*100%=10%的轉化率。


          (1)意向用戶轉化率


          意向用戶轉化率,即意向Intention Click Value Rate,簡稱意向UV CVR,是通過直觀科學的角度去評判需求是否達到了預期的效果,意向用戶轉化率一般用來衡量用戶訪購行為,是可以通過該指數去發現問題中隱藏的核心問題的依據,非意向UV的轉化流失有很多不確定因素,而意向UV的流失往往跟產品體驗有更大關聯性,通常計算的方法為:產生購買行為的客戶人數/所有到達店鋪的意向訪人數* 100%。

          例如像民宿和酒店類的APP的核心轉化率是客房的預定量,像B站和西瓜的核心轉換率則是用戶評論和點贊。


          3.43  頁面的點擊率與意向率


          通常我們在曝光UV和點擊UV直接會有一個點擊率的關系,Click-thougphRate,簡寫為CTR,即點擊數占展示次數的百分比,通常的計算形式為,點擊率=點擊次數/頁面訪問次數,

          在曝光UV與意向UV之前也有一個比例關系,叫意向率,即意向UV占曝光UV的比例關系,通常用以衡量運營活動或者功能的導流能力,主要用來看用戶的質量,通常的計算方式是意向率=意向UV/占曝光UV。

          3.43 跳出率


          跳出率是在設計用的比較少的一個數據,一般是運營人員會關心的數據指標。指的是用戶通過搜索點擊進入該商品的詳情頁,只是簡單的瀏覽一遍就關掉了頁面,在該頁面沒有任何的活動行為我們稱之為一次跳出行為。

          跳出率的計算公式為:頁面的跳出率=一個頁面離開的次數/總的訪問次數*100%


          3.50 業務數據指標


          我們對業務的數據指標可以將他們分為兩類:一是免費供用戶使用的產品,例如微信、B站等產品,我們更多的關注用戶的使用時長和停留時長。二是需要用戶有購買行為產品,例如淘寶、拼多多和京東之類的,這里的產品我們更多關注的是產品的GMV和ARPU等指數。



          3.51 GMV


          Gross merchandise Volume,簡稱為GMV,指標通常稱為網站成交金額,屬于電商平臺企業成交類指標,主要指拍下訂單的總金額,包含付款和未付款兩部分。

          GMV反映的是電商平臺直觀的成績,但在電商行業,GMV包括拍下未支付的訂單金額,GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額,

          3.52 ARPU


          ARPU是 “The average revenue per user” 的縮寫,譯為每用戶平均收入或平均每用戶收入。也可以理解為單個用戶的價值。

          通常的ARPU用來反映這個產品在這段時間內從單個用戶獲得的利潤和收益,通常用來計算用戶生命周期價值的作用:它是 App 成功的指標,是用戶忠誠度的反應,是預測用戶增長的工具。簡單來說,用戶生命周期價值是驅動移動市場預算的動力。它會告訴你每個用戶值多少錢;你應該花多少成本去獲取一個用戶。

          ARPU的計算公式為:ARPU=在指定時期總收入/指定時期的付費用戶的總數*100%。

          3.53 付費率


          付費率是用來衡量用戶轉化行為的指標,通常所有用戶和付費用戶之間的一個轉化比率。我們前面說到的ARPU值是付費用戶的人數來計算的,我們通常會把付費率和ARPU值放在一起分析。一般該產品的付費率越高,這說明用戶對該產品的認可度越高。

          我們的產品每個階段的增長指標在不同階段會有不同的定義。每個時期所需要注意的事項也是不一樣的,我們對基礎的數據有了認識和了解之后,我們更重要的事情就是怎么去實踐在我們自己的產品中。


          4.10 提升列表CTR的設計策略


          我們產品中很多時候,我們的設計做的是否合理,我們的商品類別該怎么去排序,都和CTR的數據去掛鉤,產品中的很多核心的數據也需要CTR等基礎數據去做支撐,那么我們一起來復盤下提升列表的CTR策略點:1.增加影響用戶決策的信息,2.梳理列表的信息層級,3.新增適當的交互,4.標題優化(非設計角度)

          4.11 增加影響用戶決策的信息


          平時我們在逛街的時候一定會發現這樣的場景,當一條街上開了很多店的時候,每個店鋪一定會派出自己店鋪長相比較甜美的店員或者比較擅長口播的店員在自己店前面進行“吆喝”,比較小的店鋪就算人手不足也會用音箱去反復播放店內的促銷信息,這些策略都是為了在眾多的店鋪中去吸引過往行人的注意力。

          那么我們做設計也是一樣的原理,我們在在做列表時候,想要提升用戶擊我們的列表進入詳情頁的意愿,首先我們需要了解我們的用戶對什么樣的信息比較感興趣,我們將它整理并放出來,從而達到吸引用戶來點擊。


          4.12 梳理列表的信息層級


          我們平時去逛超市的時候,我們發現每個類目的貨架前都會擺放特價或者促銷力度比較的商品的合集,理貨員會將他們放在一起,這樣,對于價格敏感的會直接過去挑選。

          我們在梳理列表的信息也是一樣的,我們需要將用戶比較關注的信息或者產品的賣點信息層級抬高,減少用戶在挑選時候的跳出率。


          4.13 新增適當的交互


          我們想提升列表的點擊率也可以從另外一個角度是入口,就是想辦法讓用戶在最短時間內可以看到更多的信息列表,讓質變產生量變,這一點我們可以從改進交互的操作入手,讓讓用戶看的比較多的列表交互。


          (1)十字交互


          因為這種形式的設計他占用的位置比較少,且只需用用戶通過手指左右去滑動,便可以查看更多的信息列表或者產品列表。

          (2)隨機的列表


          在交互層面另外一個可以讓用戶看的更多的設計形式便是點擊就換一批,這樣可以讓用戶感受到我每次點擊過后的詳情列表和產品列表都是不一樣的,這樣每一次點擊都會有新的“多巴胺”去刺激用戶再次去點擊“換一批”按鈕,從而達到讓用戶看到更多的列表,以質變產生量變。

          4.14 標題優化(非設計角度)


          (1)美化標題


          我們經常上網經常瀏覽新聞的朋友一定知道有個詞叫做“標題黨”,簡單的來說就是標題經常以夸張、“故弄玄虛”的方式出現,UC是眾多平臺中運用標題“最好的楷模”,所以網民也會親切的稱之“UC震驚部”,所以一個列表流的標題對點擊量的影響也是比較大的。


          (2)字符限制


          另外一個角度就是當標題顯示不全的時候,用戶對信息傳遞無法感知的時候, 我們取再好的標題也是沒用的,也許關鍵信息會被省略掉,所以我們在設計標題的時候,也可以限制標題可輸入的字數,避免文字的縮略顯示,讓用戶可以完全看清標題的意思,提升用戶的點擊欲望。


          4.20 上新功能如何提升CTR


          我們產品在上新一個新功能的時候,我i們如何布局能去讓用戶從熟悉到使用我們的新功能都是需要一個過程的,我們需要慢慢的去引導用戶,我們可以從一下策略去去入手:1.替換用戶習慣的功能,2.把控出現時間,3.用動態吸引注意力,4.合理劃分功能層級.、

          4.21 替換用戶習慣點擊的功能(按鈕)


          我們每個都會有自己的習慣性的動作,例如我們習慣左手寫字,右手拿筷子吃飯,我們每天回家習慣性的走同一條路,這些都是我們下意識的動作,是不需要經過思考的意識,那我們在軟件的使用中,也會有這樣的習慣,例如,通常底Tap欄的圖標第一個通常是首頁或者軟件的主要功能,而最后一個通常會放個人中心,這也是我們在軟件使用的中的共識,所以我們可以利用人下意識的習慣將常用的功能與新功能去替換,用戶便會在下意識的慣性中去點錯,例如網易云音樂為了推廣“云村”功能,便會將以前在最后一個的“我的”給替換成“云村,會導致很多用戶的下意識的動作點錯而提升新上的功能”云村“的點擊率。

          4.22 把控出現時間


          我們在下班回家的路上,當我路過一些小吃攤的時候會覺得街邊的小吃特別想吃,也特別有購買的欲望,這是為什么呢?因為我們在勞累的工作了,下班的時間也正是需要吃飯的時候,所以這個時候我們會看到街邊攤的小吃特別想吃,也特別想買,因為他擺攤的時間點和位置都恰好滿足了我們的需求,所以我們轉換到界面里也是一樣的,我們想要用戶去分享一篇文章的時候,一定要等看用戶在讀的時候,然后在出現分享功能,這個時候如果用戶讀到比較精彩的內容,便會和朋友分享這篇文章,例如用戶在進入商品也可以瀏覽的時候,我們這個時候可以出現滿減的紅包,這都是在適當的時候給與用戶想要的,把控好了出現的時間。


          4.23 用動態吸引注意力


          在一些靜態的元素中,突然有一個元素動起來,那么,那個動起來肯定是更吸引人的眼球的,所以我們在電商的頁面頁面中,會經常看到一些會動的icon和一些會動的膠囊導航,我能在付款頁面也可以看到一些立即付款的按鈕會忽大忽小的動起來,這都是為了吸引我們的注意力,引起我們去關注它的存在。


          4.24 合理劃分功能層級


          我們做設計排版的時候一定都聽說過這樣的一句話,就是你什么都想突出,結果你卻什么都沒有突出,這句話的意思是我們在做設計的時候一定要注意運用對比,將次要元素與主要功能的要做好主次的對比,這樣的層次對比才有利于用戶的閱讀,可以分清主次。

          我們在ui設計中也是一樣的,要想用戶快速的找到想要的功能,高頻使用的功能和不常用的功能要做好強弱的設計區分,這樣才能讓用戶一眼能看到自己想找的功能,例如美團和支付寶,都是將用戶高頻的操作放大并放置于頂部比較顯眼的位置,方便用戶去操作。


          4.25 合理使用彈窗功能


          我們都知道,彈窗在軟件中屬于級別最高的通知,就相當于學校里面的校園廣告,只要打開軟件的人,基本都可以看到,所以我們想推廣一個新功能的時候,使用彈窗是流量比較大的,但是也是比較打擾用戶的,我們需要看情況而定。

          4.30 提升人均使用時長的策略


          軟件的人均使用時長代表用戶對我們人均軟件關注度和我們給予用戶的價值,當人均使用時長在增長的時候,說明我們的產品正在良性的增長,在提升人均使用時長我們可以從以下幾個策略入手:1.讓用戶忘記時間,2.弱化用戶的負面情緒,3.多變的板式消除疲勞,4.激發用戶的好奇心



          4.31 讓用戶忘記時間


          我們放假在家打游戲的時候,總有這樣的感覺,就是打著打著不知不知的天就黑了,或者打著打著天就亮了,感覺時間過的非???,但是我們需要注意一個細節就是一般打游戲的時候,游戲是會將頂部的時間狀態給隱去的,是為了給用戶更好的沉浸式的體驗,正因為我們看不到時間,所以便會忘記這件事情,一局一局的打著游戲。例如早期的抖音,在進去界面后變會隱藏時間條,讓用戶在刷抖音的過程中忽略時間,所以 ,我們想要提升人均使用時長,在一些娛樂性的產品或者模式下,可以嘗試著隱藏時間條,給予用戶更沉浸式的體驗,這樣用戶便會忽略時間這件事情。

          4.32 弱化用戶的負面情緒


          我們在飯店高峰期去餐廳吃飯的時候,一般會遇到餐廳客滿需要排隊拿號的情況,海底撈的做法是給排隊的客戶免費的小零食,外界對海底撈的服務評價可以用16個字來概括:有求必應,無微不至,噓寒問暖,小恩小惠,中國有古話是這樣說的“伸手不打笑臉人”,也許我們在就餐中會有各種不滿,但是海底撈都可以用他的服務去抵消客戶的負面情緒。所以,我們一般在餐廳催菜是時候,不管菜做沒有,服務員都會對我們說菜正在做,都是抵消我們等待中的負面情緒,讓客戶不會在等待的過程中離開或者退菜。

          我們在做界面中也是一樣的道理,我們的APP在實際運行過程中肯定也會遇到各式各樣異常問題,我們做設計的時候要為用戶提前給考慮進去,為用戶提供貼心、無微不至的服務。例如我們用戶可能在使用過程中可能手機信號不好,有的頁面加載不出來,我們需要設計有趣的加載動畫和頁面加載不出來的時候的占位符,告訴用戶我們的APP還是在正常的運行中,不是宕機了。


          4.33 多變的板式消除疲勞


          我們都開車或者坐車經過高速公路,我們會發現高速公路在一條直道后馬上會迎來一個彎道,我們小學的時候都學過,兩點之間直線最短,那么高速公路為了節省司機開車的時候,能否直接全部設計成直線的呢?答案是不可以,除了有些地方路線的規劃外,其次安全因素也很重要,經科學家研究表明在筆直的公路長期行駛很容易導致駕駛員發生事故,這是因為在筆直的高速上行駛,駕駛員的神經長時間處于放松狀態,容易麻痹大意,如果適當的時候來個轉彎會提醒駕駛員注意力集中,減速行駛,從而減少事故發生率。其次從心理學角度來說,駕駛員一旦在筆直的高速上行駛,容易產生飆車行為,誰都會想猛踩油門來追逐刺激,如果適當時候來個彎路,能夠抑制飆車行為的發生,從而減少故事發生率。

          所以我們在設計板式布局的時候,讓用戶盯著單一的布局形式,用戶很容易感覺到疲勞,從而會在頁面跳出。我們為了避免這樣的情況發生,讓用戶在瀏覽過程中能感受到板式的變化,而不是滑到底都是一樣,單一且無趣,很容易疲勞,我們設計者需要在單一的板式尋求不一樣的解決方案。


          4.34 激發用戶的好奇心


          我們都比較喜歡看懸疑劇的一個重要的因素是因為情節一環扣一環,線索和劇情結合的比較緊密,劇情比較扣人心弦,能激發我們對真相的探索欲,這才是我們喜歡追懸疑劇的原因之一。

          所有,我們做設計時候也需要給予線索讓用戶去探索,讓用戶感受到內容源的充沛,用戶才會興趣去向下探索,從而提升用戶的使用時長,所以,大部分的APP在最后一個板式都會做成瀑布流的形式,因為他在滑動的時候會不斷給予用戶新的提示,告訴用戶你不斷往下滑,都會有新的內容。

          4.40 提升留存率的策略


          留存率是用于反映產品的的運營情況的統計指標,我們產品的留存越高,說明我們產品很活躍,真正穩步的向前邁進,那我們在優化留存的策略可以從以下幾個入手:1.優化初次上手體驗,2. 減輕用戶的使用負擔,用內容留住用戶,3.完善獎勵機制,4.增加沉沒成本

          4.41 優化初次上手體驗


          我們現在年輕人由于生活的節奏越來越快,在使用APP的時間往往都是碎片化的,用戶的持續注意力會越來越短,一個產品在初次上手的難度越高,能勸退的用戶就越多,用戶在上手一款產品的時候,首先會關注界面是否易于上手,能不能快速找到自己想要的功能,例如在登錄的時候設計驗證碼登錄或者第三方的快捷登錄,在新用戶初次進去的時候,對新功能有使用說明,用戶在初次體驗是很重要,有了第一次的良好體驗印象,用戶才會有第二次第三次的回訪率,這也是提升留存的第一步。



          4.42 減輕用戶的使用負擔,用內容留住用戶


          減輕用戶的使用負擔是指在核心功能盡量能讓用戶能用最短的時間去完成,讓用戶感受到產品對用戶是有價值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在簡單,它的核心聊天功能做的不好,用戶發一條要等很久, 我相信也不會有人去選擇用它去聊天,早期的米聊,其他的功能和想法都是比較超前的,微信也是根據米聊的模式改進,但是早期米聊在即時通信領域不是很擅長,在發送消息的即時性上欠缺,導致失了先手,在手機聊天領域輸了給微信。

          在產品做好了核心功能,能夠吸引一批忠實的種子用戶,這樣我們在一些附加功能,才是錦上添花,例如現在無論什么產品都喜歡做社區功能,就是希望用內容去留住用戶的注意力,附加功能一般都是利用人性的七宗罪去設計布局的(傲慢、嫉妒、憤怒、懶惰、貪婪、淫欲和暴食。)例如微信的搖一搖是利用人想認識新的異性,擴大好友圈,汽車APP的社區功能會經常發一些車站的車模,來吸引精準用戶的注意力,這些都可以提升用戶再次來使用我們的產品。


          4.43 完善獎勵機制


          我們在工作中,一定遇到這樣的情況,就是公司會設置獎勵機制,當員工的績效達到一定的程度的時候,公司會給予員工一定的獎勵,反正則會觸發懲罰機制,這會使得員工為了完成目標而努力工作,從而達到目標得到的獎勵會觸發員工的“爽點”。

          這是因為這樣,所以越來越多的產品開始做自己的會員體系,在加入積分商城,最后在來個簽到獎勵,簡單來講,就是通過給予用戶一些“爽”的東西,來讓用戶幫我們的產品達成一些我們需要的商業目標,其中最主要的目的就是用戶的留存率.

          4.44  增加沉沒成本


          我們在去理發店去理發或者在去網吧上網的時候,他們都會希望我們去辦理一張會員卡,在往里面存在錢,有的是存多少送多少,當我們一但存錢辦理會員后,我們會惦記著我們有類似的消費的時候,都會想起我在那家店里會員還有余額,會員里的余額就是們遷移的成本。

          所以共享單車會推出月卡服務,視頻會員會有連續包月或者年卡套餐,甚至我們點外賣開通會員也能享受大額的折扣,讓用戶感覺占便宜的感覺,這些都是為了鎖定用戶,增加用戶的遷移成本,來達到讓用戶再次來我們產品來消費,從而提升用戶的留存率。

          4.50 提升產品活躍度發力點


          產品的活躍度也可以稱為產品的粘性,產品的留存率是計算單次打開產品的次數。而多次打開我們的產品也可以稱為產品的活躍度,或者用戶對我們產品的粘性,我們去優化產品的活躍的可以從以下幾個策略入手:1.讓產品看起來生機勃勃,2.主動與用戶溝通,3.讓用戶有自己的社交圈,

          4.51 讓產品看起來生機勃勃


          我們都會有湊熱鬧的習慣,看到街邊有人排長隊我們會不自覺的看過去,所以我們在新聞看到了網紅店會請人來排隊,都是為了營造該店看起來很有生機,人很多,很熱鬧。

          我們在做產品設計的時候也是一樣的,需要在設計層面讓用戶看我們的產品也是很有熱鬧,很有生機,例如我們產品的運營區的圖片會經常更換,讓人感覺有人在運營,每天都是不一樣的,當我們的用戶關注的人比較少或者沒關注的時候, 我們需要給用戶去推薦質量比較高KOL去讓用戶去關注,有什么活動我也可以主動推送給用戶,這都是可以讓我們產品看起來有活力,從而讓用戶可以多次打開,提升活躍度。

          4.52 主動與用戶溝通


          我們小時候通常會被家長教導,遇到熟人和長輩要主動打招呼,這樣會讓我們看起來比較有禮貌,我們生活中也樂于和有禮貌的人去交往,因為對方會看起來比較有親和力,比較好溝通。

          我們做設計的時候也是一樣,我們的產品也需要主動與產品去溝通,讓用戶去了解我們,例如,我們評論去外露,是在告訴用戶我們這個商品已經得到了大多數的肯定,也可以讓用戶感受到我們這個產品其實用的人還是不少的,比較有生命力。

          4.53 讓用戶有自己的社交圈


          不知道從什么時候起,無論是什么類目都有了自己的社區,淘寶有自己微淘,咸魚有自己的魚塘,求職找工作的APP也開放了求職討論專區,連墨跡天氣都開放了社區功能,讓大家可以拍自己的當地的風景來討論。

          為什么大量的產品開始做社區功能呢?因為他們希望自己的用戶能在自己的產品有自己的社交圈,只有用戶有自己固定的圈子,才會有用戶粘性,把路人用戶轉化為死忠粉,大家一起來討論,從而達到提升產品的活躍度。

          4.60 提升產品核心轉化率發力點


          核心轉換率一般我們的用戶需要走的流程比較多,我們需要按照實際情況去刪減合并流程,來保障用戶無障礙的可以付款下單,我總結一下幾個優化策略:1.優化核心流程,2.豐富決策信息,降低轉化顧慮


          4.61 優化核心流程


          我們以前在放學的路上一定熟知自己家到學校的各種小道,在巷子的玩玩轉轉,比走大路要節省很多時間,節省了很多時間。


          (1)合并優化流程


          我們在做電商APP的時候,想要讓用戶快速下單購買也是需要提升用戶的下單效率,例如我們以前輸入完密碼還需要點確認才能付款,現在我們在輸入完第6位數密碼的時候就直接付款了,現在手機的升級了指紋和面容識別后都不需要輸入,就可以直接付款了,點外賣的時候,會有一鍵搭配購買,這都把以前復雜的步驟給整合優化,提升用戶的下單效率。


          (2)復雜流程分開顯示,提升放棄成本


          已經簡化到最簡單的流程仍然步驟還是很多的時候,我們可以將流程分開展示給用戶,例如我們的流程一共有12項,已經是優化的最精簡了,這個時候,我們每個頁面顯示4個給用戶去填寫,如果用戶在第二個或者第三個想放棄的時候我們這個時候提示他,馬上就要完成了,用戶想著我之前已經填寫一頁了,反正也沒多少了,我就在堅持寫一頁把,例如我們常見的電商產品,現在都是支持先選購商品加入購物車,在需要購買的時候在提升用戶登錄并付款,避免用戶還沒選商品就被登錄界面給阻攔了。這都是可以提升核心轉化率的策略。

          4.62 豐富決策信息,降低轉化顧慮


          我們在超市購物時候,一般會先看看產品信息和生產品日期,然后在看看品牌,最后看看產品的價格,覺得合適就拿走付錢了,就算我們有挑選的空間,也會在這這家超市買,因為往往兩家超市隔的都是比較遠的,跑來跑去比較費力,但是我們在網上購物或者選東西的,換平臺成本比較低,也不怎么費力,所以我們需要將我們的能有的優勢都展示出來,降低用戶的下單顧慮。

          例如自如租房的優勢就是有管家服務,服務比較全,這是它的優勢,也是我們租房的時候比較擔心的,有時候房間洗衣機或者熱水器壞了找人也找不到,另外就是我們商品的銷量好也需要展示出來,那么多人都買了都沒問題,我也肯定可以放心的下單購買,我們產品或者平臺有什么優勢都可以展示全,去盡力打消用戶最后的心理防線,從而提升下單轉化率。

          5.10 確定增長指標


          當我們想做增長的時候,會遇到各種各樣的指標,經常我們會覺得提升哪個指標都會比較重要,然后我們在把各個指標一把抓的時候卻發現與目標卻是南轅北轍的背道而馳,最終是研究了很多數據指標,卻仍然沒做好增長設計。

          其中最關鍵的因素是我們每找到唯一的關鍵性指標,即OMTM,,全稱是 One Metric That Matters,最早提出這一概念的是《精益數據分析》這本書中提出的,后來肖恩·艾利斯在《增長黑客》一書將其稱為“北極星指標(North Star Metric)”,現在“北極星指標”已經稱為行業的通用詞匯。

          北極星指標即在紛繁的產品世界中照耀著我們去走向終點的指標,它是產品走向成功的關鍵且唯一的指標,我們整個組織的增長目標都應該統一指向北極星指標。那么北極星指標有什么作用?

          (1)明確目標:讓我們避免南轅北轍,,幫助我們確定現階段的產品最需要解決的問題,幫助我們找到清晰的目標,來促進用戶的增長。

          (2)集中資源:有助于減少內部的溝通成本,整合企業的人力、技術、資金等資源,明確方向,力往一處使,利出一孔。


          5.11 怎么確定北極星指標


          我們在前面說到北極星指標的重要性,我們前面也講到關于很多數據指標,我們怎么可以確定符合企業定位的北極星指標呢?

          北極星指標確立和我們自身的產品的屬性、行業是密不可分的,不同的產品和行業也對應著不同的用戶和盈利模式,用戶價值的不同和商業模式不同,所對應的關鍵指標也會不同,因此,我們要確定北極星指標首先要了解產品的受眾和我們的產品可以給受眾提供什么樣的價值來盈利、

          在過去互聯網高速的發展的過程中,也衍生出了不同品類的產品。但是總體來說,我們大致可以把互聯網產品給歸類為內容產品、社交產品、電商產品、工具產品、游戲等幾大類目。我們可以看看不同的產品所對應的北極星指標。


          5.20 怎么拆解增長指標


          如果我們確定了產品的北極星指標,那么接下來我們需要做的就是任務的分配工作以及各部門的協作與協調,讓每位成員能夠能明確各自的職責,這樣我們設立的北極星指標才可能完成,這里我推薦一種在各大企業都開始推行的一種工作方式OKR((Objectives and Key Results)工作法。全稱為目標和關鍵成果,是一套明確和跟蹤目標及其完成情況的管理工具和方法。

          OKR 這套系統最初由英特爾公司制定,在谷歌成立不久,被風投家約翰·都爾(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,現如今有很多公司在使用,國外Facebook,Twitter,Linkedin,國內我知道知乎,字節跳動,明道等在使用。

          通過這么多公司的使用充分說明了OKR方式的可行性,OKR在執行過程主

          要以季度為周期來進行管理。

          整個OKR制定是從上到下,逐級進行拆分的類似金字塔式結構,最終拆分到團隊或者個人OKR。


          OKR中的“O”代表我們這次工作的目標,例如:年度目標、季度目標、階段目標,“KR”是關鍵成果,就是這些目標可以通過哪些關鍵成功可以完成,然后還有一個Action(行動方案),這些關鍵成功需要通過哪些方案去達成。



          我們以一款內容社區類的產品為例子,我們這個產品的季度的北極星指標為提升用戶的粘性,那么可能分配到我們設計負責人手上的目標為提升用戶的留存率和簡化產品的操作留程,那我們設計師需要做的可能是新增一個簽到功能,讓用戶每天都記得簽到來領獎勵,或者簡化直達看帖區的交互步驟,讓內容能留住用戶

          所以我們北極星指標結合OKR工作法,如何在合適的階段做合適的事,如下圖所示


          5.30 GSM數據驅動


          GSM模型是Google的用戶體驗團隊提出的一種指標體系,與OKR工作法不同,OKR主要適用于整個企業的任務的排兵布陣,而GSN體系主要是用來量化用戶體驗的,GSM分別為目標(Goal)→信號(Signal)→指標(Metric),所以也簡稱GSM模型。

          但是由于我們國內的互聯網情況和國外的環境也是不一樣的,經過本土化的改良,我們國內的GSM被精細化為6步。

          我們來結合實際的案例來看下吧!

          例如我們我們公司的一款民宿的產品,我們的產品團隊接到的需求是提升我們產品的活躍度。


          (1)數據目標


          那我們的數據目標便是提升產品的活躍度,我們接下來的工作便是對產品的現狀進行分析,以方便我們開展接下來的設計工作。


          (2)用戶分析


          用戶分析主要是對我們現在的用戶進行一個比較全面的分析,了解我們用戶群體的使用習慣,發現用戶主要的查看內容和用戶的痛點,以方便我們做針對性的設計策略

          (3)發現問題

          我們對用戶問題的采集主要是通過軟件自帶的用戶意見反饋和APP store 的用戶評價,從這里去獲取的用戶對產品的評價都會是比較客觀的。

          我們通過評價可以發現,用戶對產品存在的一些隱形的坑的體驗不好,例如附近有裝修會影響人睡覺的之類的,那我們怎么去幫助用戶去避免這些問題呢?我們可以讓一些經常住民宿的人去寫一些住店的體驗日記,方便我們用戶去查看。


          (4)用戶表現


          有了住店日記,我們的用戶表現是什么樣的呢?我們的用戶在決定入駐一些民宿的時候,可以去多方位的去查看其他人發入住日記??梢宰龆喾矫娴膶Ρ?,這樣用戶不僅可以減少踩到坑,在對比的過程中,在使用我們軟件的時間也會更長了。


          (5)設計策略


          那我們怎么可以讓一些入住過用戶去寫一些入住日記呢?我們可以針對愿意寫的用戶寫的好的用戶的日記進行曝光,他可以獲得自己的粉絲群里,然后,你發一篇日記,我們會獎勵給你相應的金幣,這些金幣在積累后可以獲得優惠券,在下次入住后可以減免相應的入住費用,然后我們的產品可以發現寫的比較好的日記推送給沒有住過的新用戶,或者有意向、搜索過的用戶,方便用戶橫向對比,從而提升用戶的活躍度

          (6)衡量指標

          因為活躍度它是比較抽象的一個概念。我們怎么去驗證我們的設計策略呢?我們可以通過一些用戶的金幣的積累去驗證我們數據,這樣就會比較直觀。只有當有有用戶去發表住店日記,他才能獲得金幣的獎勵。


          增長設計需要精準的界定用戶的痛點,這是用戶增長的重要基礎,然后在聚焦核心的業務,不斷的強化痛點來驅動用戶的增長。

          隨著行業的發展,現在行業對Ui設計的要求也是水漲船高,我們每一次改動需要給企業去提供一個能說得通的理由,我們也需要不斷的去學習行業里的新的知識,來豐富我們的思維,這樣我們才能在寒冬中走自己的坦途,一起加油!



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

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


          文章來源:站酷   作者:Endings

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

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


          S02E03: 數字構建世界,什么構建「數字的世界」—— 阿里云設計中心年鑒

          seo達人


          本篇文章是承接《產品解決問題,什么解決「產品的問題」》、《設計定義專業,什么定義「設計的專業」—— 阿里云設計中心年鑒》的內容。年鑒的第三篇,走進“數字”世界;比起這些宏大的視角,我們更希望和你一起推敲每一個細節。

          圖片

          圖片

          如何構建一個數字世界?

          圖片

          圖片

          圖片

          構建數字世界分為三步:

          ① 數據原料的采集與轉譯

          ② 數字世界的生產與加工

          ③ 設計過程的成本管控

           

          數字世界的血液從哪里來?

          數據是數字世界的血液,那么數據從哪里來?將空間數據采集后,我們進行標準化處理、融合,用于空間展示與計算;通過對環境、建筑、城市道路數據編輯能力,為生成3D城市(世界)提供完備數據。

          圖片                    
          圖片                    
          空間構建平臺 _

           

          數字世界的構建就是建個模么?

          孿生不僅僅停留在表面,而是由底層數據驅動、可以對物理實體流程模擬、結構模擬,甚至可以達到對物理的實時優化與反控。

                             
          圖片                    
          圖片                    

          圖片

          怎么理解數字世界的生產加工?

          這是一種很“工程化”的設計流程,無法通過設計稿“所見即所得”,需要在了解數據的特性基礎上,同工程師一起,通過算法決定建筑的形態,通過視覺設計規則決定建筑的樣式,通過場景編輯器決定物理世界的表現形式和規則。

                             
                             
          DATAV _

           

          如何降低設計成本提高效率?

          針對大屏搭建成本高、周期長、我們的方法是從生產的各個環節進行優化,如提供涵蓋行業特色場景的大屏模板,建立設計資產庫、數據映射視覺設計;同時,DataV的智能設計 AiVisLab提供的智能化搭建與編輯方式(識圖搭建,美化工具箱,自動可視化等)以及Visbar的資產沉淀讓搭建設計成本更低,提高搭建效率。

          圖片                    
          圖片                    
          圖片                    
          自動化,智能化,產品化
          設計預設,模版等 _

           

          圖片

          圖片

          如何把圖形引擎能力抽象出來,服務更多的場景?

          圖片

          圖片

          圖片

           

          三維場景和動態數據效果,是如何做到的?

          我們通過提供便捷的數據服務一鍵生成三維數據基底、通過設計資產預設,后期環境設置等完成從物理空間到數字空間的轉化;同時在數據業務展示層,我們有一套完整的圖元系統貫徹組件支持數據展示;而在信息交互層上為了滿足不同維度的交互編輯,我們提供了藍圖節點編輯,和鏡頭沉浸式設定等功能。

          圖片                    
          圖片                    
          圖片                     

          圖片

                             
                             
                              
           

          不會代碼,也能用 DataV么?

          當然,為滿足用戶日益增長的編輯訴求,我們從最初的1個畫布編輯器已擴展至今天橫跨多個維度的6大編輯器,形成一套簡單易操作的可視化編輯器系統。用戶可通過編輯器里豐富的模版及資產庫、數據配置、自動數據映射等0代碼編輯的功能快速搭建專業水準的數據可視化應用,感受數據的美好。

          圖片圖片

          圖片

          小白如何快速上手搭建三維空間可視化?

          為了讓用戶能夠“傻瓜式”搭建復雜的三維空間可視化,我們打造了一整套包括 CityPro、CityV、GI組件等的圖形引擎產品。并提供了一套既能滿足沉浸式數字孿生體驗,又能滿足時空大數據分析的解決方案,可覆蓋可視化領域的各個場景。

                              
          圖片                  

           

           

          圖片

          圖片

          如何把模型資產沉淀下來,產生更多的復用價值?

          圖片

          圖片                    
          圖片                    

          圖片

           

          為什么要有 Visbar?

          在數字孿生的行業可視化項目中 ,每個具體行業的需求往往很相似,功能場景也有較高通用性。于是我們以行業維度沉淀資產,并以解決方案打包輸出,最終以產品化對外服務。Visbar 不但能夠提升可視化項目交付效率,還可以降低項目投入成本。

          圖片

          行業案例 _

           

          那么多資產沉淀得過來嗎?

          Visbar擁有自己的物料生態與運營模式。

          圖片

          圖片

          圖片

          圖片

          原文地址:阿里設計中心(公眾號)
          作者:阿里設計中心

          轉載請注明:學UI網》S02E03: 數字構建世界,什么構建「數字的世界」—— 阿里云設計中心年鑒

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

                                                                      微信圖片_20210513163802.png

           

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

           

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


          樹形控件在生產力工具中的設計

          ui設計分享達人

          樹形控件是種常見的設計模式,幾乎與圖形化用戶界面同時誕生,通過結構化的組織方式逐級展示內容,讓整體信息架構一目了然,非常適合以網頁或桌面端為載體的 B 端產品和生產力工具,比如電腦文件管理系統。



          使用場景

          樹形控件通常有以下 4 種表現形式:


          可以把它們進一步總結為 2 個使用場景:


          其中,樹列表、思維導圖在 2 個場景中都有應用,而樹導航和樹選擇多以查看為主。不同的使用場景,在設計上會有不同取舍??梢园阉鼈冞M一步總結為 2 個使用場景:



          交互設計

          結合樹形控件的使用場景,對其的操作也如此分類。顯然,「查看為主」時,對查看類操作的體驗要求更高,而「編輯為主」時則相反。


          新增節點

          以新增節點為例,不同場景下用戶有不同的訴求:


          查看為主

          可以考慮鼠標懸停到節點出現相關操作。


          但此時較難預測的是用戶到底是想增加一個子節點還是同級節點。一個完備的解法就是讓用戶選擇。但實際業務中,此處可能還要選擇節點類型,比如語雀要選擇文檔還是表格。所以「節點類型 x 層級選項」有可能導致選項過多。此時可以有兩種處理方式:


          針對第一種方法,我們需要額外思考一個問題:新建的子節點應該放在第一位還是最后一位?



          我的第一反應是第一位,因為它離操作區域最近,從操作到反饋都很自然,也避免目錄發生大幅度滾動,所以在語雀目錄中是這樣設計的。但是實際也有很多用戶反饋希望是最后一個子節點,類似于1,2,3…… 的順序從老到新排列。我沒有辦法去驗證如果真的是加為最后一個子節點,會不會又有另一波反饋聲音。后來我發現思維導圖新增子節點就是新增在末尾,以及絕大多數產品也是加在末尾,所以下次我大概會選擇放在最后試試。或者索性選擇上述第二種方法來避免這個問題。


          此外,界面上還需要提供一種方式,允許用戶創建最頂層的一級節點。當界面較大時,可以放置在頂部,讓用戶更易發現。



          編輯為主

          相較于上述方法,可以給出更明確直接的界面操作和添加位置示意或快捷鍵。



          語雀在進行目錄改版時,本想統一「閱讀頁面」和「編排目錄頁面」的交互方式——采用「查看為主」的添加方式,卻忽略了兩個頁面的用戶訴求不一樣。此時這里其實還可以借鑒思維導圖的創建方式,使用Enter/Tab 鍵快速添加節點。



          修改節點屬性

          結合實際業務,節點可能有不同屬性,比如名稱、類型、狀態、優先級等?!覆榭礊橹鳌箷r,修改操作使用不多,可以考慮放入「…」中。



          而「編輯為主」時,除了單個節點修改屬性方便,還需要考慮連續修改多個屬性,甚至是批量修改。如下圖,樹列表可以支持連續修改屬性節點。


          如下圖,思維導圖可以通過多選然后在格式面板統一修改屬性。



          調整結構


          樹形控件最有價值的部分就是其所表達的層級關系,常用調整結構的操作總結如下:


          無論采用那種方式,都遵循以下設計原則:



          拖拽調整

          簡單而言,設計上要解決以下問題:

          1.如何讓用戶知道可以拖拽?



          2.如何讓用戶知道可以怎么拖拽到哪里?


          可以在拖拽中采用「插入位置符號」暗示用戶,通常是一條彩色線條。應盡可能增加「插入位置符號」出現的機率,減少用戶的困惑。設計時可以考慮上下左右兩個方向的拖拽運動分別可以觸發什么結果。


          比如按以下方式簡單把拖拽規則分為 3 大類,


          當然在「插入位置符號」盡可能多出現的同時,也要讓其出現的位置符合用戶預期且易理解。

          比如向左移動「非末尾子節點」,如果強行給以一個符合邏輯的響應,「插入位置符號」可能離當前光標很遠,甚至在屏幕外,且放手后可能引起目錄結構較大變化,那么不如選擇此時拖拽無響應。



          這里再介紹「把一個節點調整為另一個的子節點」的兩種拖拽規則,分別適用于不同場景。


          3.如何讓用戶快速拖拽到目標位置?

          當用戶掌握了拖拽規則后,就需要幫助用戶快速實現自己的調整目標。拖拽過程中注意以下幾點:

           ① 被拖拽節點可以半透明顯示,以盡量少遮擋樹形控件,方便用戶定位目標位置。

           ② 被拖拽節點的原始位置可以以較弱的視覺效果展示,提示用戶節點從哪里被拖拽。

           ③ 整棵樹的結構不要發生變化,以免原先確定的目標位置發生位移。

           ④ 結構層級較深時,通過輔助示意幫助用戶確定會將節點拖拽到哪一層級。



          4.如何讓用戶確定拖拽結果滿足自己的期望?

          當以上問題都解決后,這個也許就不成問題。當然也可以增加二次確認的微交互。


          非拖拽調整

          調整結構也可以通過非拖拽的方式完成。拖拽是一種直觀,但不輕松的操作,尤其是當樹很龐大需跨屏拖拽時。此時可以增加按鈕操作,直接指定目標位置,精確且快速。

                   



          當「編輯為主」時,調整結構也需要考慮批量操作。如下圖,支持多選節點同時調整,被調整結構的節點有可能在原處于不同分支的不同等級,批量調整后會成為同一個字節的同級節點。



          刪除節點


          刪除是個比較慎重的操作,所以此處應該詢問用戶是只刪除本節點,還是本節點及其下所有節點。


          如果只刪除本節點,首先本節點需要從樹形控件中消失,以代表刪除成功,然后其子節點可以上移一級,保證用戶不會誤以為內容丟失。




          縮放視圖

          查看時,思維導圖可視化效果更好。針對思維導圖,需要考慮視圖的放大縮小,適應視口/真實大小切換。比如下圖語雀思維導圖的「縮放視圖」功能(不過這個設計把回到中心和適應畫布藏的有點深)。



          折疊層級

          當樹形控件龐大時,需要能夠快速折疊/展開層級,包括全部層級或者某一層級。如果是一棵「私人樹」,記住用戶折疊的展示層級,并且在下次進來時仍舊保持。如果是一棵「公開樹」,可以增加默認展開設置,比如下圖語雀中編排目錄的操作。




          值得注意的是,折疊層級和縮放視圖的操作都應該提供快捷鍵,會比通過界面操作更加高效,也不會打斷查看過程。可以想象一下你正在一個會議中展示一張思維導圖,在界面上操作「縮放視圖」耗費更多時間,也會在奪走走觀眾的注意力。

          附上常見查看操作快捷鍵,僅供參考:


          上述部分快捷鍵會和瀏覽器自帶快捷鍵沖突,使用時需要覆蓋瀏覽器快捷鍵。



          搜索和篩選

          當節點數量很多時,樹形控件應該支持搜索查找節點,搜索關鍵詞可以高亮顯示;或按條件篩選展示節點及其上級節點路徑。


          使用列表時,還有一個常見的操作是「排序」,但是整棵樹「排序」和樹形控件本身的層級順序是相矛盾的。所以「樹列表」基本沒有「排序」功能。

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

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



          文章來源:站酷   作者:Ant_Design

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

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





          如何提升UI效果圖空間感?

          seo達人


          不論是作品集還是項目匯報,都少不了UI效果圖展示。雖然網上有很多樣機模板可以用,但與其與胡亂套用,還不如自己學會怎么展示界面。

          今天教大家一個簡單的方法,只需五個步驟就可以立即提升界面展示的空間感。

          看過之后,說不定你還可以舉一反三,做出更多不同的創新。

           

          1、準備界面

          可以像這樣把兩個界面并列放到一起,這里我用的是一個正方形畫布。

          看起來很無聊就對了,因為這只是第一步。

           

          2、旋轉角度

          如果什么東西都方方正正的,看起來會很沒意思。更何況在三維空間看二維界面,肯定是不可能這么擺放得規矩。

          于是我們把兩個界面都向不同的方向旋轉一點角度,例如下圖右邊是 -5 度,左邊是 8 度。

          同樣是為了體現三維空間感,我們把這兩個界面交疊一下,像是兩張散落在桌面的撲克牌。

           

          3、添加背景

          什么東西都用白色背景多無聊?更何況很多界面本身就是白色背景,再往白色畫布上放就要找不到邊界了。

          最簡單的方法,就是把界面上的主題色直接用到背景上,這樣即把界面體現出來了,又能保證整體色調。

          但是這樣做問題還是很明顯:首先,背景太強容易分散注意力;其次,也許有少量頁面用主題色作為背景,那就和畫布區分不開了。

          所以,比較簡單的方法,就是把背景上的主題色往淺灰色靠一些,讓它即保留在同一個色調,又不至于太搶眼。

          另外可以給畫布和界面都加個圓角,讓它們看起來更有卡片的感覺。

           

          4、繪制投影

          陰影可以說是空間感的點睛之筆,所以很有講究。

          很多人直接給界面設置陰影效果,結果陰影緊貼著邊緣,導致空間感較弱。

          為了讓陰影更加真實,最好是單獨畫一個陰影方塊,疊放在兩張界面之間。

          這個方塊可以直接用上層界面的形狀,縮小一點、加大圓角并填充黑色,至于擺放位置,就想象一下自然投影效果吧。

           

          5、模糊投影

          投影肯定不能是一個黑色的圓角方塊,所以要給它添加效果。

          例如,我設置了 50 的模糊效果,和 20% 的不透明度。這個數值可以根據具體的情況,自己調節。

           

          總結

          第五個步驟完成后,和第一個步驟比起來,是不是感覺好多了?

          你也可以用這個方法嘗試不同的色調和排版:

           

          原文地址:知乎

          轉載請注明:學UI網》如何提升UI效果圖空間感?

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

                                                                      微信圖片_20210513163802.png

           

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

           

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

          最初我覺得這效果也太差了,最后沒想到做的還不錯!

          seo達人


          今天給大家講講每周任務頁頁面頭圖案例,講講這里面的思路,讓大家吸收一波!本文頭圖強調顏色的橫向豐富與縱向豐富,色相的差異化、顏色占比的問題、層次和飽滿度,這樣就能大大提升畫面質感。

          最近在做每周任務頁頁面,頭圖又是給我難夠嗆,我們先看下第一版到第三版的變化:

          第一版

          圖片

           

          第二版

          圖片

           

          第三版

          圖片

          中間過程思考了很多,和大家分享一下。

           

          1. 顏色的橫向豐富與縱向豐富

          什么是橫向顏色?

          其實就是同一飽和度、明度的顏色,色相不同,比如下面這組顏色:

          圖片

          雖然色相挺豐富,但是看多了會比較膩。

          所以有時候我們就需要進行顏色的縱向延伸,也就是除了色相的不同,還有飽和度、明度的不同,比如:

          圖片

           

          2. 色相的差異化

          之前在總結顏色的時候有說過,色相不要用的太正,會比較常規,因為人們看多了比較正的顏色,所以就會感覺沒什么新意。

          舉個例子,同樣是紅色:

          圖片

          第一個紅色就會比較正,如果沒有相當足的功力,很可能做成過年、國慶的感覺,而第個組就會相對容易出效果一點!

          當然,顏色本身沒有好壞,要看怎么用,只是說不太正的色相對新手來說比較友好一些。

          所以大家看下,色相從比較正的橙色變換色相后,瞬間感覺沒那么老氣了:

          圖片

           

          3. 關于顏色占比的問題

          當然,這個案例中,除了色相以外,還有顏色完畢的問題,其實我之前很多作品,重色會占比多一些,比如下面這種:

          圖片

          而這次的每周任務頁面希望能有一點輕松愉悅的感覺,別用太濃烈的顏色讓用戶壓力太大。所以對我來說也算是一次小挑戰。

          所以我將重色占比縮小,只用在最前處的近景和字體暗部(藍色部分):

          圖片

          其他地方都是比較輕的顏色。

           

          4.關于層次和飽滿度

          上面講的都是關于配色的,接下來說下層次和飽滿度。

          因為這次的構圖比較簡單,就是中心構圖,也沒有什么大透視,那如何增加層次呢?

          我使用三、四層云放在前面,這幾本就把算是拉開層次:

          圖片

          但是有個問題,下面是有層次了,但是上面有點感覺空空的,于是又加了一點小元素進行點綴:

          圖片

          這樣整體看起來就比較和諧了,這里面有個要說的點,對于小元素的顏色,一定要有前后關系,也就是用顏色的深淺、色相來體現:

          圖片

          這樣看起來才不會生硬。

           

          總結:

          做到這里,越看越不順眼,總感覺有點油膩,有點土,具體什么原因?怎么修改?因為不想寫的太長,所以我們下期再仔細的聊一聊在保持基礎框架不變的情況下,如何拆分畫面來優化每一處細節,使第二版變成第三版的!

          圖片

           

          原文地址:菜心設計鋪
          作者:菜心設計鋪

          轉載請注明:學UI網》最初我覺得這效果也太差了,最后沒想到做的還不錯!

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

                                                                      微信圖片_20210513163802.png

           

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

           

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

          智慧社區平臺訂單支付及退款結算規則設計

          資深UI設計者

          編輯導語:如今隨著科技的不斷發展,人們日常的生活也開始變得智能化,智慧生態逐漸進入到各種領域,從買菜到小區物業等等,如今很多都變得更加智能方便;本文作者分享了關于智慧社區平臺訂單支付及退款結算規則設計,我們一起來了解一下。


          筆者現就職于一家房產集團旗下科技公司,整體負責公司各產品線;公司主營智慧社區項目,在當地小有規模,智慧社區平臺包括物業管理系統、社區電商平臺、社區IOT系統、居家養老系統、社區政務系統、二手房交易平臺等6大系統。

          各系統后臺獨立,為了方便小區業主,讓用戶在同一個APP上能享受物業服務繳費、線上購物、掃碼充電、會員繳費等等功能,需在用戶端設計不同的支付結算方式。

          本文主要分享社區電商系統、物業管理系統、社區IOT系統的訂單支付及退款結算規則設計。

          一、平臺支付及結算業務需求分析

          1. 物業管理系統支付結算需求

          物業系統為SaaS模式,B/S架構,使用平臺公有云服務器,單獨數據庫分區,使用角色為平臺合作的付費物業企業,支付結算需求包括:

          • 物業費、車位管理費、電梯費等費項需根據后臺賬單生成支付訂單,且用戶支付后直接結算至物業企業帳戶,不做分成;
          • 代收水電費需對接遠程水電表設備,用戶可在線預充費用,并隨時查看余額,用戶充值金額結算至物業企業帳戶,并定期結算給當地水、電主管部門;
          • 業主報修工單支付費用需按照材料費、工時費區分賬單,直接結算至物業企業帳戶,且平臺收取3%的服務費;
          • 物業結算金額需滿足“T+1”到賬,即次日(工作日)到賬;
          • 所有訂單支持后臺手動操作退款。

          2. 社區電商平臺支付結算需求

          社區電商模式以整合社區周邊商家為社區居民提供便捷的O2O服務為主,入駐商家包括社區周邊零售商和服務商。

          零售服務場景主要是方便社區居民在線選購社區周邊商品,提供線上下單,線下送貨上門服務,基于之前的業務拓展,支持平臺配送、快遞物流、到店自提、商家送貨上門4種配送方式,其中平臺配送是整合物業服務人員進行社區周邊的送貨上門服務。

          綜合各種配送方式及業務場景,支付結算需滿足以下需求:

          • 訂單支付金額需”T+7″直接結算至商家帳戶;
          • 支持單筆訂單直接分潤,分潤結算方包括平臺分潤、代理商分潤、物業分潤、商家結算;
          • 部分商品支持7天無理由退貨;
          • 已完成訂單支持單個商品退貨退款;
          • 平臺配送費支付到平臺帳戶,并按月結算給配送人員;
          • 快遞物流、商家送貨上門的訂單配送費直接結算到商家;
          • 到店自提不收取配送費;

          預約服務場景主要滿足社區居民在線預購社區周邊服務,支付結算需滿足以下需求:

          • 訂單支付金額需在服務完成后“T+1”直接結算至商家帳戶;
          • 支持單筆訂單直接分潤,分潤結算方包括平臺分潤、代理商分潤、物業分潤、商家結算;
          • 用戶在服務未開始前申請退款,可全額退款,上門后退款需扣除上門服務費;
          • 服務完成后不支持退款;
          • 服務單到期未預約服務時,自動全額退款給用戶;

          3. 社區IOT系統支付結算需求

          社區IOT系統對接設備包括:社區一卡通、門禁、樓宇對講、停車道閘、電動車充電樁等等;涉及到支付業務的有社區一卡通、電動車充電樁。

          社區一卡通支付及結算需滿足以下需求:

          • 一卡通需同時滿足門禁卡、儲值卡功能;
          • 可應用的支付場景包括:繳物業費、水電費、維修費等,社區內及周邊購物消費刷卡,線上支付扣款;

          電動車充電樁支付及結算需求:

          • 按照充電時間預付費,付費金額結算至平臺;
          • 不滿預訂時間結束充電時,自動計算退款金額,原路退回;
          • 安裝獨立電表,電費由平臺定時結算給物業;

          4. 積分、優惠券、付費會員支付及結算需求

          包括以下需求:

          • 以上各個支付場景,用戶都可使用積分抵現,抵現金額由平臺讓利給商家及用戶,隨訂單支付金額一同由平臺結算給商家,實時核銷;
          • 優惠券分為平臺優惠券及店鋪優惠券,統一由平臺審核發放,可用于支付抵現;
          • 平臺優惠券抵現金額由平臺補貼,隨訂單支付金額一同結算給商家,實時核銷;
          • 店鋪優惠券抵現金額,直接由店鋪讓利優惠給用戶,實時核銷;
          • 用戶可購買付費會員,享受會員特權;

          二、結算規則設計及注意事項

          由以上需求內容可以看出,各系統的結算場景、結算流程,包括結算對象都存在不一致,但C端支付入口在同一應用端,這就需要在后臺針對不同的業務流程設置不同的結算規則。

          筆者對標了國內多個提供聚合支付及分賬服務的平臺,綜合考慮對接成本及費率,最終選擇了某平臺作為對接方。

          結算規則設計及注意事項如下:

          1. 物業繳費

          • 支付方式:線上-支付寶、線上-微信、線下-支付寶、線下-微信、現金、銀行卡刷卡、一卡通;
          • 分賬對象:物業企業(第三方支付平臺扣除支付費率);
          • 分賬方式:直接分賬;
          • 賬單生成:根據費項設置的規則在物業管理系統后臺生成賬單后,同步到業主APP;

          • 到賬周期:T+1;
          • 退款方式:由物業系統后臺手動操作單賬單退款;

          注意事項:為了保證客戶資金安全及平臺免責,由第三方支付機構與企業直接簽約,且提供單獨的對賬后臺,便于企業查賬,線下支付則直接結算至企業銀行卡賬號,系統只做賬單記錄。

          2. 電商購物(包括使用積分、優惠券結算)

          • 支付方式:線上-支付寶、線上-微信;
          • 分賬對象:平臺、代理商、物業、商家共4方分賬;
          • 分賬方式:資管平臺分賬;
          • 到賬周期:訂單完成日起T+7;
          • 賬單結算及退款規則:平臺配送方式包括快遞物流、平臺快送(類似美團騎士)、到店自提、商家送貨上門,每種方式用戶需支付的配送費不等,需分別計算,且需考慮用戶使用積分、優惠券抵現及退款時是否選擇全部商品退款等結算情景,總結分析訂單狀態及配送方式不同,共包含以下6種用例;

          Case1:訂單狀態=待發貨,配送方式=快遞物流/商家送貨上門

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為快遞物流,物流費5元,使用平臺優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為33.25元(33.25=(30+5)*(1-0.05));平臺結算金額為-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),負值,平臺需結算給商家。發生退款后,用戶可收到的退款總額為24元,+積分+優惠券;商家退款總額為33.25元;平臺退款總額為-9.25元,負值,商家需退款給平臺。

          Case2:訂單狀態=待發貨,配送方式=平臺快送

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為小慧快送,物流費5元,使用店鋪優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為19元(19=(30-10)*(1-0.05));平臺收到的結算金額為5元(5=5-1+(20*0.05))元,正數,用戶結算給平臺。發生退款后,用戶可收到的退款總額為24元,+積分+優惠券;商家退款總額為19元;平臺退款總額為5元,正數,平臺退款給用戶。

          Case3:訂單狀態=已完成,配送方式=快遞物流/商家送貨上門,退款商品=全部訂單商品

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為快遞物流,物流費5元,使用平臺優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為33.25元(33.25=(30+5)*(1-0.05));平臺結算金額為-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),負值,平臺需結算給商家。發生退款后,用戶可收到的退款總額為19元(19=24-5),+積分+優惠券;商家退款總額為28.5元(28.5=33.25-5*0.95);平臺退款總額為-9.5元(-9.5=-9.25-5*0.05),負值,商家需退款給平臺。

          Case4:訂單狀態=已完成,配送方式=平臺快送,退款商品=全部訂單商品

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為小慧快送,物流費5元,使用店鋪優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為19元(19=(30-10)*(1-0.05));平臺收到的結算金額為5元(5=5-1+(20*0.05)),正數,用戶結算給平臺。發生退款后,用戶可收到的退款總額為19元(19=24-5),+積分+優惠券;商家退款總額為19元;平臺需退款總額為0元(0=5-5)元,為零,平臺無需退款。

          Case5:訂單狀態=已完成,配送方式=快遞物流/商家送貨上門,退款商品=部分商品,部分商品總額/訂單商品總額=α(保留三位小數)

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為快遞物流,物流費5元,使用平臺優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為33.25元(33.25=(30+5)*(1-0.05));平臺結算金額為-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),負值,平臺需結算給商家。用戶申請退款商品總額為20元,α=20/30=0.667,則用戶可收到的退款總額為12.66元(12.66=20-1*0.667-10*0.667),退回積分667;商家退款總額為19元(19=20*0.95);平臺退款總額為-6.34元(-10*0.667-1*0.667+20*0.05),負值,商家需退款給平臺。

          Case6:條件:訂單狀態=已完成,配送方式=平臺快送,退款商品=部分商品,部分商品總額/訂單商品總額=α(保留三位小數)

          計算規則:

          示例:

          設置店鋪抽成比例5%;用戶甲下單商品總額為30元,配送方式為小慧快送,物流費5元,使用店鋪優惠券抵扣10元,積分抵扣1元,則下單后:用戶需支付24元(24=30+5-10-1);商家收到結算總額為19元(19=(30-10)*(1-0.05));平臺收到的結算金額為5元(5=5-1+(20*0.05)),正數,用戶結算給平臺。用戶申請退款商品總額為20元,α=20/30=0.667,則用戶可收到的退款總額為12.66元(12.66=20-1*0.667-10*0.667),退回積分667;商家退款總額為12.66元(12.66=(20-10*0.667)*0.95);平臺需退款總額為0元(0=-1*0.667+(20-10*0.667)*0.05),為零,平臺無需退款。

          3. 購買服務

          • 支付方式:線上-支付寶、線上-微信;
          • 分賬對象:平臺、代理商、物業、商家共4方分賬;
          • 分賬方式:資管平臺分賬;
          • 到賬周期:服務完成日起T+1;
          • 賬單結算及退款規則:用戶下單成功后,支付金額預存在第三方支付機構的資管平臺,服務商家按照訂單完成服務后,資金由資管平臺T+1結算至商家帳戶。服務訂單完成前可申請退款,完成后不支持退款。

          4. 一卡通支付

          • 支付方式:線下刷卡支付;
          • 分賬對像:物業或商家;
          • 分賬方式:線下定期結算;
          • 注意事項:一卡通需在商務局完成備案,并且是定向使用金額,接受商務局監管。


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

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


          文章來源:人人都是產品經理   作者:正文

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

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



          包容格式:如何應對用戶的多元輸入需求?

          資深UI設計者

          What 是什么

          簡介 :包容格式是一種用于文本輸入的模式,使用這種模式后,可以讓用戶輸入文本內容時不用關心格式或語法,從而輕松達到預期目標。


          例子 :Google 搜索輸入框



          Why 為什么

          用戶操作界面時只是想完成某件事或某個操作,而不是考慮「正確」的格式或復雜的UI。計算機擅長弄清楚如何處理不同類型的輸入。如果計算機無法正確處理多種類型或格式的文本內容,那么用戶在輸入內容時就會有明顯的受阻感。


          所以,讓用戶輸入所需的任何內容,然后讓計算機來處理結構或格式,才是一種比較理想的方法。這種模式可以極大地簡化界面,并使其更容易被用戶理解。

           相關資料:

          https://zhuanlan.zhihu.com/p/343497540



          When 什么時候使用

          用戶可能會輸入不同類型、格式的文本內容,而我們希望用戶可以不用太關心格式問題,同時希望界面保持簡潔。很多時候,用戶輸入的數據可能類型、格式不一(例如存在空格、連字符、縮寫或大寫等等),如果提供不同的輸入類型,那么界面就很可能不夠簡潔。這種模式可以很好地將數據類型有效處理。


          使用條件:

          • 輸入內容存在不同類型或格式;

          • 希望用戶輸入比較容易;

          • 希望界面簡潔;



          How 如何使用

          核心思想:將界面設計問題轉化為編程問題。


          我們需要考慮用戶可能輸入的文本類型:

          • 簡單的例子:只要求輸入一個只有格式不同日期或時間;

          • 復雜的例子:搜索某些關鍵詞,根據關鍵詞獲得不同的結果;


          由于業務場景不同,每個應用程序使用此模式的方式可能不同。只要確保軟件對各種輸入格式的響應與用戶期望的一致即可。因此建議與用戶進行真機測試。



          Example 案例

          案例 1:東方財富股票搜索框

          用戶需求:將特定股票添加到個人關注列表。


          東方財富的股票搜索框,用來幫助用戶快速找到目標股票。該搜索框就使用了「包容格式」這一模式。用戶既可以輸入股票代碼進行查詢,也可以輸入股票的名稱進行查詢。


          案例 2:Gumroad 信用卡輸入框

          用戶需求:輸入信用卡號


          很多產品都有輸入信用卡號的場景,用戶應該只要輸入16位數字,而不需要明確這 16 位數字的格式。輸入的內容中是否帶有空格對結果不應該有任何影響。

          gumroad 的信用卡號輸入框允許用戶隨意輸入他們的信用卡號。信用卡號字段接受空格作為分隔符(不包含空格也可以),然后這個輸入框會立即將輸入的卡號格式化。


          案例 3:macOS 日歷創建日程

          用戶需求:創建日程


          我們會有很多方式來表示日期,例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日歷中創建日程時,用戶可以輸入各種格式的日期,輸入框都會正常識別到該格式,并按照其日期創建日程。


          更多案例

          你可以在下方查看「包容格式」更多的案例:

          https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef


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

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



          文章來源:站酷   作者:Ant_Design

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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