<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          《產品設計中的容錯性思考》

          ui設計分享達人

          使用互聯網產品過程中,會有很多因素造成操作錯誤或失誤,導致無法順利完成任務。因此產品的容錯性設計是交互設計中的重要內容。


          用戶在實際使用互聯網產品的過程中,會有很多因素造成操作錯誤或者失誤,而導致無法順利完成任務,或者完成任務的效率很低。產品自身所具備的容錯能力對于各種使用場景的有效覆蓋,可以提升產品糾錯效率、降低用戶操作出錯概率,因此產品的容錯性設計是交互設計中的重要內容,也是提升用戶體驗不可忽視的一個環節。



          1、容錯性是什么


          容錯性概念源于計算機領域,容錯性是指計算機系統在發生故障的情況下,依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。

          本篇內容我們討論的是容錯性在互聯網產品領域的內涵和意義。延伸到互聯網產品設計領域,容錯性的范疇更為寬泛,涉及產品對錯誤操作承載能力的多個方面,包括:如何降低用戶操作的出錯率,如何及時提供糾錯幫助,以及如何給用戶提供解決方案等內容。


          2、為什么需要容錯性設計

          「 即便你的產品90%的時間都運行良好,但是如果在用戶需要幫助時置之不理,他們是不會忘記這一點的。——《Getting Real》」

          一個產品設計的無論多么簡單,用戶都難免在使用過程中因為各種原因而犯錯。互聯網產品面向的用戶群體是復雜多樣化,教育背景的不同,行為習慣的差異,復雜的使用場景,都會使得用戶的真實操作相比產品設計之初的預期有一定出入。此外,一些產品本身存在的因素,例如產品路徑復雜,邏輯不暢等,也有可能造成用戶無法順利完成任務,亦或是完成任務的效率低,出錯率高。產品在遇到錯誤如不能夠及時糾錯幫用戶挽回損失,會給用戶帶來不好的用戶體驗,也是產品的一種設計缺陷。因此設計師應具有良好的容錯性設計思維,盡量避免用戶錯誤操作的出現,當用戶出現錯誤操作時,幫助用戶識別、診斷,及時反饋問題所在,并提出有效的解決方案,幫助用戶快速從錯誤中恢復。最終達到使產品更可用、更易用的目的,給用戶帶來更優的用戶體驗,使用戶與產品的交流更加順暢。


          3、容錯性的設計方法

          互聯網產品的容錯設計可從用戶使用產品的三個階段來考慮,即操作前、操作中、操作后??纱笾職w納為以下幾方面內容:首先在用戶操作前給予正確有效的引導;其次在重要的操作步驟給予用戶及時有效的提示;當用戶發生操作錯誤或失誤時及時為用戶糾錯并提供有效的解決方案;最后幫助用戶在錯誤發生后迅速回到正確狀態。


          3.1給予用戶正確有效的引導

          在用戶開始任務操作前給出用戶正確有效的提示,可減少錯誤操作的發生。需要注意的是,引導應盡量醒目且簡單易理解,確保能引起用戶注意,并且在用戶注意到后快速獲取信息,到有效的防錯幫助。

          產品常見的引導主要針對兩種情況。第一種是針對于新手用戶的功能介紹,不同于曾使用過產品的用戶或者高級用戶,新用戶首次使用產品的過程其實是一個學習的過程,此時需要讓用戶快速了解產品核心功能及主要的操作,幫助他們更快地上手。

          例如下圖導航APP新版本的新手引導【如圖1】,在用戶首次啟動產品時,產品用趣味性的圖文形式給用戶展示了打車、公交乘車、實時公交路線等功能的信息介紹,能夠讓新用戶快速熟悉核心功能,并在正式使用產品的過程中提升效率,降低出錯率。


          undefined

          圖1-導航APP新手引導



          第二種情況是針對產品上線的新功能或者較大的功能變動而設計的初次引導,產品的功能改動可能會是用戶產生不同程度的陌生感,適當的提示可幫助用戶快速熟悉新功能點或頁面信息的調整。初次引導常見的方式有很多種,包括:遮罩式引導、彈窗式引導、氣泡、浮層式引導等等。

          例如版本升級后的音樂APP【如圖2】,首頁使用情感化圖文設計加遮罩式的引導,可以有效將注意力集中到特定功能上,用戶進入頁面第一時間就注意到,確保了信息傳達的有效性。

          圖2-新版首頁的遮罩引導


          以上列舉的內容屬于狹義層面的引導,用戶尚處在被動接受引導的學習階段,在此階段引導的目的是提醒和防錯。從廣義的層面來講,我們可將對用戶的引導理解為”消減信息的不對稱性“,當用戶面對可影響其決策的因素時,給予用戶關鍵性的信息提示和說明,可以促使用戶做出正確的決策。

          針對需要加工時間的特殊品類,如烘焙蛋糕,京東到家在用戶決策的關鍵頁面和步驟展示時效提醒【如圖3】,避免用戶在完成訂單信息填寫或結算后才發現商品的配送時間超出用戶的期望,會給用戶帶來極為不好的購物體驗。


          圖3-京東到家頁面中的時效提醒



          3.2 給予用戶及時有效的提示

          當用戶進行一些如修改、刪除、覆蓋等不可逆操作時,系統需要在用戶做出這類操作指令后告知其產生的后果,讓用戶自主決策是否選擇繼續執行。在此階段的提示需要注意從以下兩個角度考慮:一是提示的方式,二是提示的時機。


          3.2.1提示的方式

          在用戶完成任務的操作路徑中,大部分產品首先會選擇以彈框的形式對用戶進行信息提示。彈框可以分為模態彈框和非模態彈框兩種大的類型【如圖4】,主要區別在于是否強制用戶進行交互操作。如何選擇合適的彈框形式對用戶進行提示,要依據提示信息的優先級和視覺權重的大小,同時要清楚不同類型的彈框適合的場景。


          圖4-彈框分類


          模態彈窗是較重的提示方式,在用戶進行重要且有風險的操作時可優先考慮使用。其優點是可以快速獲取用戶的視覺焦點,缺點是會打斷用戶當前的操作流程,用戶需要進行如單擊“確定”、“取消”、“關閉”按鈕等操作指令將該對話框關閉后才可繼續操作。

          而非模態彈框屬于輕量級的提示方式,其優點是不強制用戶進行交互操作,或者用戶依然可以在頁面進行其他操作。彈框出現一段時間后會自動消失,所以但不利于承載過多文字信息。非模態彈框對用戶造成的干擾較小,但也因此容易被用戶忽視。


          3.2.2 提示的時機

          給用戶的信息提示還有一點不可忽視的是反饋時機,應確保用戶在關鍵的操作步驟得到及時的反饋,因為滯后的反饋可能會導致用戶因為某一個環節的錯誤操作不得不重復操作一遍之前的流程,或者要修改關的一系列信息。

          【如圖5】中的登錄頁面,用戶登錄需要依次輸入手機號、密碼、圖片驗證碼,但如果用戶輸錯了密碼并不能馬上得到反饋,依然可以繼續填寫驗證碼,只有在全部信息填寫完之后點擊登錄,系統才會校驗密碼,并提示用戶密碼錯誤重新確認,用戶需要再次輸入密碼以及識別并輸入一次驗證碼。但如果系統驗證密碼可以提前到輸入圖片驗證碼的步驟之前,在用戶在得到密碼填寫錯誤提示后則可以停止操作后面的步驟,馬上修改密碼。


          圖5-登錄頁面中的提示滯后



          3.3 為用戶提供糾錯幫助以及解決方案

          一旦用戶出現錯誤或失誤操作的情況,系統需要為用戶及時提供糾錯幫助及有效的解決方案,以提高用戶操作的成功率。 
          關于糾錯文案的表達應注意盡量簡潔清晰、精煉準確,避免使用難懂的術語,不要在出錯信息中使用威脅或者責備的語氣。應主動識別用戶的情感狀況,語氣友好,讓用戶感受到“情感支持”,盡量為用戶緩解因操作失誤產生的挫敗、焦慮等負面情緒。 
          此外,糾錯信息內容不可僅描述場景,還需要向用戶反饋出錯原因,并且有明確的指向性,為用戶指出錯誤出在什么地方。例如在填寫部分內容較多的表單時【如圖6】,當證件號填寫出錯時,系統及時為用戶糾錯并用一條紅色的下劃線明確指出了信息填寫錯誤的位置,用戶可以立即定位并修改錯誤信息。 


          同時,盡量為用戶提供相應的解決方案,這樣可以提升糾錯信息有效性。BOSS直聘會因為手機儲存空間不足給用戶報錯,并且會告知用戶如何去管理儲存空間,以解決此問題【如圖7】。


          圖6-多行表單報錯頁面



          圖7-存儲空間不足報錯提醒 


          在產品設計中,為降低操作的出錯率,限制也是一種方式。在可能造成錯誤操作的入口適當設置操作障礙或者禁止操作,增加不可逆操作的難度,可以有效規避錯誤操作發生風險、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設計,可以有效避免用戶的誤操作。

          此外通過讓控件、動作、選項等變得可見,盡可能減少用戶記憶負擔,把需要記憶的內容作為輔助信息提供給用戶,或幫助用戶自動完成信息填寫也可以幫助用戶快捷高效地完成既定任務,降低出錯率。例如【如圖8】在信息填寫的步驟,可在用戶已復制的內容和上傳的圖片中自動識別姓名、電話、地址等內容,并在用戶確認后自動幫用戶填寫對應信息,為用戶大大節省時間和記憶成本,快捷高效地完成既定任務,降低出錯率。


          圖8-系統自動識別用戶復制文本中的姓名、電話、地址 


          3.4 幫助用戶在錯誤發生后迅速回到正確狀態

          在用戶執行操作后,應盡可能的為用戶保留已操作的信息,以便在發生錯誤或失誤后可撤銷之前的操作。針對一些流程較為復雜的操作任務,記錄用戶在每一步驟的操作信息,讓用戶可以從出錯的步驟上及時恢復到正確的流程上,或恢復到距離錯誤操作最近的步驟,可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當前的操作,在用戶對照片進行多編輯后頁面上會有回到上一步和下一步操作的按鈕,可讓用戶有機會恢復到上一步操作結果上。


          圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕


          總結

          以上是關于互聯網產品中容錯設計的概念、重要性以及設計方法的一些闡述和思考。在產品設計的實際應用的中,可以模擬使用場景,對目標用戶使用產品的真實操作進行行為觀察,分析對比產品設計的操作路徑與用戶真實操作的差別,發現并收集用戶可能發生錯誤或失誤操作的關鍵步驟,驗證產品的容錯能力是否能達到有效覆蓋。同時,也要通過產品數據的對比分析得出用戶操作錯誤及失誤的真實原因,指導并提升產品容錯能力的設計優化,進而不斷提升產品的可用性和易用性。


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

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


          文章來源:站酷   作者:DXC設計體驗中心

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

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





          淺談VUE防抖與節流的最佳解決方案(函數式組件)

          前端達人

          這篇文章主要介紹了淺談VUE防抖與節流的最佳解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

          前言

          有echarts使用經驗的同學可能遇到過這樣的場景,在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的,resize事件是連續觸發的這意味著echarts實例會連續的重繪這是非常耗性能的。還有一個常見的場景在input標簽的input事件里請求后端接口,input事件也是連續觸發的,假設我輸入了“12”就會請求兩次接口參數分別是“1”和“12”,比浪費網絡資源更要命的是如果參數為“1”的請求返回數據的時間晚于參數為“12”的接口,那么我們得到的數據是和期望不符的。當然基于axios可以做很多封裝可以取消上一個請求或者通過攔截做處理,但還是從防抖入手比較簡單。

          防抖和節流到底是啥

          函數防抖(debounce)

          解釋:當持續觸發某事件時,一定時間間隔內沒有再觸發事件時,事件處理函數才會執行一次,如果設定的時間間隔到來之前,又一次觸發了事件,就重新開始延時。

          案例:持續觸發scroll事件時,并不立即執行handle函數,當1000毫秒內沒有觸發scroll事件時,才會延時觸發一次handle函數。

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          function debounce(fn, wait) {
           let timeout = null
           return function() {
            if(timeout !== null) clearTimeout(timeout)  
            timeout = setTimeout(fn, wait);
           }
          }
          function handle() { 
           console.log(Math.random())
          }
          window.addEventListener('scroll', debounce(handle, 1000))

          addEventListener的第二個參數實際上是debounce函數里return回的方法,let timeout = null 這行代碼只在addEventListener的時候執行了一次 觸發事件的時候不會執行,那么每次觸發scroll事件的時候都會清除上次的延時器同時記錄一個新的延時器,當scroll事件停止觸發后最后一次記錄的延時器不會被清除可以延時執行,這是debounce函數的原理

          函數節流(throttle)

          解釋:當持續觸發事件時,有規律的每隔一個時間間隔執行一次事件處理函數。

          案例:持續觸發scroll事件時,并不立即執行handle函數,每隔1000毫秒才會執行一次handle函數。

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          function throttle(fn, delay) {
           var prev = Date.now()    
           return function() {       
            var now = Date.now()       
            if (now - prev > delay) {         
             fn()       
             prev = Date.now()      
            }    
           }   
          }   
          function handle() {     
           console.log(Math.random())  
          }
          window.addEventListener('scroll', throttle(handle, 1000))

          原理和防抖類似,每次執行fn函數都會更新prev用來記錄本次執行的時間,下一次事件觸發時判斷時間間隔是否到達預先的設定,重復上述操作。

          防抖和節流都可以用于 mousemove、scroll、resize、input等事件,他們的區別在于防抖只會在連續的事件周期結束時執行一次,而節流會在事件周期內按間隔時間有規律的執行多次。

          在vue中的實踐

          在vue中實現防抖無非下面這兩種方法

          • 封裝utils工具
          • 封裝組件

          封裝utils工具

          把上面的案例改造一下就能封裝一個簡單的utils工具

          utils.js

          1
          2
          3
          4
          5
          6
          let timeout = null
          function debounce(fn, wait) {
           if(timeout !== null) clearTimeout(timeout)
           timeout = setTimeout(fn, wait)
          }
          export default debounce

          app.js

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          <input type="text" @input="debounceInput($event)">
           
          import debounce from './utils'
          export default {
           methods: {
            debounceInput(E){
             debounce(() => {
              console.log(E.target.value)
             }, 1000)
            }
           }
          }

          封裝組件

          至于組件的封裝我們要用到$listeners、$attrs這兩個屬性,他倆都是vue2.4新增的內容,官網的介紹比較晦澀,我們來看他倆到底是干啥的:

          $listeners: 父組件在綁定子組件的時候會在子組件上綁定很多屬性,然后在子組件里通過props注冊使用,那么沒有被props注冊的就會放在$listeners里,當然不包括class和style,并且可以通過 v-bind="$attrs" 傳入子組件的內部組件。

          $listeners: 父組件在子組件上綁定的不含.native修飾器的事件會放在$listeners里,它可以通過 v-on="$listeners" 傳入內部組件。

          簡單來說$listeners、$attrs他倆是做屬性和事件的承接,這在對組件做二次封裝的時候非常有用。

          我們以element-ui的el-input組件為例封裝一個帶防抖的debounce-input組件

          debounce-input.vue

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          <template>
           <el-input v-bind="$attrs" @input="debounceInput"/>
          </template>
          <script>
          export default {
           data() {
            return {
             timeout: null
            }
           },
           methods: {
            debounceInput(value){
             if(this.timeout !== null) clearTimeout(this.timeout)  
             this.timeout = setTimeout(() => {
              this.$emit('input', value)
             }, 1000)
            }
           }
          }
          </script>

          app.vue

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          <template>
           <debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input>
          </template>
          <script>
          import debounceInput from './debounce-input'
          export default {
           methods: {
            inputEve(value){
             console.log(value)
            }
           },
           components: {
            debounceInput
           }
          }
          </script>

          上面組件的封裝用了$attrs,雖然不需要開發者關注屬性的傳遞,但是在使用上還是不方便的,因為把el-input封裝在了內部這樣對樣式的限定也比較局限。有接觸過react高階組件的同學可能有了解,react高階組件本質上是一個函數通過包裹被傳入的React組件,經過一系列處理,最終返回一個相對增強的React組件。那么在vue中可以借鑒這種思路嗎,我們來了解一下vue的函數式組件。

          關于vue函數式組件

          什么是函數式組件?

          函數式組件是指用一個Function來渲染一個vue組件,這個組件只接受一些 prop,我們可以將這類組件標記為 functional,這意味著它無狀態 (沒有響應式數據),也沒有實例 (沒有this上下文)。

          一個函數式組件大概向下面這樣:

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          export default () => {
           functional: true,
           props: {
            // Props 是可選的
           },
           // 為了彌補缺少的實例, 提供第二個參數作為上下文
           render: function (createElement, context) {
            return vNode
           }
          }

          注意:在 2.3.0 之前的版本中,如果一個函數式組件想要接收 prop,則 props 選項是必須的。在 2.3.0 或以上的版本中,你可以省略 props 選項,所有組件上的特性都會被自動隱式解析為 prop。但是你一旦注冊了 prop 那么只有被注冊的 prop 會出現在 context.prop 里。

          render函數的第二個參數context用來代替上下文this他是一個包含如下字段的對象:

          • props:提供所有 prop 的對象
          • children: VNode 子節點的數組
          • slots: 一個函數,返回了包含所有插槽的對象
          • scopedSlots: (2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數形式暴露普通插槽。
          • data:傳遞給組件的整個數據對象,作為 createElement 的第二個參數傳入組件
          • parent:對父組件的引用
          • listeners: (2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監聽器的對象。這是 data.on 的一個別名。
          • injections: (2.3.0+) 如果使用了 inject 選項,則該對象包含了應當被注入的屬性。

          vm.$slots API 里面是什么

          slots用來訪問被插槽分發的內容。每個具名插槽 有其相應的屬性 (例如:v-slot:foo 中的內容將會在 vm.$slots.foo 中被找到)。default 屬性包括了所有沒有被包含在具名插槽中的節點,或 v-slot:default 的內容。

          slots() 和 children 對比

          你可能想知道為什么同時需要 slots() 和 children。slots().default 不是和 children 類似的嗎?在一些場景中,是這樣——但如果是如下的帶有子節點的函數式組件呢?

          1
          2
          3
          4
          5
          6
          <my-functional-component>
           <p v-slot:foo>
            first
           </p>
           <p>second</p>
          </my-functional-component>

          對于這個組件,children 會給你兩個段落標簽,而 slots().default 只會傳遞第二個匿名段落標簽,slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots(),因此你可以選擇讓組件感知某個插槽機制,還是簡單地通過傳遞 children,移交給其它組件去處理。

          一個函數式組件的使用場景

          假設有一個a組件,引入了 a1,a2,a3 三個組件,a組件的父組件給a組件傳入了一個type屬性根據type的值a組件來決定顯示 a1,a2,a3 中的那個組件。這樣的場景a組件用函數式組件是非常方便的。那么為什么要用函數式組件呢?一句話:渲染開銷低,因為函數式組件只是函數。

          用函數式組件的方式來實現防抖

          因為業務關系該防抖組件的封裝同時支持 input、button、el-input、el-button 的使用,如果是input類組件對input事件做防抖處理,如果是button類組件對click事件做防抖處理。

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          const debounce = (fun, delay = 500, before) => {
           let timer = null
           return (params) => {
            timer && window.clearTimeout(timer)
            before && before(params)
            timer = window.setTimeout(() => {
              // click事件fun是Function input事件fun是Array
             if (!Array.isArray(fun)) {
              fun = [fun]
             }
             for (let i in fun) {
              fun[i](params)
             }
             timer = null
            }, parseInt(delay))
           }
          }
          export default {
           name: 'Debounce',
           functional: true, // 靜態組件 當不聲明functional時該組件同樣擁有上下文以及生命周期函數
           render(createElement, context) {
            const before = context.props.before
            const time = context.props.time
            const vnodeList = context.slots().default
            if (vnodeList === undefined){
             console.warn('<debounce> 組件必須要有子元素')
             return null
            }
            const vnode = vnodeList[0] || null // 獲取子元素虛擬dom
            if (vnode.tag === 'input') {
             const defaultFun = vnode.data.on.input
             const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
             vnode.data.on.input = debounceFun
            } else if (vnode.tag === 'button') {
             const defaultFun = vnode.data.on.click
             const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
             vnode.data.on.click = debounceFun
            } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-input') {
             const defaultFun = vnode.componentOptions.listeners.input
             const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
             vnode.componentOptions.listeners.input = debounceFun
            } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-button') {
             const defaultFun = vnode.componentOptions.listeners.click
             const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
             vnode.componentOptions.listeners.click = debounceFun
            } else {
             console.warn('<debounce> 組件內只能出現下面組件的任意一個且唯一 el-button、el-input、button、input')
             return vnode
            }
            return vnode
           }
          }
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          <template>
           <debounce time="300" :before="beforeFun">
            <input type="text" v-model="inpModel" @input="inputChange"/>
           </debounce>
          </template>
           
          <script>
          import debounce from './debounce'
          export default {
           data() {
            return {
             inpModel: 1
            }
           },
           methods: {
            inputChange(e){
             console.log(e.target.value, '防抖')
            },
            beforeFun(e){
             console.log(e.target.value, '不防抖')
            }
           },
           components: {
            debounce
           }
          }
          </script>

          原理也很簡單就是在vNode中攔截on下面的click、input事件做防抖處理,這樣在使用上就非常簡單了。

          自定義指令 directive

          我們來思考一個問題,函數式組件封裝防抖的關節是獲取vNode,那么我們通過自定義指令同樣可以拿到vNode,甚至還可以得到原生的Dom,這樣用自定義指令來處理會更加方便。。。。。。


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

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


          轉自:腳本之家

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

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

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

          vue 定時器常規操作及其停止

          前端達人

          export default { data() { return { min: 1, max: 10, timer:null //定時器名稱 } }, mounted() { this.add(); }, methods: { add() { let _this = this; _this.timer = setInterval(function(){//定時器開始 _this.min++; if(_this.min == _this.max){ clearInterval(_this.timer);// 滿足條件時 停止計時 } },1000) }, } };



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

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


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

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

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



          什么是數據驅動設計?

          資深UI設計者

          數據推動設計創新是一個新穎而重要的議題。對于設計師來說,理解并學習數據驅動設計能更好地幫助我們去進行設計決策。本文結合實例探討了數據是如何影響設計決策,解釋了數據驅動和數據響應的區別,并介紹了多種數據收集的方式。

          在這篇文章中,我們將深入探討什么是數據驅動設計,以及為什么它能更好地推動用戶體驗的提升 。與此同時,我們還將了解為什么它能幫助我們做出更實際的決策。

          作為設計師,我們需要接受和擁抱現實世界中的數據指標,并利用它們的神奇力量來調整我們做事的方式?!?Jared Spool

          我們當前面臨著來自用戶交互的海量數據 。雖然有大量工具可以幫助我們了解所設計的產品,但是我們是在為人類設計產品。因此,作為設計師,我們需要分析人類的行為,并根據對人類交互的理解做設計。這將有助于我們基于數據做出更好的設計決策。

          我們從用戶那里收集的數據可以幫助我們做出更好的設計決策 。通過分析和理解數據,我們可以設計出更好的用戶體驗。基于交互行為中定性和定量研究的結果,我們能更好地進行設計決策。

          數據幫助我們探尋用戶如何使用我們的產品,以及設計師如何基于數據為用戶優化使用體驗。

          我們收集的數據可以從四個維度幫助我們。

          什么是數據驅動設計?收下這篇入門科普!

          △ 數據將從 4 個維度幫助設計師

          什么是數據驅動的設計?

          設計是以累積的數據研究結果為支撐的 。在設計過程中,設計決策是基于數據和用戶行為研究的。精細的用戶體驗設計包含對體驗本身的評測研究。而只有數據才能映射出有價值的評測結論。用戶的行為和反饋有助于產品設計師驗證其發現、假設和評測結果。

          評測數據的整理與分析能揭露重要信息?!?Peter Drucker.

          這些數據可以幫助產品團隊了解其目標用戶,發現用戶痛點,發掘新的趨勢,支持數據驅動的設計,并確保團隊前進方向的正確性 。用戶數據可以直接推動商業成果的提升。通過數據驅動設計,以提升用戶體驗,被證實是切實可行的方法。

          為什么要進行數據驅動設計?

          我們設計師在設計產品的過程中,會對用戶進行調查、研究和觀察。設計產品的過程中,唯一能驗證假設的就是數據 。如果我們在沒有任何數據驅動的情況下進行研究,憑借直覺或經驗來做決策,就很有可能把錢浪費在無效的或一文不值的設計改動中。

          產品的性能可以通過合理使用、驗證和分析用戶數據而得到提升,它也能直觀地反映在用戶數據中。即使是世界上最好的設計師也無法預測用戶的需求。數據驅動的設計是一個向用戶學習的過程,它能確保用戶的問題得到解決。滿足用戶需求是產品成功的首要條件 ,而這一切都需要數據來驅動設計迭代。

          數據驅動與數據響應設計

          上述術語來源于在 Rochelle King、Elizabeth Churchill 和 Caitlin Tan 所著的《數據驅動設計(Designing with Data)》一書。本書有助于我們理解和闡明有關數據驅動設計的不同術語,并將其與數據響應設計和數據感知設計進行對比 。

          什么是數據驅動設計?收下這篇入門科普!

          △ 利用數據進行設計 —— King, Churchill, & Tan

          數據驅動和數據響應是兩種不同的方法 。它們都是以數據為基礎,產品團隊的每一個決策都是由數據評估和驅動的。數據驅動的重點在于數據輔助產品優化和效率提升。數據響應讓我們在數據的使用上擁有更寬闊的發展方向 。我們能處理的也不僅僅是量化的數據。不同體驗的 A/B 測試或結構化的可用性測試在數據響應中可能會失效。

          數據感知讓我們理解數據收集上的廣泛性和局限性 。我們可以根據不同的問題來判斷哪種方法是最合適的。有數據感知能力的團隊可能會發現,基于利益相關者研討會、用戶訪談、甚至 A/B 測試研究結果而做出的決策,具有同等的價值。

          麻省理工學院數字商業中心的研究表明:“在通過數據驅動決策方面,處于行業領先地位的前三分之一的公司,其平均生產效率比競爭對手高 5%,盈利能力高 6%。“

          我們發現增加評測的事物數量或提高評測的保真度,實際上并不能提升結果的準確性。數據結果并不因性能的優劣而發生鮮明的改變。它只能揭示更深層次的復雜性—— 性能優劣牽扯到更多的東西。因此數據實際上只是一種衡量標準,我們仍然需要依靠直覺。我們仍然要對成因的重要程度做出判決?!?Jon Wiley(谷歌沉浸式設計總監)

          如何收集數據?

          什么是數據驅動設計?收下這篇入門科普!

          △ smart UX 的數據可視化

          我們有很多收集定性和定量數據的方法。很多用戶體驗從業者認為數據就是數字,但這是一個誤區,是一個謬論。為了用數據驅動設計,我們需要定性和定量數據 。定量數據會告訴你,用戶在使用我們的產品時采取了哪些行為。而定性數據會告訴你,他們為什么這么做,以及更重要的 —— 他們對整體體驗的感受。所以,我們在制定設計決策時需要收集這兩種數據。

          1. 定量數據收集法

          定量數據的數據類型是數字、人物、事物、時間、地點。定量數據能顯示程度 ,而不能說明原因 。我們能從 Google Analytics、Google Tag Manager、Google Optimize 和其他測量工具(例如:Hotjar、Crazy Egg、Optimizely、Usertesting)中獲取許多關于網站或應用程序使用情況的定量數據。

          A/B 測試

          A/B 測試也被稱為 分組測試 。Hubspot 將 A/B 測試定義為:

          在(一個)實驗中,’劃分’ 出多個測試群體,測試一系列變量,并確定哪個變量表現更好。換句話說,你可以向一半的測試者展示版本 A,向另一半的測試者展示版本 B。

          在進行 A/B 測試時,最重要的是盡可能確保每次只改變一個變量,并且使對照組和實驗組的人數相同。你可以向我們一半的測試者展示 A 版本,向另一半展示 B 版本。測試的主要目標是在同等條件下,對不同變量進行比較 。

          解析

          通過解析,我們可以知道誰來到了我們的網站,他們是如何到達那里的,他們在那里停留了多長時間,他們點擊了什么。這類數據能有效整理出很多價值的指標,比如用戶的平均會話時長、退出率等。如果你想讓應用程序或網站轉化率得到提升,建議從用戶流量大的頁面開始解析,因為它們能讓你更快地收集到有價值的數據。

          我們還可以使用眼球追蹤工具,比如熱力圖。熱力圖通過眼球追蹤技術,了解用戶在屏幕上所關注的位置 。當來自多個用戶的熱力圖展示出類似的模式,說明網站或應用程序更新的內容模塊或設計迭代是有價值的。

          調研

          用戶體驗調研是用戶體驗研究中,定量和定性數據的重要來源。

          一個好的調研需要精心設計好問題,確保問題沒有引導性,并且目的明確。我們應該盡量控制問題的數量(不超過 10-15 個),以免用戶中途放棄調研問卷。

          2. 定性數據收集法

          定性數據能說明原因和發生過程 。為什么不同組用戶采取不同的行為?為什么不同的內容讓用戶在網站上停留的時長不同?定性數據提供了一個視角,不僅幫助我們了解發生了什么,還能讓我們了解事件發生的原因以及過程。我們經常通過用戶畫像、體驗旅程圖或移情圖來收集定性數據。

          有了清晰的定性數據,我們可以創造更好的用戶體驗,更有效地服務于用戶。

          用戶旅程 / 流程圖

          為理解用戶與產品之間的交互,創建用戶使用模型是非常有幫助的方法 。從用戶流程圖中收集到的信息有助于確定潛在的薄弱環節,為 A/B 測試或用戶訪談的深入調研打下基礎。

          競品分析

          這是找出競品弱點的附加方法 。競品分析通過調研競品來找出類似產品的優勢、劣勢或有待改進的地方。

          在進行競品分析時,必須謹慎。一味地模仿競品并不是一個有效的解決方案。相反,最好將競品分析作為獲取靈感的手段。通過對競品的理解,我們可以取長補短。

          用戶訪談

          用戶訪談是收集用戶定性數據的有效方法 。它通過開放式和封閉式的問題,較好地定位到用戶核心問題。同時,我們也要限制訪談對象的數量。電話或面談能夠得到更深入的數據。

          社交媒體和用戶反饋

          社交媒體反映了用戶對體驗的期望 。通過了解用戶共同的不滿,能夠確定產品需求的優先級。了解用戶對產品的評價和反饋,也能獲得更多的相關信息。

          收集數據的方法需要根據項目的內容和需求而變化 。我們可能不需要去研究數據,也不需要去做運算,就能高效利用數據以推動設計決策。但作為一個產品設計師,在設計用戶體驗時,我們都要利用現有的工具對設計進行迭代和評估。因此,我們不應該只是基于數據進行盲目的決策,而是要對自己所做的決策知情知理。

          無論我們的目標是什么,數據驅動設計都有助于 提高產品性能,提高轉化率,滿足用戶需求 。通過數據驅動設計,我們的設計能得到更好的投資回報率。這也有助于提高產品整體的使用率和復用率。



          文章來源:優設   作者:TCC翻譯情報局

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

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



          物流運輸系統——整車運輸系統搭建

          資深UI設計者

          隨著互聯網科技的不斷發展,如今各行業都逐漸智能化,物流運輸行業也不斷不安化發展,搭建了運輸系統,方便后續操作管理;本文作者分享了關于目前市場整車運輸行業的業務流程以及系統搭建方案,我們一起來了解一下。

          針對不同的貨物重量,大件物流公司將自身的產品布局為小票、大票、零擔、整車。物流公司利用自身平臺的影響力,通過整合上下游的車輛資源,為客戶提供全鏈路的運輸服務。

          本文詳述了目前市場整車運輸行業的業務流程以及系統搭建方案。整車運輸可以理解為針對B2B的客戶,對原材料、零配件、商品這些大宗貨物進行干線運輸、倉間調貨等,系統搭建則需要建立客戶、平臺、車隊之間的貨物流、信息流和資金流,從而達到互利共贏的結果。

          一、描述業務場景

          如果你是水果供貨商,你需要將整車的農場的水果從原產地運輸到千里之外的城市銷售。你對運輸過程有哪些需求?

          • 時效快;水果屬于生鮮類,銷售價格與其新鮮程度密切相關,作為經銷商,自然是希望越快配送到越好。時效最快的公路運輸就是點對點直發,中途無經停。
          • 價格合適;在運輸時效達到的情況下,成本自然是越低越好??梢酝ㄟ^“貨比三家”的方案找到低價的車輛,多找幾個車隊談價格,選擇價格最低的一家去承運。
          • 運輸安全;為保證貨物的安全,希望全程能夠監控車輛的位置、路況、車鎖情況。對于冷藏運輸,還有溫度監控的需求。
          • 資金墊用;干線貨運的價格數萬元,對于現金流不足的小B端供貨商,希望拿到下游經銷商的回款之后,再支付對應的運輸成本。

          對于車隊,希望平臺給他提供什么?

          • 提前訂車;由于政策管控和場地限制,貨車一般都停留在城市近郊的停車場,當收到運輸任務時,才前往客戶處接貨;并且,提前預定用車需求,有助于車隊調配車輛,提高車輛的載貨率。
          • 穩定的用車需求;車隊入駐平臺之后,希望有訂單量的保證,最好能夠讓自己養活整個車隊。
          • 收發貨區域相對固定;每個車隊都有自己的承運范圍,超范圍運輸不屬于自己的業務范疇。
          • 資金回款;車隊的指出包括燃油費、高速費、司機工資、車輛貸款以及保養費,快速回款有助于維持滋生的收支平衡。

          PS:誰都想資金能夠進得快,出得慢,這個矛盾點無法克服,哈哈,那就只好誰強勢誰說了算。

          好了,現在我們知道了客戶需求,現在可以針對每個客戶需求,思考如何搭建這個整車運輸平臺的功能、模塊以及詳細流程。

          二、流程以及各模塊的交互關系

          物流運輸系統--整車運輸系統搭建

          圖1 系統流程圖

          三、客戶端

          公司有維護客戶關系的CRM(Customer relationship management system,客戶關系管理系統),涵蓋了客戶簽約、注冊、維護、退出的全流程??蛻糇詴r,需要包含三個層面的信息:基本信息、業務信息、財務信息。

          1)基本信息:主賬號和子賬號、客戶名稱、客戶編碼、所屬行業、統一社會信用代碼、法人、注冊資金、注冊時間、客戶經理等。

          2)業務信息:作用是管控與公司合作的業務范疇=以及計費方式=等。例如:使用的產品范疇、合作的區域等。我將計費方式歸屬到業務信息而不是財務信息,原因是,我們產生業務單據時,每條運單就能夠前置產生的應收流水,而不必等流轉到結算環節。

          3)財務信息:賬期、結算方式、開戶行、銀行賬號、發票抬頭、發票類型等。

          CRM系統能夠幫助企業鞏固老客戶的合作關系,通過分析客源結構,有助于幫助企業預測市場的發展需求和尋找潛在的客戶群,從而夯實企業在行業內的地位。我司屬于行業的龍頭企業,比一套完備的CRM系統,這個我在其基礎上開發新需求,然后直接調用主數據就好了。

          四、采購競價

          采購競價是交易過程的核心環節,競價是目的是為了給客戶提供高質量的價格,從而提高交易成功的可能性。有了承運商報價之后,平臺按照計費規則疊加一定的傭金,向客戶端推送報價金額。為了保證價格質量,系統在設計之初,就給自己定了幾個關鍵指標:

          • 首次報價時間:首次報價時間越短,就能越快響應客戶需求,相對其他競爭對手就占有主動地位;
          • 平均報價次數:平均報價次數越多,競價就越充分,價格相對越低;
          • 報價率:為塑造平臺的能力,我們要保證100%的訂單都能收到報價;每日輸出采購過程的報表,分析每個車隊的合作情況,采用督促、約談、限制單量、懲罰等方式引導其配合交易。

          在設計系統方案時,邏輯處理上涉及的細節較多,需要抓住主線進行頂層設計。

          我選主線是競價狀態,對于每個競價請求,本質上都是收到在某些外力輸入(主動報價、取消、失效等),觸發一定的邏輯規則,輸出系統所預設的結果(競價狀態、價格等)。

          我設計的競價狀態機如下:

          物流運輸系統--整車運輸系統搭建

          圖2 競價狀態機

          五、訂單管理

          采購完成之后,信息流到訂單管理系統模塊,訂單的全生命周期開始了。訂單管理是整個業務流最核心的內容,只有產生訂單,才能有收入并且盈利,才能證明我們開拓了市場。訂單連接了客戶和車隊,平臺起到中轉和調度作用,讓信息、貨物和資金都流動起來,只有流動才能實現價值增長。

          1)計價模型:用戶確認下單時,系統會先調用計價模塊,疊加傭金,計算應收的客戶運費。

          2)訂單審核:對于惡意刷單、通過應收和應付賬期差占用平臺資金的行為,系統需要及時識別,避免問題發生。

          3)增值服務:如果裝卸、吊裝等此類增值服務,還涉及到拆單的處理。主訂單發送給中標的車隊,然后調度中心會將子訂單分配給具有增值服務能力的供應商去承接任務,系統要做到應收合單計費,應付拆單計費。

          4)在途監控:為了保證運輸時效,對于可能會晚點到達的車輛,系統需要及時預警,按照不同的預警等級向對應的運作人員發起提醒。越來越多的客戶期望能實時查看在途的位置,目前常用的軌跡采集方式有三種:司機app、車載北斗模塊、手動安裝GPS定位盒。每種工具的都有其優缺點,大家可以按照自己的需求選擇。另外,對于高價值的貨物,如果客戶有視頻監控、路寬查看的需求,可以購買并安裝一些IoT的終端設備。

          訂單狀態記錄其生命周期,幾乎所有的業務系統都會涉及狀態枚舉以及狀態翻轉的邏輯,這也是產品經理的基本功,合理的狀態邏輯有助于系統后續擴展,以及避免意料之外的BUG。

          競價狀態下游對接訂單的運輸狀態,運輸訂單的狀態主要有以下幾種類型:

          • 審核中:多數訂單會跳過此狀態,及時識別高風險的訂單,啟動OA流程,流轉到相關干系人節點去審核。審核完成之后,才能進行下一步。
          • 待付款:客戶可選用月結記賬以及散單現付的方式進行,現付又包括現金支付、掃碼支付、信用卡支付、銀聯支付。注意設置支付的有效期,超時則自動取消。支付完成之后,系統會下發運輸任務給車隊。
          • 待發車:客戶下單之后,司機發車之前。司機在手機APP上啟動運輸任務,上傳操作信息到后臺系統。為保證運輸過程的真實性,防止刷單,需要校驗任務啟動的地址與客戶下單地址是否符合。
          • 運輸中:司機發車之后,到達目的地之前。此過程需要實時采集司機的位置信息,客戶可在自己的終端查看。
          • 已到達:運輸完整,司機到達目的地。此時開始計算應付的費用,向結算管理模塊推送應付流水信息。
          • 已取消:客戶發車之前取消了訂單。這里系統沒有允許中途取消訂單,是因為這涉及到設置放空費的收取規則,以及需要客戶、司機、平臺多方審核才能生成此扣費單,對于研發和運營都是麻煩事,所以未建立線上化流程,而是采用又客服統一處理的方式。




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

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

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


          格式塔之接近原則,如何幫助信息易理解?

          seo達人


          格式塔心理學誕生于20世紀初,指出人們的視覺感知具有整體性,并且總體大于個體的總和。

          也就是說,我們不會只看局部或者個體,也是需要重新組織所看到的視覺信息來理解世界。如果不這樣做的話,我們的大腦就會不堪重負。就像下圖我們看到的是一個笑臉,而不會說是31個點。格式塔心理學家將組織信息的方法抽象為格式塔原則。

          圖片

          格式塔原則是非常重要的設計理論,因為信息的組織也就意味著信息的接收和理解,而信息易理解正是設計師的核心任務。

          其中,格式塔原則中的接近原則是最常見的原則之一,下面我將提供一些例子來幫助大家理解這個原則。

           

          01.接近原則

          接近原則是指:將相關物體的物理位置靠近,這樣一來,相關的物體就會被看作凝聚為一體的一個組,而不是一堆彼此無關的片段。
          在左側的圖片中,你會看到一組圓圈;在右側的圖片中,你會看到三組圓圈。而它們唯一的區別就是圓圈之間的距離(接近度)。
          圖片
          接近原則比其他的格式塔原則更強。即使物體的形狀和顏色都不相同,只要距離更近,他們仍然會被認為是一組。因此,接近性原則至少是比相似性原則更強。
          圖片
          接近原則還能夠直接影響用戶的視覺動線,因為元素的物理距離不同,你會在左圖縱向瀏覽,看到的是列,右圖橫向瀏覽,看到的是行。
          圖片

           

          02.接近原則的重要性

          接近原則對許多設計師而言,絕對算一個沒有專門了解,但卻經常使用的原則。我認為,了解接近原則背后的原理總是有幫助的。
          比如,我們可以更好地進行設計推理并向其他人解釋設計問題。通過接近原則,可以快速地幫助開發同學理解,為什么卡片之間的水平距離是5px,而垂直距離是15px。
          并且當我們感覺設計稿奇怪卻不清楚原因時,格式塔原則也是一個很好的自查清單。

           

          03.印刷品案例

          字體與段落

          接近原則能夠直接影響文本閱讀,使用好接近原則可以幫助用戶更快速地理解文本。
          比如,標題前后需要設置更大的空間,哪一邊的內容距離標題更近,則會認為該內容和標題聯系緊密。
          行高是另一個例子,行與行之間的空隙必須大于單詞與單詞之間的空隙,并且空隙要足夠小才能形成一個緊密的段落。英文字母之間的間距也是如此,字母之間的間距要足夠寬,才可以區分出字母,但也要足夠窄,字母們才能夠形成單詞。
          圖片

           

          雜志布局

          盡管如今是電子信息的時代,但我們先來看看印刷品的布局仍是有意義的。印刷品的布局是我們進行網頁設計的基礎,它能夠幫助我們更輕松地理解這些原則。
          在雜志版面中,圖片分布在頁面的不同位置,我們只需要判斷文本距離哪一個圖片更近,便可以知道文本在描述哪一個圖片。
          圖片

           

          名片布局

          我們來看一下這兩個名片,左側名片上的每一項看上去都與其他項沒有任何關聯。這樣一來,我們不知道從哪里開始閱讀名片,也不知道何時才算結束。
          如果對名片的距離做一點調整,便形成了一個個組。我們會清楚的知道信息的閱讀順序,能夠更容易更快速地找到信息。另外,信息之間的空白也會變得更有組織。
          圖片

           

          04.網站案例

          現在的網站信息非常豐富,組織信息也變得更加重要。

           

          菜單

          菜單通常位于網頁的左側或者頂部。在頂部菜單中,菜單之間保證充分的留白更加符合現代審美。但一定要注意的是,要確保菜單與下方內容的距離,否則,很難辨別內容和菜單本身。

           

          項目組

          一個項目組通常是由圖片、標題和文本內容等不同部分組成,為了讓他們看起來是一個項目組,元素之間的距離不能太大。

           

          卡片

          卡片在如今的網頁中是一個常見元素,當有頁面中存在不同的卡片組時,一定要確保組內卡片的空間小于卡片組之間的空間。
          圖片

           

          表單

          表單同樣是一個常見頁面,比如注冊或登錄等都需要表單,針對表單我專門寫過兩篇文章,分別是組織內容和標簽細節。
          比如,在頂對齊表單中,我們可以通過調整元素之間的距離,明確那個標簽/描述屬于哪一個字段,這將會讓表單更易于使用。
          圖片

           

          列表

          每個app總會有一些列表相關的頁面,因此學習如何設計好它們是非常有價值的。
          列表設計的其中一個關鍵點就是,如何區分各項目。我們可以使用空間距離取代項目間的線條進行區分,這樣做可以減少視覺噪音。我們需要注意的是,確保項目之間的空間明顯大于組成元素的空間。
          圖片
          接近原則是一個非常棒的設計原則,可以幫助設計師組織信息。
          雖然許多設計師已經在無意識地使用著接近原則,但是如果進一步了解它,它或許是一個更加強大的設計工具。尤其是在復雜的屏幕中,我們更加需要接近原則幫助我們組織信息,減少其他元素的視覺干擾。

           

          原文地址:Medium

          譯文地址:栗子設計喵 (公眾號)

          作者:Lukas Oppermann

          譯者:栗子

          轉載請注明:學UI網》格式塔之接近原則,如何幫助信息易理解?


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

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



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

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



          【大咖專訪】大老虎:保持平常心做好每個字

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

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


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



          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 三孩政策暗示老齡化時代來臨

          前不久國務院發布國家開放了“三孩政策”也看出來國家針對人口老齡化表現所作出的國家方針的決策?;貧w我們所在的互聯網行業,也許慢慢的互聯網的原住民不再是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界面設計賞析(二十五)



          日歷

          鏈接

          個人資料

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

          存檔

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