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

          本文介紹了一個案例研究,是作者在一家擁有 60 多年歷史的產品導向型公司中實施服務設計的旅程,本文將著重介紹如何在大型國際數字支付技術組織 IDPTO(化名)中建立服務設計創新中心。這份經驗希望傳遞到每一個正在用服務設計影響公司內外部的朋友們。

          一、首要步驟:理解語境

          在擁有 25 年的設計實踐經驗后,我收到了一份具有挑戰性的邀請,成為一家全球性公司的執行董事,并通過設計領導其轉型。選擇巴西是因為它負責拉丁美洲 75% 的支付交易。該公司已經針對該市場實施了加速增長計劃,因為他們認為這是正確的創新計劃的測試市場。在六個月的時間里,我從自己的服務設計咨詢公司轉行到 IDTPO。

          在那段時間里,我有機會參觀了該公司位于美國的公司總部。這種面對面的互動對我來說至關重要:

          1. 全球領導層對創新的承諾;
          2. 他們是否愿意在這個過程中感到不適。

          2016 年 3 月,在圣保羅,我開始了為期三個月的組織問題診斷,以及另外三個月的定義問題階段。然后,我正式開始確定公司的痛點、局限性和全球領導層的戰略目標。我參與了公司接下來一年、三年和五年周期的整個戰略定義。

          自過渡過程開始以來,我一直致力于競爭對手研究并繪制生態系統地圖。我還收集了有關公司直接面向消費者市場和幾項趨勢研究的可靠材料。在第二個月,我向領導層提交了一份戰略計劃,其中包括我們將如何工作的大綱,該計劃基于三個層面的行動:戰略、戰術和行動。

          • 戰略層面|業務轉型:目標是將 IDPTO 重新定位為創新型組織,同時保持其在巴西支付服務市場的領先地位。
          • 戰術層面|以客戶為中心:在產品團隊(公司的核心)內創建一個創新功能區——這種文化轉型的驅動力。這將焦點從產品或技術轉移到消費者身上。
          • 操作層面|建設能力:在組織中的每個人的參與下,以協作和開放的模式建立以設計為導向的創新中心的運作。這是實現整個組織的參與和改造公司本身的唯一途徑。

          組織診斷的結論是,該公司已經在對設計原則的基本理解和應用的基礎上致力于以技術為中心的創新。

          根據設計階梯 1,我確定該公司處于“界面設計”階段。如下所示,除了更改其圖形表示之外,我還修改了該工具并添加了另一個“設計作為文化”步驟。這是對上述模式的重要升級,更符合當前的創新戰略。

          這一步(第4階梯)很重要,因為這是在組織中實施設計策略時的最終部分,即通過設計優化組織使其成為組織文化的步驟。

          如何在全球性組織中實現服務設計規模化?

          在我看來,“設計作為文化”分為三個層次

          1. 活動:設計在整個組織中普遍存在的行為和實踐
          2. 環境:組織中設計空間的可用性
          3. 價值觀:組織定義的核心理念和設計原則,告知并推動組織文化

          我提出的戰略計劃包括兩個三年一次的周期性循環策略和相關的年度目標。第一個周期側重于通過開發獨特的創新流程來整合組織內的設計。

          第二個周期側重于發展組織的能力,以從“設計作為過程”過渡到“設計作為戰略”。在最初執行的六年后,我們將能夠衡量組織中以設計為主導的變革的進展和收益。

          評估指標后,我們將能夠繼續下一步(即“設計作為文化”)。

          第一個周期從為組織的創新中心定義五項創新原則開始。這些原則已經與組織的領導團隊共同制定。

          • 第一原則:開放式創新|創新來自許多地方,公司需要準備好展望和建設理想的未來。一個重要的里程碑是為巴西社區推出應用程序編程接口 (API) 開放平臺——這一舉措為開發人員、初創企業、金融科技公司和更廣泛的商業社區創造了一個新的溝通渠道。
          • 第二原則:協作心態|在綜合、包容和多樣化的空間內進行協作。我們在公司創建了一個車間空間,并成立了一個多元化委員會,以促進必要的、緊迫的——但也是持久的——心態轉變。
          • 第三原則:消費者體驗|深入了解消費者的背景和行為,啟動向 B2B2C 組織的轉型,同時與我們的 B2B 客戶合作,為最終消費者提供解決方案。
          • 第四原則:邊做邊學|基于原型設計和實驗的心態,培養持續學習的過程。
          • 第五原則:數字敏捷|通過“快速失敗,更快成功”的思維,從瀑布模型轉向實施敏捷方法。

          這不僅改變了交付方法,還引發了大膽的組織轉型,因為它改變了組織過去工作的范式。

          如何在全球性組織中實現服務設計規?;? class=

          二、首個創新周期:實施

          甚至在創新中心正式啟動之前,我們就嘗試了兩種開發形式來解決問題。第一個是用經典五天設計沖刺模型幫助一家重要地區性銀行。第二個是為電子商務平臺開發聊天機器人。最后一個解決方案經歷了一個更長的七周時間,使我們能夠測試初創公司的融入,以幫助我們采用開放式創新方法。

          在這個周期的第一年,三點很重要:

          1. 貫徹開放創新原則(上文提過)
          2. 啟動創新中心的教育部門,負責培訓整個組織的設計思維并維護課程的周期性安排
          3. 啟動創業和金融科技加速計劃。這包括嘗試服務設計思維和實踐,這對公司來說是全新的。

          這就是為什么我選擇服務設計作為創新過程的基礎,同時參考了 Richard Buchanan 教授的工作。如圖 3所示,過去 20 年是從基于人工制品的物質性的實踐到為解決復雜問題而開發的“非物質解決方案”的設計思維轉變的時刻。

          如何在全球性組織中實現服務設計規模化?

          我們的經濟現在建立在象征價值的交換之上。經驗決定了每個人在這種交換中投入的價值。在過去的二十年里,我們看到了一系列新公司的出現,例如 Uber 或 Airbnb,它們誕生于數字環境中,專注于我們所說的體驗經濟 。

          因此,服務設計和交互設計等主題近年來受到關注,因為它們是這種新經濟發展的基礎。僅六個月后,我們就協助五家金融科技公司將 IDPTO 技術應用于他們的流程。之后,其中三家金融科技公司能夠開發出現成的市場解決方案。在第 1 年末,我們向整個組織展示了流程(圖 4)。

          該活動在公司的美國總部舉行并引起了很多關注,因為在一年內我們有項目要展示、成功指標和接下來兩年的路線圖。

          如何在全球性組織中實現服務設計規?;??

          創新過程不一定是線性的。該過程以簡報會(與不同利益相關者的協作研討會)開始,以最終確定和實施的解決方案結束。

          到第 3 年末,我們超越了指標,贏得了獎項,并開始為公司的第二個創新周期做好準備——在戰略層面采用設計。創新中心戰略的一部分是將其工作方法擴展到整個拉丁美洲地區。2018年,我們對區域團隊進行了培訓,并準備了文件,包括經驗、教材、方法和工具。其他一些地區也采用了部分方式,例如美國和亞洲的加速計劃以及歐洲和亞洲的服務設計。盡管如此,還是存在挑戰:創新中心位于組織的產品領域內。

          在第一個周期的最后一年,由于全球項目和獎項,我在內部和外部獲得了很多知名度之后,我與全球首席產品官討論了:

          1. 關系產品-服務;
          2. 產品如何充當服務的化身;
          3. 系統思考如何成為組織戰略討論的一部分。

          次年,他決定將該領域的名稱從“產品”改為“解決方案”。

          三、第二個創新周期:整合2019年開局充滿挑戰:

          • 實施新三年戰略規劃
          • 維護和協調整個拉丁地區的實施
          • 為公司開發和交付全球項目

          在業務加速數字化的背景下,成功的戰略規劃為城市交通、公共交通、即時支付、新支付技術和新信息交易技術等領域的項目設定了總體目標。

          我們有幾個項目要管理,我們需要使用對公司文化產生重大影響的項目管理方法。實施了新的高管培訓課程。加大投資力度,竣工項目穩步增長。

          設計現在是公司戰略的一部分。設計已成為開發新服務和新技術的戰略決策的主要因素。

          以下是我領導下的兩個創新周期后的一些數字:

          • 到 2021 年 12 月交付了 18 個項目。
          • 10 個項目仍在開發中或等待發布窗口。
          • 加速70 家初創企業和金融科技公司,為公司帶來了 38 項新業務,并幫助培育了超過 1.5 億美元的投資。
          • 創新中心產生的新解決方案負責產生約 100 億美元的支付量,預計未來五年將達到 400 億美元。
          • 我們獲得了來自市場、專業咨詢機構和公眾消費者的無數獎項。
          • 公司重新贏得了與市場相關且對股東重要的創新公司的聲譽。

          寫在后面

          這篇文章無疑是給了我們在自己的組織中運用服務設計的一針強心劑,讓我們有更多的自信去運用服務設計和影響組織,我們要相信服務設計方法論帶來的作用,相信其本身有強大的能力。

          記得之前做項目的時候,小伙伴有說過一句:之所以可以反復成功,其實是方法論本身的能力,而我們更多的是在運用罷了。希望大家以此共勉。

          作者:陳昱志Yeutz

          來源:人人都是產品經理

          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


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


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


          B端用戶體驗的三個層面

          ui設計分享達人

          一、前言

          很多情況下,用戶選擇一個產品的理由是有沒有某個功能,但棄用的理由卻常是產品好不好用。能否打造優質的B端用戶體驗,成了影響B端產品用戶續約的一個關鍵因素。

          二、業務體驗層 

          (1)流程越短越好。 我們在上班、逛街的時候,傾向選擇一條最短的路線,希望用最少的時間到達目的地。用戶操作系統時也希望這樣。

          (2)整合功能場景。 某個功能由誰、在什么場景下操作,以及可能會遇到什么問題、需要什么關聯功能來解決,如果功能點相互獨立, 關聯很少,會讓用戶用起來很不順手,有種斷層的感覺。

          (3)有效指導異常。Saas 有一個特點是功能模塊間會盡可能相互獨立,基礎數據的設置和業務上面的使用往往是在不同的功能模塊內。這會導致B端用戶在遇到空數據的情況下, 可能不知道該怎么操作。這時,需要要提示用戶按具體步驟操作來順利完成任務。 

          三、交互體驗層

          交互體驗,對上承接了業務,對下承接了視覺。好的交互體驗能讓業務流程簡捷,更關注用戶習慣。 B端產品的交互和C端產品差異較大,C端常用的移動客戶端屏幕小,可顯示的內容較少,需要不停地跳轉完成操作,但B端產品大多用電腦來操作,一頁可顯示的內容較多。所以做B端產品交互一般需要注意下面幾點:

          (1)少跳轉。曾有用戶反饋,說某個功能操作流程太長了,操作起來很麻煩。通過走查發現流程其實是沒有問題的,不能再縮減流程了。通過可用性測試發現是因為跳轉頁面導致,用戶在操作時去了另一個界面,然后再返回來,讓用戶在操作時感覺流程更長。于是就把頁面跳轉優化成了彈窗,彈窗里面操作完點擊關閉即可, 改后用戶覺得流程縮短了,操作效率更高了。

          B 端產品能用彈窗的時候,不要跳轉,哪怕彈窗里面加彈窗,只要不跳出這個頁面,用戶都會覺得沒有阻斷他的操作。雖然,從交互的角度講,彈窗里再加彈窗不符合規范,但在實用性面前是可以商榷的。

          (2)少彈窗。 相比彈窗,在某些場景下,有更好的處理方式。比如,直接放頁面上。 彈窗是點擊按鈕觸發的,自動完成操作后關閉,或者用戶手動關閉。雖然比跳轉好,但比不上在頁面上直接呈現高效。

          頁面上直接呈現是理想狀態。但是往往因為內容太多,很多時候不得不隱藏起來。直接呈現對于頁面的布局和設計都有極高的要求,原則是高頻且重點的內容外露。

          (3)交互形式統一。 整個系統里面的交互規則要保持一致,大到彈窗的出現形式是居中彈出還是右側滑出,小到多選控件是不是一致。 在整個系統里面相同的業務都用同一個控件。雖然可能由于一些業務的特殊性, 需要對控件做個性化處理,但不要影響整體的一致性。 

          三、視覺體驗層 

          (1)信息清晰。 信息清晰不僅指信息結構的層次,還包括頁面的內容,最好讓用戶一眼就能看到上面寫了什么,有什么功能。有些設計師不喜歡加黑、大、粗的字, 覺得不夠高級,而是根據自己的美感把字體設計為一些個性化字體,且字號不大。

          很多時候B端用戶的操作時間比C端用戶長,他們需要長時間盯著頁面,所以頁面信息清晰就能減少他們的疲勞。

          (2)信息緊湊。 當頁面上想要呈現的內容較多時,設計師一定要壓縮空間,使布局合理緊湊。

          (3)少用圖標。 有時候,設計師會使用圖標來代替文字表達,并花大精力設計很好看的圖標。圖標的應用在C端產品中非常常見,一是為了節省空間,二是為了美觀。但在B端產品中,大多數情況下,圖標越少越好,有時文字的簡寫比圖標來得直觀易懂。圖標過多用戶需要使用很多遍才能記住每個按鈕的含義。

          四、總結

          B端產品設計需要非常重視用戶體驗。這直接影響到用戶的工作效率,轉而影響到軟件的續約率。 為打造好的用戶體驗,我們通常從業務層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候,有些好的交互方案會受到技術框架的限制,導致方案無法實施。

          但是為了產品獲得更好的用戶體驗,首要考慮的依然是用戶的使用流暢度、易用性,而不是實現的復雜程度、系統現有框架的限制、現有規范的標準。 系統上的難點應當留給內部去解決,把最大的便利性留給用戶。這樣我們才能獲得更好的產品口碑、更高的續約率、更大的市場。


          作者:忻蕓
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


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


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

          【Vue】webpack的基本使用

          前端達人

          webpack的學習目標

          1. 理解什么是前端工程化
            • 轉變對前端開發的認知
          2. 了解webpack的基本用法
            • 為后面Vue和React課程的學習做技術儲備
          3. 不強制要求大家能手動配置 webpack
            • 一定要知道webpack在項目中有什么作用
            • 清除webpack中的核心概念

          前端工程化

          小白眼中的前端開發 vs 實際的前端開發

          1. 小白眼中的前端開發
            • 會寫HTML + CSS +JavaScript就會前端開發
            • 需要美化頁面樣式,就拽一個bootstrap過來
            • 需要操作DOM或發起Ajax,再拽一個jquery過來
            • 需要快速實現網頁布局效果,就拽一個Layui過來
          2. 實際的前端開發
            • 模塊化(js的模塊化,css的模塊化,資源的模塊化)
            • 組件化(復用現有的UI結構,樣式,行為)
            • 規范化(目錄結構的劃分,編碼規范化,接口規范化,文檔規范化,Git分支管理)
            • 自動化(自動化構建,自動部署,自動化測試)

          什么是前端工程化

          前端工程化指的是:在企業級的前端項目開發中,把前端開發所謂的工具,技術,流程,經驗等進行規范化,標準化。
          企業中的Vue項目和React項目,都是基于工程畫的方式進行開發。

          好處:前端開發自成體系,有一套標準的開發方案和流量。

          前端工程化的解決方案

          1. 早期的前端工程化解決方案
            • grunt
            • gulp
          2. 目前主流的前端工程化解決方案
            • webpack
            • parcel

          webpack的基本使用

          什么是webpack

          概念: webpack是前端項目工程化的具體解決方案。

          主要功能:它提供了友好的前端模塊化開發支持,以及代碼壓縮混淆,處理瀏覽器端JavaScript的兼容性性能優化等強大的功能。

          好處:讓程序員把工作的重心放到具體功能的實現上,提高了前端開發效率和項目的可維護性。

          注意:目前Vue,React等前端項目,基本上都是基于webpack進行工程化開發的。

          列表隔行變色項目

          步驟

          1. 新建項目空白目錄,并運行npm init -y命令,初始化包管理配置文件package.json
          2. 新建src源代碼目錄
          3. 新建src->index.html首頁和src->index.js腳本文件
          4. 初始化首頁基本的結構
          5. 運行npm install jquery -s命令,安裝jQuery
          6. 通過ES6模塊化的方式導入jQuery,實現列表隔行變色的效果
            在這里插入圖片描述
          <!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> </head> <body> ul>li{這是第$個li}*9 </body> </html>  
                  
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          在這里插入圖片描述

          在這里插入圖片描述
          import和require導入模塊的區別
          1、require對應導出的方法是module.exports,
          import對應的方法是export default/export

          2、require 是CommonJs的語法
          import 是 ES6 的語法標準。

          3、require是運行運行時加載模塊里的所有方法(動態加載),
          import 是編譯的時候調用(靜態加載),不管在哪里引用都會提升到代碼頂部。

          4、require 是CommonJs的語法,引入的是的是整個模塊里面的對象,
          import 可以按需引入模塊里面的對象

          5、require 導出是值的拷貝,
          import 導出的是值的引用
          6. require是node.js帶有的 CommonJS語法里的東西,可以在終端中運行
          如果要在瀏覽器端運行 我們要使用import這個es6語法
          js代碼

          //導入模塊 // const $ = require('jquery') import $ from "jquery"; //定義jquery入口函數 $(function () { $('li:odd').css('background-Color', 'red') $('li:even').css('background-Color', 'pink') })  
                  
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          將js文件導入index.html之后,發現沒有效果,這時我們就需要webpack工具了,將語法進行重新編譯,把es6語法轉化為es5語法。

          在項目中安裝并配置webpack

          npm i webpack@5.42.1 webpack-cli -D  
                  
          • 1

          生產依賴
          在這里插入圖片描述
          創建webpack.config.js配置文件并寫入
          在這里插入圖片描述

          //使用node.js的導出語法向外導出一個webpack的配置對象 //導入模塊并進行導出內容,這樣寫會比直接導出內容多一個記錄信息的txt文件,當然我們也可以使用es6語法進行導入導出,大家可以私下去了解。 const { Module } = require("webpack"); Module.export = { mode: 'development' } //也可以直接導出內容 // module.export = { //     mode: 'development' // }  
                  
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          在package.json配置文件中的script中寫入聲明

          在這里插入圖片描述

          最后執行npm命令進行編譯,有一個注意點就是node.js版本需要是17版本以下的不然會出錯,當然應該有其他解決辦法,但博主不會,只好退回版本
          執行 npm run dev 這個命令,可以看到src里的index.js和jquery.js都被壓縮了。
          在這里插入圖片描述
          會生成一個編譯后的文件夾
          在這里插入圖片描述
          將main.js文件導入index.html.,不用導入index.js。
          在這里插入圖片描述
          打開頁面就可以成功顯示了
          在這里插入圖片描述
          mode的可選值
          mode節點的可選值有兩個,分別是:

          1. development
            • 開發環境
            • 不會對打包生成的文件進行代碼壓縮和性能優化
            • 打包速度快,適合在開發階段使用。
          2. production
            • 生產環境
            • 會對打包生成的文件進行代碼壓縮和性能優化
            • 打包速度很慢,僅適合在項目發布階段使用
              開發的時候使用development,打包速度快,上線的時候使用production,體積小。

          webpack.config.js的作用

          當我們使用npm run dev這個命令的時候,會執行package里的dev里的內容,在這里插入圖片描述
          dev里寫的webpack,那么它就會執行weboack.config.js這個文件里的內容,根據里面的內容再進行打包。
          在這里插入圖片描述
          webpack中的默認約定

          大家可能有個疑問,就是打包的時候為什么會打包index.js這個文件,它是怎么尋找的路徑等問題。

          在webpack4和5的版本中,有如下的默認約定,找不到就會報錯。

          1. 默認的打包入口文件為src -> index.js
          2. 默認的輸出文件路徑為dist -> main.js
            在這里插入圖片描述

          注意:可以在webpack.config.js中修改打包的默認約定。

          自定義打包的入口和出口

          在webpack.config.js配置文件中,通過entry節點指定打包的入口,通過output節點指定打包的出口文件夾和出口文件。

          // 使用node.js的導出語法向外導出一個webpack的配置對象 const path = require("path"); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), //設置打包輸出路徑,以及輸入文件名稱 output: { //指定存放目錄 path: path.join(__dirname, 'dist1'), filename: 'new.js' } }  
                  
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          生成的文件就變了。
          在這里插入圖片描述

          webpack中的插件

          當我們修改js文件之后,需要重新打包才能有效,每修改一次都要重新打包一次,這就很麻煩我們可以 通過安裝和配置第三方的插件,可以擴展webpack的能力,從而讓webpack用起來更方便,常用的webpack插件有如下兩個:

          1. webpack-dev-server
            • 類似于node.js階段用到的nodemon工具。
            • 每當修改了源代碼,webpack會自動進行項目的打包和構建。
          2. html-webpack-plugin
            • webpack中的html插件(“類似于一個模板引擎插件”),
            • 可以通過此插件自定制index.html頁面的內容。

          webpack-dev-server

          安裝webpack-dev-server

          安裝命令
          npm install webpack-dev-server@3.11.2 -D  
                  
          • 1
          • 2

          配置webpack-dev-server

          1. 重新配置package.json中的script里的dev內容
            在這里插入圖片描述
          2. 再次運行 npm run dev命令,重新進行項目打包
          3. 在瀏覽器中訪問本地8080端口,查看自動打包效果。

          注意:webpack-dev-server會啟動一個實時打包的http服務器。
          在這里插入圖片描述
          這樣當我們每次修改index.js文件時,保存后就會自動打包,摁兩次ctrl+c就可以終止運行。

          這種打包實際上時虛擬打包,并不是每次保存打包之后將main.js進行了修改,當我們修改代碼保存自動打包之后,我們發現頁面UI并沒有變化,那是因為main.js實際上沒有修改,訪問自動打包修改后的頁面需要訪問本地8080端口在這里插入圖片描述
          在這個http服務器內才能訪問到修改后的內容,我們前面說了修改后的js并沒有保存到main.js中,那它保存到哪里去了?它其實被保存到了根目錄中,以內存的形式進行了保存。在這里插入圖片描述
          文件名跟你前面設置的打包文件名一樣,雖然看不到這個文件但是可以進行訪問,我們需要把頁面引入鏈接從 new.js改成新生成的保存到內存中的new.js,完成這兩個步驟就可以真正的實現自動打包并實時演示了。在這里插入圖片描述

          html-webpack-plugin

          當我們開啟了自動打包服務功能,訪問服務器后,顯示的是根目錄,需要點擊一下文件夾,才能顯示頁面文件index.html,我們只需要把頁面文件copy一份兒到根目錄,這樣點開網頁就能直接顯示,這個webpack插件就可以實現相應的功能。

          安裝

          npm install html-webpack-plugin@5.3.2 -D  
                  
          • 1

          使用代碼

          //導入相應模塊 const HtmlPluginConfig = require('html-webpack-plugin') //實例化 const HtmlPlugin = new HtmlPluginConfig(); //實例化 const HtmlPlugin = new HtmlPluginConfig({ //被復制文件的路徑 template: './src/index.html', //復制到哪 filename: './index.html' });  
                  
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          最后再向外暴露對象

           //插件的數組,將來webpack在運行時,會加載并調用這些插件 plugins: [HtmlPlugin] //將實例化對象寫入。  
                  
          • 1
          • 2

          執行 npm run dev命令,進行自動打包,然后進入本地8080端口網頁,就可以直接看到頁面了。
          在這里插入圖片描述
          當你修改js之后也會實時更新。

          注意點以及個人建議和理解
          我們可以在scripts里設置兩個屬性,dev是用來開發實時瀏覽觀看內容的,dev2是用來進行物理打包的(當你完成項目需要打包的時候)。
          在這里插入圖片描述
          這里我需要說一下html-webpack-plugin這個插件,上面我們可以直接看到頁面是因為這個插件復制了一份兒index.html到根目錄所以可以直接訪問。
          這個插件里面 有個屬性叫filename,就是你將文件復制到什么位置。
          在這里插入圖片描述
          兩個注意點

          第一個就是它的值,屬性值寫的相對路徑是根據你打包文件的位置為基準的,并不是webpack.config.js的文件位置,./就跟你的new.js文件在同一個文件夾里,…/就在new.js的上級文件夾里,所以當你打包的時候會發現除了new.js之外還有index.html

          第二個就是輸出方式,如果執行的是dev2,那么就跟new.js進行物理復制,如果執行的是dev那么就跟new.js一樣,以內村存儲的方式進行保存。

          生成的html文件里會自動導入同時打包的js文件
          在這里插入圖片描述

          devServer節點

          在webpack.config.js配置文件中,可以通過devServer節點對webpack-dev-server插件進行更多配置。
          其中有一些屬性設置可以更方便我們進行開發。

           devServer: { open: true, //打包完成后默認打開瀏覽器 port: 8080,//修改端口號 host: '127.0.0.1' //修改主機地址 }  
                  
          • 1
          • 2
          • 3
          • 4
          • 5
          文章已被收錄至官方知識檔案







          轉自 csdn



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


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


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

          從流程角度提升用戶體驗

          ui設計分享達人

          一、前言

          在B端產品設計中,理解并設計好流程,對產品的體驗非常重要。通常涉及到有三個方面的流程:業務流程審批流程、操作流程。

          二、業務流程 

          在企業的日常經營中,為了對業務過程進行更好的管理,企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作,使企業效率更高。對于 B端產品,設計師首先要讀懂業務流程,然后才能設計好產品。 業務流程,是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動?;顒又g不僅有嚴格的先后順序限定,而且活動的內容、方式、責任等也都必須有明確的安排和界定,以使不同活動在不同崗位角色之間進行流轉交接。

          下圖是某企業的采購流程,涉及了五個部門、多個崗位角色、多個業務活動。

          業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的,在業務上具有一定的通用性,但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔,可以說“流程 + 單據=業務”, 每個環節的工作形成一張單據,記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后,進入到下一個環節的工作時,單據也會隨之流轉到下一個系統中對應的功能節點,并形成一張新的單據,記錄新的信息。

          下圖是某企業采購流程中從采購到結算部分涉及的單據:

          除讀懂業務流程外,我們還需要應用“場景驅動的設計”方法,整理出每個環節中涉及的用戶、場景,以及作業的特征,并大膽地通過設計來改造流程,最后通過設計減少人員工作量,減少流程中的多余環帶, 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程,要經過到貨簽收、質檢、 收貨入庫等過程,每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖:

          經過對場景和可行性分析后,設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄,并全自動質檢、入庫,大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成,作為用戶體驗設計師在調研的過程中發現有好的流程優化方法,或者看到好的競品值得參考,可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。

          三、審批流程 

          在企業中,出于對重點業務的管理需求,除了會制定固定的業務流程方便大家協作,還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時,將重要結果發給相應業務管理者審批。但是,由于一些企業組織機構復雜,管理嚴格,為了保證業務的合規與安全,需要多個角色、多個環節的審批,這個流程即是審批流程。


          (1)首先員工提交需要審批的材料(系統中是提交單據)。

          (2)各環節審批者會根據流程分別對材料進行審批。 

          (3)審批通過后會自動進行到下一步。 

          (4)審批不通過,就此流程結束。

          (5)退回則打回到流程起點,待改進后重新走流程。

          (6)審批都通過后,審批流程結束。 

          在實際應用中,可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外,還會有改派、加簽、抄送等。

          (1)改派:當前審批人將審批材料轉給其他人。

          (2)加簽:增加審批的步驟,在一些企業中還會有前加簽、后加簽。

          (3)抄送:將材料同時抄送給某人或某角色。

          以上只是列舉一些常用的動作,在一些大型企業或者國企,流程和功能更復雜。當面對復雜而多變的審批需求時,需要將審批流程設計得更加靈活、自由,具有自定義功能。另外,需要將審批流程設計得更加模塊化,可以在任何一個業務環節中加入審批過程。

          在審批流程的設計中, 根據企業制定的審批規則,自動判斷是否符合標準,自動審批。尤其對一些每天都在發生、經常重復而不重要的事情,可以完全省去人工審批的過程,采用自動審批,自動觸發業務流程,以此來提高審批效率。

          四、操作流程 

          前面兩個流程主要基于企業業務制定,在企業沒有信息化前就已經存在了,在改造優化上還有一些阻力和困難。作為用戶體驗設計師,可以通過對操作流程的優化來改進用戶體驗。

          以上文中的收貨案例為例子:

          (1)系統中收到若干個質檢任務。

          (2)逐一打印質檢單。 

          (3)帶著質檢單來到倉庫,尋找需要質檢的貨品。

          (4)找到貨品,逐箱打開進行檢查,業務操作不熟練的還需要詢問老員工。 

          (5) 將質檢結果隨時記在打印出的質檢單上。

          (6) 逐一檢查完畢,回到辦公室,將信息錄入系統。

          這個過程繁瑣,而且在操作的過程中,容易出錯。因此根據實際工作中的業務場景,對操作流程進行了優化如下:

          整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程,并簡化了“尋找單據”的過程及記錄結果的過程。

          在對操作流程的設計過程中,也應遵循“場景驅動設計”的方法,并將物理實體、數字實體統一考慮,充分利用各自的特點,盡最簡化用戶的 操作流程,并降低操作的復雜度。


          作者:忻蕓
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


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


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

          網站都變成灰色了,它是怎么實現的?

          前端達人

          大家好,我是二哥呀。

          想必大家都感受到了,很多網站、APP 在昨天都變灰了。

          先來感受一下變灰后的效果。

          這是 CSDN 的

          這是 B站的

          這種灰色的效果怎么實現的呢?如何做到圖片、文字、按鈕都變灰的效果呢?

          方案 1,換一套灰色的 UI,那顯然成本太大了,用腳指頭想一想就知道不太可能。

          方案 2,用魔法!

          不好意思,還真被你猜中了!在網頁端按下 F12,打開開發者模式,用元素選擇器定位到 HTML 標簽上,在「樣式」的面板中往下翻,就可以看到這樣一段代碼。

          我把它復制過來大家看一下。

          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%);
          filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          打開二哥的網站《Java 程序員進階之路》,定位到 HTML 標簽,此時可以看到頁面是正常的顏色。

          然后把之前的代碼添加到 HTML 上,然后就可以看到色系變成灰色了。

          那這段代碼是什么意思呢?

          直接把 filter grayscale 復制到搜索引擎里看一下。

          當參數為 0 的時候,顏色是正常的。

          然后依次試一下 60%:

          100%:

          MDN 是怎么解釋 grayscale() 函數呢?

          The grayscale() CSS function converts the input image to grayscale. Its result is a .

          大致的意思就是,grayscale 是一個 CSS 函數,可以把圖像轉成灰色,參數是個百分比,結果返回一個 filter 函數。

          The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

          filter 函數可以用來改變圖像的顯示效果,用于 CSS 的 filter 屬性。 除了 grayscale 函數,可選項還有以下這些:

          可以看到,目前的主流瀏覽器版本都支持 grayscale 函數,比如說 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等,除了 IE。


          沒有什么使我停留——除了目的,縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣,我是不系之舟。

          轉自 csdn

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


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


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



          7個實用技巧,教你搞定可視化圖表

          ui設計分享達人

          可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中,如果沒有系統的可視化知識,會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么,在復雜的數據關系中如何設計和選用圖表,如何在好看的同時提升信息傳達效率,看完這篇文章希望對你的設計過程有所幫助。


          // 為什么要數據可視化


          數據可視化就是用圖表來表示數據信息,它所傳達的信息包括你所拿到的數據源和你分析后的結果,再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息,是我們可視化的最終目的。



          舉個例子,同樣一組數據,用表格的形式呈現是很難有所洞察的;如果將各個地區維度的數據聚合以柱圖形式呈現,很容易就能看出各個地區間數據的差異,并從中洞察規律


          關于如何設計好數據可視化圖表,這邊總結了三個步驟:選擇適合的圖表,強化視覺層次,圖表響應式適配。


          一、選擇適合的圖表


          數據可視化的圖表種類繁多,當我們真的開始作圖,往往會遇到一個困境:有這么多類型,要如何選擇正確的圖表呢?首要依據是考慮所要傳達的信息意圖,即所要制作的圖表它的任務是什么,再通過分析數據關系來選擇表達方式;第二層意圖是圖表傳達內容,這時候我們就需要根據數據的特征去突出和強化。


          1. 分析數據關系

          根據數據分析的方式來看,每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構,再結合數據關系作出選擇。了解圖表的可能知道,一般圖表的數據關系有構成、比較、分布,以商業數據為例,常見的還有流轉關系。



          構成關系

          構成關系的圖表表達的是部分和整體的關系,用于分析總體和各部分的占比比例,構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小,也可以使用比較關系的圖表。

          常用圖表:餅/環圖、堆疊圖、面積圖等,如涉及到層級結構,還會用矩形樹圖或旭日圖等特殊結構圖表。

          關鍵詞:“占比、比例、百分比”



          比較關系

          比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內,通過對兩個或兩個以上的指標分析,可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式,趨勢對比用于表示一段時間內數據的變化,分類對比用于比較數據規模。

          常用圖表:趨勢對比常用圖表有折線圖、散點圖等;分類對比常用條形圖、柱狀圖、氣泡圖等。

          關鍵詞:“增減、升降、漲跌、波動”



          分布關系

          利用空間分區來展示數據之間的分布關系,常用于體現兩個或以上數據的相關性。

          常用圖表:散點圖、熱力圖、雷達圖等

          關鍵詞:“隨著……而變化、A/B之間的相關性、交/并集”等



          關聯與流轉

          流轉關系是B端數據常用的一種關系,它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等,以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。

          常用圖表:關系圖、桑基圖、漏斗圖、進度圖等

          關鍵詞:“流程步驟、留存、轉化、關系”



          2. 分析數據特征

          按數據關系和分析目的選擇好圖表類型后,第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有:變量特征、維度特征、層級特征、流程特征。


          變量特征

          分辨一個指標通常有兩類特征,按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢,離散數據通常統計各分類下數量的變化。

          • 連續型數據:指在一定區間內可以任意取值的數據叫連續數據,其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等,通常用折線圖體現變化趨勢。
          • 離散型數據:指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據,用柱圖表現更加體現變量的特征。


          維度特征

          多維度分析需要將多個變量在同一平面上直觀的表示,可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據,可使用不同顏色進行分類

          • 根據分析視角選擇圖表:對于多維度變量的數據我們需要明確分析的視角,去找準對應的數據映射。如案例中多個班級的科目成績的這組數據,如需要全局視角查看個班的綜合素質,推薦使用雷達圖;對比單科成績的變化分布,則推薦使用堆積圖。


          層級特征

          多層級數據由多個部分構成一個整體,又稱樹形結構數據。除了用結構樹圖表表現以外,還可以考慮以下兩種圖表類型:

          • 矩形樹圖:突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小,它以面積的形式突出展現各個子層級節點的占比,可幫助用戶看到數據的層次結構以及各層級之間的關系。


          例如:上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額,通過色調來區分不同類型,顏色的深淺代表分類下的子集,面積體現銷售占比。對比一般結構樹圖表,它的優勢在于可以有效利用空間。

          • 旭日圖:突出細分層級關系。由多個圓環圖嵌套而成,也稱為徑向樹圖,它既能像餅圖一樣表現局部和整體的占比,又能像矩形樹圖一樣表現層級關系。常用于細分分析方法,將事物從大到小進行拆解。每個級別的數據通過1個圓環表示,離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效,而矩形樹圖適合比較相對大小。


          流程特征

          流轉關系是表達數據轉化流程的重要類型,不僅包含統計意義上的數據總和,同時還表達了信息流轉的路徑;其中?;鶊D和漏斗圖都可以表達路徑中流量的變化,不同的是?;鶊D重點強調流量的強度和走向,漏斗圖更加注重突出轉化率和效果,根據不同的表達目的選用。



          二、強化視覺層次


          選擇合適的圖表后,在信息傳達上也需要正確的表達,展示形式美觀的同時能夠清晰的體現數據特點。


          1. 強化數據特性

          使用圖表正確的表達信息,需要設計師在強化數據特性的同時避免偏差

          • 趨勢易感知:折線圖數值如過于平均導致趨勢平緩,有時候無法體現偏差;在強調數據趨勢的場景下,推薦用動態取值范圍讓波動保持在一定范圍內,放大波動占比更突出趨勢。


          • 展示更準確:柱狀圖依靠柱體面積體現最終數值,使用動態范圍截斷將會導致數據解讀不完整;始終將 y 軸從 0 開始,才能更準確的反映柱圖中的值。


          2. 色彩視覺傳達

          除了在設計構圖上優化以外,顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知,錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板,精確傳達信息同時后續的項目在選用時也可以達到用色的統一。



          我們在之前的文章里有介紹過圖表的取色模型,通過調整顏色HSL值的區間,可以得到以下三種意圖色板:

          • 定性型-分類色板:用于區分不同的類型,又稱為無序色板。適合區分沒有內在順序的類別
          • 定量分歧型-發散色板:通過兩邊互補色來體現,具有明亮的中間值,然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值
          • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數字。

          那么我們要怎么樣去使用這些色板呢?下面幾個案例將帶你了解其中的差異。


          定性型:使用色調來進行分類

          數據內在沒有順序差別時,建議使用色調值(H)進行區分;如定義國家、行業等類型。如果希望圖表看起來更加專業,以下有幾項分類色板的小建議:

          • 選取盡量少的色調:取色時無需使用整個色環,使用鄰近色或互補色的取色方式顯得更加專業。


          • 色板適度明暗交替:一些視障人士無法區分色相,主要靠顏色的明暗差異來識別,通過飽和度和暗度的調整,創造明暗交替的色板。


          定量型:使用深淺色板強調內在順序

          如果在同一個分類下包含子類別,或者數據本身具有排名屬性,那么建議使用連續色板來突出他們內在的順序,使圖表更加易讀。

          • 順序色板-選擇合適的插值:根據數據的分布情況選擇不同的的插值斷點,突出數據的差異。如以下案例中,根據統計學概念設定不同的取值區間,左側示例使用的是平均線性差值,反映的是數據的集中趨勢;右側示例使用的是中位數插值,能更好的體現數據分布的形態。


          • 發散色板-關注對比色的識別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍的綠色更易分辨,對視障人士也更加友好。


          三、圖表中的響應式設計


          B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報,在基礎設計完成后還需要考慮到圖表展示的環境,根據不同端去適配顯示效果,以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。


          1. 布局框架適配

          在網頁端顯示時,有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態,將非必要的的元素轉化或隱藏,保留重要的圖形元素去適應當前空間;元素隱藏后使用懸浮交互來保證信息的展示,保持圖表的可讀性同時也避免產生元素的重疊。



          如案例中的圖表,在不同尺寸下通過改變和隱藏圖表元素,以達到適配當前空間的效果。

          2. 圖表元素適配

          要適配移動端,網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外,還需要考慮手機屏幕的尺寸和圖表元素的適配性,去兼容相關的交互操作。

          • 信息浮層:在圖表中,信息卡元素是傳達信息內容的重要組件,在網頁端中懸浮展示,通常會占據很大空間;圖表適配移動端后,信息浮層改動到圖表上方常駐顯示,并跟隨手指的滑動變化響應數值,完整展示信息的同時也避免了頁面抖動。


          • 坐標軸標簽:過長的坐標標簽在適配過程中會產生重疊,而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配,避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配,精簡空間避免堆疊。


          3. 極值適配

          因B端平臺的特性,我們無法預知客戶傳入的數據量,可能會遇到因數據量過多,造成圖表顯示不佳,數據讀取困難等問題。這種情況下,提前考慮數據極限場景,通過交互的形式變化的方式讓用戶獲取完整信息,提升理解同時信息展示更靈活。

          • 縮放和平移:在數據范圍過多時增加取值范圍的縮略軸組件,通過限制展示范圍讓數據量顯示可控。


          • 互動切換視圖:如果折線的類別過多且無法省略的,建議分組查看。默認狀態僅當前組折線高亮,其他數據以淺色顯示,通過切換的方式查看其他組別的信息。


          • 懸浮鼠標高亮:在分類過多不好分辨時,可使用懸浮高亮的交互方式突出相關聯的數據組。


          還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨立介紹。


          // 結語


          數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確,才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據,確保用戶能夠更好的接收信息,才是可視化的關鍵。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


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


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

          視頻便捷手勢 交互設計探索

          ui設計分享達人

          一、前言

          視頻播放器中承載著極其豐富的內容畫面和播控功能,尤其是在寸土寸金的移動端視頻播放器中,為使內容更沉浸消費,需盡可能克制界面中的功能元素/入口直接外露?;诖朔N場景下,合理的手勢設計不但可為界面“減負”,還可幫助用戶更快捷觸達功能、提升操控便捷性。


          視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知,如「單擊 暫?!?、「雙擊點贊」、「長按快進」、「橫滑導航」、「縱滑切視頻」、「雙指捏合縮放視窗」等通用手勢。

          那么如何在保留用戶對于常規通用手勢認知的基礎上,進一步對視頻場景中的手勢交互進行擴容升級?這也是我們接下來在手勢進階交互上的重點探索方向。

          本次針對百度APP中的視頻播放器場景,為提升手勢操控效率,我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型,以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。

          二、什么是「組合手勢」

          「組合手勢」是基于常規手勢的組合擴展,其通常由兩種或兩種以上的常規基礎手勢所構成,若組合方式及使用場景得當,可助力用戶更便捷的觸達功能。

          以前述的視頻場景常規手勢為例,其觸發機制一般可分為兩個階段:step1交互信號step2執行任務,即用戶通過某一基礎手勢發出交互信號,系統收到信號確認后便可立即執行任務,但整個過程是線性的,手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。

          于是我們在現有常規手勢兩階段觸發機制的基礎上,嘗試引入「意圖識別」環節,并梳理出「組合手勢」的設計模型,以探索不同基礎手勢相互組合后的擴展可行性。

          「組合手勢」觸發一般可分為三個階段:step1交互信號step2意圖識別step3執行任務,前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。

          由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口,因此,其差異化創新具有較大設計靈活度,尤其需根據具體的使用場景進行綜合考量。

          三、「長按組合手勢」激活快捷菜單

          1.項目背景

          百度APP視頻場景早期的播控功能較少,如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。

          隨著后續視頻場景的功能建設日漸完善,我們便在基礎菜單面板中拓展了一行視頻菜單,專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項,菜單面板彈出后還需左滑才可露出后面的功能入口,因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。

          2.競品調研及選型

          通過對競品進行調研,我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型,  分別為:長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。

          選型A

          「長按觸發獨立播控面板」:通過長按手勢可激活從屏幕底部彈出的獨立播控面板,此方案擴展性較強,但對視頻沉浸觀感體驗有一定的打斷感;


          選型B

          「長按觸發浮層播控選項」:通過長按手勢可觸發置于視窗上層的浮層選項入口,一定程度上可延續視頻觀看的沉浸體驗,但浮層擴展性有限;


          選型C

          「長按觸發特定播控功能」:通過長按手勢觸發特定的某個播控功能(如長按“快進”),一定程度上可滿足此功能的重度用戶,但對于長按手勢的使用效率較低;

          3.設計方案

          1)長按手勢交互擴容

          針對目前視頻播控菜單存在的問題,經過和業務對上述三種長按交互選型方案進行綜合考量,最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置,并探索一套更便捷的觸發機制,以此對視頻場景中的播控菜單進行設計升級。

          但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據,用戶對此功能的使用頻率高、并已形成較深的操控認知,若直接下線“快進”功能則會對用戶使用習慣產生較大影響,尤其是視頻場景的重度用戶。

          那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢?是否有可能將“快進”和“快捷菜單”進行融合?這也是本次項目對于便捷手勢體驗的重要設計探索點。

          基于此,我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義,通過「長按+滑選」的機制觸發快捷菜單功能項,以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為:

          step1:以“長按手勢”創建一個新模式,即發出交互信號并喚出浮層菜單;

          step2:若用戶未松開手指,則系統默認開始識別用戶意圖,是否有以“拖拽手勢”滑選至目標功能項以選擇功能;

          step3:用戶滑選錨定至目標功能后,松手釋放即可完成最后的功能執行確認。

          「長按+向上滑選」快捷觸發對應功能項;

          「長按+向下滑選」快捷觸發“快進”(一定程度上兼容老用戶對于此功能的使用習慣)。

          2)容錯性兼容
          在設定「長按+滑選」組合手勢的同時,考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程,我們同時也支持點選的操作模式,即用戶長按后若未產生滑選行為便松手,則松手后依然可通過點選的方式觸發對應播控功能項。

          3)易用性打磨

          差異化的創新設計形式在前期總會面臨質疑和挑戰,本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式,于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試,以預期在上線前可先收集一波體驗問題進行快速打磨優化。

          我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本,并邀請了10+名不同年齡段的目標用戶進行訪談測試。

          測試訪談的過程中,被測用戶在進行1至2次嘗試操作之后,均可掌握如何使用「長按+滑選」的組合手勢,這也為我們增添了不少信心。

          同時,我們通過觀察用戶操作行為及用戶主動反饋,發現仍有部分易用性細節可進一步打磨優化。

          3.1 )擴展觸發熱區:

          考慮到單手握持手機的使用場景,可盡可能擴大定義長按手勢的觸發熱區,屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外,其它大面積區域熱區均可支持長按觸發快捷菜單,以降低觸發難度、提升易用性。

          3.2 )支持跟手觸發:

          長按后浮出的快捷功能項,其浮出位置支持跟隨手指的縱向觸發位置而浮出,可減少手指在屏幕上的位移距離、操控更便捷。

          3.3 )實時提示及響應反饋:

          靈活判斷當前手勢觸控狀態(如滑入選擇 / 松手觸發),在界面中即時給出相對應的引導提示或振感反饋,以幫助用戶快速適應新的手勢觸發機制。

          方案上線及驗證

          以AB實驗對本次設計方案進行定量測試驗證:

          「對照組」效果:長按觸發“快進”(各播控功能入口仍歸置于基礎菜單面板之中);

          「實驗組」效果:長按觸發“快捷菜單”選項(支持滑選和點選模式);

          小流量實驗上線后,經過近半個月的觀察,大盤指標穩定、播放完成率等滿意度指標穩步提升。

          「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升,說明用戶對部分高頻功能的確有很強的快捷觸發訴求。

          「實驗組」的“快進”雖多了一步觸發步長,實驗前期“快進”使用率不及「對照組」,但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高,通過滑選觸發“快進”的操作習慣也快速被培養起來,對于用戶來說,長按快捷菜單帶來的整體收益是大于折損的。

          二期擴展方案
          隨著長按快捷菜單的上線推全,長按手勢的滲透率也持續走高,用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求,于是我們對長按菜單進行了二期的設計升級,在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能,用戶通過長按后的可選播控項增多,播控功能整體的使用量得到進一步提升。

          四、「組合手勢」拓展探索

          手勢交互是用戶在現實世界行為的映射,無論是基礎手勢還是組合類高級手勢,都須符合用戶認知習慣、并融入具體的使用場景中進行設計。

          以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐,我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。

          1.「右滑返回手勢」激活“小窗播放”

          “小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。

          基于用戶的此種操控意圖,我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口,隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖,若有短距上滑拖拽行為,松手釋放即可快捷激活視頻小窗,以提升觀看體驗的連續性。

          2.「雙指手勢」激活“滿屏播放”

          “雙指拖拽手勢”可拖拽并清屏視窗畫面,以此手勢發出交互信號,若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為,則松手釋放即可快捷激活“滿屏播放”,以滿足更沉浸視頻瀏覽體驗。

          五、結語

          便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑,從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發,后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


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


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

          “老字號”互聯網產品的年輕化之路

          ui設計分享達人

          一、項目背景

          百度文庫APP是一個在線文檔分享平臺,上線已有十余年的時間,是一款名副其實的老字號互聯網產品。隨著互聯網的成熟以及年輕用戶的涌入,時代語境和流行文化發生了變化。年輕化設計已經成為互聯網產品設計中不可避免的話題。在日常對用戶反饋的監測中,我們發現文庫APP當時的體驗已經不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發現,文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。

          二、由內而外,打造年輕化感知

          通過對年輕市場進行洞察,我們發現年輕用戶對產品的需求是多維度的。不僅對產品的“顏值”有高要求,他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高,也更愿意去探索產品新的玩法,與產品進行沉浸的情感互動。

          所以此次年輕化改版不能只是對“產品的外表”進行升級,要從視覺、體驗進行全方位、多維度的年輕化升級。由內而外的打造年輕化感知。



          三、“老字號”互聯網產品的煥新之路

          2.1 視覺升級-更好看















          2.2 體驗升級-更好用









          寫在最后

          從UI設計誕生初期,設計師在屏幕上模擬現實世界的交互方式,用擬物化的設計風格幫助用戶熟悉UI界面操作。到現在用戶對移動屏幕越來越熟悉,設計師們可以在產品設計中去嘗試更多的可能性。產品與用戶共同成長才是年輕化設計的意義。

          未來,我們也會保持好奇心和探索欲,不斷打磨產品體驗,與用戶共同成長。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


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


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


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

          客戶交付設計 —— 開啟數字化轉型設計篇章

          seo達人

          數字轉型推動社會效率

          在阿里云設計中心有著這樣一只團隊,譜寫了這樣一些故事…

          “ 設計師成為逆行者,第一個定義健康碼體驗流程,為了百姓疫情防控出謀劃策。

          國民級應用不難用,新稅改讓人人都能三步退稅,五步報稅。

          全球卓越家具品牌體驗升級,讓家居行業供應鏈建立合作更加便捷。

          云上展廳,傳統會展線上化,數字化,讓廠家產品展示與投資突破空間阻礙?!?

          有人問…這也是ACD設計中心的工作范疇嗎?是的,就是有這樣一支團隊,完成了上百家客戶的產品設計體驗護航,為大型企業和政府的線下交付項目提供有關產品體驗升級的設計能力,在第一時間響應客戶,奔赴現場,通過專業化設計解決方案,為項目提供體驗助力,用設計幫助客戶創造價值。在過去的十年,阿里累計了從底層基礎設施,IoT到協同辦公,大數據,AI,到軟硬件一體化的云平臺。致力于在數字經濟時代實現我們的夢想與使命:讓天下沒有難做的生意。這個夢想的漣漪,成為了今天阿里云設計中心肩負的責任:與合作伙伴一起,助力數字化的能力賦予更多政府和企業。

           

          設計打造客戶價值

          為什么要做這些事呢?數字經濟的發展讓越來越多的企業意識到數字化轉型是長久發展方向下可采用的一種成本更低,方式更靈活的解決方案。政府也在加快推進全國一體化在線政務服務平臺建設,實現“讓群眾少跑腿,讓數據多跑路”,一證通辦,一網通辦,一事聯辦,推動政府治理現代化,建設人民滿意的服務型政府。

          我們常會有相似的體感,一些傳統行業和對民眾服務機構,在數字系統和服務體驗質量上與科技互聯網公司還有著很大差距。往往承擔此類工作的軟件服務商,也更多是從架構、數據出發,從而忽視產品體驗和使用感官的重要性。

          因此,以政企客戶為主導的產品設計需求愈加凸顯,既要滿足客戶業務需求,也要滿足用戶體驗需求,設計已成為重要的一環,從底層到表層,滲透在項目交付的方方面面。我們依托于整個阿里云和數字轉型的契機,堅信只有把自身的設計經驗和能力注入進客戶產品中,才能更好助力阿里云政企客戶和伙伴,賦能整個交付生態。

           

          專業賦能業務探索

          ACD客戶體驗設計團隊非常重視能如何將ACD沉淀的設計經驗、方法、能力輸出到行業中,以阿里云在數字轉型中的重要作用為契機,更好的幫助行業企業、政府為公眾提供更優質的產品與服務體驗。這樣體量的項目,設計師能提供哪些具體能力呢?

          面向全球200多個國家和地區的數百款云計算產品,我們研發了Xconsole云產品一站式設計及研發解決方案,為產品體驗保駕護航;面對企業全面上云,我們搭建了一套完整而靈活的設計系統去組織云上生長的各種企業級服務,即B-Design企業級設計系統;面向成百上千的并行項目,我們基于項目管理作業流程研發了內部設計標準化交付平臺和數字生成平臺,為項目提供豐富設計物料和經驗累積;面對錯綜復雜多變的多端應用,我們在實踐中沉淀下來一套云產品使用體驗度量系統,包含UES度量模型,體驗管理機制和易用性測試和數字化管理的體驗工具集,同時我們也打造了一款深植于云業務體驗管理場景的NPS調研工具;面向不同產品生態,我們探索制定了一套一致性測評方法與度量指標,并歸納成了體系方法模型形成論文,以擴展摘要形式被CSCW收錄;面對特殊的用戶群體,我們進行了無障礙設計方法的研究探索;同時,我們與中國工業設計協會設計標準分會一起對外發布3項設計標準:《云計算管控平臺界面設計指南》《云計算軟件產品使用體驗度量模型及方法》《云計算軟件產品易用性度量》,另外3項《數據可視化大屏設計指南》,《云計算管控平臺無障礙設計規范與評估方法》,《云計算體驗設計標準作業程序》還在籌備中,計劃和業界一起合作發布…..

          圖片

          在設計專業道路上,我們持續深耕探索,并結合數百個項目實踐經歷,通過DPM (design platform for manufacture)設計生產平臺,高效產出行業數字設計解決方案,涵蓋領域包括、金融、數字政府、新零售等多個領域,我們的方法論和經驗體系經過多次驗證,確保方案的準確與高質。針對不同的客戶和項目階段,我們可以輸出獨立完整的產品咨詢體系,拉升項目、客戶、設計中心共同對體驗質量可關注度;遇到綜合項目也可通過NPS和體驗度量測試,更好的面向客戶的目標群體,提供服務。我們面對商業服務提升設計增值,對公眾服務提升使用效率與滿意感知。

           

          項目實踐成就客戶

          1.數據可視化助力疫情防控:你今天有綠碼嗎?

          2020年突如其來的新型冠狀病毒讓每個人都措手不及,疫情防控,關鍵是人的防控,任何一個環節的疏漏,任何一個節點的缺失,都可能讓已有的戰果付之東流甚至化為烏有。一個簡單的二維碼為不同人群在通行提供動態化數字憑證,小小“健康碼”派上大用場,通過科技的手段助力提升疫情防控效果,對打贏這場戰“疫”必將發揮至關重要的作用。

          圖片

          湖北“健康碼”的推行,是“數字政府”改革建設賦能疫情防控和社會治理的一項創新實踐。一方面,“碼”上通行更便捷,上班“企業打碼”、下班“社區掃碼”、出行“健康亮碼”,另一方面“碼”上監管更精準,依托紅碼、藍碼、黃碼、綠碼關注重點人。在設計的過程中,首先需要明確健康碼的定義、關注目標人群的操作習慣,確定各種碼顏色的優先級以及權重,通過集成電子病歷、健康體檢、生活方式管理的相關數據,在關聯健康指標和健康碼顏色的基礎上,探索建立個人健康指數排行,通過防疫健康碼的精細化設計更好助力疫情防控。

           

          2.助力納稅人合理節稅,放心交稅,高效辦理

          談到稅收問題,大部分人對稅務的相關法律法規了解不多,法律知識的不健全讓個人納稅申報“行走”艱難,高收入者對不主動申報者的處罰力度低。同時沒有稅務管理基礎型制度支持,想提高征收效果注定“心有余而力不足”。

          圖片

          基于現狀我們對個稅申報系統進行了服務體驗優化升級,讓系統具有非常好的靈活性和可配置性,從界面外觀到交互體驗對每個細節進行打磨,秉承人性化的設計理念,始終以用戶需求為目標而進行設計,讓用戶辦理事務過程更加高效,真正將政府服務于人的理念滲透到各方面。同時極大的方便了遠程辦理繳稅的納稅人,助力國家更好的保證打工人的納稅人權益,對于偷稅漏稅的個人和公司管控更加嚴格。

           

          3.體驗365天“永不落幕云上投洽會”

          中國國際投資貿易洽談會由商務部和主辦,有23年歷史,是國際展覽業協會(UFI)認證的全球規模最大的投資性展覽會。受到疫情的影響,同時得益于信息化技術的發展,“云展會”成為可能,更多的人不用去會場,在家可以體驗到更便捷、高效、實時的參會與交流。

          圖片

          阿里云攜手中國國際貿易組織傾力打造了“云上投恰會”APP,參展方可實現云上展覽、項目對接、招商洽談、論壇研討和云端簽約,目前已經有近60家展商入駐3D云展廳,集成各類投資項目。5G、人工智能、實時渲染3D大屏、VR等新技術手段,提供了身臨其境的云上參展體驗。其中VR技術的應用給用戶制造出了更加沉浸式體驗,通過一系列視覺線索及交互反饋來增強虛擬世界與現實世界的關聯,從人類認知及行為的基礎原理中獲得理論指導,充分利用虛擬空間打造最符合人們在現實當中的認知及行為規律的互動模式,讓用戶完全沉浸在虛擬世界中。

           

          4.數據服務體驗升級 – 實現實時,靈活,多維用戶洞察

          2021年1月,紅旗品牌以月銷突破32500輛的成績,邁入月銷3萬輛俱樂部,實現單月銷量再次突破;同比增長高達158%,當汽車銷售購買成為很多人的需求,觀看數據整理報表及銷售量就會尤為復雜,所有的業務歸根結底都是為了業務數據的提升和對比,數據查詢成為了領導關心的話題。

          圖片

          數據看板是公司驅動價值增長的重要工具,通過看板檢測核心數據、及時洞察業務問題、溝通各部門的解決方案,在領導與部門查看數據的過程中,可視化的方式混亂常常是最大的問題,通過專業的設計原則和色彩搭配讓數據看板變得更加專業,提高應用的效率是阿里云設計解決一汽集團痛點的最佳方式。

           

          5.卓越家居品牌升級-讓美好的生活不僅有詩和遠方

          美好的生活需要詩和遠方,更需要沙發和床”是紅星美凱龍董事長提出的品牌理念,如何讓大眾增強品牌的認同感,將消費者心中的產品效果無限放大是留給阿里云設計的困難之一。品牌使命也是品牌主張,是一個產品存在的價值與意義,建立起一個獨特且立體的形象,不斷通過渠道和產品與消費者建立聯系,就能夠在消費心中留下品牌烙印,建立認同。

          圖片

          在多端設計的過程中,我們不斷增強品牌的調性定位、提取品牌視覺的DNA,通過品牌色、插畫、紋理等設計視覺元素減少市場上同質化的設計,將界面設計與品牌的提升密切結合,增強品牌友好度、擴大品牌影響力、深入洞察與了解目標用戶。

           

          6.金融技術協助行業服務轉型升級

          隨著時代的發展,我們會發現保險行業出現了越來越多的保險類型和方式,一旦遇到重病,醫療費就如同流水般一去不回,對于普通家庭來說是一筆不小的開支,那么到底怎么買保險才比較劃算、比較實用、每個類型哪種好?怎么篩選適合自己經濟又保障的保險業務,也是生活中的必修課。

          圖片

          阿里云助力新華保險為用戶提供了豐富并可以篩選的業務,全面、優質的風險保障和理財服務,便捷、溫馨的服務體驗。7X24小時全年無休的投保咨詢及理財顧問預約、理賠報案、保單查詢、單證補發、聯系信息修改、回訪等內容。保險APP的服務升級開發方便行業轉型、增加用戶粘度、完善了銷售功能、同時創新購買模式讓保險與互聯網真正實現接軌,讓保險行業也逐漸繁榮起來。

           

          篇章延續新的起始

          客戶交付設計開啟了 to B時代產品設計篇章,接下來我們將會面對更廣闊的項目場景,也有更多專業領域需要挖掘沉淀。在后續文章里我們會分享一系列在實戰經驗中得出的方法和心得,包括:設計服務體系,競爭力打造,產品孵化與定價,商業項目數據運營,業務發展,交付設計能力模型與人才成長路徑,設計的商業價值探索,政企項目分析,設計中臺建設等等。希望能與你一起在數字化轉型設計的路上越走越遠。


          作者:阿里云

          轉載請注明:學UI網》客戶交付設計 —— 開啟數字化轉型設計篇章

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


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


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




          讓設計方案更具說服力的10個心理學原理!

          seo達人


          ??????

           

          1.格式塔原則 

          相似原則

          人的眼睛會把具有相似特征的元素當成一個整體,認為這些元素具有相同的作用。

          圖片

          ▲ 界面中的綠色圖標具有相同的功能,方便用戶快速認知和操作。因此在設計具有相同功能或內容的界面元素時,應該保持一致性。

          應用位置:導航、鏈接、按鈕、內容頁。

           

          連續原則

          用戶傾向于把連續排列的元素視為一個整體。這條原則與對稱性和相似性密切相關。通過在序列上創建相似且重復的元素,引導用戶的視線方向,使操作更加連貫和清晰。

          圖片

          ▲ 只露出一部分的卡片會向用戶發出信號,表示滑動可以查看更多的書。

          應用位置:菜單和子菜單、列表、產品頁、輪播頁。

           

          封閉原則

          當看到不完整的圖像時,我們會依據已有的經驗把不完全封閉的圖像當成一個統一的整體,這是在平面或logo設計中常用到的原則。

          圖片

          ▲ 盡管頁面右上方的餅圖只顯示了一部分,我們仍然能夠輕松地識別出來。

          應用位置:圖標、加載、數據可視化。

           

          鄰近原則

          人們會將彼此相鄰的元素視為一組。在設計時要注意使用間距將元素組合在一起。使用較大的間距來分隔大的內容組,再使用較小的間距來分隔大內容組中的小內容組。

          圖片

          ▲ 頁面上的每個卡片中都含有4組信息,很難快速識別具體的內容。通過調整間距,可以將這些信息清楚地分為2組。

          應用位置:導航、卡片、橫幅、列表頁、分頁。

           

          對稱原則

          我們喜歡看到對稱且平衡的事物。它是所設計領域中最常用和最安全的原則,有助于營造一種穩定感和秩序感。

          圖片

          ▲ 對稱的布局不僅增強了用戶的印象,還強調了中間的視頻播放按鈕。

          應用位置:產品展示頁、列表、導航以及任何內容豐富的頁面。

           

          共同區域原則

          通過信息分組和內容組織,實現內容的組合,有助于提升內容的層次結構和可掃描性。

          圖片

          ▲ 卡片式UI有助于將信息分組并創建內容的層級深度。

          應用位置:卡片、內容、服務、摘要。

           

          共同命運原則

          向同一方向移動的元素被認為比靜止或向另一個方向上移動的元素更相關。這個原則有利于建立不同分組或狀態之間的關系。

          圖片

          ▲ 頁面右側的3個圖形方向相同,有利于展示信息并讓用戶了解它們的功能。

          應用位置:導航/下拉、折疊條目、工具提示、產品滑塊、滾動條。

           

          2.焦點 

          看東西時,我們的視線往往會首先關注最突出的元素。理解這種行為有助于我們在設計中創建一個“錨點”,從而引導用戶按照我們設計的場景查看內容。

          圖片

          ▲ 通過人物插畫將用戶的注意力引導到賬單和人數等主要信息上。

          應用位置:內容、登錄頁、產品頁。

           

          3.馮·雷斯托夫效應 

          又稱隔離效應,相對于普通事件或物體,獨特、有特色的事件或物體更容易被人記住。應用此原則的元素通常獨立存在,不需要向用戶導航額外的信息。

          圖片

          ▲ 中間的升級插畫部分在整個頁面上是獨立存在的,并且吸引注意力是號召性用語或轉化的關鍵。

          應用位置:價格表、促銷頁、圖標入口。

           

          4.本能反應 

          根據現實中的用戶行為創建視覺上引人入勝的體驗。例如看幽默類視頻的時候,如果在視頻的高潮伴有笑聲音效,我們也會更容易跟著笑起來。

          圖片

          如果能讓用戶感覺良好和舒適,他們也會更喜歡我們的設計。

          應用位置:產品圖、插圖、攝影。

           

          5.色彩心理學 

          許多研究表明,顏色對我們的潛意識有特殊的影響。性別、宗教和文化對顏色的理解也有所不同。

          圖片

          ▲ 關于顏色的運用,這張色彩心理學海報介紹了豐富的方法。同時也要記住最廣泛使用的系統顏色:紅色代表錯誤;綠色代表成功;藍色代表進行中;黃色代表警告。

           

          6.形狀心理學 

          圖片

          ▲ 同顏色一樣,人們的潛意識對不同的形狀也有不同的反應:

          圓形、橢圓形:傳達積極的信息,通常與社區或關系有關;

          正方形、三角形:傳達強烈的信息,通常與強度和穩定性有關;

          垂直線:表示強度或力量。

          水平線:表示平靜、相等或安靜。

           

          7.雙重編碼理論 

          這個理論解釋了人類需要視覺和語言信息來盡快處理信息。為了最大限度地提高設計的有效性,不應該刪除必要的說明性文字。

          圖片

          ▲ 大多數App的底部導航欄都利用圖標與文字相結合的方式讓用戶快速知道功能。

           

          另一個好的設計案例:

          圖片

           

          8.并行設計 

          人眼傾向于看到平行因素比其他因素更相關。這一原理經常用來對同一頁面中的兩組不同內容進行分類。

          圖片

          ▲ 使用垂直排列的卡片代表相同的問題,水平排列的卡片代表不同的問題。

           

          9.公共區域 

          這一原理類似于格式塔原則中的相似原則。公共區域通過使用線、形狀或顏色劃分的方式創建。

          圖片

          ▲ 如果頁面需要用戶不斷滾動來查看內容,可以考慮使用顏色來更清楚地劃分這些內容,而不僅僅是使用間距。

           

          10.掃描模式 

          根據NNGroup、UXPin等設計團體的研究,最常用的兩種掃描模式是“F型”和“Z型”:

          “F型”應用最為廣泛,尤其是對于內容豐富的網站。

          “Z型”用于那些文字信息少,最后需要強調用戶點擊類的網站。

          關于掃描模式更詳細的內容可以查看我之前的文章:如何構建直觀有效的導航結構(上)

          了解如何使用這些模式后,我們就可以有效地選擇布局和安排元素來實現設計目標。

           

          最后 

          第一印象是最令人難忘的,好的體驗可以在用戶與產品之間建立持久的聯系。


          作者:Hoang Nguyen

          譯者:Clippp

          轉載請注明:學UI網》讓設計方案更具說服力的10個心理學原理!

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


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


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




          日歷

          鏈接

          個人資料

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

          存檔

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