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

          首頁

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

          ui設計分享達人


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





          01.  在工作中遇到的狀況

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


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

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


          02.  好產品具備的特征

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


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

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


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


          03.  設計走查的意義

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


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


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

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

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

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


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


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


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




          01.  設計走查的種類

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


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

          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)為什么要用統一間距

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


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



          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設計分享達人



          前不久看了阿里巴巴的設計周,其中有一個話題引起我注意“適老化”設計,今天就來聊一聊適老化設計的注意點。*文章末尾我會把阿里巴巴的演講ppt分享出來,如果這篇文章能幫助到你,還請點贊、分享。





          1 老齡化是一個全球趨勢

          據《世界人口展望:2019年修訂版》的數據顯示,到2050年,全世界每6人中,就有1人年齡在65歲(16%)以上,而這一數字在2019年僅為11人(9%)。

          再來看看我國情況:因中國的人口基數龐大,中國目前老齡化進程是世界第一。我國的網民除了地域呈現從一線城市向四、五線城市的遷移之外,也呈現出偏向老齡化的特征。



          2 三孩政策暗示老齡化時代來臨

          前不久國務院發布國家開放了“三孩政策”也看出來國家針對人口老齡化表現所作出的國家方針的決策。回歸我們所在的互聯網行業,也許慢慢的互聯網的原住民不再是z時代的年輕群體,他會慢慢的向中年、老年人所遷移。

          今年1月份國家也開始重視了關于老年人互聯網生活感受,先后頒布了《關于切實解決老年人運用智能技術困難的實施方案》。通知在全國范圍內組織了為期一年的互聯網應用適老化及無障礙改造專項行動, 專項行動方案針對老年人、視障聽障人士、肢體障礙人士使用app需求,進行改造要求,并且列出43個手機APP的適老化改造產品清單。



          我體驗了百度、支付寶、喜馬拉雅、滴滴打車這四款app針對適老化項目的改版。



          老年版還有一個特殊的名稱,就是精簡版。從產品的功能上進行了大量的精簡,比如支付寶在老年版的模式中只提供了使用頻次比較高的功能健康碼、結賬付款、充話費等功能,做到了功能上的精簡。




          我相信在未來的幾年,我們的產品會有適老化的改版需求。聽完我說這么多大家心中都會有一個疑問:哪些群體屬于老年群體?生活中老年人用戶數量比較少不了解他們的需求?針對適老化項目我們應該怎么改?


          1.老年群體的劃分

          各國對老年人口的年齡界限的規定各不相同,有的國家規定為65歲以上,有的規定為60歲以上。 我國《老年人權益保障法》第2條規定老年人的年齡起點標準是60周歲,即凡年滿60周歲的中華人民共和國公民都屬于老年人。



          2.老年人的需求有哪些

          身邊的人肯定會有上了年紀的人,回答這個問題前,咱們先說老年人和我們有什么不同, 其實當人類的生理年齡超過20歲,人類的老化過程就可以開始,老年用戶最大的特點就是其五力—視力、聽力、表達力、行動力和認知力的弱化,導致產品的可讀性和體驗型低,造成用戶對我們的產品失望更有甚者認為我們的產品是一個糟糕的產品。



          如果把這些需求進行整理,就會發現多數情況是用戶的聽力、視力和手部敏捷度下降造成用戶的可讀性下降,從而導致用戶產生了不理解、犯錯的操作。歸根到底我們可以把用戶的需求分為兩種類型“服務需求”和“生理需求”。



          3. 為啥老年人看不清楚

          人的眼球就像是一部精密的照相機,眼之所以能看見物體,是因為照在物體上的反射光線,經過眼球的角膜、晶狀體及玻璃體等屈光間質折射后,成像在視網膜上。

          隨著年齡增長人的晶狀體會出現硬化、睫狀肌衰弱的情況出現,造成物體不能很好地成像在視網膜上,具調查反饋在 40 歲時,只有一半的光線像 20 歲時一樣進入視網膜。對于 60 歲的人來說,只有 20%。正是因為以上的原因,導致老年人的視覺分辨物體的敏感度、明暗感覺、空間感覺、色彩感覺的能力下降,有看不清楚的情況出現。



          4 別讓適老化的設計只有“大、大、大”

          設計師是團隊中唯一站在用戶的角度考慮問題的人員,我們不應該只把適老化設計變成只是“大字版”的解決方案——加大字號、加大音量、加大屏幕尺寸這么簡單。



          5. 有規劃的設計解決方案

          凸顯我們設計的專業程度應當站在用戶同理心的角度,針對的為自己用戶的群體設計一份專業化的設計思路,把需要解決分問題點都一 一梳理清楚,再動手制作設計圖紙。



          undefined


          老年人眼睛最常見的問題是視力障礙,俗稱“老花眼”,影響用戶進行閱讀。 如果老年人不會閱讀它,或者如果他們無法閱讀或理解它,那么擁有它又有什么意義呢?

          我歸納出4種方法,大家可以按照以下歸納的設計方法和設計技巧來做適老化的設計改版。



          1 字體

          ui中的文字是產品界面中最重要的一個元素,我們先來看看關于字體的一些技巧。當產品中的文本給用戶很難閱讀的感覺,用戶想閱讀的意愿就會降低,還有一個場景細心的同學不難發現,當用戶閱讀時間變長了之后就會彎腰駝背,甚至瞇起眼閱讀,如果發現產品的用戶出現這樣的情況,那就要注意以下幾點。

          A 使用非襯線體

          襯線指的是字母結構筆畫之外的裝飾性筆畫。有襯線的字體叫襯線字體(serif);沒有襯線的字體,則叫做無襯線體(sans-serif)。

          簡單的理解就是非襯線體(例如黑體等)就是沒有裝飾性筆畫的末尾,這種無襯線體也是被廣泛應用網頁端或手機端的產品,所以非襯線字體有醒目而且輪廓清晰的特點,是提升屏幕可讀性的首選。

          *注意的是在設計過程中避免使用多種字體或者精心設計的造型字體,因為這可能會造成用戶混淆。



          2 文本

          隨著年齡的增大,老年人可看到的視野也是變化的他會越來越小,所以在設計多字文本場景時候我們要注意以下兩點。


          A 文本字號不小于16像素

          有資料顯示12像素的字體可以正常閱讀文本了,但是對于大多數讀者來說,12 像素仍然太小了。即使是 15 像素也會讓原本可能會轉換的訪問者望而卻步。

          為什么文本字號要設計為16像素呢?有研究表明在我們屏幕上 16 像素的文本大小與印刷在書籍或雜志上的文本大小相同,這很符合人的閱讀習慣,但是人閱讀還有一個因素是不能忽視的,就是人和屏幕之間的距離。



          舉一個例子,我們讀書都是手捧著書,印刷字體通常設置在 10 點~12點左右,考慮到用戶距離屏幕的距離其實和顯示器上16像素的字體大小相同的。(一般前端開發會使用em單位進行字體大小開發,這個可以保證在不同分辨率上字體的比例,設計師只需要了解即可。 )



          *瀏覽器的默認字體高都是16像素,除非特殊情況,通常情況下字體不建議使用10 像素。

          *任何閱讀類或點擊類的內容都應該按一定比例放大,尤其是在設計按鈕上面的字號,應該盡量保持較大,不少于16像素。



          說一個有趣的事情,我發現在印刷中小至 8 像素的字體是可讀性和成本之間的理想折衷方案,我查閱了相關文章,是因為過大的字號會浪費紙張造成印刷成本增加。在 Web 上,不需要為更多空間而支付任何費用,考慮的是給用戶高效的傳達文本信息。


          B 添加設置字體大小的功能

          現在很多系統中都會有調節字號的功能,如果在資源條件充沛的情況下可以開發類似的功能,方便用戶自己進行設置調節。下圖是蘋果系統自定義文字大小功能。



          3 顏色

          任何設計都是離不開色彩的那么接下來讓我們看看在顏色的選擇上要注意那些情況。


          A 使用和現實生活中認知一致的顏色

          老年人通常會用經驗去判斷一個事物,尤其是與外國人相比中國人更習慣以經驗來思考問題,所以我們在做設計時候要盡量降低老年人的學習成本。比如我們生活中常常會見到十字路口的紅綠燈,綠色代表通行,黃色代表等待,紅色代表禁止,我們在設計重要提示時候也可以借鑒這種方式去設計,保持和老年人現實生活對色彩的認知是一致的。



          B 避免使用藍色

          前面已經說 老年人對對比度差異的敏感度降低、區分相似顏色方面變得更差。尤其是無法分辨藍色和紫色之間的區別,對綠色鑒別能力下降更明顯。

          考慮到老年人眼睛對藍顏色的陰影不敏感,那么就要降低設計中使用藍色和紫色相互配合的場景,比如背景、文字、圖標、圖片等模塊。



          C 找到最合適的對比度

          使用具有高對比度級別的配色方案使頁面更具可讀性在顏色的對比度上,可以根據WCAG2.1(Web Content Accessibility Guideline,Web內容無障礙指南)設計顏色的對比,比如把重要的文字信息的對比度設計到AAA,次級的文字信息的對比度設計到AA。



          在適老化設計中,色彩對比度要在4.5:1之上,即對比度達到 AAA級和AA級,讓界面中的信息與其背景間的關系對比度較大,才能足以讓老年人看清信息。



          如果不了解怎么判斷對比度是什么級別,我建議大家可以收藏下面的網站。只需要把色紙填入到軟件中,就可以看到兩個顏色關系的對比度。



          4 交互

          人在手機上的交互手勢會有很多種,根據不同的業務場景,我們使用的交互手勢也不相同。 大致分為四類:單擊(tap);長按(long press);雙擊(Double Tap);長按&拖拽(long press & Drag)。



          這么多交互手勢,機器需要先判斷你是什么手勢再根據手勢指令給出相應的反饋。

          當手指貼合上屏幕的時候,反饋的熱區,并不是均勻向四周擴散的,而是向下的擴散。對于觸摸中心點,在觸摸的過程中,就會有向下的一個偏移,如圖:



          例如在iOS內的手勢識別,有一個專門的接口來做識別:PanGestureRecognizer,這個接口會在10px內先判定手指移動的方向和距離,再對具體觸發的手勢來做定義。



          A  大的間距

          在移動端,按鈕尺寸根據手指觸摸屏幕的最小點觸區域,平均長度在10-14mm之間,指尖的長度為8-10mm,所以10mm x 10mm就是一個最小觸摸目標尺寸。在iOS 人機交互規范里面的 44*44 point是Apple HIG建議的手指點觸最小點觸面積。所以我們可以在不同設備不同 PPI 時處理尺寸,在移動端設定點觸尺寸的最小點觸區域大小來設置按鈕尺寸的大小。



          ·移動端:按鈕高度35px-50px之間,字號13pt-17pt,圓角4-8

          ·web端:按鈕高度24px-48px,字號12-18,圓角6-10



          因為老年人的手指偏大,反映變慢,就要需要把相關按鈕的大小、組合的間距等設計的足夠寬大,方便用戶點擊;一些操作反饋的時長也需要拉長,給老年人足夠的反應時間。建議至少保持在8像素以上的間距。



          B 點擊好于輸入

          基于以上因素考慮,對于老年人群,選擇類的交互和輸入類的交互相比,用戶的效率會大大提高,所以點擊類交互要好于輸入類交互。



          C 符合用戶心理預期

          這里我列舉一個蘋果的案例,蘋果在設計積極按鈕的時候通常會放到布局的最右側,舉個例:

          這里有“取消”和“確認”兩個按鈕,對于業務方來說判斷“確定”是積極按鈕,所以在設計這樣的彈窗時候 會把“確定”放在最右側。



          5 具體的內容


          A 形象應更加真實

          老人對設計師的樣式判斷不是那么清晰和明顯,設計師尤其是在制作活動banner場景中,使用具象的圖像往往會比插畫的圖像信息傳達更為直接。



          B 圖標加文案

          人與人之間的認知水平是存在差距的,老年人的認知水平相對較低。比如在圖標的設計方向,可能一個通話的圖標會有手提電話和座機電話兩種表現方式,但是真正使用那種圖標就會給用戶產生誤區,最好的解決辦法是用“純文字加圖標”的形式表達是最為合理的一種方式。



          C 色彩更有辨識度

          對于部分的用戶來說,有好的色彩更能增加信息傳達的辨識度。比如我們在把圖標雖然加上了文案,用戶第一眼看上去還是撞色處理的方式更好。



          D 有引導性文案

          對于老年人,我們可以運用潛意識作為界面中的隱形向導,確保視覺提示清晰,幫助產品順利完成目標行為。



          老年人的理解能力也會比常人要弱一些,對于一些文案或者專有名詞要描述具體,便于用戶進行理解和做出選擇。研究發現帶有目的性的行動文案要好于描述類的文案。



          6 語音功能的加入

          語音功能也是輔助老年人的一項功能點,通過語音搜索直達某個功能等。比如在搜索場景、客服場景、查詢場景等等。

          值得注意的是在設計之初要考慮以下幾個場景:

          ·適當地增大音量、使接收的聲音更加清晰。

          ·添加聲音反饋機制,如果聲音發送成功,應該給予正確的聲音提示。




          1 驗證的范圍

          其實驗證設計是否成功和我們正常做項目的思路大致相同,無外乎從比如產品體驗,用戶服務,產品功能這三個層面進行跟蹤反饋。



          2 驗證的指標

          目前都是通過定量測試的方式,進行可用性指標來進行衡量的。我列舉了四個緯度,方便大家進行借鑒和衡量。

          任務成功率:用戶能否順利的完成任務,解決用戶需求。

          任務完成率:用戶多快能完成任務,耗費時間多久,多數情況用于衡量效率。

          任務出錯率:在用戶完成任務的路徑出,用戶出錯幾次,用于衡量出錯頻率。

          用戶滿意度:用戶完成任務后,用戶對產品的功能進行打分,用戶衡量用戶的滿意程度。





          其實國家提倡的適老化設計,我們可以設想另外一個話題——為老年人做設計等于為更多的人做設計。



          1 無障礙設計在互聯網產品中的應用

          如果你使用的是蘋果MacOS系統的操作系統,你可以看到蘋果在這種老年人(無障礙)設計中的功能設計,比如蘋果的輔助功能中的設計選項,有興趣的同學可以體驗一下。



          其實在國內的互聯網產品公司也有做過無障礙的設計,比如小米發布的MIUI系統中的無障礙觸感設計,有興趣的小伙伴可以自己下載去體驗。



          2 開拓自己的知識面

          其實網上有很多關于無障礙設計可以借鑒的參考文獻,比如W3C無障礙指南(WCAG 2.1)就是其中一款,WCAG是Web Content Accessibility Guidelines 即web內容無障礙指南有興趣的同學可以查詢一下。



          很多設計規范網站都會有關于無障礙設計的介紹,有興趣的同學也可以查看。



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

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



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

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

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



          app界面賞析+圖標分享 ——— 北京藍藍設計 移動端UI設計資源分享(二十八)

          前端達人


          App界面設計對于設計師而言一直是盛久不衰的話題,尤其是如今越來越多的流量轉移到了移動平臺,使得更多的UI設計師涌入移動端領域,甚至出現了市場飽和的言論,對于從事移動端的UI設計師來講,充滿壓力的同時又面臨無限機遇,唯有不斷的學習才能滋生出源源不斷的設計靈感,站穩腳跟。

          摹客想在這方面給各位設計師朋友做點什么,除了提供簡單好用的設計工具,我們也整理了非常多的優秀設計案例,希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題,我們以月為單位,整理了國內外設計師的優秀APP界面設計案例,我們是搬運工,更是好設計的傳達者,希望你會喜歡。

          接下來為大家分享精美的app UI設計案例:



          WechatIMG2026.jpegWechatIMG2027.jpegWechatIMG2028.jpegWechatIMG2029.pngWechatIMG2030.jpegWechatIMG2031.pngWechatIMG2038.pngWechatIMG2037.pngWechatIMG2036.pngWechatIMG2035.pngWechatIMG2034.jpegWechatIMG2033.jpegWechatIMG2032.pngWechatIMG2039.pngWechatIMG2040.pngWechatIMG2041.jpegWechatIMG2042.png





          --手機appUI設計--

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



            更多精彩文章:

                手機appUI界面設計賞析(一)

                 手機appUI界面設計賞析(二)

                 手機appUI界面設計賞析(三)

                 手機appUI界面設計賞析(四)

                 手機appUI界面設計賞析(五)

                 手機appUI界面設計賞析(六)

                 手機appUI界面設計賞析(七)

                 手機appUI界面設計賞析(八)

                 手機appUI界面設計賞析(九)

                  手機appUI界面設計賞析(十)

                 手機appUI界面設計賞析(十一)

                手機appUI界面設計賞析(十二)

                手機appUI界面設計賞析(十三)

                手機appUI界面設計賞析(十四)

                手機appUI界面設計賞析(十五)

                手機appUI界面設計賞析(十六)

                手機appUI界面設計賞析(十七)

                手機appUI界面設計賞析(十八)

                手機appUI界面設計賞析(十九)

                手機appUI界面設計賞析(二十)

                手機appUI界面設計賞析(二十一)

               手機appUI界面設計賞析(二十二)

               手機appUI界面設計賞析(二十三)

               手機appUI界面設計賞析(二十四)

               手機appUI界面設計賞析(二十五)



          app界面賞析+圖標分享 ——— 北京藍藍設計 移動端UI設計資源分享(二十七)

          前端達人

          App界面設計對于設計師而言一直是盛久不衰的話題,尤其是如今越來越多的流量轉移到了移動平臺,使得更多的UI設計師涌入移動端領域,甚至出現了市場飽和的言論,對于從事移動端的UI設計師來講,充滿壓力的同時又面臨無限機遇,唯有不斷的學習才能滋生出源源不斷的設計靈感,站穩腳跟。

          摹客想在這方面給各位設計師朋友做點什么,除了提供簡單好用的設計工具,我們也整理了非常多的優秀設計案例,希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題,我們以月為單位,整理了國內外設計師的優秀APP界面設計案例,我們是搬運工,更是好設計的傳達者,希望你會喜歡。

          接下來為大家分享精美的app UI設計案例:

          jhk-1623378361587.jpgjhk-1623378458458.pngjhk-1623378929226.pngjhk-1623379179475.jpgjhk-1623379189278.jpgWechatIMG2009.jpegWechatIMG2010.jpegWechatIMG2018.jpegWechatIMG2016.jpegWechatIMG2015.jpegWechatIMG2014.jpegWechatIMG2013.jpegWechatIMG2012.jpegWechatIMG2011.jpegWechatIMG2025.jpeg




          --手機appUI設計--

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



            更多精彩文章:

                手機appUI界面設計賞析(一)

                 手機appUI界面設計賞析(二)

                 手機appUI界面設計賞析(三)

                 手機appUI界面設計賞析(四)

                 手機appUI界面設計賞析(五)

                 手機appUI界面設計賞析(六)

                 手機appUI界面設計賞析(七)

                 手機appUI界面設計賞析(八)

                 手機appUI界面設計賞析(九)

                  手機appUI界面設計賞析(十)

                 手機appUI界面設計賞析(十一)

                手機appUI界面設計賞析(十二)

                手機appUI界面設計賞析(十三)

                手機appUI界面設計賞析(十四)

                手機appUI界面設計賞析(十五)

                手機appUI界面設計賞析(十六)

                手機appUI界面設計賞析(十七)

                手機appUI界面設計賞析(十八)

                手機appUI界面設計賞析(十九)

                手機appUI界面設計賞析(二十)

                手機appUI界面設計賞析(二十一)

               手機appUI界面設計賞析(二十二)

               手機appUI界面設計賞析(二十三)

               手機appUI界面設計賞析(二十四)

               手機appUI界面設計賞析(二十五)

               手機appUI界面設計賞析(二十六)



          WordPress默認編輯器遇到意外錯誤的解決方法

          前端達人

          好不容易是用wordpress搭建好了我的網站,找了幾個不錯的插件提升了一下性能,也解決了安裝主題時出現的各種問題,終于能夠正常地使用了。正當我興致沖沖地打開文章編輯器,正打算開始寫我的第一篇博客的時候,又有一個意外的錯誤出現了——那就是wordpress的默認編輯器古騰堡。



          我上網搜索了好半天,好像大多數人都有遇到這個問題,古騰堡是WordPress十多年來第一次更換的全新的編輯器,從他的外觀來看,確實是十分的舒服,功能也似乎很完善,可惜還是有些小bug。









          網上主要的解決方法有三種:



          1、切換瀏覽器。他們都說換成谷歌瀏覽器的時候就不會出現這個問題了。但是我一開始用的就是谷歌瀏覽器,所以對我不起作用。



          2、清楚瀏覽器緩存, 這個我也照做了,也是沒有什么效果。



          3、安裝Classic Editor 插件,我就是采用這個辦法解決的。而且Classic Editor 插件可以切換區塊編輯模式和經典編輯模式,雖然經典編輯模式十分的丑陋,而且用的也不是特別舒服,但是我意外地發現,區塊編輯模式就是原來的古騰堡編輯器,在安裝了插件之后,原來的意外的錯誤就再也不出現了,而且當我把Classic Editor禁用了之后,也仍然不見原來的報錯。



          雖然問題是解決了,但可惜我剛開始使用wordpress,還沒有開啟錯誤日志,所以也不知道這個問題到底是為什么出現,在網上搜索了好久,也不能確定我這個問題到底出現在哪里。



          反正結果還是好的,就先在這里埋個坑吧,以后再遇到的時候再回來補充!


          另外,如果你有興趣,或者是有問題想要與我探討,歡迎來訪問我的博客:https:mu-mu.cn/blog 作者:貪玩的木木 https://www.bilibili.com/read/cv6589030/ 出處:bilibili

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

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


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

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

          還不會標題設計?這個方法很好用!

          seo達人



          設計大多是服務于商業的,或許我們會遇到很多奇葩要求,但我們要學會留給自己一些空間,去發現設計中的樂趣,這樣才不會覺得枯燥乏味。今天的文章會著重講解AI自制畫筆與字體設計如何結合。今天的案例雖然是剛剛過去的端午節,但是掌握了方法,下一次標題設計,一樣好用。

           

          大家都知道端午節也叫端陽節,那么我們就以端陽節為主題進行設計,先把文字整理好。

          圖片

           

           STEP 01 > 分析屬性 

          接著我們分析字體屬性,作為中國傳統節日,端陽節有兩個顯著的特征,那就是粽子與龍舟。

          圖片

          根據分析出的屬性,我們確定字體設計的風格方向,筆畫我們可以用粽葉的特征。

          ??????

           

           STEP 02 > 設計字體 

          下面畫出字面框確定字形的橫豎比,重心偏低;字體的筆畫粗細保持一致。

          ??????

          將制作好的畫筆拖入到畫筆框中,選擇藝術畫筆,就得到了五條橫線的畫筆。

          圖片

          接著墊字在字面框里將文字做出來,可以看出還是遵循了方塊字的做法,只是筆畫特征發生了變化。

          圖片

          接著我們將部分筆畫替代,增加特異性,同時調整字體的大小和部分細節。

          圖片

          到這里字體基本就設計完成,接著我們需要對字體進行編排,增加的元素有云,粽子,粽葉樣子的舟,都是用混合工具做成的,這樣整體風格更匹配。

          圖片

           

           STEP 03 > 搭配顏色 

          然后就是搭配顏色,這里我想到的就是粽葉的綠色,那么我們填充好將文字變成白色就完成了。

          圖片

          OK,設計做完了,可以看出自制畫筆他本身具有的優勢,由于固有相同的特征,會在筆畫細節處理的時候更方便,同時還具備設計感。這個方法是比較常用的,希望大家多多練習

           

          原文地址:

          作者:趣趣熊


          轉載請注明:學UI網》還不會標題設計?這個方法很好用!


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

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



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

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


          如何安裝WordPress主題

          前端達人

          在Envato Tuts +的代碼類別中,我們涵蓋了很多   內容。 范圍從諸如如何使用一些最新JavaScript框架編寫代碼到如何通過諸如WordPressOpenCart之類的內容管理系統實現某些目的 。

          因為我們傾向于將大部分內容集中在已經對計算有一定程度的了解的人們,所以我們經常假設在開始教程之前已經做好了某些準備。

          例如,有時我們假設您在進入實際框架之前已經掌握JavaScript的知識。 或者,也許我們假設您在開始有關如何使用新庫構建Web應用程序的教程之前對PHP或Ruby有一定的了解。

          在我們發布的“ 如何做”文章中,我們正在努力提供教程,向讀者提供建立和運行特定軟件所絕對必要的步驟,尤其是那些與很多軟件兼容的軟件。在Envato市場可用。

          如果您有興趣使用WordPress構建網站,那么您應該對WordPress主題應該有一個有效的定義,并且對如何安裝WordPress主題有一個實際的了解。

          了解WordPress主題

          在了解如何安裝WordPress主題之前,讓我們定義WordPress主題應該是什么。 我區分這從一個WordPress主題什么,因為你經常會發現,做更多的比他們應該的主題。 如果您選擇更改主題的設計,這些主題將很難嘗試其他主題。

          我將在稍后詳細討論。

          什么是主題

          現在,讓我們使用WordPress Codex中提供的定義:

          從根本上講,WordPress主題系統是一種“蒙皮”您的Weblog的方法。 然而,它不僅僅是一個“皮膚”。 對您的網站進行外觀設計意味著僅更改設計。 WordPress主題可以更好地控制您網站上材料的外觀和呈現方式。

          從此定義中得出的主要結論是,WordPress主題提供了您網站的演示。 也就是說,它負責使您的網站或博客具有特定外觀。

          它會影響您所看到的所有內容,設置內容樣式以及影響字體,配色方案等。

          主題鎖定如何?

          安裝WordPress主題時,請務必注意其提供的功能。 現代主題通常不僅僅包括演示。 也就是說,它們引入了功能。

          功能可以定義為任何可以改變主題行為的東西。 例如,假設您的主題在帖子編輯器屏幕上提供了某種類型的搜索引擎優化選項。

          并且由于這不在表示的范圍之內,因此被認為是功能。 如果主題提供了類似的內容,那么您就有遭受“主題鎖定”之苦的危險。

          它是這樣工作的:安裝一個主題,它不僅提供演示文稿(例如上面概述的SEO功能)。 如果您選擇將站點更新為提供完全相同的SEO功能實現的新主題,則會丟失它。 所有的。

          您可能會得到一個很棒的設計,但是您已經失去了為主題提供所有SEO信息的工作。 因此,您要么被鎖定使用與開始時相同的主題,要么面臨使用新主題并失去所有工作的麻煩。

          最終,主題應該包括這種類型的功能。 功能保留給插件。 這是我們將在另一篇文章中討論的內容。

          現在,請記住主題應該全部與演示有關。 如果您可以使用主題鎖定,那么選擇一個可以提供很多功能的主題可能就可以了。 但是,如果您希望最終不時更改設計,請嘗試堅持嚴格遵循修改網站外觀的主題。

          安裝WordPress主題

          話雖如此,現在我們可以討論安裝WordPress主題所需的過程。 實際上,有兩種方法可以執行此操作:

          1. 您可以從WordPress中安裝主題。
          2. 您可以通過S / FTP安裝主題,然后在WordPress中將其激活。

          盡管第一個選項可以說是最簡單的,但我們將在本指南中介紹這兩個選項,以確保為您提供了最全面的信息。

          請注意,本指南假定您已經在計算機或Web主機上安裝了WordPress。 我們將逐步完成獲取主題并通過WordPress或FTP進行安裝的過程。

          話雖如此,讓我們開始吧。

          下載WordPress主題

          網上有很多地方可以下載WordPress主題。 但是,從任何地方下載主題并不總是安全的。 審查主題提供者的聲譽很重要。

          這超出了本文的范圍; 但是,從WordPress主題存儲庫Envato Market中選擇主題不會出錯。

          出于本教程的目的,我們將使用免費提供的第二十六主題。 首先,我們將從WordPress中安裝它,然后我們將了解如何通過S / FTP安裝它。

          對于以下步驟,我假設您是從WordPress儀表板開始的:

          WordPress儀表板

          無論您選擇使用哪種方法來安裝主題,這都是我們開始本教程步驟的地方。

          從WordPress內部安裝主題

          要從WordPress本身安裝主題,請單擊“ 外觀”菜單,然后選擇“ 主題”選項。

          主題菜單項

          從那里,您將看到所有已安裝的主題。

          安裝的WordPress主題

          接下來,單擊屏幕頂部的添加新按鈕。 從這里開始,您將進入一個如下所示的屏幕:

          添加WordPress主題

          注意 頁面頂部的“ 搜索主題”字段。 在此字段中,輸入“ 二十十六”(不帶引號),它將返回以下屏幕:

          二十六

          之后,單擊選項以安裝主題。 之后,WordPress將為您提供預覽主題或激活主題的選項。 對于通過S / FTP上傳主題的用戶,也將提供相同的選項。

          因此,目前,我們將看一下通過上傳文件來安裝主題的必要步驟。 如果您對以下替代步驟不感興趣,則可以跳至下面的“ 激活主題”部分。

          通過S / FTP安裝主題

          此版本的主題安裝假定您熟悉術語服務器,端口,用戶名和密碼。 它還假定您熟悉wp-contenttheme目錄。 如果不是這樣,那么最好的做法就是堅持上述方法。

          但是,如果以上都不是行話,那就繼續吧。 就本演示而言,我將使用Transmit作為我的S / FTP客戶端; 但是,請隨時使用您喜歡的任何客戶端。

          首先,我們需要從WordPress Theme Repository下載二十一十六 。

          WordPress主題存儲庫

          一旦您單擊Download ,這會將主題的zip文件放置在您選擇的目錄中。

          二十六檔案館

          接下來,您將要提取存檔。 這將在包含zip文件的目錄中創建一個包含所有主題文件的子目錄。

          主題目錄

          之后,連接到您的Web服務器并導航到WordPress安裝的wp-content/themes目錄。

          上傳二十一十六

          上載提取主題文件時創建的目錄。 從那里跳到WordPress儀表板,然后導航到“ 主題”頁面。 您應該看到《 二十一歲月》的副本   出現在主題列表中。

          此時,無論我們如何安裝主題,我們都準備好繼續激活主題。 就是說,如果您選擇使用S / FTP或選擇從WordPress中安裝主題,則會為您提供相同的選項集。

          所以做吧。

          激活主題

          通過WordPress下載主題或通過S / FTP上傳主題之后,便擁有了激活主題并更新網站外觀所需的一切。

          獲得主題之后,應該為您提供激活主題的選項:

          激活WordPress主題

          在這里,您可以選擇 實時預覽以了解如何更改當前內容,或者您可以單擊“ 激活”繼續進行設置。 我選擇與后者一起使用。

          完成后,您將看到以下屏幕:

          激活的WordPress主題

          從那里開始,您應該能夠像在安裝此主題之前一樣繼續使用WordPress。 這意味著您可以繼續添加帖子,頁面,類別等。

          根據主題,您還可能有機會更新標題圖像,背景圖像等。 請注意,這取決于已安裝的主題。

          要確切了解您的主題提供了什么,請務必參考文檔。

          結論

          如您所見,安裝WordPress主題是一個相對簡單的過程,尤其是從WordPress應用程序中進行安裝時。 即使您對使用FTP客戶端的過程感到有些恐懼,一旦上傳了文件,激活主題仍然相對容易。

          其次,請注意區分想要的主題類型很重要。 您是否想要一個具有很多功能而您永遠都不會改變的主題,還是想要一個與一組插件完美配合,可以獨立于該功能更改網站外觀的主題?

          無論哪種情況,您都應該擁有選擇主題,安裝主題并以最適合自己的方式激活它所需的一切。

          最后,如果您要尋找適合幾乎所有情況的主題主題,請務必查看Envato Market中提供的功能 。

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

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


          部分借鑒自:csdn  

          原文鏈接:

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

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

          讓設計更有價值——設計流程指南

          資深UI設計者

          隨著設計團隊規模擴大,人數快速增多,但每個人都帶著自己以往工作經驗和習慣,

          一些典型問題也相應顯現:上手就干、主觀設計、缺少方法、忽視跟進等等。

          所以我們撰寫了「UI標準設計流程」,希望能為UI設計師提供對于設計支撐思路的共識,讓設計更有價值:



          從接到需求到上線后跟蹤,我們把流程拆分為五個節點:需求分析-交互設計-視覺設計-視覺規范-方案驗證。

          當然,在設計流程中我們只表達不同流程中的行為目的及標準,相關方法論我們會配套一份「設計師成長指南」,不久之后再與大家分享。


          1.需求分析


          我們在接到一個設計需求后,要做的第一步是進行分析并確定設計目標。

          我們需要:了解背景、用戶和競品,能準確理解產品定位和需求目標,評估需求的合理性和準確性,并提供相應策略;甚至洞見機會點,通過設計對業務產生正向價值。



          背景分析


          目的:背景分析是為了讓我們在剛接觸產品的時候,去洞察表面背后的東西。通過背景分析,能幫助我們快速切入產品,并根據已有信息去制定準確并具有說服力的設計策略。

          行為:我們需要了解:產品的定位及價值是什么,它的現狀如何,是否有既往的數據沉淀或經驗總結。



          用戶分析


          目的:對UI設計師而言,用戶分析是為了讓我們更好地了解產品,并擁有對整個產品的宏觀思路。通過用戶分析,能為我們的視覺設計提供方向,并為我們做出決策提供實際落點。

          行為:我們通常需要了解:用戶畫像、用戶需求、用戶行為、用戶路徑等。



          競品分析


          目的:競品分析能夠讓我們獲得行業內的優秀經驗,減少我們的思維盲區,同時還為我們提供了一份可被量化的標準,使我們可以基于競品去反推現有產品。

          行為:UI設計師可以從競品定位、主要功能、迭代動向、產品結構、頁面布局、交互動效、視覺設計、優劣勢對比這幾個維度去進行競品分析。



          需求評估


          目的:在了解以上的通用信息后,我們要對需求進行評估,去決定采用哪種方式、制定什么樣的策略。

          行為:我們接到的需求,通??梢苑譃槿N:全新產品類、產品改版類、功能新增或優化類。

                     對不同類型的需求,我們都可以用5個問題去評估:

                     1.是否可被證偽?

                     2.目標是否明確?

                     3.投產比如何?

                     4.是否有更優解法?

                     5.是否有可預見風險?

                     基于以上問題,我們可以去協同交互、產品做相應調整和策略制定,甚至發現新的機會點并進行推動。



          目標對齊


          目的:設計為目標服務,所以我們要在設計開始前與需求方對齊目標,這也能為設計價值的佐證提供標準。

          行為:設計目標通常有3種,我們可以從中去對需求目標轉譯:提升數據型、解決問題型、創新項目型。

                     針對不同目標我們可以去制定不同的設計策略,并對策略的落地進行數據監測與分析,進行方案校正。



          2.交互設計


          在產品流程中,交互設計的作用在于,通過信息架構的組織去產出體驗流暢的界面原型。

          我們需要:充分理解整體流程與交互原型,基于設計原則去發現可優化的部分;同時能平衡產品、設計與開發的效益最大化,并驅動產品的體驗提升。




          設計原則


          目的:設計原則能為我們提供一個行之有效的設計向導或提示。熟知各類設計原則,能使我們在設計支撐時,擁有更豐厚的專業度和更敏銳的洞察力。

          行為:我們需要去了解市面常見的Guildline如iOS、Material、UWP等,以及一些常用原則如菲茲定律、格式塔理論等等。



          流程梳理


          目的:流程的再梳理,可以幫助我們在視覺設計前,快速地理解和診斷流程邏輯。

          行為:在流程再梳理的過程中,我們需要注意以下4個問題:

                     1.功能是否完整?

                     2.鏈路是否流暢?

                     3.步驟是否冗余?

                     4.是否易于理解?

                     基于以上問題,我們可以用自身的專業儲備去推動流程的優化。



          原型優化


          目的:交互原型是需求內容的外在表現,通過原型優化,可以最大程度地避免視覺評審后的設計返工。

          行為:在對交互原型優化的過程中,我們要重點注意以下4個問題:

                     1.架構是否符合目標

                     2.層級是否足夠精簡

                     3.信息是否傳達準確

                     4.狀態是否有所缺失

                 在視覺設計時,我們基于以上四點可以去同步優化原型,并根據經驗去尋求體驗和成本的最佳平衡。



          3.視覺設計


          視覺設計是產品與用戶直接連接的媒介,優質而恰當的視覺設計,可以極大地提升產品吸引力。

          我們需要:基于分析確定視覺方向、定義設計語言,輸出準確且高質量的視覺頁面。




          設計情緒板


          目的:設計情緒板可以為設計語言的構建提供可視化參考,也有助于我們前期快速與各方達成共識。

          行為:我們通?;诜治?,去確定設計關鍵詞,并基于關鍵詞去衍生映射物、建立圖形情緒板,最終分析和確定設計方向。



          設計語言


          目的:設計語言是情緒板的具象表達,它將構建起用戶對產品的視覺感知。

          行為:在明確設計方向后,我們就要基于情緒版去定義設計語言,主要包括主視覺、色彩、字體、圖標、圖形、動效等。



          典型頁面


          目的:典型頁面是設計語言在場景中直觀體現,這有助于我們制定設計規范,并為其他頁面的設計提供參考。

          行為:我們通常需要設計首頁、頻道頁或其他具有示例作用的典型頁面,在設計的過程中我們還需要同步去規范間距、卡片、視覺變量、圖形應用等,以此為視覺規范夯實基礎。



          4.設計系統


          在設計典型頁面的同時,其背后其實已經對應了一套設計規范和組件,而我們基于此去整理并沉淀出設計系統,能極大地提升統一性和迭代效率。

          我們需要:制定完整、清晰的基礎規范,沉淀圖標庫、組件庫等,并持續優化和更新,形成可持續沿用的產品設計系統。




          基礎規范


          目的:基礎規范是設計語言的沉淀,也是視覺變量的基本粒子。它可以保證頁面的基本統一,同時我們可以基于不同業務快速地拓展其他主題。

          行為:在我司,一份基礎規范的構成包括:色彩、字體、間距、布局、斷點、層級、圓角、透明度、陰影。



          圖標庫


          目的:圖標規范可以幫助其他成員快速、準確地進行圖標拓展,而沉淀的圖標庫也可以極大地提升產出效率。

          行為:基于具體需要,我們可以設定多套圖標風格,規范其柵格、筆畫、圓角等,并將已有的圖標資產進行沉淀。同時我們也會去規范一些常見圖形并沉淀,如空態插畫、懸浮入口、徽章、商品等。



          組件庫


          目的:組件庫是對常用控件進行設計規范、開發、封裝的可被復用的集合,組件分而治之,可被自由組合,能保證設計品質、統一用戶體驗、提升產研效率。

          行為:在我司,一套組件庫通常包括:通用、布局、導航、數據錄入、數據展示、反饋、其它。除通用原子組件外,我們也會對常用模塊進行梳理,沉淀業務組件庫。



          5.落地跟蹤


          在設計完成之后,我們需要對設計方案進行評審、驗收及數據跟蹤,以保證設計方案的落地并跟進調整。

          我們需要:運用合理策略以保證設計方案的高質量落地,對方案上線后的用戶反饋進行有效跟進,運用多種方式驗證目標,迭代產品。




          設計評審


          目的:設計評審通常包含了交互與視覺,其目的在于審查設計方案中的可用性問題。

          行為:在我司,視覺評審即終評,我們需要在視覺稿中標注出所有交互邏輯,并對潛在問題有預判,能與各方確認目標、分桶與數據埋點;同時我們要對開發實現有預判,能與研發確認實現細節。



          設計驗收


          目的:設計驗收是為了確保需求滿足、體驗流暢,并且設計細節能高質量落地。

          行為:視覺設計師主要驗收視覺細節的還原度,并且要在一定程度上對開發的適配、樣式解法有預知,減少二次驗收。同時需要保證驗收有沉淀,利于后續跟進。



          數據驗證


          目的:數據驗證除了分析分桶之外,也可以分析產品上線后的一些問題、并在迭代中修改。同時我們也可以總結設計經驗、提升未來設計的準確率。

          行為:我們通常基于設計策略,去對數據進行篩選與分析,以此衡量設計對于目標達成的增益度。對于有問題的,能反思并且修改;對于結果好的,能總結并且沉淀。



          設計復盤


          目的:設計復盤以結果為導向,我們可以通過復盤對設計策略的價值進行總結驗證,并去發現、優化流程中的不足之處。

          行為:我們需要陳述設計目標和策略,對設計價值進行驗證,并能總結過程中的亮點與不足,制定后續計劃、沉淀相關經驗。



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

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


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

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

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


          峰終定律,揭露用戶寧愿長痛不愿短痛的秘密

          seo達人



          用戶體驗的本質其實是心理學在科技產品的運用,需要的是讓技術順應人性。我在讀人機交互碩士時,學的也都是些心理學的研究成果和方法??稍谛睦韺W這塊了解得越多就越發現,很多人做不好體驗設計,是因為喝太多雞湯,導致腦子里不自覺地產生了很多反人性的思想。而這些反人性的雞湯,雖然能夠幫助自己更加優秀,對于理解用戶來說卻一點幫助都沒有,甚至可能適得其反。

          圖片

          例如今天我就用一個很經典的心理學定律來給大家講講:

           

          峰終定律——The Peak–End Rule

          意思是,人們對于一件事物的記憶好壞,取決于高峰和結尾的感覺。

          注意,這個高峰并不一定是正向高峰,也有可能是負向高峰。

          諾貝爾經濟學得主丹尼爾?康納曼(Daniel Kahneman)曾經做過一次實驗,讓兩組人帶上耳機聽噪音。

          兩組人聽的時長和音量都是一樣的,唯一不同的是,第一組聽完這段就結束了,而第二組聽完這段后,還會再聽一段音量小一些的。

          從測試設計者的角度看,第一組的忍受噪音的時間更短,總量也更少,理論上應該比第二組體驗好一點。

          然而根據調查發現,忍受完這輪噪音后表示愿意繼續參加實驗的人,竟然是第二組更多一些!

          康納曼讓兩組受試者戴上耳機,聽很大聲、令人不舒服的噪音。兩組聽到的音量都一樣,不同的是,第一組聽完大聲的噪音就結束實驗,第二組還會再聽一段比較弱的噪音。

          圖片

          按常理推斷,第二組的人聽了更久的噪音,應該比第一組感覺更痛苦,但事后調查,愿意繼續參加實驗的人,居然是第二組較多!

           

          寧愿長痛不愿短痛?

          我們都說長痛不如短痛,但為什么實驗中,而且哪怕長痛的總量比短痛的總量更大,大多人都寧愿長痛不愿短痛?

          • 明知道高考的時候再努力一把,畢業后就能找到好工作了,可偏偏忍受不了。
          • 明知道晚上少熬點夜,第二天神清氣爽工作效率高,可就是做不到。
          • 明知道每天只要花半個小時鍛煉一下,不但體型能改善而且精氣神也能上去,可就是堅持不了。
          • ……

          看來,短痛什么的都只能是對自己的要求,對大多數人來說,還是長痛更加符合人性。

          運用到產品體驗上,那就是:便捷性比不過易學性,與其與讓用戶短時間內完成一個高難度的操作,還不如花更長時間完成一個低難度操作

          例如我以前設計過一個控件,方便用戶快速滑動切換到某個日期。

          結果用戶測試發現,雖然這個控件操作效率高,但是幾乎所有的用戶都無法立即理解,于是效率反而下降。

          圖片

           

          結尾比過程更重要?

          雖然很多雞湯文說,要重視過程而非結果。 

          但是對于只體驗一次的事情來說,大多數人更在意結果而非過程。

          以電影為例,通常對于喜劇和悲劇的劃分,并不是根據過程,而是結尾。也就是說哪怕同樣的故事,只要結局反轉,就會給人完全不同的感受。

          把這個類比到產品體驗,就拿購物為例,不論搜索產品的過程有多么復雜,只要最終我能買到合心意的產品,用戶體驗就是美好的。

          所以說拼多多這類主打實惠電商平臺,根本沒有必要再一些體驗細節上死摳,點擊收貨時自動拉攝像頭什么的……都被拿到便宜商品后的愉悅感沖淡了~

          相反,如果一個電商平臺流程體驗上再考究,可只要在最后一步收貨階段讓用戶失望,前面的努力都白費了。

          這么一想,寫之前那篇《拼多多這個惡心的交互,居然有人說好?》時,我的困惑也終于找到答案。

          不過,我還是不喜歡這個方案,這個下面再解釋。

           

          腳踏實地比不上巧言令色?

          通常我們受到的教育是,做事要腳踏實地,那些巧言令色的小人走不長遠。

          可如果真的是這樣,為什么不論是職場還是相親,「老實」這個詞都被認為是貶義詞呢?

          其實大部分人根本不喜歡穩定,例如投資股票的朋友,經常喜歡張口閉口就說“我最近賺了 50%”、“再加把勁,說不定可以翻倍”……

          可是股神巴菲特的年均收益率不過 20% 左右,據我了解無論是創投還是私募,實際年收益率平均能超過 20% 已經相當不錯了。

          圖片

          藍色線為收益率

           

          但是對于大多數業余股民來說,即便是自己年均收益率為負數,只要曾經有過一段高光時刻,那就很滿足了。

          對應在產品體驗上那就是:只要有一點讓用戶感到了「高光時刻」,那就足夠讓用戶記住要長時間了。

          例如 iPhone 其實整個產品的用戶體驗,尤其是在剛需上未必比 Android 強多少,可他們抓住自己在細節上的優勢,讓用戶在某些時候突然印象深刻一下,就能圈住不少果粉:《iPhone 這些體驗細節太感人,換安卓后不習慣了》。

          當然,Android 也有自己的「高光時刻」,例如我在接到陌生電話,看到屏幕上顯示“詐騙電話”時,立即由路人轉粉。

          當然,這個「高光時刻」也可能是負面的「至暗時刻」,例如雖然拼多多能夠讓我買到便宜的商品,結尾通常是美好的,但是那個點收貨拉攝像頭實在是讓我的體驗一下子跌落谷底,所以始終無法產生好感。

           

          總結

          雞湯本身就是反人性的,用來要求自己可以,用來要求他人可千萬別。

          所以說用戶體驗要反雞湯,這個其實再合理不過。

          以后可千萬別抱怨用戶這不好那不好,因為人性本來就是這樣,樣本大了從概率學上看,是一個絕對不可能改變的客觀事實。

          體驗設計就是要運用技術去迎合人性,而千萬不要妄圖改變什么。

           

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

          作者:設計師ZoeYZ

          轉載請注明:學UI網》峰終定律,揭露用戶寧愿長痛不愿短痛的秘密



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

                                                                      微信圖片_20210513163802.png

           

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

           

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




          日歷

          鏈接

          個人資料

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

          存檔

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