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

          首頁

          JavaScript作用域

          前端達人

          • 作用域簡介

          • JavaScript 作用域:就是代碼名字,在某個范圍內起的作用和效果。目的是為了提高程序的可靠性,減少命名沖突;

          • 作用域是可訪問變量的集合。

          • 在 JavaScript 中, 對象和函數同樣也是變量。

          • 在 JavaScript 中, 作用域為可訪問變量,對象,函數的集合。

          • JavaScript 函數作用域: 作用域在函數內修改。

          •  變量的作用域:根據作用域的不同我們的變量可以分為全局變量和局部變量

          • 局部作用域

            
                                
            1. function fn() {
            2.     var str = '我是一個局部作用域';
            3. }
            4. console.log(str);    // 這時是訪問不到的
            5. // 局部變量:在局部作用域下的變量   或者在函數內部的變量就是局部變量
            6. // 注意:函數的形參也可以看做是局部變量
            7. function fun(aru) {
            8.     var num1 = 50; // num1就是局部變量  只能在函數內部使用
            9.     console.log(num1); // 在這里使用是正確的 但是在函數外面使用報錯
            10.     num2 = 70;
            11.     console.log(num2); // num2在這里可以正常輸出
            12.     console.log(aru);
            13.     // 首先在fun括號里面傳入一個hello 然后在函數內部輸出是正確的但是在函數外部輸出是錯誤的
            14. }
            15. //fun(); 
            16. fun('hello');
            17. //console.log(num1);// 報錯 num1是局部變量
            18. console.log(num2); // 這里可以輸出num2是因為num2是特殊的全局變量
          • 全局作用域:

            全局變量:在全局作用域下的變量稱為全局變量,在全局下都可以使用
            // 注意:如果在函數內部沒有聲明直接賦值的變量也屬于全局變量
             

            
                                
            1. var num = 10; //num就是一個全局變量
            2. console.log(num);
            3. function fn() {
            4.     console.log('全局變量在函數內部也可以使用' + num);
            5. }
            6. fn();
          • 作用域鏈

          • 作用域鏈:內部函數訪問外部函數的變量,采取的是鏈式查找的方式決定取哪個值 這種結構我們稱為作用域鏈 就近原則

          • 
                                
            1. var num = 10;
            2. function fn() { //外部函數
            3.     var num = 20;
            4.     function fun() { //內部函數
            5.         console.log(num);
            6.     }
            7.     fun();
            8. }
            9. fn();
          • 作用域鏈總結:

          • 內部函數訪問外部函數的時候,采取的是鏈式查找的方式,一層一層往外查找

          • 先是查找外一層,有沒有,沒有在往外接著查找,找到了我就輸出相應的結果

          • 沒有的話繼續往上找就可以了,所以這個方法,我們稱為作用域鏈

          • 簡單總結就是就近原則,誰離我近我就執行誰


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

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

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

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

          前端腳手架的執行原理

          前端達人

          最近收到幾位老師留言,提到一些腳手架相關的問題,跟著自己淺顯的理解,以vue腳手架在windows系統上的執行為例做個分析。

          正題之前,先說幾個概念

          腳手架的本質:運行在操作系統上node客戶端里的可執行程序。

          腳手架做了哪些工作?一般腳手架的工作內容主要包括三方面:

          1. 創建項目+通用代碼: 埋點、http請求、工具方法、組件庫。
          2. git操作: 創建倉庫、代碼沖突、遠程代碼同步、創建版本、發布打tag。
          3. 構建+發布上線: 依賴安裝和構建、資源上傳CDN、域名綁定、測試\正是服務器。

          腳手架給我們帶來哪些好處?提升前端研發效能?。ň瓦@么一句空話~~)從其為我們帶來的最終體驗上來講,是實現研發過程的:

          1. 自動化:項目重復代碼的copy、git操作、發布上線操作;
          2. 標準化:項目創建、git flow、發布流程、回滾流程;
          3. 數據化:使研發過程系統化、數據化、使得研發過程可量化。

          腳手架的命令執行

          vue create csjName –g
          1. vue 是腳手架名稱
          2. create 是command,腳手架中已注冊的命令
          3. csjName 是params,命令的參數
          4. –g 是options,命令的配置
          5. 一般options后也會有參數,我們稱之為配置參數,上面命令其實是省略了true
            vue create csjName –g true

          下面說一下vue腳手架的執行過程

          環境要求,已安裝node

          先來思考一個問題:

          我們安裝vue腳手架時,安裝的是@vue/cli

          npm install @vue/cli –g

          為什么創建項目的時候用的卻是vue

          vue create projectName

          咱們先看 npm install @vue/cli –g命令完成拉資源后,在操作系統中都做了什么。

          命令執行完成后,咱們切換到D:\mysoft\node\node_global(這個是自己安裝node時設置的全局npm包的安裝路徑,并且已配置到環境變量中,不清楚的老師可以去熟悉一下node的安裝教程),發現此路徑下已經生成了一個cmd命令vue.cmd,因為此路徑已配置到環境變量中,所以在cmd我們必然可以直接輸入vue來執行vue.cmd。

          那么vue.cmd文件中又執行了什么?打開vue.cmd

          可以看到,其實它是去調用了vue腳手架資源路徑下的vue.js文件

          正如我們在這個路徑下執行

          node vue.js create csjName

          是一樣的。腳手架的命令及其參數的注冊與解析都在此文件中完成。具體的代碼邏輯不再深入講了,因為我也沒看。。。。。

          再來思考個問題,在完成腳手架資源的下載后,為什么會在D:\mysoft\node\node_global下自動生成一個vue.cmd?我們能不能自定義這個腳手架的名字?

          其實每個腳手架都是npm項目,vue.cmd是在此npm項目的package.json中配置的,我們也可以對其自定義修改。

          欲修改腳手架名稱,直接去D:\mysoft\node\node_global下重命名vue.cmd即可。如果是自己的腳手架,可在npm項目內的package.json中通過上述配置,指定腳手架的名稱。

          補充

          另外在linux或mac系統中,其實node\node_global下并未生成vue.cmd,而是生成了一個叫做vue軟鏈接,并且鏈向了node_global\node_modules\@vue\cli下的vue.js。

          而且在linux和mac系統中,并未使用node vue.js,而是直接執行了vue.js那是因為在vue.js頂部已通過Shebang聲明當前文件默認使用系統中環境變量/usr/bin/env 下的node解釋器執行。此語法在windows系統中無效。

          以上是對vue腳手架在windows中執行過程的淺顯理解。不到之處,還請指正~~

          最后安利一個自己已發布的npm項目csjtools,旨在打造一個前端通用的工具庫,就是自己平常封裝的js工具函數,如對timeout的異步封裝、對storage的面向對象的封裝、對日期格式的轉換、還有對象之間的深比較等,目前工具還不夠豐富,歡迎大家一起使用&完善,一個人的力量很小~~

          npm install csjtools -g 


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

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

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

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

          重新設計東南亞頭部在線超市的真實案例

          lanlanwork


          I. 發現

          客戶訪談

          由于這位甲方的合作態度良好,所以設計師有機會與 SESA 的創始人和產品經理進行了 2-3 次會議。

          借此了解了業務目標、用戶需求和技術限制等關鍵問題:

          圖片

          主要問題:

          • 低轉化率:雜亂的界面使用戶很難瀏覽商品。
          • 手機端體驗不友好:幾乎 90% 的用戶是通過手機訪問網站,但手機版的設計不夠理想。
          • 手機端糟糕的界面和體驗:目前他們使用的是現有的網站模板,根據目標用戶的反饋,缺乏優化而且加載速度很慢。

          客戶需求

          • 一鍵式購物
          • 輕松的界面和體驗
          • 無縫的商品搜索
          • 折扣和優惠更容易被看到
          • 使用網站時能感覺熟悉而簡便

          成功指標

          • 增加客單價
          • 增強人們的對品牌的認知感
          • 增加用戶和訂單數量
          • 無縫的體驗
          • 讓健康的生活方式更加受歡迎、評價、容易取得,更加有趣而美好
          • 提供并教育用戶健康的生活方式,并轉化為愉快美好的生活

           

          目標人群

          根據產品團隊提供的數據,整理出了目標人群的特征:

          圖片

           

          II. 構思

          人物角色

          根據以上信息,整理出了兩個完全不同的人物角色:

          圖片圖片

           

          故事版

          沒有區分人物角色的故事版:

          圖片

          目標用戶的故事版:

          圖片

           

          體驗地圖

          思考分析用戶旅程的五個階段(探索網站、比較商品、確認下單、完成購買和接收配送)和用戶感知的三個方面(行為、思考和感知),制作了體驗地圖:

          圖片

          將當中的關鍵信息挑選出來:

          圖片

           

          競品分析

          設計師找到了三家主要競品,先大概了解他們的特色和優勢:

          圖片圖片圖片

          然后從 Google Play 的評論中尋找競品的問題,這樣就可以思考如何戰勝他們:

          圖片圖片

          P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產品),具體方法我之前有分享過:別總想著數據分析/用戶調研,先把評論分析做了吧!

           

          III. 設計

          信息導航

          先把大致的用戶流程確定下來,這樣對整個產品就有了一個整體構思:

          圖片

           

          線框圖

          然后用手畫出線框圖,定下頁面的整體布局:

          圖片

           

          低保真

          將線框圖手稿用繪圖軟件細化,制作成低保真方案,用來向客戶展示和做用戶測試:

          圖片

          圖片

           

          IV. 完成

          可用性測試

          找用戶做測試時,用的是低保真可交互原型。

          根據測試發現的問題,設計師直接將優化方案運用到了高保真方案上,所以下面整理的問題都用高保真方案來配圖展示:

          • 1. 自動定位:測試之前用戶必須手動搜索位置。
          • 2. 屬性選擇:由于客戶想要一鍵式購物,所以當用戶點擊熟悉(通常是重量)右側的箭頭時,可以反轉卡片進行詳細選擇。

          圖片

          • 3. 促銷展示:原本設計了三個促銷區,但是測試中發現用戶面對大量的信息無法充分理解,所以移除了一部分,只保留了頭圖和分類優惠。

          • 4. 商品導航:為了避免用戶迷路,將商品分類導航放在了所有頁面頂部,并且懸停時展示子分類和相關文章。

           

          高保真

          圖片

           

          響應式

          這個網站需要具備很高的響應式能力,不論在 PC 端還是手機端,都能輕松使用。

          但由于 PC 端和手機端的尺寸相差太大了,所以不得不使用斷點(Breakpoint)來判斷用戶當前處在哪個端,并展示相應的界面。

          這個斷點的概念在柵格系統很常用到,指的是當界面尺寸縮小或增大到某個(或幾個)零界點時,間距大小或其它界面元素發生突變。

          圖片

          上圖來源:三種最主流的響應式柵格

           

          這個方案的對于移動端的特殊處理包括:

          • 確保商品分類的位置,方便用戶記憶
          • 使用漢堡菜單
          • 提供模仿原生 APP 的吸底導航

          圖片

           

          Before&After

          最后對比一下優化前后的方案:

          圖片

          圖片
          圖片
          圖片

          圖片

           

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

          作者:設計師ZoeYZ

          轉載請注明:學UI網》重新設計東南亞頭部在線超市的真實案例

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

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

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

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




          原子設計方法論!值得一學的設計思維模式

          lanlanwork


          1、什么是原子設計?

          原子設計是創建設計系統的理論方法,分為原子、分子、組織、模板、頁面五個層次。從最基礎的原子開始,原子構成分子,分子組成組織,相互協作以創造出更有效的頁面。

          原子設計借鑒了化學中看待事物的方式,并將其應用在數字產品中。例如我們看的界面是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

          圖片

          原子設計是一種思維模式,并不特指某一種設計風格或框架。通過原子設計理論,將產品和頁面聯系為一個有機的整體,其中的每個小元素都發揮著至關重要的作用。

           

          2、原子設計方法論: 從原子到產品

          原子設計有特定的框架,方便幫助設計師組織思路并在設計過程中作為指導。

           

          原子

          原子指化學反應不可再分的基本微粒,雖然基礎但會對分子和個體的形成產生很大的影響。

          同理在設計中,原子是構成設計的最基礎的元素,可以是一個icon、一種字體…本身不具備特有的功能但這些基礎元素同樣值得重視。

          圖片

           

          分子

          分子由原子構成,以一定的次序和排列方式結合成分子。回到設計中,多個設計元素組合在一起,也會創造出一種新東西——具有明確功能性的組件。

          圖片

          原子設計強大的地方在于,可以為分子(組件)的創造分配時間,以確保組件具有明確的意義和功能。

           

          組織

          不同的分子組合形成組織,在設計中各種不同的組件組合在一起,形成一個完整的功能模塊,例如在首頁輪播圖模塊,有圖像、文字等元素,還有按鈕、導航箭頭等組件。

          利用組織這個概念能幫助設計師建立模塊化意識,對頁面結構有更深入的理解。

          圖片

           

          模板

          通過元素、組件和功能模塊的相互關聯,從而得到產品的模板即產品框架,也可以理解為產品的低保真線框圖。

          圖片

          在這個階段,產品的信息架構和可視化的層次結構變得非常重要。產品頁面、搜索結果頁、主頁等都有各自的模板,會顯示內容的結構和基本的原型,方便后期使用。

           

          頁面

          在模板基礎上,繼續添加需要的細節,最終會形成完整的頁面,即產品的高保真原型。

          這個階段中需要注意的是,頁面中所有的占位符盡可能提供真實的內容——真實的圖像、真實的文案。

          圖片

          對于完成的頁面,我們可以利用原子設計的靈活性來調整和優化頁面設計。

          比如當有某些地方的設計沒有達到預期,可以靈活調整頁面中的某個分子或組織模塊來實現想要的效果。

           

          3、原子設計的優勢

          靈活性和適應性

          原子設計是在設計過程中構建事物的方式,但它并不限制對環境變化做出反應的自由。

          通過為產品中的每種類型的內容創建組件和模式,獲得一個靈活的系統。模板為產品的一致性提供了一定的支撐,后期既可以按這些模板原型快速設計,也可以根據需求靈活調整。

          原子設計相當于將設計內容納入到一個模式里,組成的頁面不僅擁有準確的內容,并能以最好的樣式展現出來。

          圖片

           

          系統模式

          原子設計鼓勵設計師投入時間和精力來創建整個系統,以便在產品設計的最后階段,能夠以一種高效的方式靈活地完成設計工作。

          圖片

           

          更少的組件,更高效的開發

          利用原子設計可以確保在項目過程中組件的數量會受到一定的控制,避免團隊重復設計同一個組件的多個版本或提供樣式差不多的副本。

          圖片

          控制UI組件的數量,帶來的好處之一就是開發的效率會變得更高。有了以原子設計方法為基礎的理論架構,設計過程的每個環節會緊緊串聯在一起,避免混亂。

           

          最后

          原子設計成為一種用戶體驗設計方法,以全新的方式帶領大家設計每一個元素、組件以及頁面,通過這樣的方法論有助于設計師構建一個完整的設計系統。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》原子設計方法論!值得一學的設計思維模式

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

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

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

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



          2021 必備的超贊神器,用上它,效率都要提升三倍!!

          lanlanwork


          圖片
          上圖就是這個神器制作出來的一些效果,之前看Dribble上面有很多類似的設計,現在終于知道它們大部分來源于這個神器。
          下面我也找了一些案例,大家一起來看看。
          圖片
          圖片
          圖片
          這樣看,效果還是真的不錯,它支持顏色修改、樣式修改,目前一共有11種幾何樣式。
          圖片
          好了,現在下面正式介紹這個傳說中的神器,我相信大家一定會喜歡上的。
          圖片
          上圖就是這個神器的基本外貌,一共11種基礎類型,當點擊其中一個進去后,可以進行編輯。
          這里我點擊上圖中的第二個模式(MIXTAPE)進去。
          圖片
          如果大家英文不好,可以將整個頁面翻譯成中文,Google自帶的翻譯
          進入這個頁面,大家可以根據自己喜歡的風格調整樣式,同時還可以修改顏色。
          圖片

          比如我可以選擇8X12列和行的幾何布局。

          圖片
          對顏色、列和行、開啟陰影調整,得到如上效果。
          圖片

          最終可以導出一張高清大圖(3240X4860),尺寸是完全夠用的。

          圖片

          隨便調整下又是一張不錯的幾何背景,還可以作為作品集封面。好了,關鍵時刻來了,神器的網址已經打包好,大家可以拿去使用。

          領取方式如下:添加小編微信,備注:神器699,小編會將下載地址發給你(小編不是機器人,回復會慢一些,大家稍等)。

           

          原文地址: 功夫UX(公眾號)
          作者: 功夫UX

          轉載請注明:學UI網》2021 必備的超贊神器,用上它,效率都要提升三倍!!

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

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

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

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



          需求太碎?設計師如何在小業務中提煉價值

          lanlanwork


          Chapter One .
          理清小業務的業務目標

          相對于大業務(例如網站改版),小業務因為簡單,其業務目標界定常容易被忽略。在日常設計中常會遇見設計師在不知道業務目標是什么、目標模糊、目標不正確的情況,直接從梳理小業務具備哪些功能入手,分析下現狀問題后開始制定設計策略,這往往會導致設計出現解決不了關鍵問題、出現偏差情況。產品功能本身只是滿足用戶需求和實現業務目標的服務載體,只是策略的表象。理清小業務所承擔的業務目標是前提,那么如何理清呢?

           

          理清業務目標

          小業務目標來自大業務目標,對大業務的業務目標進行一級級向下拆解后,即可獲得小業務對應的目標。目標拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標的拆解有一定難度)

          圖片

          Dapp設計詳情為例,在酷家樂大增長業務背景下,用戶活躍和用戶留存為核心的目標,設計詳情處于設計路徑的一個節點,拆解得到設計詳情的5個主要業務目標:

          • 設計詳情-用戶周活躍
          • 設計詳情-新用戶留存
          • 設計詳情-老用戶留存
          • 設計詳情-內容投稿數
          • 設計詳情-內容分享數
          圖片

          業務目標可分為2個類別:

          • 第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達成;
          • 第二類別:不符合用戶意愿,如內容投稿、內容分享,用戶不太會主動去完成,需要去創造動機,激勵用戶進行。

           

          Chapter Two .
          挖掘小業務關聯的用戶需求場景

          有小業務的業務目標后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現業務目標的達成。梳理清楚小業務服務了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?

           

          用戶訪談——獲取相關用戶需求場景

          用戶需求場景可以幫我們清晰了解到用戶使用產品的原因。用戶需求場景可以一句話進行界定,包含四個關鍵要素,其中需求本身最為核心,需要挖掘出當前訴求和其背后的潛在需求。

          “在【某環境下】,【某用戶】做了【某事】來滿足【某需求】”

          圖片

          用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設計師。梳理出設計詳情相關的8個需求場景:

          圖片

          訪談信息整合如下

          圖片

           

          規整用戶需求場景

          在業務訪談中獲取的場景往往都是碎片化的,碎片化場景對設計指導容易出現偏差,需要把場景結構化,為后續的方案設計提供依據。我把獲得的場景按照設計師設計流程進行規整,按設計前、設計中、設計后三個階段進行劃分。

          圖片

          以上梳理了設計詳情相關的用戶需求場景,再來看原設計詳情只基礎滿足了資料管理和方案展示的2個單一場景,在設計師的整個設計流程中只占了一部分。從設計層面來看,該2個場景局限在方案設計大場景中,設計更多做的是對其方案設計操作的體驗優化,在原有較好操作體驗的現狀下,其對給用戶創造價值上沒有很大增量。再從以上業務目標來看,2個單一場景很難去促使用戶對內容進行分享和投稿。

           

          Chapter Three .
          梳理產品功能矩陣

          在理清小業務的業務目標和需求場景后,下一步就是按照場景去梳理產品能力。

           

          小業務功能現狀分析

          老版app設計詳情的功能進行初步的現狀分析,設計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現,如營銷、談單;從業務目標來看,通過當前功能有較大的優化空間,如當前投稿很難讓用戶知道投稿有什么價值。

          圖片

           

          產品能力梳理

          分析現狀發現功能不足以支撐用戶需求場景,有獲取功能2個方向:

          1. 挖掘現有能力:可以擴大梳理范圍,從小業務所在的上一級業務到整個平臺,一級級往上梳理場景對應的現有功能。
          2. 打造新能力:圍繞場景,打造出新的功能

          圖片

          挖掘平臺上現有能力,可對業務的能力價值最大化利用,與其他業務形成互通,實現1+1大于2的業務價值。亦可圍繞場景打造新能力,可反推產品去發倔新功能。

          以下是設計詳情涉及所有場景的產品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進行了能力拓展。

          圖片

           

          Chapter Four .
          拆解每個場景的設計目標和策略

          在梳理出產品能力后,需要通過設計策略把產品能力有效組織起來,讓用戶快速感知快速上手使用。設計策略推導自設計目標,那如何得到設計目標?

          基于用戶需求場景將行為事件拆分,提煉行為事件再推導出設計目標,再基于設計目標給出設計策略。

          圖片

          Dapp設計詳情受制于移動端能力,只涉及設計詳情中5個相關場景,其設計目標和設計策略的拆解結果如下

          圖片

          拆解出設計目標后,基于目標分析產品現狀得到存在的設計問題。為什么要基于目標分析現狀?首先需要明確什么是問題,問題是導致目標和現狀不一致的原因。只有明確了目標才可以理性分析與現狀存在多少問題。在日常中時??吹皆O計師會直接得到問題,很多情況是默認假設了一個預設目標,但這目標得到不嚴謹、不全面,容易導致得到的問題本身也出現偏差。設計策略基于設計目標或問題得出,其最終都來自設計目標。

          圖片

          對老版Dapp設計詳情現狀進行了分析,得到了問題:

          圖片

           

          Chapter Five .
          設計策略落地

          在上一步得到設計策略后,圍繞著設計策略是設計方案。本段將不全部展開說明,只選3個關鍵點講述設計方案的思考

           

          設計詳情框架的設計

          Dapp設計詳情涉及5個場景的承載及產品功能繁多,設計三步思考:

          第一步:簡化功能認知,對功能結構化,以場景的維度重組織功能,并以場景打造功能集合的認知,建立場景能力區;

          第二步:梳理場景共同涉及的內容,作為聯系的載體承載場景的放置,設計詳情中展示態的方案涉及到了5個場景中的4個場景;

          第三步:提取場景中即時性和高優先級功能,打造快捷功能區

          框架如下:

          圖片

          建立框架后,填充具體的能力和內容。如場景入口放置于底部,并根據場景優先級做了主次的區分。

          圖片

          設計詳情框架建立后,打造細分場景中的設計。

           

          營銷獲客場景設計

          營銷場景的設計,將營銷組成拆分為可營銷內容、營銷的渠道、渠道內容展現三大類,就可以清晰去梳理出現有的功能,以及可從內容、渠道各自去拓展挖掘。內容和渠道清晰后,再傳達各渠道提供的價值激勵用戶去觸發行為。

          圖片

           

          談單場景設計

          談單場景關鍵在方案詳情上,談單面對不同情況,存在多種內容形式去展示方案。在上面內容梳理中最主要是3個內容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解,亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航,可快速切換到需要講解的地方。

           

          Chapter Six .
          上線驗證

          上線后數據平穩后觀測,設計詳情的周活提升了89%,每個場景下的功能數據都得到顯著的提升(tips:有部分數據因技術原因沒有采集到)。除了改版了Dapp側的設計詳情,后續對PCweb側的設計詳情進行迭代,同樣起到不錯的結果。數據的結果驗證了方法的可行,并起到了積極的效果。

          圖片

           

          Chapter Seven .
          思考小結

          以上是我應用這套設計方法去做了塊小業務優化,反向推動進入產品迭代,上線后取得了不錯的成績。在本次賦能后,對小業務中多了一些感悟

          • 小業務是大業務的縮影,可以作為去賦能大業務前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業務改動影響面也小
          • 因知識廣度和深度的限制,不是所有設計師都可以一開始就可以把控大業務,小業務可作為打磨設計深度專業度,一些小業務的復雜度并不低于大業務
          • 該設計方法同樣適用于大業務,但方法是死的,不是所有情況都套用,得需要把握重點靈活應用
          • 不要總想著搞個大新聞,在能力未被業務方認可時,小業務的賦能可以成為一個很好的發聲口
          • 不要輕視小業務,有可能是你根本還不了解

          以上內容,感謝閱讀!

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:小波

          轉載請注明:學UI網》需求太碎?設計師如何在小業務中提煉價值

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

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

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

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


          B端設計也“好色”

          ui設計分享達人


          我們需要什么樣的配色方案?


          B端的系統的主色代表著一個系統的氣質,與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案,目的就是期望從它們身上找出共性,引領我們的系統找到最適合的方案,這是知彼。

          光有“知彼”是不夠的,我們還要清晰的知道自己是誰?這樣我們才可以說我們的配色方案是最適合我們的,有理有據的方案。


          B端系統的真正使用人群比較復雜,具有年齡跨度大,文化水平參差不等,從事行業廣泛等特點。



          源于自然之美的色調,突顯靈活性與再生的創意!


          依據彩通色彩研究所專家的說法,紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩,這些色彩的百搭性質穿越季節,容許更多的選擇自由,適于表達原創的風格,也足夠靈活來適應現代新的更片斷化的生活方式 。

          “2021春夏的色調呈現出大自然,強調我們渴望擁有全年皆宜的靈活色彩,這一季的色彩充滿道地真實的感覺,這種感覺對色彩而言愈來愈重要,同時結合了某種程度的舒適與輕松感,并散發出活力,激勵振奮我們的心情”


          說到這里“主題色”如何來選擇?


          色彩對于人的大腦的沖擊力大于造型,比如淘寶,我們會記憶起淘寶的主色是橙色;色彩是影響人類視覺思維的重要因素,色彩能直觀的體現產品的性格和氣質,所以選擇一款適合產品的主色很重要。


          我們的用戶在更替,如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題,新的用戶群體從小接受的教育和喜好決定著產品的發展方向。

          比如:我們這次顏色升級中律動、青春活力是核心關鍵詞,而藍色則可以讓產品視覺符號得到延續。



          對于主題色的選擇指標有哪些?


          通過關鍵詞圖片像素化提取顏色,同時參考B端產品顏色流行趨勢和當年的年度流行色,以及竟品顏色分析結果,獲取藍色的色相、純度、明度范圍。


          2020潘通年度顏色經典藍(19-4052 Classic Blue),顏色值為#174A7B(H207 S81 B48)

          2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver,顏色值為#02569D(H207 S99 B62)


          假設:竟品的主題色藍色的色相范圍為205-225;純度的范圍為70-96,平均值為86;明度的范圍為70-98,平均值為88,B端產品流行趨勢的主色也多是藍色系,色相范圍為200-232;純度的平均值為70;明度的平均值為68。



          色彩的使用范圍及色階有哪些?


          色彩的應用場景包括:關鍵行動點,操作狀態、重要信息高亮,圖形化等場景;針對這些使用場景只有一個色值是不能滿足所有場景使用的,所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級,或傳達信息,或強化界面層級。


          在色彩系統中,常使用 Tints and shades 系統來建立調色板,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板,在符合無障標準的區域,選擇不同明度飽和度的色彩,形成有梯度、有層級的彩色調色板。



          B端產品中光有“主角”是不夠的,還要有“配角” 所以我們還要看一下輔助顏色是如何定義的?


          輔助色是為了幫助頁面區分狀態和層級而設立的顏色,主要包括圖表類儀表盤顏色和功能色,通過合理的顏色傳遞產品正確的信息,讓其信息傳達更明確清晰。


          輔助色的作用是配合襯托產品主色調,在不同的產品中,輔助色運用的策略是不同的,比如我們在竟品調研中發現,輔助色經常是取自主色的鄰近色、對比色和互補色等。


          儀表盤配色:通過對竟品的分析可得知,優秀的儀表盤的配色有多系列及低純度的特點,多系列配色是為了滿足用戶個性化的需求,而低純度是考慮用戶在長時間使用產品,色彩對其心理的影響。


          功能色:這類顏色在系統一般不會隨意更改,而且特定的語義一般都有固定的色相,只需改變其純度和明度,使其視覺上符合主色的氣質,使其搭配和諧。


          1.通過默認主題色選擇輔助色及默認儀表盤顏色

          我們以默認主題色為#467FEA(H 219 S 70 B 92) 為起始點,S(飽和度)、B(明度)保持不變,H(色相)以180°為起點,以15°為增量或減量標準,生成24色色板。這個色板是我們選取輔助色的重要依據。



          以鄰近色、互補色、對比色為原則選擇豐富的顏色


          鄰近色:在色相環中,相差15°的顏色為鄰近色,凡在60°范圍內的顏色都屬于鄰近色的范圍,主色和鄰近色的色系組成的搭配,可以在同一個色調中構建出豐富的視覺層次感和質感,賦予不同的功能含義,信息表達明確,和諧統一感很好,視覺上的趣味性,顏色的搭配顯得很柔和。


          對比色: 在色相環中,角度相差120°-180°之間的色彩,這里使用了120°為角度來選擇對比色。


          互補色: 在色相環中成180°角的兩種顏色,互為補色;主色可以和其互補色的兩個色彩的搭配,該色彩可以為鄰近色,例如:藍色和黃色、橙色的搭配;這種搭配既能保持互補色搭配強烈的對比度,區分關鍵信息,次要信息,又能增加視覺上的趣味性,色彩看上去豐富多彩。


          例如:藍色作為主色,互補色黃色作為輔助色應用在圖表、圖標和標簽上,再選擇黃色的鄰近色橙色作為另外一個輔助色,應用在不同的關鍵信息上,有助于用戶更好的閱讀產品的功能和內容。



          獲得輔助色-9色相


          通過鄰近色、互補色和對比色的選擇,我們從24色色相環中得到了9色相色環,9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。


          校正輔助顏色


          雖然我們保持相同的飽和度和明度,使用科學的方法得到了較為合適的色相,但由于色彩本身自帶感官明度屬性,導致在視覺感受上的感官體驗并不同頻。


          黃色、綠色的明度即發光度較高,藍色就稍微偏暗一些,導致色板看起來不一致,為了讓不同色相看起來更加協調,需要調整色板的明度和飽和度,以保證視覺感官體驗同頻且更加和諧舒適。


          校正后的顏色主要用于功能色和儀表盤顏色。




          從輔助色中提取功能色及儀表盤色系


          通過對竟品的分析總結同時結合默認主題色分析得出的9色色環,歸納分離,最后形成系統的默認儀表盤顏色。


          功能色的目的是明確信息及狀態,比如成功、出錯、失敗、提醒、鏈接等;功能色的選取需要遵守用戶對色彩的基本認知,結合分析得出的9色色環,顏色校正,得出系統功能色。




          輔助色的色階


          為了度量不同的可視化從高到低的數值,我們儀表盤顏色遠遠不夠,所有為了保證視覺上的統一性,我們需要加入輔助色的明度色階來區分數據層級。


          同時我們產品有深色和淺色兩種模式,由于視覺對比的原因,在深色的場景看下看的顏色,和淺色場景下看到的顏色是兩種感受,深色場景下顏色會發亮,所以為了保持視覺上統一,我們也需要加入輔助色的色階。


          輔助色色階建立方法與主色的色階建立方法一致,使用 Tints and shades 系統,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板。



          模擬方案一主色、輔助色及消色匯總


          通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶,我們分別給顏色取了名字和編號,命名方式采用植物色彩命名,這也是200多年前顏色數值出來之前的命名方式,最早見于1814 年出版的《維爾納色彩命名法》



          本期交流就先到這里,希望這個配色的思路能夠幫到大家,感謝大家的耐心觀看!

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

          文章來源:站酷  作者:Evan繪酷設計

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

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

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



          當你設計時,你應該思考些什么

          ui設計分享達人

          作為設計師的我們總會在自己的閑暇時間去做設計有關的練習,那么我們到底有沒有深入思考過我們怎么去練習以及如何思考才是最有效的呢?也許有的人練習了很久發現自己的進步速度很緩慢,有的人練習的不多,但每次輸出的作品質量跟上次相比卻提升很多。那么其中的差異到底是出現在哪些方面呢,我之前也一直在思考這方面的問題?,F在將自己領悟出來的一些方法分享給大家,希望能夠起到一些幫助。



          前言:什么是最有效的學習方式


          在開始正文之前,我希望大家能夠理解什么是最有效的學習方式。在當前的大環境下,各個平臺學習類的教程或者文章層出不窮,我們似乎總是有學不完的知識,每天也都在積極地學習,當時看完覺得收獲頗豐,但一天工作下來也許看過的東西就忘了50%,甚至過了一周后發現自己已經什么都忘了。


          那么你有沒有思考過為什么會產生這樣的結果呢?對于自身的學習和思考方式我們是不是還有待改進的方法?我們可以先來了解一下學習金字塔這個模型:

          學習金字塔是美國緬因州的國家訓練實驗室研究成果


          從圖上我們可以看出,我們平常用的最多的聽講或者閱讀的學習內容留存率[兩周以后還能記住內容的多少]僅僅只占5%~10%這個區間,而討論/實踐/教授給他人等這種需要自身參與性強的學習內容留存率則高達50%-90%,平常通過閱讀等獲取信息很容易遺忘的原因也有一部分在于此。


          不難發現,前四類的學習行為都是屬于被動輸入型學習,而后三類學習行為則是屬于主動輸出型學習。這也就是常說的“最有效的輸入方式就是輸出”。


          因此要想提高聽講或者閱讀的學習內容停留率,我們需要將被動輸入轉化成主動輸出,即我們在進行這類活動時需要調動大腦積極思考,將大腦接觸到的信息與我們已經掌握的知識產生關聯去想一下我看了這些內容可以運用在哪些方面以及怎么去運用,并在最后真正用于實踐[經歷過實踐去輸出你才會發現那些潛在性的問題]。我們才能更為有效地去消化一篇文章或教程。好了,希望大家看完能積極思考一下本文所闡述的內容,能夠擁有一些不一樣的收獲就是我寫這篇文章最大心愿。那么接下來進入正題。



          01 明確自己的設計目的


          做任何事情都應該擁有一定的目的,因此我們在開始一項設計練習時,第一件需要做的就是確定我們的練習目的,即你通過這次練習想要表達什么,這種表達可以是技法的展現或者說內心情感的表達,只有明確當前的目的性,你才能有更精準的方向。

          但很多人會發現即使自己設立了目的卻總是會因為各種原因而中途放棄掉,那么能讓我們去堅持完成目的的核心是什么呢,就是去量化你的目的和設立明確的截止日期。量化目標就是要將你的大目標分解到具體每一天應該完成的小任務,這樣拆解不僅降低了目標的難度,也能清楚知道每天該做什么,有明確截止日期的話就能避免拖延。


          比如拿“在一個月內我的練習目的是做電影界面的設計“和”在1月1日至1月30日期間我要完成30張電影界面“相比,顯而易見后者的目標更具象,更具操作性。只要我保證每天一張界面,即可在規定時間內完成任務,偶爾如果遇到特殊事件也能及時彌補落下的部分。前者模糊不清的目標很容易讓我們三天打魚兩天曬網,一張界面也是練習,一百張界面也是練習,也許一個月下來發現自己就做了那么幾張界面,完全達不到練習效果。



          02 目標的確立要跳出我們的舒適區


          很多人會說,我確立了明確的目標啊,也有在堅持練習,可一段時間下來卻感覺自己的能力沒有很明顯的提高。這有可能就是你的目標建立出了問題。那么怎樣的目的才能最有效地提升我們自身的能力呢,在我看來跳出自身舒適區去建立目標效果才是最正確的。

          舒適區指的是一個人所表現的心理狀態和習慣性的行為模式,人會在這種狀態或模式中感到舒適。舒適區,又稱為心理舒適區。


          如果你發現你每次確立的目標自己都能夠很輕松愉快地完成的話,那么你可能只是一直在自己的舒適區內做著重復性的工作, 對自身的能力提升并不會出現顯著變化,也就是常說的那句話“你不是有五年工作經驗,而是把一個經驗用了五年!“

          跳出舒適區,指的是來到學習區,去有意識地練習那些你了解過,但是不能熟練應用的技能。例如你對界面的設計已經比較熟練了,但是你對交互動效這一部分仍然感到比較陌生,那么如果繼續堅持界面練習可能只是簡單在堆積你的練習數量,這時你更應該去嘗試一下界面的一些交互效果并將其制作出來。


          這樣你就可以將你已經掌握的知識與并不熟練的知識連接起來,從而能夠更高效地學習和吸收新的知識。前期盡量選擇簡單的效果練習,循序漸進,以此來建立你的自信心,不要急于求成而誤入恐慌區,妄想在幾天之內就能夠做出和從業幾年的大神一樣的高難度復雜效果,那樣不僅學習效果差,還會打擊你的自信心,造成反效果。



          03 多看的重要性以及怎樣去看


          相信大家對于多看這一點已經是耳熟能詳的詞匯了,曾經也聽過很多次大神分享,無一不提及多看多練這種類似的話。那么你有沒有深入思考過為什么很多高手都在提及這一點呢,我們所謂的看和他們的看是否說的是一個概念呢?

          牛頓曾說“我之所以比別人看得遠一些,是因為我站在巨人的肩膀上”,那么在我的理解范圍內,多看即是站在巨人的世界里看設計。


          在諸如國內網站站酷/UI中國以及外國網站dribbble/behance等平臺上,我們可以找到很多優秀的設計作品(在看的過程中可以不要只是局限于UI設計,可以更多地看看首頁的其他作品,能夠最大限度地提高你的審美),遇見好的作品我們不要只停留在視覺表面,要學會去分析好的設計,以及與我們自身所做的界面產生對比。


          分析最直接的方式就是自我提問。這個設計我為什么會覺得它好看,是顏色的搭配吸引了我,還是版式的設計非常合理,又或者是整體的配圖非常和諧?”當然,你還可以更近一步——“顏色的搭配是哪里吸引了我,是對比色用得非常合理,還是整體色彩的占比非常平衡,又或者說是顏色的明度和飽和度搭配得非常好看?“


          最重要的是要聯想到自己已經掌握的知識,將你發現的好的方面與自己的知識進行結合。“如果我下次在做界面練習的時候,我該怎么去使用這種色彩搭配,如果換成其它顏色,我有沒有能力將它搭配得像這樣和諧美觀?“

           

          這樣自我提問的方式最終目的是將好的東西內化為自己的知識,否則你看再多的東西,也只是你每天所接觸的信息而已,過眼即忘,并不能有效轉化成為你的設計認知。當然,你要將那么好看的設計都收進你的素材庫里,好記性不如爛筆頭,建立素材庫就是為了讓我們更好地去復習我們曾經欣賞和思考過的東西。

          自己的eagle資料庫



          04 不找參考的設計都是耍流氓


          畢加索曾說過這樣一句話:好的設計師借鑒,偉大的設計師偷。喬布斯也曾說過類似的話。舉個例子,我們可以先看左邊一個比較古老的界面-施樂公司70年代的界面,再看右邊喬布斯拿來改進的做的macintosh界面:

          以及經過改良后的macintosh界面,然后比爾蓋茨在看過這個設計后而做出的關于微軟的界面

          看了上面兩幅對比圖,我們可以發現,偉大的人在創作時也需要找參考,但他們都是盡量吸收參考好的部分,然后加入自己的思考和理解,去創造更好的東西。他們并不是說憑空就可以創造出經典的東西。


          所以說,找參考是設計過程中非常關鍵的一個步驟,在找參考的過程中,就相當于你在和其他優秀的設計師對話。因為一個設計師的腦容量是沒法與全世界設計師的腦容量相比的。雖然參考不一定是你做設計的標準,但卻能對你的創意和設計帶來一定的方向和靈感。因此我們在開始一項新的設計目標前找參考,去觀察別人的作品是怎樣表現的,他們設計的東西出彩的地方在哪里,和我心中所想的有哪些不一樣,我該怎么在我的設計中去融合那些出彩的東西。


          只有當你找到足夠多的參考,你的心中才會有一定的衡量的標準,才會知道好的設計和壞的設計差距在哪里。最終體現在你所做的設計上。也許有人會說,有的厲害設計師感覺都不怎么找參考,那是因為他們的腦海中已經積累了足夠的參考來讓他們自由調動。



          05 你在設計時是否做到了專注


          我們可以做一個小實驗,在自己手機上下一個Forest[番茄時鐘],設定兩個小時的設計練習時間,看看在這個持續時間內你有多少次會情不自禁地拿起手機看消息。(我在做這個測試的時候會發現有很多次都會無意識拿起手機看信息),由此可見我們即使是在練習時間內也會存在很多浪費時間的小動作,如果丟掉這些小動作,我們在有限時間內的產出將會大大提升。

          我也是在前些日子看《深度工作》這本書時才意識到專注工作的重要性。書中說:想要迅速掌握困難的技能,你必須高度專注,不能有任何干擾。高質量工作產出=時間x專注度。而現實中的我們往往是花費了很多時間,卻由于自己的專注度很低,導致整體效率和產出都大打折扣。我想這也能解釋為什么都是在同樣的時間內,每個個體的成長度都不一樣,成長快的人會把單位時間的效率發揮到極致。


          因此在每次給自己規定設計練習時間的過程中,盡量找一個安靜不受打擾的環境,將手機設置成番茄時鐘模式,保持高度的注意力去完成自己的練習目標,你會發現你比平時用了更少的時間卻做出了更好的東西。



          06 對于規范的理解


          我們應該知道,UI設計不同于繪畫以及平面設計,它是基于一定限制而進行的設計活動,而這些限制我們稱之為設計規范。就像你在開始游戲之前需要知道游戲規則一樣,我們在開始設計前也是必須要了解相應的設計規范的。比如狀態欄的高度,底部圖標的大小,間距的大小,字號的規范等,在這里不做詳細解讀。也許剛入行的人會覺得設計規范限制了設計的發揮性,但其實規范只是讓你能夠朝著一個統一的方向和保持基本數值的準確性,但卻依然能夠給設計很大的發揮空間。就像之前看到的一段話:[此處將其做成了一個圖片]

          也許看完這個你更能理解規范對于UI的一種作用,盒子就像我們的手機,展示空間就那么大,你需要在一定的限制內發揮你最大的能力去做出好的設計。

           

          因此,當我們在練習app界面時,心中一定要有自己的一套規范(不論是否做出來),執行過程中嚴格按照定義的基礎規范來,從而更能夠高效地完成練習任務和保證界面的統一性。


          07 學會建立自己的界面走查表


          就像在學校時,老師總是強調我們試卷答題完成后一定要進行自我檢查去排除一些不該犯的錯誤。同理,設計也是一樣,每當我們初步完成了設計界面后,我覺得最重要的也是進行自我檢查,排除一些界面常見的錯誤。當然,我說的走查并不是單純看文字等顯而易見的錯誤,而是按照一個優秀的界面要求去走查我們的界面:


          設計風格統一了嗎?

          界面的整體設計風格是否統一,符合產品調性。顏色的使用/圖標的設計風格/圓角大小的統一等;

          圖片是否清晰?有無版權?

          你在整個設計界面所使用的圖片是否是高清的,有無模糊或者水印,圖片是否會構成侵權等,一個低質量的圖片會瞬間讓你的界面下降了一個檔次;


          信息層級拉開了嗎?

          做的界面整體的字號大小是否有重點區分,能不能清晰地看出文字的層級關系,元素間距有沒有符合各層級的對比關系;


          投影用對了嗎?

          你的投影考慮了環境色的影響嗎,如果用純黑的投影會讓整個投影看起來非常沉重;


          你的界面有呼吸感嗎?

          你的界面看起來會不會很擁擠?不要堆得滿滿的,注意留白以保持元素的呼吸感,從而讓界面更耐看;


          對齊了嗎?

          不論你是工作幾年還是剛入行的新人,都一定不要忽略這個問題。左對齊右對對齊以及居中對齊。說起來很簡單,但不要因為這個錯誤的發生而讓別人質疑你的專業性;


          以上列舉了一些部分常見的界面問題走查,還有更多的界面基本問題值得大家去留意。我認為走查表的建立還是應該基于自身的經驗來制定,那樣不僅會更符合你的設計風格,更會讓你走查起來更加高效。剛入行的同學的話可以多看看高手關于界面精度提升的一些建議來作為自己的走查參考。



          08 不要閉門造車,走出去


          相信通過走查表的建立會讓你發現一部分的問題,但礙于自己的審美水平以及理解能力,我們很難去完全找出自己的問題。也就是說,當我們通過走查表糾正了一些常見問題后,我們要學會向大神們去請教問題。


          通過你認識的一些大神或者在設計群里發出自己的界面,讓其他更厲害的人去發現你界面的其它問題,這樣會讓你意識到一些你不曾發現的問題,從而提高你的判斷能力和界面水平,督促自己的進步。當然,不要把請教別人當成一件理所當然的事情,學會向那些給你提出界面修改意見的人們說一聲謝謝。(在這里也謝謝曾經幫助過我的那些可愛的人們~)

          寫在最后:少熬夜多鍛煉,注意身體健康


          在這里想向廣大辛苦奮斗的設計師們說一句,每次做完設計練習還有時間就多多鍛煉吧,身體從來就是我們奮斗的本錢,只有身體健康才能更好地作圖呢。所用時間的長短從來不是衡量一個人厲害的標準,熬夜不一定代表就能夠做出更好的界面,專注和高效才是我們應該學會的方式,希望大家在新的一年能夠用更少的時間做出更精致的界面。

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

          文章來源:站酷  作者:進擊的M

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

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

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

          交互深耕-B端設計師要懂的信息架構

          ui設計分享達人

          信息架構這篇是本人在現階段覺得較難學習與闡述的知識點,網上關于信息架構的知識內容也是參差不齊。在學習與探究的過程中查閱了很多資料,反復修改多次,盡量用直白的語言結合實例來闡述信息架構。目錄如下:

          大家可以根據上述目錄來進行選擇性閱讀,當然全文閱讀也是極好的~





          1.1 前言

          這篇文章的起源,來源于最近看到的話題“B端設計師會被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時代,很多頁面設計依靠組件庫就能夠快速搭建。


          那么在這種情況下,B端設計師存在的意義和價值到底體現在哪里呢?其實B端設計的重點并不在頁面的視覺上,視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現在做「正確的設計」,比如以下幾個方面:

          1.這個設計能否完成對應的商業目標和產品目標;

          2.我們的信息呈現是否合理以及能否解決當前需求;

          3.用戶能否在頁面上快速找到想要的信息;

          而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發現其論述本質上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知,這能夠幫助我們做出正確且出色的設計。


          1.2信息架構概念

          關于信息架構的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

          相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構拆分為信息與架構去理解。

          信息指的是內容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來,然后呈現出來。其本質就是研究信息的表達與傳遞。

          通俗點講,信息架構就是讓用戶可以更容易的理解我們的產品,讓用戶在使用我們的產品時可以更順利、更自然。因此信息架構沒有一個具體的呈現形式,它更多的是體現在產品設計的各方面。具體主要表現為組織系統、標簽系統、導航系統和搜索系統。





          為什么需要信息架構?我們都知道B端產品設計的核心是「降本提效」,在設計這一側的可以將其理解為降低認知成本,提升使用效率。

          降低認知成本需要我們更好的表達信息,讓用戶能看明白我們的產品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


          而信息架構從本質上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產品設計。如果沒有信息架構來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產品陷入難以上手或者不知道怎么用的尷尬境地。

          一個強大信息架構是產品質量的保證,是作為設計支撐點的骨架,它會減少可用性問題,提升整體導航行,創造對用戶友好的體驗。比如舉一個工具層面的例子:

          PS的工具欄堆疊在界面各個部分,而Figma的工具欄則集中在右側且只出現當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好,PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。


          可以說良好的信息架構是高效用戶體驗的基礎。視覺元素,功能,交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計,我們就需要參與到信息架構這個過程中來,和產品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。


          如果想要搭建一個好的建筑,我們需要知道其建造的目的,是按照什么樣的結構搭建,內部有哪些系統,以及最后呈現的模樣。


          那么信息架構也同理,我們首先需要知道信息是為了什么目標服務,然后我們通過怎樣的結構來組織這些信息,以及過程中會用到的信息元素,最后如何呈現它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環節沒有做好或者沒有了解透徹,那么在輸出信息架構時往往會出現方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現的。


          3.1 信息獲?。合壤斫鈽I務,再談架構

          B端行業對于業務理解的要求是比較高的,只有在理解業務的基礎上,將業務需求轉化為對應的設計目標,我們才能夠輸出合理的信息架構方案。

          個人認為理解業務的基礎,就是能夠用一句話講清楚當前設計的產品。這句話可以描述為:誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產品服務。


          雖然看上去這句話很簡單,但其中包括了三個要素:用戶、場景和目標。因此我們在分析和梳理業務的過程中首先要弄清楚的就是這三個要素。


          3.1.1用戶:分清購買者與使用者

          用戶永遠是排在第一位的,也是我們首先需要弄清楚的。在B端設計中,本質上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業微信,購買客戶是企業,實際用戶是員工。

          對于企業:「我想要有一款軟件可以更好的管理員工」

          對于員工:「我想要這款軟件能夠更好地提高工作效率」

          客戶決定了我們產品的購買(部分情況下也兼顧使用),而用戶則決定了后續產品的復購率。因此在業務理解中,我們需要弄清楚當前產品所處的服務階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產品的使用體驗又會偏向于用戶。


          因此我們首先需要弄清楚的就是當前產品是為哪些「目標用戶」服務,這也就決定了我們在設計信息架構時對應的不同側重點。


          3.1.2場景:需求源于場景

          場景是指需求產生的某種條件,這個條件包括但不限于環境、時間、地點、空間等,只有上述條件滿足,這個需求才能成立。這里可以把場景理解為產生該問題的原因

          比如當用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因為外界環境冷。這兩種場景涉及到的解決方案是完全不一樣的。


          在平日的工作中我們可以通過以下兩種方式來更好的了解業務場景:

          1.通過業務方文檔進行業務背景的初步理解。業務文檔中一般都會包括需求背景,我們可以通過文檔進行初步了解。

          2.通過業務溝通進一步加深業務背景的理解。由于很多B端業務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業務方或產品多次溝通來挖掘最底層的背景。

          畢竟需求背景是理解業務的重要步驟,我們只有知道需求產生的原因,才能夠針對性的給出解決方案。


          3.1.3目標:業務目標和設計目標

          目標決定了我們的產品最終的方向。我們首先接觸到的一般都是業務目標,而我們要做的就是將業務目標轉化為我們此次的設計目標。


          A.業務目標

          業務目標就是此次業務想要解決的實際問題,它通常是一個宏觀上的描述。比如打車軟件的業務目標簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。


          B.設計目標

          設計目標是我們基于業務目標而給出的設計策略,是一種更具體的實現方式。比如我們要讓用戶快速的打到車,那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配,并通過超時補貼紅包的方案來降低用戶焦慮。從而實現業務目標。而這一過程涉及到的信息點就有:司機位置、乘客位置、等車時間、補貼金額等元素,并需要思考它們之間的關系和呈現方式。


          可以發現從業務目標轉化到設計目標這個過程,實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。


          3.2信息架構核心:信息組織

          從前文可以看出我們會在整體設計過程中出現很多的信息元素。如果不經過對應的組織和處理,直接堆疊在一起,那么信息含義會比較亂且難以調用。比如下方:

          而右側圖片信息的組織過程可以理解為通過將零散的數據信息進行分類,再以某種結構化的形式將它們重新組合排布的過程,直白一點就是先分類,再結構化呈現。我用一張圖來表明這個過程:

          那么這個過程中「信息組織」和「結構呈現」到底應該怎么做,也就是接下來要講的組織方式和結構類型。


          3.2.1組織方式:模糊分類和精確分類

          組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類,比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內容信息都是按照時間來進行組織的:

          而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類,比如我們常用的APP商城是按照不同的主題類別來進行區分的。

          但在很多時候,產品傾向于將兩種組織方式結合起來形成復合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時間等)。

          其實在大部分B端產品中,大都按照模糊分類來進行處理,比如按照任務、流程等方式。而精確分類更多用于在頁面內的局部信息模塊,比如創建時間和文件大小等。


          歸根結底,我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標,這樣才能讓我們的分類更具說服力。


          3.2.2組織結構:選擇合適的結構類型

          當信息按照分類維度組織后,我們接下來就是把整體信息進行結構化,這樣才可以將信息整體連接起來并呈現出來。一般分為以下四種組織方式:


          A.層級結構(最重要的結構)

          這是信息架構中最為常見的結構,也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節點的形式一層一層延展。

          層級結構的優勢就在于可以承載復雜的多層級內容,通過層級遞進的方式將復雜的多層級拆解得更簡潔。


          但我們需要把控好內容的廣度和深度,廣度指的是在層級結構中每一層的數目,最好控制在7個以內。如果廣度太寬意味著每個頁面會給用戶展示太多的信息,增加尋找內容的負擔。深度為縱向結構,建議一般3層,最多不超過5層。過深的層級會讓用戶點擊很多次,且不容易被用戶發現。比如飛書的基本信息架構也是主要以層級結構來進行的。


          B.矩陣結構(多維度結構)

          矩陣結構是各個節點都相互連接的一種信息架構方式,通俗來講就是用戶既可以通過多個維度去觸達同一信息,也可以從單個維度連接多種信息。

          這種結構其實就更類似于我們在做相關功能時:比如當你進入電影全屏時想要退出時,既可以通過點擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點觸達同一操作。


          又比如我們的聯系人功能,我們既可以通過輸入數字撥打電話,也可以查找聯系人進行撥打,還可以查詢電話記錄進行回撥。

          矩陣結構最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


          C.自然結構(隨機性)

          自然結構不遵循任何一致的模式,節點都是被逐一連接起來的。

          自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺,你很難猜到剛進入看到的是什么。

          但一般自然結構不會單獨存在,比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。


          D.線性結構(單一性)

          線性結構是非常單一的一個結構,整體是一層一層向下遞進。比較強調先后順序的一種結構。


          這種結構通常用于我們常見的軟件安裝程序等,也可以用于部分功能結構,比如網站的視頻發布,一般都是經過上傳-編輯-發布這三個步驟來依次進行。

          大家可以發現在進行信息架構時,我們在很多情況下可能會運用多種組織結構方式,我們需要根據對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


          3.2.3注意事項:關注用戶心智模型

          在信息的組織過程中,我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯網產品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣,這都屬于用戶的心智模型的內容。


          因此我們在組織信息時盡可能不要去打破用戶常見的心智模型,否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

          這樣會導致用戶難以發現該功能。因為用戶接觸新的信息時,會以最初接觸的局部信息為依據展開并形成初步認知,用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或尋找信息的過程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。


          雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業術語,我們需要通過靈活有效的提示(比如標記注釋等)來引導用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應用場景其實是用于抖音官網后臺登錄,且在后臺登錄時已經給出了對應提示,那么這樣的設計也是合理的。


          3.3信息架構支撐:標簽、導航和搜索

          當經過上面的信息組織,其實我們已經能夠歸納出一個大體的信息架構框架。但在信息組織之外,我們還需要關注以下三點:標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。


          3.3.1 標簽系統:讓信息識別更通用

          標簽系統,通俗來講就是要我們對當前整個系統信息節點的命名,從而讓信息的呈現更容易識別。拿個最簡單的例子來進行說明:

          可以看到左側和右側關于衛生間的信息標示,可能左邊你能一眼區分,右邊可能就需要反應半天才能猜出到底代表什么含義了。


          這其實就是關于我們的信息命名是否能夠被大多數用戶所接受的場景,也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽,都需要考慮用戶對該信息命名的認知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢,這里需要注意2個方面:


          A.優先選用被行業廣泛接受的詞或圖標

          在進行標簽定義的時候,盡量選擇已經被用戶所熟知的詞語,比如「工作臺」「通訊錄」等已經被運用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設計軟件中,很多圖標和功能名稱都是通用的:

          這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業,哪些名詞已經達成了共識,就無需再造新名詞。


          B.不確定的詞語可以參考競品或調研來決策

          當某類功能或場景的標簽難以確定時,我們就可以嘗試去找一下競品是否有類似功能,或者找該行業的領頭羊(比如聊天工具的巨頭微信),那么在進行標簽定義的時候,可以參考它的命名體系。因為它已經替我們教育了一部分用戶,會間接降低學習成本。


          如果某些標簽在上述過程中還是無法確定,那么我們結合自己經驗或者與咨詢業務相關人員來進行討論,在必要時候可以在標簽旁邊添加注釋來進一步說明。


          3.3.2 導航系統:讓用戶不迷路

          導航系統其實應該是大家比較熟知的一個系統了。就像使用導航系統來規劃行程一樣,導航系統都會存在于每個網站中。比如我們常見的側邊導航、頂部導航等。

          因為網上關于導航系統已經有很多資料的講解了,在這里闡述下四類導航的含義:

          1.全局導航:位于頁面最上層的導航,用戶幾乎在頁面的每個地方都可以看見,是最高層級的導航系統;

          2.局部導航:位于最高導航的下級子類導航,子類導航并不是必須的導航,根據場景進行取舍;

          3.情景式導航:通過點擊文字鏈接進行跳轉的導航,比如在個人資料里面植入其它網站的鏈接地址;

          4.輔助導航:這里包括網站地圖,網站索引,網站指南等輔助類型的導航。


          輔助導航的網站指南包括新手引導和演示教程等?,F階段更巧妙的功能引導,是當用戶在進行某些功能的操作時及時進行提示,這樣不僅達到了為用戶引導的效果,還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后,只有當你調用組件功能時,才會及時進行提醒。


          3.3.3 搜索系統:讓用戶輕松找信息

          搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要,但并不是每個系統每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點:

          1:內容復雜度:當前頁面承載的內容復雜度如果較少,對于簡單內容頁面往往不需要搜索;

          2:內容性質:當前頁面的性質是偏向于用戶瀏覽還是查找,根據用戶行為來決定是否需要搜索;

          3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內容很復雜,我們還可以搜索結合篩選來更好的查找信息;


          上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節點,比如搜索規則和搜索結果等,在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。


          3.4信息架構表達:視覺化你的架構

          我們通過上述方法已經知道如何梳理信息架構了,那么我們應該如何呈現它呢。這部分其實也是很多資料中比較模糊的點。

          在學習的過程中,發現部分資料認為信息架構就是單純的指思維導圖,但實際上信息架構并不能單純只用思維導圖就能夠完全表示。

          因為信息架構包含了很多部分的內容。只能說思維導圖可以是信息架構的一種表現形式,其可以幫助我們在思考階段梳理整體產品的信息構成。


          這里拋出一個很有意思的觀點,那就是「功能結構圖」和「信息架構圖」到底什么關系,這里用兩張圖示例:

          可以看到,功能結構圖更多體現的形式是功能闡述,一般形式為名詞+動詞,比如頭像設置;而信息架構圖重點呈現的應該都為信息元素,一般為名詞,比如頭像圖片。

          但在大多數時候我們看到的產品架構圖,其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。


          因此這篇文章講述的信息架構更偏向于基于產品的整體架構。其實信息架構對于呈現形式并沒有特別的限制,只要能夠幫助你清晰表達產品整體結構就行?!缎畔⒓軜嫞撼絯eb設計》第4版中其實也并沒有對表現形式這一塊進行嚴苛的定義,其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現形式,其表達如下:

          可以看到其表達形式包括思維導圖和流程圖等形式:思維導圖的優勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優勢則更能夠表達整體的邏輯關系。


          因此信息架構的呈現需要根據你的產品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發揮,而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果(類似于中間態),我們需要借助它來更好的闡述思路與溝通想法。


          3.5信息架構之后:讓信息具像化

          在輸出信息架構之后,其實這里想聊一聊頁面的呈現。因為當梳理好大的框架后,剩余的頁面細節其實都需要通過原型圖來進行體現。這個過程是從框架到頁面的階段,其實對于設計師來說也是很重要的部分。在這里根據自己的理解列出了以下幾方面的注意點:

          A.頁面能夠讓用戶看懂

          這其實就是涉及到我們的信息組織和標簽系統。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息,反思一下是在哪個方面做得不好。是標簽系統含義模糊呢,還是信息的組織分類方式不對。從頁面呈現倒推信息架構。

          綜合來說就是設計時的排列要考慮用戶的心智模型(比如網頁的常規排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產品想要完全避免學習成本是不可能的,但我們可以盡量減少其學習成本。


          B.考慮用戶的視覺動線

          當我們在進行信息排列時,這時需要思考的就是用戶的視覺動線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動線模型能夠讓用戶更好地查找信息。

          F模型和Z模型的使用區分其實就是在使用場景上,對于內容頁面來說F模型會更為合適(比如文章或者搜索結果),適合文本類的內容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右,從上到下,能夠更好引導用戶的視線。


          C.掌控好適度的信息層級

          B端由于在視覺的發揮空間不多,那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。

          不管是原型圖還是視覺,整體的視覺層級要體現得更為清晰。按理說最好的視覺層級控制在三級左右。如果發現視覺層級過多,需要考慮是不是因為信息架構設計時縱向層級過深,通過調整架構的形式來更好的呈現信息。以及對同頁面的信息進行重要程度分級。


          當我們做完或者聽別人闡述對應的信息架構時,該如何評判呢,到底怎樣的信息架構才算優秀呢。個人認為可以從3方面去進行判斷:

          業務層:

          1.設計目標合理:能平衡商業目標和用戶的目標,保證客戶和用戶都有較為良好的體驗;

          2.核心任務目標:能夠讓用戶順利完成產品的核心任務,需要通過用戶測試來進行驗證

          結構層:

          1.平衡廣度和深度:在進行功能使用時不會隱藏的太深而找不到,是否有冗余步驟

          2.保證拓展性:當前信息架構在面對未來新增或者刪減信息時能夠穩定拓展

          體驗層:

          1.保證易讀性:用戶不經過介紹,通過頁面信息呈現能夠看懂該產品是用來做什么的

          2.保證易查找性:用戶在需要某個功能時能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


          合理的信息架構需要具備以上條件,我們需要在做設計呈現時也盡量保證以上條件。但在很多情況下其實并不能完全滿足,這個時候我們需要根據業務目標的重要性來選擇某些點進行滿足。


          梳理一下整體文章的架構,其實是按照「是什么-為什么-怎么做」的形式來進行拆分的:

          這篇文章想要表達的觀點,不是讓設計師獨立去梳理整體信息架構,而是讓設計師擁有信息架構意識,了解其是如何進行并產生的。這樣你在看到整體架構時,有足夠的理論支撐去判斷它的好壞,并通過自己的理論認知去理解和改進不好的地方。


          當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出「正確的設計」,避免成為無情的作圖機器。信息架構作為產品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質上的提升。

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

          文章來源:站酷  作者:進擊的M

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

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

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

          從用戶體驗的角度了解按鈕

          ui設計分享達人

          按鈕的點擊率低,用戶在放置按鈕的頁面上花費了大量時間,這可能是由于按鈕不直觀和混亂。

          我們將從用戶體驗的角度詳細解釋直觀且易于用戶理解的按鈕,例如內容中按鈕的排列、按鈕的形狀以及基于內容的配色方案。

          什么是用戶友好按鈕?

          您擁有的按鈕越多,做出決定所需的時間就越長。用戶使用每個按鈕以確定需要哪個按鈕來實現目標。對按鈕的不確定性會導致對按鈕不做任何操作。

          為防止出現這種情況,請直觀地確定每個操作的優先級。用戶一旦知道哪些按鈕對其任務很重要,就可以立即采取行動。

          1. 按視覺掃描模式排列按鈕

          應用程序中最常見的錯誤就是按與用戶自然掃描模式不同的順序排列按鈕。優先級最高的按鈕放在最前面,以便用戶首先注意到它。然而,通過視覺加權,用戶會以任何順序注意到按鈕。

          按鈕的順序不是為了提高可見度,而是為了提高效率。首先放置高優先級按鈕會使掃描方向從上到下顛倒,從而破壞視線的自然流動。

          它不是強制用戶重新掃描按鈕,而是允許用戶在單向掃描中執行高優先級操作。這允許用戶在做出決定之前依次掃描按鈕所需的所有信息。

          將最高優先級的動作放在底部使其成為視覺阻力最小的路徑,并且可以快速輕松地點擊。此外,底部位置是手指最容易觸及的位置,進一步提高了效率。

          2. 使用形狀區分按鈕和文本

          應用程序中的另一個常見錯誤是使用文本來表示按鈕。設計師使用文本按鈕來表明它們的優先級低于其他操作。但是,這對于操作按鈕來說是不合適的選擇。文本看起來不像按鈕。通過使用文本按鈕,用戶可以忽略操作而只看到主要操作。

          文本按鈕也會使得用戶對內容是按鈕還是信息而引起混淆。這種不確定性會導致這些按鈕被跳過。

          文本按鈕不僅令人困惑,而且還是難以點擊的小目標。將文本標簽放置在按鈕形狀內可以更輕松地調用操作并點擊它。

          按鈕形狀是抑制優先級低于文本按鈕的操作的好方法。使用戶更容易識別以他們喜歡的方式實現目標的所有選項。

          3. 為漸進式動作添加顏色

          高優先級操作是最容易看到的。此操作與用戶的目標直接相關。如果您不確定其余的操作,請考慮哪些操作將用戶推向目標,哪些操作正在遠離目標。

          在上面的例子中,“結帳”是優先的,這是用戶達到目標的一個動作。但是,尚不清楚“查看購物車”或“繼續購物”操作是否具有中等優先級。

          “查看購物車”操作允許用戶查看他們添加到購物車中的產品,這會促進結帳?!袄^續購物”操作將用戶從結賬返回到產品頁面。

          通過查看每個操作,很明顯“查看購物車”具有中等優先級,而“繼續購物”具有低優先級。

          按鈕顏色從文本顏色中脫穎而出并吸引用戶的注意力,因此它是顯示漸進式動作的有效方式。如果按鈕顏色與文字顏色相同,則信號不是很強。為漸進式動作添加不同的顏色意味著用戶應該采取的動作。

          如果您為每個漸進式動作使用相同的顏色,則用戶無法確定哪個具有更高的優先級。此外,為每種顏色使用不同的顏色只會使用戶感到困惑,并且不會理解不同的顏色。并且,您還會在每個按鈕上感受到相同的視覺重量。

          設計的訣竅是使用相同的色調,但改變中等優先級動作的飽和度和亮度,使其看起來比高優先級動作更亮?,F在按鈕權重不沖突,很明顯哪個突出。

          對比以增強對比度。主要按鈕使用深色背景上的淺色文字,次要按鈕使用淺色背景上的深色文字。這為高優先級操作提供了更亮的文本標簽和最佳對比度。

          4. 改變標簽上文字的粗細

          到目前為止,應用這些技術足以區分優先級,但您還可以做更多的事情。按鈕越直觀,用戶就越不需要考慮它。

          對每個標簽上的文本使用相同的粗體可以賦予該文本相同的強調量。因此,建議根據優先級分別強調每個標簽的文本。更改文本的粗細,使高優先級按鈕最厚重,低優先級按鈕相對單薄。這樣,當用戶閱讀文本標簽時,文本的權重表示優先級。

          在上面的例子中,“結賬”標簽比其他標簽更厚更亮?!安榭促徫镘嚒睒撕灋榘氪煮w,“繼續購物”標簽為中等。因此,文本標簽反映了每個動作的視覺權重?!安榭促徫镘嚒睒撕炆现甘尽?件商品”的文字沒有加粗,因為它是補充信息,并不代表所執行的操作。

          5. 為高優先級操作提供圖標

          最后一種技術是讓色盲用戶可以訪問您的按鈕。色盲用戶無法通過顏色區分重量差異。因此,我們需要的東西是不是顏色作為一個視覺線索。

          為高優先級操作添加圖標將進一步強調它以使其脫穎而出。用戶瀏覽時,用戶通常關注視覺元素而不是文本。該圖標將使所有用戶更加關注高優先級操作。

          用戶仍然可以通過移除顏色和標簽來識別結賬按鈕。

          總結

          如果用戶在操作屏幕上花費大量時間,或者點擊率較低,可能就是按鈕設計的不直觀。在這種情況下,可以使用這些技術來增強按鈕顯示并有利于突顯優先級。

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

          文章來源:站酷  作者:對啊設計君

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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