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

          體驗度量是什么?

          簡單來說,用戶體驗度量是通過一套測量體系量化用戶體驗的過程。

          盡管體驗很難被科學客觀地分析,但將度量這種手段運用于體驗的管理是非常有必要的。引用管理學大師彼得?德魯克的一句話:If you can’t measure it, you can’t improve it(如果你無法度量它,你就無法改進它)。我們相信更好地衡量體驗設計的價值,可以幫助我們更好地實現產品價值、用戶價值、商業價值,甚至是社會價值。

          為什么要做體驗度量?

          下面我們再來分析一下做好體驗度量能幫我們解決哪些難題,首先從我們遇到的幾個問題出發。

          概念過于抽象主觀:設計師們提出的體驗優化方案被認為過于主觀,難以得到直接證據支持,各部門很難達成共識,方案難以推進落地。怎么辦?

          影響因素復雜多元:現有的 NPS 滿意度調研反映了每個季度的商家整體滿意度,但是團隊面對 NPS 結果無法直接定位問題,難以進行有效的診斷和提升。怎么辦?

          問題難以閉環管理:現有的 VoB 系統能夠收集到一定數量的商家反饋問題,但是這些零散的應急需求很難被高效地納入體驗優化項目。怎么辦?

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          相信大家或多或少遇到過類似的問題,雖然大家有著“以用戶為中心”提升“用戶滿意度”的共同目標,但在過程中具體該怎么做,仍然是抽象模糊的。體驗度量恰恰是解決這些問題的關鍵策略,我們希望通過體驗度量幫助京麥達成以下目標做出更好的設計,創造更大的價值。

          目標一:讓商家體驗從“抽象”到“具象”,從“玄學”到“科學”,定義一套被各部門認可的衡量標準;

          目標二:與商家建立更加直接的聯系,從商家角度直接洞察需求,更有針對性地定位優化問題;

          目標三:更好地實現體驗設計價值及體驗設計體系化,與各部門建立合作關系,長期監測跟進優化。

          怎么做體驗度量?

          體驗度量一般可以分為五個步驟:拆指標、采數據、做診斷、再優化、續監測。

          在京麥一期度量中,我們主要完成了前三個步驟,后期我們會嘗試推進后兩個步驟,同時也將繼續完善現有的度量模型和調研方式。

          1. 拆指標

          首先我們要明確這個產品的用戶體驗由哪幾部分構成,就比如評價一個人的英語水平如何,我們可以從聽、說、讀、寫這四方面進行評價。

          通過比對分析業界相對成熟的指標模型,我們發現各個模型有不同的切入點,比如 PULSE 模型以網頁產品商業化為導向,HEART 模型以用戶為核心,PTECH 模型更適合企業級產品,UES 模型更適合技術產品等。涵蓋的維度多種多樣,有的維度是產品相關指標,比如留存率、日活用戶數、轉化率,有的維度是用戶側反饋,如 NPS 凈推薦值、滿意度。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          深入分析這些維度,我們發現幾乎所有指標都可以被分為系統表現、用戶行為、用戶感受這三類。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          有了前面提到的三大目標和參考指標,我們開始分析京麥移動端的現有情況。

          由于京麥在現在這個階段已經有了相對穩定的產品形態,市場上也有了同類型的產品。因此,我們首先把完整性作為反映產品系統表現的重要維度,也就是商家需要的、別人家都有的,京麥“有沒有”?

          第二項維度是參與度,店長是否會通過移動端來經營管理店鋪呢?客服是否會通過移動端來答復客戶呢?也就是各類角色“用不用”。

          而作為一款 B 端產品,它的使用效率和易用性是至關重要的,我們要關注用戶的行為,也就是商家們是否能“又快又好地使用”。

          最后一項指標是滿意度,它代表了用戶的主觀整體感受,這也是所有指標中涵蓋面最廣的一項??偟膩碚f,商家們是否認為這個產品“令人滿意”?

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          TIPS:體驗度量具有非常強的業務屬性,不同的業務類型、業務階段、業務規模、資源情況都會有與之相配的不同的合適的度量方式,適合自己的指標才是好指標。

          2. 采數據

          有了度量指標之后,我們需要通過從不同渠道去收集盡量全面的數據。還是拿英語舉例,我們該如何去給聽、說、讀、寫這四部分打分呢?可以通過聽力、口語、閱讀、寫作的統一考試打分,可以讓老師根據平時上課的表現打分,也可以讓同學互相評價打分。

          那么度量的數據也可以有多種來源,比如通過用戶訪談得到用戶主觀使用感受(定性數據),通過問卷調研得到滿意度或是易用性評分(定量數據),通過后臺數據得到用戶的行為數據(定量數據)。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          基于移動端京麥現在所處的發展階段階段,我們重新明確了我們的調研目標:

          • 清晰與競品差距與機會點;
          • 關注核心模塊的使用體驗;
          • 了解用戶的主觀感受。

          因此,我們在這個階段實施了用戶訪談、問卷調研和競品分析三種不同的調研活動,收集了大量的定性數據及定量數據。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          競品功能完整性對比分析

          調研目的

          通過分析對比現在行業內同類產品的功能,計算京麥功能的完整性得分。以千牛、拼多多、京麥三個平臺六個端為分析對象,測試各一級、二級、三級功能的支持情況。

          調研方法

          確認競品后,通過使用各家產品的具體功能,拆分一級、二級、三級或更細節的功能,填寫完整性分析表;

          計算完整性得分(京麥具體計算以二級功能為標準,分為六個不同等級,分別對應六個分數)。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          TIPS:可以通過與產品同學的溝通,共同完成各級功能模塊及相應支持程度的定義;后期可以納入客觀數據指標,結合用戶的參與情況、平臺滿意度計算權重,重新定義重要程度、支持程度;以一個季度為統計周期,及時跟進新上線功能。

          線上用戶訪談

          調研目的

          與用戶直接對話,較為直接、細致地了解不同角色用戶如何使用各功能,以及在使用過程中經常遇到的問題,了解他們的使用習慣和實際需求。獲得用戶畫像、用戶使用感受、用戶問題反饋等定性數據。

          調研方法

          用戶招募:提前 1 周設計招募問卷,并在 QQ 商家群投放、回收,篩選目標用戶,提前打電話確認訪談意向;

          前期溝通:添加商家的微信,了解商家的基本信息,預約商家參與時間,并要求商家提前在手機/電腦上安裝騰訊會議;

          訪談大綱:根據具體想要了解的功能模塊、用戶群體等,撰寫訪談大綱,包括開場白、基本信息、具體問題、觀察操作提問、延展問題、結束語等;

          實施訪談:提前預約會議室,打印訪談記錄表。需要至少一位主持人、一位觀察記錄員,訪談時長控制在 30-45 分鐘左右;

          訪談結果梳理:每場訪談結束,參與者進行快速回顧總結,截取錄屏中關鍵段落,提煉對應的用戶行為、態度、問題、需求等信息,逐步建立猜想,并在后續的訪談中進行驗證、修改;每輪訪談結束,對共性問題進行分類歸納,梳理電子化在線表格;撰寫訪談報告(可能包括用戶體驗地圖、用戶畫像等);

          后續跟進:郵寄周邊禮物,并建立商家體驗群,維護長期合作關系。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          TIPS:提前爭取更多利益點吸引商家參與;提前明確目標用戶類型,與產品側配合利用線上使用數據定位篩選訪談用戶(如使用經驗、使用頻率、經營類目等);提前與受訪者溝通,可以讓商家準備反饋問題列表,與商家反復確認時間;確認用戶接受上訪談使用的設備及場景,對可能出現的意外情況做預案;訪談后,在企業版微信建立相對穩定的商家關系,以便回訪;訪談信息整理需要更多人同時參與,盡量在訪談當天或次日完成轉錄、問題分類,及時補充假設,在后續訪談中驗證/推翻;及時從錄屏中截取關鍵段落、截圖,便于舉證。

          線上問卷調研

          調研目的

          以更大樣本量驗證訪談結論,同時通過對大量用戶的主觀打分、行為習慣的分析,得到對產品整體的使用評價,直接獲得用戶角度滿意度、參與度、易用性得分。

          調研方法

          問卷設計:提前 1 周開始設計問卷,根據前期訪談結果,有針對性地設計各模塊、各角色對應問題;

          問卷投放:針對不同端的問題,分為 2 個問卷,分別投放;(如果需要長期追蹤,建議以季度為單位,以京麥為例,緊跟平臺滿意度調研投放時間,在 1 月/4 月/7 月/10 月初分別投放);提前與產品、運營側進行溝通,確認上線、下線時間,以及所需物料,如文案icon、banner 等;

          問卷結果梳理:數據清洗、分析;梳理關鍵信息,制作圖表;輸出報告結論。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          TIPS:1. 盡量咨詢用戶研究團隊專業人員,聽取他們對問卷題目設置的建議,留出組內討論、線上測試時間,進行 1-2 輪調整;

          2. 如果需要長期追蹤,建議以季度為單位投放問卷,以京麥為例,緊跟平臺滿意度調研投放時間,在 1 月/4 月/7 月/10 月初分別投放;

          3. 提前與產品、運營同學進行溝通,確認上線、下線時間,以及所需物料,如文案、icon、banner 圖等。


          3. 做診斷

          收集了大量數據信息之后,我們需要設定不同維度的權重,并通過一定的規則計算出各指標的最終得分。比如工具類產品,可能更強調用戶達成任務的效率,因此易用性和任務效率權重較高,而主觀數據的滿意度權重則相對更低。

          同時每項指標的背后都有一種或多種的數據采集方式,每項指標的數據顆粒度也不同,有的可能只針對一個模塊,有的可能涵蓋整個使用過程。因此,我們在設定計算規則的時候,要盡可能的全面客觀。

          最后,將度量體系的各個維度進行加權計算,基于數據表現,可以診斷出產品的提升信號。

          完整性 | 功能完整性對比分析(客觀)

          目前,京麥在整個商家后臺行業中已經處在功能相對較為完善的階段,因此完整性將作為一個重要指標納入整個體驗度量體系中。通過與其他同類產品對比,可以看出各端功能的覆蓋完整度,這一維度是完全客觀的度量指標。

          易用性 | 用戶使用難易程度(主觀)

          易用性是衡量用戶在使用產品各功能時感受到的難易程度的標準,是完全主觀的度量標準。在比較了各類可用性測試、易用性測試度量體系后,我們選取了表格中的四項維度和對應的七個問題。通過問卷的形式,以李科特五度度量(強烈反對=20 分,反對=40 分,中立=60 分,贊同=80 分,強烈贊同=100 分)換算獲得了易用性的分數。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          參與度 | 各角色用戶常用功能模塊的使用率(主觀)

          參與度是衡量用戶對各功能模塊的使用率的主觀度量標準。使用京麥的商家可以按照其工作崗位分為店長、運營推廣人員、客服人員、財務人員、技術人員等多種類型,通過對各類人群常用功能模塊的使用率的加權平均值,計算整體的參與度。

          如何做好用戶體驗度量?京東設計師總結了五個步驟!

          任務效率 | 各角色用戶完成特定任務的投入產出比(主觀&客觀)

          任務效率是用戶通過使用京麥完成某一特定工作任務(發布新商品、填報活動等)的投入產出比,通常以時間、完成度、出錯率等具體業務指標來具體定義。一期我們以 100%-用戶主觀反饋問題的比例來推測計算任務效率。二期計劃:與各條業務線溝通,以他們的業務指標來定義更具體的任務效率指標,通過用戶行為監控數據來計算客觀的任務效率值。

          滿意度 | 用戶對產品整體的使用感受(主觀)

          使用季度性《平臺商家滿意度調研報告》統計得分,也可以在問卷中設置相應打分題進行統計。

          4. 再改造

          通過前面幾個步驟的計算得分,產品已經有了較為宏觀的改造方向,我們可以再結合前期調研收集的用戶反饋問題,重點解析數據表現背后的原因。這個階段需要引入更細致的專家評估等方法,對各類問題的優先級進行排序。

          我們計劃結合產品現有的移動化進程,首先提升完整性,然后分批次地針對核心模塊優化易用性、任務效率,并通過概念設計及用戶測試等方式進行產品優化改造的快速驗證。

          5. 續檢測

          后續,我們也希望引入更多用戶的行為數據指標,如用戶活躍度、用戶增長率、功能插件使用率、頁面點擊率等,從業務指標中獲得更全面的數據信息。

          同時引入監測工具,對產品重塑后的關鍵指標進行持續追蹤,周期性監測指標的改善情況,讓各部門同時參與體驗度量的工作,提升優化產品的效率。從體驗度量指標的數據采集到數據分析到數據的可視化,再到最后的優化落地,讓體驗度量的閉環全程可管理。

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

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


          文章來源:優設  作者:京東設計中心JDC

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

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



          不錯的點擊li標簽刪除的例子

          前端達人

          <script type="text/javascript">
          function delElement(obj){
            obj.parentNode.removeChild(obj);
          }
          </script>
          <ul>
          <li onclick='delElement(this)'>1111</li>
          <li onclick='delElement(this)'>1111</li>
          <li onclick='delElement(this)'>1111</li>
          <li onclick='delElement(this)'>1111</li>
          <li onclick='delElement(this)'>1111</li>
          <li onclick='delElement(this)'>1111</li>
          </ul>




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

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


          轉自:博客園
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          js動態添加li,你添加的li具有你綁定的事件

          前端達人


          <%@page import="java.util.ArrayList"%>
          <%@ page language="java" contentType="text/html; charset=UTF-8"
           pageEncoding="UTF-8"%>
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>Insert title here</title>
           <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
           <!-- 3.0 -->
           <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
          </head>
          <body>
          <ul id="listproject" class="list-group">
                  <script type="text/javascript">          
                  var JSarray = new Array();
                  JSarray[0] = "array0";
                  JSarray[1] = "array1";
                  JSarray[2] = "array2";
                  JSarray[3] = "array3";
                  JSarray[4] = "array4";
                   
                  for(var i = 0;i<5;i++){
                      $("#listproject").append("<li id=li"+i+">"+JSarray[i]+"</li>"); //在ul標簽上動態添加li標簽
                      $("#li"+i).attr("class",'list-group-item');     //為li標簽添加class屬性
                  }
                  $('li').on('click',function(){      //綁定事件
                   alert("事件綁定成功!");
                  });
              </script>
          </body>
          </html>
          耐得住寂寞,才能登得頂


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

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

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

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

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

          S02E05: 創意打破邊界,什么打破「創意的邊界」—— 阿里云設計中心年鑒

          seo達人


          圖片

          圖片

          圖片

          創意技術突破「圖形的邊界」

          圖片

          圖片

           

          如何創作不知道結果的圖像?

          通過我們研發的智能生成設計工具,可以快速批量化生產高質量靜態/動態圖形素材,并利用智能工具合成用于各種日?;A設計場景中的物料,例如海報圖形、PPT 動態 Icon、Logo、千人千面的 Banner 等等。

          圖片

           

          神經符號 AI 很神嗎?

          神經符號 AI (Neuro-Symbolic AI) 是一種將深度學習和符號智能的結合的人工智能新范式,是人類向「通用人工智能」前進的又一嘗試。

          圖片

           

          這是誰的大腦?

          光子大腦,阿里云神經符號實驗室打造的 AI 系統。通過創意編程技術,設計師對神經符號系統的思維過程進行了實時可視化呈現,打造了一個具象化的光子大腦。

          圖片

           

          GDS, Shader, GLSL %^#@&! ??

          GDS 是阿里云設計中心,由創意技術設計師自研的 WebGL 圖形技術代碼庫,其包含高復用性的模塊化代碼與一系列自研的 Shader (GLSL) 組件,用于實時 3D 特效與圖形渲染。實時渲染的價值不僅僅是圖形能力的體現,而是每一幀的視角,都與用戶的交互行為有關。我們把 GDS 作為圖形技術底座,用以孵化全真三維設計平臺 – REAL 3D.

          GDS _

           

          REAL 3D_ 升維是目的么?

          REAL 3D_ 只是實現目的的一種方式。傳統的二維界面上,我們獲取的只是文字、色彩等信息。而在三維空間,深度、高度、角度等信息通道都可以承載產品信息。所以,這是理解的更多,而不是看到的更多;是原本是三維,而不是升級到三維。

          REAL 3D _

           

          如何提高設計協作效率?

          為了在 3D 搭建前能夠快速的梳理交互邏輯與完成預覽溝通,我們設計與開發了全真3D專屬設計組件 —— 全真3D Sketch UI Kit。支持在設計稿中快速置入預設好的阿里云云產品形象、分區、飛線等元素與「一鍵換膚」。

          REAL 3D UI KIT _

           

          如何生產中高性能的實時渲染?

          在圖形計算與渲染里,實例 (Entity) 與 DrawCalls 越少,意味著性能越高。在REAL 3D的設計實踐中,我們使用 Instancing 技術在 GPU 里合并渲染模型,大面積減少 DrawCalls 開銷,以及使用背面剔除 (Backface Culling) 等渲染技術提升 3D 渲染性能。

          圖片
          云網絡體驗館 _

           

          圖片

          圖片

          圖片

          創意技術突破「設計的邊界」

          圖片

          圖片

           

          什么是 BIV?

          BIV 的全稱是 Building Information Visualization,建筑信息可視化;「BIV Builder」是阿里云設計中心聯合阿里云 A 組打造的在線三維建筑搭建工具,讓用戶能簡單快速地搭建三維校園、全息園區等場景。

          圖片

          BIV BUILDER _

           

          誰在使用 BIV Builder?

          目前主要應用在教育安防領域,讓中小學??焖俅罱ㄗ约旱男@立體風險防控平臺,獲得可交互三維校園、自動安全巡邏、疏散路徑規劃等能力。利用 BIV Builder,非專業人員幾天即可完成過去專業人員需要幾周的工作,讓立體校園風險防控平臺的規?;蔀榭赡堋?

           

          究竟突破了哪些邊界?

          BIV Builder 利用人工智能技術,自動將 CAD 圖紙轉化為 BIM 模型,降低建筑模型生成成本,創意工程師自研圖形引擎,不依賴 GIS 數據自動生成周邊城市場景數據,參數化視效秒級切換,內置四色圖、建筑爆炸圖、第一人稱視角漫游等實用功能。

           

          2020 年的云棲大會,和之前的 11 年有什么不同?

          http://mpvideo.qpic.cn/0bf2guab6aaafyag7zmgbbqfanodd42qahya.f10002.mp4?dis_k=fcc72fad9bd27f45404fc128af519db9&dis_t=1624518601&spec_id=MzUxODg1NDI1NA%3D%3D1624518606&vid=wxv_1842658210613100550&format_id=10002&support_redirect=1&mmversion=false

          2020 年是云棲大會首次在線舉辦,首次通過三維重構的信息轉譯方式,打破設計和技術的邊界,核心應用綠幕直播技術、數字巡展創新體驗,創造性地打造了一個集互動和游覽于一體的線上沉浸式體驗。

          圖片
          2020 APSARA _

           

          什么是數字巡展?

          數字巡展是我們自主研發的設計服務產品,立足于設計創新,融合定制化虛擬空間、智能化工具平臺、數字化企業營銷三大核心能力,通過創意和數字化優勢,推動數字體驗創新,打造全球領先的云上會展數字化智能平臺。

          圖片
          數字巡展 _

           

          數字巡展解決了什么問題?

          通過 3D 互動優勢設計能力,為企業提供低成本的獨家品牌定制能力。突破以往場地、經費、運營等限制因素,為企業提供數字化名片,提升展陳效率與科技感。

          圖片

           

          數字巡展的愿景與實踐?

          我們探索數字巡展,堅信的是線上和線下的完美結合。希望創造一個無邊界的全息世界。

          圖片
          全息展廳 _

           

          圖片

          圖片

          圖片

          圖片

          圖片

           

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

          轉載請注明:學UI網》S02E05: 創意打破邊界,什么打破「創意的邊界」—— 阿里云設計中心年鑒

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

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


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

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

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



          詳解|圖標設計,精致的體力活兒!

          seo達人



          對于一套圖標來說,能讓用戶記得住,源于圖標的與眾不同;而能讓用戶覺得有專業感,其實是源于圖標的整齊劃一。圖標設計本身也有自己一套規范,在設計圖標的過程中遵循一定規范去工作,不僅可以使圖標看起來更美觀,而且還可以體現出設計師的專業和價值。作者在本文中以1024px下的設計規范給出詳細的說明和解釋,歡迎大家討論。

           

          很多設計平臺都推薦設計師在 1024 X 1024px 的網格中繪制組件,且圓角的大小保持 8 的倍數關系。例如 Ant Design 給出的圖標繪制網格規定:

          圖片

          關于圖標設計,你大概也有思考過這樣的問題:

          • 為什么圖標要使用 1024 X 1024px 的網格進行繪制?
          • 設計頁面的時候,如果需要的圖標大小是 16 X 16px,為什么不推薦直接使用 16 X 16px 的網格繪制圖標呢?

          對于這類問題,本文解答如下 ——

           

          1 . 可以「精確」繪制細節

          下面這張圖你可以很清楚的看到網格的用法:圖中放大的圓圈中的一個藍色的小方格是 32 X 32 px,也就是說,這個藍色小方格里面還是一個 32 X 32 的格子盤:

          圖片

          你可以想象,當你在繪制一個圖標時,其實是在一個布滿了小格子的紙上進行繪制,這樣做我們在繪制圖標的時候可以很精確,每一個圓角的大小、每一根線條的粗細、每一個斜線的角度等等,都有嚴格的數量規范,以確保圖標造型的統一和精確。

          關于圖標的精確規范,我們以 Ant Design 的圖標系統中的部分細節規范為例:

           

          (1)圓角:

          圓角的規格采取 8 的倍數原則,最常用的尺寸是 3 種,分別是 8px、16px、32px,它們之間是兩倍數的關系。而圖標內部空間的圓角則保持直角(0px)的處理方式。

          圖片

           

          (2)點的直徑:

          點是非常常用的元素。Ant Design 對于點的尺寸選擇上會保持 16 的倍數這一原則。在點的選擇中常用四種尺寸,分別為 80px、96px、112px、128px。當出現特殊尺寸的需求時,會按照 16 的倍數進行延展。

          圖片

           

          (3)線寬:

          Ant Design 的線條寬度之間的關系采用 8 倍數原則,從小到大以 8 的規律遞增。常用的規格也是 4 種,分別為 56px、64px、72px、80px。

          圖片

          你會發現,在 16 X 16px 的畫板中肯定是可以畫出來圖標的,只是圖標的形狀并不是單一的圓形或是方形,一旦出現多種樣式的線和點,你是無法精確控制繪制的規律的。

          當然,1024px 也并不是絕對的數值,你也可以在 800 X 800px 或是 960 X 960px 的網格中進行繪制,網格數量越多,你的繪制就會越精確。

           

          2 . 圖標造型「靈活性」更高

          使用 1024 X 1024px 的網格時,可以預留有效的“出血”位置。比如,Ant Design 在 1024 x 1024px 的畫板邊緣預留了 64px 的出血位,也就是說,真正用來畫圖標的常用畫板尺寸是:1024-64-64 = 896,即:896 x 896px。

          圖片

          在圖標的設計過程中預留出血位,可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險;同時在設計過程中,也為設計師把握圖標間平衡留下了進退的余地,為圖標賦予更多靈活性。

          圖片

           

          而如果你使用的是 16 X 16px 大小的網格繪制圖標,則很難設置出有效的出血位。

           

          3 . 「縮放」游刃有余

          按照上文所述,當你在 1024 X 1024px 的網格中畫好圖標后,再將圖標等比例縮小,就變成了我們通??吹降慕缑嫔系膱D標。通常情況下,界面上使用的圖標的大小不會超過 1024 X 1024px,因此基本上都是對圖標進行縮小變換,在縮小圖像時可以保持銳利的邊緣和正確的對齊方式。

          圖片

          而如果你使用的是 16 X 16px 大小的網格畫出來的圖標,如果需要放大的場景,在圖標放大之后會有很多細節無法處理和補充。

           

          4 . iOS 平臺標準

          以蘋果公司為例, iOS 7 及之后版本 iOS 的圖標網格均采用 1024 X 1024px 的網格作為基準。向 App Store 應用商店提交的 iOS 應用圖標必須使用 1024 X 1024 分辨率的高清圖標。Retina 視網膜屏幕也為高清圖標帶來極佳的顯示效果,更好的考慮到用戶的體驗感受。

          圖片

          本文講解的問題看上去很基礎,但很多同學其實都是“揣著糊涂裝明白”。繪制圖標其實是一個“精致的體力活”,一套真正優秀的圖標,在細節上是值得放大 10 倍來進行推敲的。

           

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

          作者:元堯

          轉載請注明:學UI網》詳解|圖標設計,精致的體力活兒!

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

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


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

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

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


          UI設計師如何避免用戶不滿與困惑

          ui設計分享達人


          案例1.用戶操作時的困惑


          相信大家在做設計的時候都遇到過這種情況,一個產品內有多個入口指向同一個界面,這是產品的投機取巧還是另有深意,很多人都對這樣的設計有不同的看法。


          這樣的設計就好像是狡兔三窟,在產品中流量可以從不同的入口進來,到多個不同的出口,也可以從不同的入口進入同一個地方。



          有人會覺得如果一個界面中有多個入口指向同一個界面會出現問題:


          1.違反了效率、用戶預期的原則,會認為頁面空間有限,在同一個界面中有多個入口指向一個界面效率變低,而且用戶知道后往往就會只從一個入口進入。


          2.多個選擇會讓用戶拉高轉化的成本,用戶在選擇的時候會花更多的時間思考有什么區別。


          我們來看一個例子,下面德邦app之前的一個版本,目前已經優化了。從截圖中我們發現頁面上方的查詢和寄件都和底部標簽單獨出來的界面功能重復了,并且我的快件也直接可以展示在首頁的下方,我的快件目前可以從首頁頂部、首頁下方和個人中心3個入口進入查看。



          通過這個案例我們發現確實這些板塊和功能重復度太高,并且沒有區分出場景,這樣的設計證實了以上的兩個說法,降低用戶使用效率和提高選擇成本。而且從業務角度看也并沒有目標的差別。


          但是我們分析問題也要多角度去觀察,多個入口進入同一個界面只有缺點沒有優點嗎?


          顯然不是,我們再來看幾個案例


          下方是一個商品評價的卡片,經過我小手的實際測試,發現無論點擊這個卡片任何有內容的區域,都會跳轉到全部評價的界面,那這樣的設計邏輯是否會造成和上面的案例一樣的問題呢?答案是,不會。



          這里的設計邏輯并不是和沙面那里的場景那么單一,而是用戶在面臨不同需求場景的時候可以有選擇。


          不知道大家有沒有發現一個問題,在上面德邦案例的時候,你會對兩個入口有疑問,但是在評價卡片的時候并沒有,這個卡片包含了4種不同的場景:

          1.我想看看有哪些好評、哪些差評 

          2.幾個不同標簽的用戶都是怎么說 

          3.下面用戶的實拍到底是不是真實的 

          4.還有沒有更多類似真實用戶的使用評價。


          所以即便最終到了一個界面,對于用戶來說也是從獨立的出發點開始的,而再回過頭看上面案例,你會發現,我就是要寄東西,這里有兩個入口,怎么選。


          而且,考拉這里其實還做了從不同內容點進去的一個區分。



          再來看個案例,貝殼的地圖找房,在首頁中有兩個入口,導航欄一個,分類中一個,這里出現重復會造成一開始說的問題嗎?首先我們看到貝殼的業務很多,以至于在這個分類中居然還需要通過滾動指示器來展示剩余內容,大家也可以思考一下,在這個界面中,會不會出現兩個地圖找房不同的場景出發點呢?我個人覺得其實是可以商榷的,首先地圖找房在房產app中是很核心高頻的一個功能,他的屬性是“工具”



          所以我覺得他之所以在卡片中再放一個地圖找房是3個原因


          第一個是導航欄的找房肯定不能動,他是一個全局的入口,即使頁面滾動也可以隨時點擊到,即便要撤一個,也肯定要撤下方卡片分類中的。


          第二個是卡片分類中的圖標入口是都具備工具屬性的,那首頁上面部分就分為了:搜索、業務分類、工具這三塊。所以用戶看到這些工具屬性也會聯想到通過地圖去找房。而且這些多色彩的圖標對于新進入的用戶是比較吸引注意力的,所以很有可能用戶看不到右上角的地圖找房(可以參考古騰堡圖表的原則)。


          第三點是可能右上角的地圖不太能清晰表達這個圖標的具體功能,所以將“地圖找房”四個字顯示全。


          但這些都有一些主觀因素在里面,如果真的去掉卡片中的,我覺得可能影響也并不是很大。有小伙伴可能想說是為了分流,但是分流的目前主要是讓流量流到他應該去的地方產生實際價值,除了以上的3個原因,好像確實有點重復了。


          再來看一個例子,小鹿茶app。



          首頁的現在下單和底部菜單標簽都是到同一個界面,那為什么要重復呢?這里其實考慮更多的他并不想讓用戶進來就直接去購買,為什么不直接購買呢?應該是想要建立自己的品牌人設、滿足更多的消費場景和增值業務,比如給別人點奶茶、周邊的杯子跟合作商品推銷、最新的奶茶的推薦。


          如果只有菜單,產品也會顯得更工具化,很難突出自己的品牌,對業務增長沒有太大的幫助。有同學要說,那這個界面只是產品的“一廂情愿”,我就只要點奶茶就可以了,多個入口只會給我帶來困擾。所以他這里的設計邏輯是在用戶打開app的時候首先定位的是菜單,而不是首頁。


          所以,到底多個入入口進入同一目標我們還是要看不同的場景和目標的。如果既沒有業務目標做支撐,又沒有用戶場景的變化,那么這個重復的入口就是雞肋的。


          最后留一個小思考題:網易云音樂的“歌單”在首頁上也重復了,大家知道這里為什么他要做成重復入口嗎? 




          案例2.用戶使用中的不滿


          一個優秀的產品或者說一個合格的產品,能給用戶帶來愉悅的體驗。何為體驗,用大白話來說就是用的舒服、自然、高效率。


          再有一個底線就是不要讓用戶產生由產品帶來的負面情緒,例如產品出錯了卻不告知用戶解決方法、用戶出錯了沒有辦法及時幫助糾正、高危操作沒有二次確認等等,根據負面情緒的嚴重程度幾乎就可以直接讓部分用戶流失。


          很不幸的是我就遇到了這樣的體驗,當時正在給同學們布置一些作業練習,體驗一些產品的優缺點并給出解決方法。我也下載了這款文玩類的App,體驗了極速撿漏這個功能模塊。


          撿漏:在文玩圈的一句行話,意思就是用很便宜的價格買到很值錢的古玩,而賣家卻不知情,是一種可遇不可求的行為,所以寓意就是比較難得、走好運了。


          進入直播間,商家在賣力吆喝,頁面底部有加一手的按鈕,就是類似于拍賣,價高者得。于是我就抱著試一試的心態點了加一手按鈕,因為我預期是產品會再次向我確認是否要加價,結果是居然加價成功了,發生了什么?最后競拍結束也沒有人繼續加價了。




          實際場景中用戶可能誤操作不小心點了按鈕,這樣的場景和情況是非常多的,即便不是誤操作,給一個二次確認的對話框也可以避免這樣的尷尬狀況,因為用戶就喜歡在產品中點來點去,然而你在這里就像埋了一顆地雷。


          如果到這里就結束了,那其實我也感覺沒必要去吐槽,問題在于當我拍下還沒付款,直播間的商家就開始喊我的名字:xx大哥恭喜你拍到了我們的產品,可以去付款了。連續播報了幾十遍,我尷尬的直接退出了后臺,這種感覺就像是一群觀眾看著一個被騙的小白一樣,當我過10分鐘后打開系統提示商品流拍了,并且累積了違約積分。


          ???


          到這里,可能會有人說,你自己拍了的又不付款,當然要懲罰你了。


          于是我還是認真的去研究了一下,發現極速撿漏和競拍并不是同樣的規則。該產品和競品其實都有競拍板塊,在競拍板塊都會有需要用戶確認的操作,并在操作下方給出拍賣規則,顯示出價即表示同意拍賣規則。




          但是該產品極速撿漏的板塊并沒有這樣的說明,既然沒有提前展示這樣的說明和約定,用戶就不知道有這樣的規則,我拿了競品一對比,其實在直播帶貨的場景下,這個出價流程還是不同的,雙方其實都沒有給規則說明,但競品還是給了一個出價選擇后再出價的步驟。



          最后我甚至被商家拉黑了,不過還給我一個投訴商家的入口


          我當時的想法:


          1.如果因為誤操作讓用戶付出這么大代價的話成本就太高了。讓用戶點擊是否就等于用戶同意?


          2.請先告知我約定與協議的內容,單方面在我不知情的情況下對產品進行操作后,通知扣我違約積分,這樣就有點“霸道”了。


          3.平臺對商家和消費者的權益是如何平衡的,文玩行業和互聯網結合的難點在哪里。


          3.線下文玩圈的一些不成文行規,導致新人入圈后產生的沖突。


          于是我就想對此說說我的看法



          1.交易是產品平臺其中的一個功能屬性


          交易是產品平臺其中的一個功能屬性,需要優先滿足產品對用戶價值,其次再談交易的合理性。在這個流程中,面對用戶很有可能遇到的誤操作行為以及需要讓用戶去下單支付成本,我們必須提前告知用戶。在尼爾森可用性原則中我們也發現了,如果用戶不小心操作失誤,那么我們盡可能減少這些因為用戶犯錯帶來的成本,同時在用戶犯錯之前就要明顯告知用戶,將風險控制、前置。


          所以,你在注冊的時候、登錄的時候,產品一定會讓你同意一份用戶協議,告知你我們要保存你的數據和一些跟你相關的信息,如果你不同意,那就無法繼續體驗產品。


          這是一種契約。


          同理,如果你想讓用戶在這個產品中去參與拍賣,在進入這個板塊之前或者用戶點擊按鈕之后,也需要讓用戶明確這個操作帶來的風險是什么,取得用戶的同意。而不是直接讓用戶加價成功,導致用戶不明所以的被扣違約積分、被商家拉黑,這就和你去泰國,在街頭你朋友拍了一張你和一個抱著蜥蜴的人的照片,結果別人來問你收錢是一個道理。


          對于正常線下拍賣的流程,舉辦方也會對參與拍賣的人員進行相關規則、流程的告知,并且將風險、問題都提前讓客戶進行協議確認。


          所以,在產品中的交易,必須先滿足用戶與產品信息之間的對稱關系,保持信息的透明和契約公正,規則、約束、條件是用戶使用你產品的前提和體驗反饋的衡量標準之一。



          2.對于商家和產品的價值


          商家希望有更多的流量來曝光商品,撿漏商品的低價可以快速吸引一大批用戶,比如8塊錢的一個木頭核桃的雕刻掛件等,產品通過營造搶購、限時的氛圍,吸引用戶下單,并且降低用戶參與的門檻。


          那么,直接加價成功是一個好的降低門檻的策略嗎?我覺得并不是,降低門檻并不意味著就是直接拍到,而是需要提高用戶對產品的信任度,這個極速撿漏的模塊的目標用戶幾乎都是小白用戶,因為資深的玩家看不上、更不會買,有一定經驗的玩家也看的出好壞,明白它的價值。所以面對這些沒有了解過文玩產品的小白玩家來說,內心是謹慎的


          可能有人會想,這幾塊錢、十幾塊錢的東西還需要考慮嗎?當然在這個場景中,從眾心理是很明顯的,大家都覺得很便宜,但就是沒人拍。這都幾塊錢撿漏了怎么都沒人要,大部分人都覺得這么便宜東西肯定不咋樣,運費是不是貴的離譜、有沒有托在背后跟你抬價呢?大家都不拍我也觀望。越多人圍觀,越難促成交易。


          還有一種可能就是我賣不賣的出去東西,并不重要,重要的是有人來看了,這些邊角料都是用來回饋直播間粉絲的,就是一個窗口,真正有利潤的東西在櫥窗里。所以這里的撿漏只是一個引流的噱頭。


          人總是對太輕易得到的東西不珍惜,更何況是幾塊錢的小玩意兒。所以針對直接拍下這個交互,個人認為是不妥的,無論是上面任何一種情況,都沒有辦法讓降低門檻,甚至通過這種“小聰明”反而會讓用戶更加不信任產品和用戶。


          不信任產品是大。尤其是作為一家平臺來說,虛假交易、以次充好、濫竽充數等等行為是致命的。



          3.文玩的價值


          我其實有玩過一段時間文玩,受我老丈人的影響,有一段時間喜歡玩手串、玉什么的。經常也會在某音去刷一些鑒寶類的視頻,很有意思。


          文玩它的價值在于品相、稀有度、盤玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個在每個人心中同等效用的商品,同樣一塊玉,他的種水一般,但是花紋很獨特,買賣雙方其實心理的價值預期會相差非常多,它就不像買電子產品一樣價格那么透明容易計算。


          有的人玩這些就是覺得命里該有它,它能給我帶來財、運,幫我辟邪,看的是眼緣。而不是路邊上一塊無用的石頭,可以隨意拾取丟棄。那么換句話說,如果在用戶下單的時候,我們利用一些情感化的文案,讓用戶喜歡上這款文玩,是不是也可以大概率的促進交易呢?



          4.文玩圈的行規


          我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行規。也或許就是因為這些行規出現到了線上產品中。


          1.還價意味著出價,出價意味著買下

          在文玩圈,你不想買就不要還價。如果賣家同意了你的還價,那你就必須買。這代表著你個人的信譽和道德品質。


          所以文玩圈和互聯網的用戶之前有許多的鴻溝需要一步一步建設橋梁,不能單純的以線下圈子內的行規來要求剛接觸這個圈子的互聯網用戶,這需要大家一起努力和營造起一個良好的文玩圈的文化和規則,而不是直接生搬硬套,提高這個門檻。


          2.不要打聽別人的成本

          文玩沒有實際的成本,可能別人花10塊錢淘到的價值1萬塊的東西,也可能別人花了巨資看走了眼。所以你知道了成本對誰都沒好處,別人也不會告訴你。


          3.別人在交易的時候保持沉默

          文玩在每個人心中的價值不同,所以貨幣價值也不同,當別人在詢價還價的時候,不管怎樣我們都不要去表明自己的看法和想法。


          當然還有其他的規則就不一一敘述了,針對這3條,其實在互聯網的產品中是會有沖突存在的。例如你買了某個文玩,你一拍下,別人就說這個根本不值這個價錢。還有你出價了但是又不想買了,這些原本在文玩圈子中不允許的規則,在互聯網上去要求用戶著實有點困難,因為互聯網上的交易并不一定所見即所得,可能展示的是這樣,收到貨又是另一個東西。



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

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



          文章來源:站酷  作者:應駿

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

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


          做好設計,什么能力最重要?

          ui設計分享達人

          設計行業每天發生著翻天覆地的變化,隨著專業的發展,我們也在不斷的學習新的技巧和趨勢,但同時我們也要明白,設計中那些基礎的UI準則,才是好的趨勢和風格建立的基礎。今天我們就一起來聊聊做好設計最重要的能力之一:區分視覺層次。 


          什么是視覺層次


          視覺層次你可以理解為,通過將界面元素進行設計上的區分,引導用戶的注意力,并使用戶的注意力始終集中在頁面的關鍵地方。但是今天沒有一個方法可以一直控制用戶注意力,就像我們今天做設計一樣,不同的產品要用不同的設計手法去設計,才能達到幫助用戶分清主次的作用。



          視覺層次不僅僅包含文字有關,它還包含我們的圖片,視頻按鈕以及文字以外的視覺元素。所以當你設計一個網頁時候,除了網站整體的顏色,排版,圖片也能夠影響視覺層次。那么如何讓設計的層次更清晰,常用方法有哪些,今天我們一起來聊聊關于設計層次,希望可以幫助到你。


          運用尺寸大小建立層次

          大小是建立視覺層次非常重要的方式,這里的大小不僅僅是文字,還包括圖形,插畫,圖片等等。 作為設計師我們必須了解屏幕上每個元素的優先級,根據優先級來判斷它的使用大小。



          當我們談到尺寸的時候,相信很多設計師有過被要求各種元素放大的經歷,確實大的元素能更好的吸引用戶。 但是當元素越大,其實設計的復雜性也越高,所以在設計時候需要更注意整體節奏,把握好一個度。 



          如上圖插畫的比重很大,在設計這種大的元素時,你的每個元素比例和細節處理都被同時放大了,我們可以看見這副插畫四周還運用了很多元素,讓頁面達到平衡,同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設計一定是通過視覺手段讓用戶理解信息更加準確,在看完頁面文字和圖片后,很自然的引導到底部的按鈕,這才能算是一個很引人注目的設計。


          運用色彩建立層次


          顏色在視覺層次中扮演著非常重要的角色, 設計師可以通過顏色來傳遞信息內容,同時也可以引導頁面內容,色彩在心理學中有著很重要的作用,比如黑金給人尊貴感VIP感,糖果色給人小清新,甜蜜的感覺;紅色能吸引人注意等等。用戶在視覺情感上和顏色很容易聯系在一起, 作為設計師我們需要對不同的色調,不同色彩進行細致的組合搭配,以掌握對色彩的了解。



          Zenly:國外知名產品,在引導頁面設計時候運用紅色按鈕吸引用戶注意,在App主頁面里面,通過深藍色強調選中效果以及Tab.


          Netfix:知名的電影軟件Netfix在設計中,充分運用色彩去增強層次,無論是在引導頁按鈕設計,還是在頁面核心行動點,以及Tab切換等地方,都通過顯眼的主色來引導用戶操作,讓頁面的行為路徑更加順暢。 



          Tiktok:抖音海外版本設計,整體UI部分非常簡單,頁面還是一如既往突出內容為主,所以在整個設計上就通過色彩來強調頁面優先級,比如拍攝,分享,選擇這些核心操作都通過色彩來引導完成任務。



          運用文字大小字重建立層次


          絲芙蘭App的設計,在引導頁采用一個襯線體非常有品位,通過字體大小,和字重對比,再配合美妝護膚的行業屬性,頁面非常的簡潔大氣,有對比有細節。 



          無論是產品介紹,還是詳情頁,絲芙蘭設計都是采用字重和字體大小對比,來打造層次,字重和大小,也是設計師常用建立層級的方式。 



          除了字重以外,還可以字體透明度來增加層級,一般是黑色搭配灰色使用,再加上字體大小和字重整個頁面層次會更加清晰。如上圖韓國APP頁面,標題是黑色,輔助說明文字字號小4號,同時顏色改為淺灰色,這樣設計頁面層次增強了很多。 



          很多設計師在做界面時候,喜歡字體就一個顏色用到底,這樣會顯得界面粗糙,也沒有層次感。但是運用好我上面說的字體大小,顏色、字重等對比其實節奏很容易就能做出來。 


          運用視覺重量建立層次


          比如aaptiv這個產品的功能頁面設計,就是運用了視覺重量的對比,線框按鈕最弱,其次是黑色選中效果,最重的功能引導按鈕, 視覺 重量的對比能很好讓用戶關注到功能內容。



          如上圖,選中的黑色視覺重量最重,其次是藍色選中效果,最后是未選中的黑色,視覺重量幾乎我們每一個頁面中都會使用到。



          headspace這款產品我非常喜歡,將情感化用到了極致,在頁面很多細節地方運用了不同的小橙人在背景上,視覺重量有輕有重,通過不同視覺重量來表達頁面內容,非常巧妙。



          在列表的表達上,不同視覺重量感受是不一樣的,比如左邊的視覺重量更輕一點,用戶關注圖形同時也去關注文字內容,右邊這個視覺更重,更加引導用戶去點擊功能模塊內容。



          設計師熟悉的medium官方App設計,在正文閱讀時,同樣采用不同的視覺重點來突出重要信息,比如左邊通過字重以及文字背景綠色底色和正文對比,非常醒目。右側通過淺綠色作為背景強調突出。



          同樣在一些重要位置,Medium也是運用視覺重量處理,如左圖通過頂部提示條提示可以通過語音播放,在右側付費文章通過行動按鈕引導用戶升級付費。

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

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



          文章來源:站酷  作者:我們的設計日記

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

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



          什么是設計師的用戶思維?

          ui設計分享達人

          undefined


          如果說設計思維是設計師做設計的基礎,那么用戶思維就是你發現和解決問題的能力,到底什么是用戶思維?有沒有一些具體詳細的解釋讓我們了解它呢?請看分享。


          用戶思維-環境


          undefined


          說到用戶思維第一個必須是用戶環境,環境分為設計師的設計環境,以及用戶使用你的產品環境,以及物理環境,是不是有刮風、下雨的惡劣天氣。


          1.你的設計環境


          undefined


          上圖是大多數設計師平時工作環境,每天早上我們帶著一杯星巴克,用著蘋果電腦,打開iMAC做著設計,效果圖每張圖片都精挑細選,我們也理所當然的以為我們的用戶也和我們一樣,大家都是用的蘋果電腦,用的蘋果手機?


          2.你心中用戶的環境


          undefined


          很多設計師作品集里面喜歡放用戶畫像,我們理想的用戶畫像都像上圖一樣,用戶都是白領,聰明學歷高,能很好的看明白你的設計,也會使用。就像我之前做支付寶,也曾以為用戶都是如上圖所示,其實不是。很多時候用戶的場景和我們想象中相差甚遠。


          3.用戶實際的環境


          undefined


          大家都是每天地鐵里面,在沒有wifi和4G的公交,地鐵里。也都是用的大屏設計,各種安卓手機。


          undefined


          舉個例子,這個「放大鏡」,做設計是人都知道是代表「搜索」但是在我們走訪線下實際場景時候,下沉到三四線城市的時候,很多時候人們并不認識。


          undefined


          三四線城市用戶就覺得這個像「平底鍋」,不知道是什么意思,這種情況不在少數。


          undefined


          家里有一臺臺式電腦給父母用,有一次打電話給我說,有個流氓軟件經常彈窗,我教他們去我的電腦,找到「設備管理器」卸載掉即可,結果,父母問什么是「設備管理器」?

          所以,你會發現,用戶其實和我們心目中想象的相差甚遠。我們覺得很基礎的互聯網知識,在他們那里可能會很復雜。


          4.用戶設備環境


          undefined


          機型尺寸:安卓機的機型遠遠比我們想象的要多,各種超大屏,國內廠商各種千奇百怪的屏幕,這些做設計都需要考慮。


          undefined


          操作系統:不同的操作系統,有華為系統,小米系統,魅族以及各種第三方定制的系統,這些系統上呈現效果,都是需要在設計時候需要去考慮的。


          undefined


          手機分辨率:安卓和蘋果屏幕各種大小,和主流的分辨率,設計時候如何適配,才能很好滿足主流用戶的體驗,也都需要設計師提前去規劃。


          5.用戶物理環境


          undefined


          室內環境:用戶在室內使用我們產品時候,是不是應該考慮如果是室內,光線可以自動的調節。比如蘋果的系統,會根據用戶室內室外的光線,調整亮度。


          undefined


          室外環境:用戶在陽光下使用,那么亮度變化,陽光下字體識別度等等,都應該考慮進去。比如白天和晚上使用蘋果電腦時候的場景,是否有不同,比如iOS系統的設計,也是重復考慮用戶實際用戶場景。


          undefined


          網絡環境:用戶在有無限和5G情況下的體驗,是不是視頻直接播放,減少等待,當用戶在地鐵手機網絡不好時候,視頻是不是支持緩存或者提醒用戶在使用流量。所以在產品設計時候,重復需要考慮用戶這種場景。


          undefined


          抖音和騰訊視頻,在用戶非wifi情況下,會提醒用戶當前網絡環境,提示用戶注意流量使用,除了流量提醒,其實包括網絡加載不出來時候,如何設計產品策略都是需要設計時候考慮的。


          undefined


          噪音和隱私:比如在公共場合噪音大的時候,產品體驗該怎么優化,有木有可能聲音自動調整大,比如微信當你外面很吵時候,直接把語音放耳邊,就從外放變成內放了。


          undefined


          比如支付寶理財頁面,資產和收益顯示可以隱藏金額,保護用戶隱私情況。以及支付寶在系統后臺時候,可以隱藏頁面。


          undefined


          總結下,我們平時設計中提到的用戶思維,其中關于環境的考慮就包括這些:


          用戶實際環境


          機型尺寸/2.操作系統/3.屏幕分辨率


          用戶物理環境


          1.室內環境/2.室外環境/3/網絡環境/4.噪音和隱私




          該怎么去做?


          undefined


          1.一部蘋果一部安卓機


          之前在淘寶天貓時候,有些領導層會要求,必須使用安卓機作為主機,因為只有你去體驗安卓機,你才能發現頁面和產品有多少問題,蘋果本身的系統設計比較好,問題會比較少,但安卓系統沒有那么穩定,容易出BUG;所以用安卓機能發現產品更多問題,同時也能讓我們更關注到真實用戶的感受。


          undefined


          2.換位思考將心比心


          簡單來說就是做設計要有同理心,懂得如何去“換位思考,將心比心”。要學會用普通用戶視角去審視我們的產品問題,用理解的心態去理解用戶情緒;從用戶的角度看待問題,進而增加更多看待問題的角度,找到更多設計的空間,最后達到解決問題的目的。


          之前支付寶時候,提倡管理層要每年去傾聽用戶聲音100小時,老板們需要每月抽時間去當「客服」,看看用戶實際用我們的產品,有哪些難用的地方,從而做到真正從產品上解決用戶問題。



          用戶思維-場景


          undefined


          1.理解用戶從哪里來要到哪里去


          去過迪士尼的朋友都知道,人很多,那么如何讓這么多人,有效的去體驗更多的項目?就必須根據場景來設計,用戶從門口進來,去往哪里,每個項目的設計環節都需要思考清楚。


          undefined


          場景是從哪里來到哪里去:從一個場景到另外一個場景。我記得之前玩過一個迪士尼項目加勒比海盜,里面就把每個環節設計的很符合整體場景。


          undefined


          從入口,到航行過程中,到大海里大戰,以及故事的高潮,到最后的收尾,都是從一個時間到另外一個時間,就像在電影中親身經歷。其實我們做設計又何嘗不是。用戶從一個入口,到最終成交轉化整個鏈路。


          undefined

          undefined


          所以場景思維很重要就是關注用戶,每個鏈路的體驗環節,如何去發現其中問題,找到設計撬動點。


          2.場景是帶時間維度的


          undefined

          時間維度很好理解,是用戶在完成任務整個過程中的行為,常見的有前,中,后。我們還是以案例來分析:


          買之前:


          undefined


          認知:用戶打開支付寶想買理財,但他很可能從來沒有買過理財產品,那么第一步他可能會去了解產品,了解里面的金融術語,比如七日年化,收益率等等。那么我們在設計時候,就要去思考,如何降低用戶的認知,如何用一些淺顯易懂的文案讓用戶理解理財。


          undefined


          搜索:用戶通過第一步了解了各個理財特點,鎖定要買基金產品,然后這個過程中,他會去對比每只基金的收益情況,去尋找適合他的產品。


          買之中:


          undefined


          判斷:用戶終于發現了一個比較符合他心中預期的產品,然后會去比較這產品的優缺點,比如它最后想選擇,收益在6-8%的一只產品,然后會去思考到底買那一只合適。


          undefined


          下單:最后用戶選擇了這款收益為6%的產品,然后進行交易。


          買之后:


          undefined


          查看:最后用戶購買成功了,購買后,他就會每天來看他這只產品的收益情況,每天的收益,每周收益,以及什么時候賣出去。


          undefined


          了解了用戶的購買狀態,以及場景的時間維度,我們就可以去觀察這些鏈路,去尋找一些設計線索,去發現問題解決問題,場景思維也能幫我們設計更好的決策。其實這個思維在電商中也同樣適用。


          買之前:


          undefined


          認知:雙11快到了,你在家門口地鐵,公交或者微博廣告里面,看見了雙11的一個產品廣告。其中一個商品吸引了你。


          undefined


          搜索:然后你打開淘寶APP,搜索這款產品,通過搜索的入口,進入到了店鋪頁面?;蛘吣阃ㄟ^外面的廣告頁面點擊到了商品店鋪頁面。


          買之中:


          undefined


          判斷:你通過店鋪頁面,看見這個商品正在直播講解,你希望查看真實的商品情況,于是點進去,發現講解的內容能讓你更好的了解了此商品,你決定去商品詳情頁準備購買。


          undefined


          下單:后面你決定購買,直接淘寶下單付款。


          買之后:


          undefined


          查看:買完后,你很想用上它,于是你開始查看物流,同時也在擔心如果質量不好,你要如何發起七天無理由退款。


          以上就是我們說的用戶思維里面的場景思維,我們需要了解用戶從哪里來到哪里去,同時還需要了解用戶購買前,購買中,購買后的心理變化,了解這個過程中的鏈路問題進行設計優化。


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

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


          文章來源:站酷  作者:我們的設計日記

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

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



          做設計盡量避免掉的8個錯誤

          ui設計分享達人

          設計師有三大煩惱,時間不夠用,設計方案過稿不容易,開發還原爛,如果你也在這些事情中浪費太多精力,那么證明在工作過程中被你忽略掉了很多細節,有些你不在意的細節,或許就是一個坑,今天和大家分享下設計師最容易忽略的8個細節,如有改之,無則加勉。


          1.圖層混亂

          undefined


          不知道大家有沒有這種情況,你和一個設計師合作,他源文件給到你的時候,你很崩潰,想找到其中一個元素圖層根本不知道在哪里,這個時候你再專業,技術再牛, 這個小細節都會讓你口碑下滑。確實是這樣,在職場中,你的每個交付物,都是代表你的專業水平。我見過一些優秀的設計師,文件給過來的時候,圖層名稱,切圖,以及設計標注都非常清晰,適配規則都寫的很清楚,專業度顯而易見。


          我之前問過和我合作的開發,最喜歡和什么樣設計師合作,其實很多人都說過一個,就是圖層干凈,標注清晰的設計師。很多設計師抱怨開發還原不給力,但是試問下你自己,今天你交付給開發的每一個樣式,對方是否能很清晰的找到。所以,在職場上,一定要注意這個細節,不要被貼上一個專業比較馬虎的標簽。


          2.對上線效果忽略

          undefined


          很多設計師做設計以為設計源文件交付開發,這個項目就完事了,我之前也這么理解,但是在阿里后我轉變了這個觀點。要開始對落地頁面負責,意味著你做的圖,不止是效果圖好看,還要上線內容也好看。

          以電商設計來說,效果圖時候大家都選的很干凈的效果,很清爽的背景,但是上線后換上商家的圖簡直就沒法去看。


          undefined


          你心中的頁面效果圖上線后,和上圖一樣很干凈,清爽,讓人賞心悅目。


          undefined


          但其實最后上線環境是這樣的,頁面擁擠不堪,有很多廣告和牛皮癬,內容繁雜。所以今天的設計師除了我們要把頁面做好看,同時還需要思考,這個效果呈現給用戶會是什么樣的效果,對內容負責是我們每個人都需要去控制的。


          3.喜歡用漂亮照片

          undefined


          很多設計師作品集和項目喜歡用很漂亮的美女帥哥圖片,確實大家都喜歡漂亮的東西,但是有時候太過了,看著就特別的假,很容易看成飛機稿。其實用照片也是有技巧的,這個簡單和大家分享幾個小技巧:

          該放頭像時候就不要放風景

          undefined


          在頭像時候該放頭像就放頭像,不要放照片和插畫。另外圖片選擇時候,也可以選擇一些真實點圖片,比如可以用朋友微博上照片,或者微信頭像,可以挑一些好看的,那樣看著會更加自然。


          undefined


          網站里面照片都可以使用,而且都是比較真實的,你可以選擇皮膚顏色,性別等等,發設計稿中,會比我們找的明星帥哥美女要真實。

          如果這個產品是中國人別放外國人

          undefined


          如果你今天做的產品是一個面向國內的產品,那么照片就應該是中國人,就不要出現國外照片。真實很重要,當然這里有一些細節,就是照片不要太完美了這樣會產生虛假感,照片的清晰度最好足夠,別出現馬賽克。


          4.不考慮文字極端情況

           

          undefined


          一般在設計時候,特別是文字我們需要考慮兩種極端情況,文字最長的時候,文字最短的時候,如果忽略掉,你只按最佳效果設計,上線后就會出現問題,所以如果你設計文字最長,和文字最短時候,你都兼容到就不會出現太大問題。


          undefined


          在做金融產品適合,數字最大值和最小值也是容易被設計師忽略的地方,所以同樣的需要考慮最長的數字和最短的數字場景。


          如想看到更多干貨內容分享,可以添加wx:ddm7851,歡迎圍觀我票友圈~


          5.英文大小寫不分

           

          undefined


          可能很多人說,英文大小寫這個不是什么大事吧,但是還真是大事,我之前一個同事在內部講方案述職時候,就因為一個英文單詞大小寫弄錯了,就被領導說粗心,后來領導還經常拿這個事情來說,做設計粗糙,就這么一個下插曲,被貼了一個小標簽。但是職場就是這樣,你任何一個細微的瑕疵都容易被放大。



          6.顏色亂用

           

          undefined


          做平面設計時候,或者做印刷時候我們都知道要去遵循一定色彩原理,比如潘通印刷色等等,但是在做產品設計時候,很多時候會出現設計師色彩亂用的情況,這個地方紅色淺一點,那個按鈕深一點,雖然你滿足了你當前頁面的訴求,但是放到整個APP上來說,就是很亂。


          所以,這也是為什么很多團隊都會去每年花很大精力做規范,規范的目的其實就是建立一把尺子,這把尺子讓今天這個產品設計有一套規則遵守,否則就會出現百花齊放。


          undefined


          在谷歌材料設計規范中,很清晰的描述了每個顏色的運用場景和使用方式,目的就是保證所有設計的一致性和統一性。


          undefined


          谷歌材料設計,對于不同產品會給出不同的配色建議,這樣的規范會讓整體的設計更加合理。所以設計師在做方案時候,一定要去遵循團隊設計及規則。


          7.行高和尺寸比例隨意

           

          undefined


          文字行高也是被很多設計師忽略的,不知道一堆文字怎么定義行高,一般的做法是行高=文字大小*1.5倍,這是比較通用的一些做法,當然也有很多的閱讀軟件,行高可能設置更大一些。他們會用到黃金比例來設置行高。


          undefined


          很多人以為黃金比例就是1.618其實不是,除了黃金比外,其實還有白銀比例、鉑金比例、青銅比例這些都具有嚴格的比例性、藝術性、和諧性,并蘊藏著豐富的美學價值,好好利用,將會使你的作品變得更多高大上。


          拿行高來說,除了常用的1.5倍,還可以是1.618倍還有1.732倍,這些數值在很多閱讀產品中都會大量運用到這種比例。


          其實黃金比例除了可以定義這些字體行高以外,在尺寸上也可以去定義。


          undefined


          如果你設計中比例拿不準的話,也可以通過這樣的黃金比例來控制你整個設計的比例尺寸,這樣會更加科學。


          8.盲目使用設計趨勢

           

          undefined


          關注設計趨勢是好事,但是如果盲目的使用趨勢,就會讓頁面特別的亂。很多設計師頁面明明是扁平化的,上面都是用插畫營造著一個氛圍,但是看見最近C4D很火,然后就放了幾個C4D元素進去,這樣就會讓這個設計很混亂。


          undefined


          我之前天貓的導師,豆爸說過:做設計的時候可以先構思一個世界,世界要和諧就需要有它運轉的的規則..


          這個世界里面的規則會是什么呢?世界里面可能會有很多規則,字體,透視,光線,顏色,形狀 .... 可以拆解成每一個細節對應到設計中就是它整體看起來會是怎樣的光線,元素,空間感 ……是立體的,扁平的,魔幻的,安靜的……


          就像有不同風格的電影 動畫一樣,扁平的動畫,木偶動畫、黏土動畫.... 為了讓這個世界和諧,就會要減少一些沖突。如果立體的變形金剛世界里面出現了一個二維的米老鼠 肯定不和諧,如果小清新的色彩世界里面出現了大紅大綠東北大棉襖配色,也會不和諧。

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

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


          文章來源:站酷  作者:我們的設計日記

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

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



          用 JavaScript + HTML + CSS 實現選項卡操作,點擊不同選項就顯示出不同的標題欄(并實現其他要求操作)

          前端達人

          Ⅰ、問題描述:

          1、用JavaScript + html + css 實現,選項卡操作;
          2、分析:
          A、用 html + css 實現布局(盒子的布置,空間的分配等);
          B、用 JavaScript 中的 DOM 操作,實現點擊不同選項顯示不同標題欄的功能;

          Ⅱ、實現過程如下:

          1、運行軟件VScode,親測可實現;
          2、運行代碼:

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微軟雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠標放在 a 的標簽上,其文字將顯示為:紅色; */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 對a標簽中的類名為:on 的標簽進行操作; */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充話費</a> <!-- 類為:on 的 a 標簽; --> <a href="#" >充流量</a> <a href="#" >充固話</a> <a href="#" style="border-right: 1px solid #ff4400;">充寬帶</a> <!-- style 操作目的:使得顯示的盒子最右邊有邊框; --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的:使第一個圖片在初始狀態時,能顯示出來; --> <img src="images/1.png" width="355px"/> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通過 DOM 操作,拿到標簽為 a 的所有的元素(是個集合); var divs = document.getElementsByClassName('content');//通過 DOM 操作,拿到類為 content 的所有的元素(是個集合); for(var i=0; i<as.length; i++) { as[i].index = i; //給拿到的每個元素對象添加索引屬性; (由于通過 DOM 操作拿到的元素是對象,因此可以添加屬性值); as[i].onclick = function() { //給 as集合 綁定單擊事件; for(var j=0; j<as.length; j++) { as[j].className = ''; //將 as集合 的所有元素的類名全部取消; (此時用的思想為:排他思想;) divs[j].style.display = 'none'; //將 divs集合 的所有元素全設置成不顯示狀態; } this.className = 'on'; //僅將被單擊的元素的類名設置為:on,以便執行在 css 中的相關操作; divs[this.index].style.display = 'block'; //并將被單擊的元素的相關圖片設置為:block狀態;(即:顯示出來;) } } </script> </body> </html> 
          
          • 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
          • 53
          • 54
          • 55
          • 56
          • 57
          • 58
          • 59
          • 60
          • 61
          • 62
          • 63
          • 64
          • 65
          • 66
          • 67
          • 68
          • 69
          • 70
          • 71
          • 72
          • 73
          • 74
          • 75
          • 76
          • 77
          • 78
          • 79
          • 80
          • 81
          • 82
          • 83
          • 84
          • 85
          • 86
          • 87
          • 88
          • 89
          • 90
          • 91
          • 92
          • 93
          • 94
          • 95
          • 96
          • 97
          • 98
          • 99
          • 100
          • 101
          • 102
          • 103
          • 104

          3、結果展示:
          A、默認的顯示結果:
          在這里插入圖片描述
          B、點擊 ‘充流量’ 后的顯示結果:
          在這里插入圖片描述
          C、點擊 ‘充固話’ 后的顯示結果:
          在這里插入圖片描述

          D、點擊 ‘充寬帶’ 后的顯示結果:
          在這里插入圖片描述
          4、可能存在的問題:
          A 、如果自己也加載了圖片信息,仍然不能顯示該結果,可以直接下載我傳上去的文檔(可能解釋的更詳細),可以直接在 VScode 等其他軟件上加載運行;

          地址為:

          https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

          Ⅲ、小結:

          哪里有不對或不合適的地方,還請大佬們多多指點和交流!


          https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501





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

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


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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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