亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

前言  

19年中旬至今，很榮幸主導(dǎo)了一個短期空間分析領(lǐng)域的B端產(chǎn)品設(shè)計改版工作，在這篇文章中與大家分享一些改版過程中的設(shè)計思路以及一些設(shè)計細(xì)節(jié)的思考，為保護工作單位的知識產(chǎn)權(quán)，對界面內(nèi)敏感數(shù)據(jù)以及信息進行了改動與脫敏處理，本文僅討論設(shè)計與交互層面的相關(guān)觀點，文章主要涉及發(fā)現(xiàn)問題、解決問題（方案設(shè)計）、頁面展示等階段的代表性案例與大家討論。

背景

CILAS是一款面向國內(nèi)外企業(yè)，依托智能辦公設(shè)備與空間傳感器，通過可視化的圖表與分析報告，使客戶快速了解辦公工位使用情況和辦公空間的利用情況，從而減少工位閑置、增加空間利用率。有效降低運營成本，實現(xiàn)企業(yè)精細(xì)化管理的產(chǎn)品。

在19年下半年,公司把品牌升級作為一個重要的戰(zhàn)略依據(jù)，產(chǎn)品層面僅僅滿足基礎(chǔ)數(shù)據(jù)分析需求的一款工具已經(jīng)滿足不了現(xiàn)階段公司發(fā)展需求，現(xiàn)在需要我們更加注重功能的聚焦與真實場景的細(xì)分，交互層面保證使用者高效率、高流暢度的完成每一次操作，視覺層面要保證公司產(chǎn)品風(fēng)格統(tǒng)一打出辦公領(lǐng)域的品牌差異化，用高品質(zhì)的視覺風(fēng)格，順應(yīng)國際化這一需求，同時也要通過設(shè)計兼顧用戶的情感化訴求。

因此，我們希望通過本次產(chǎn)品&品牌升級，能夠從產(chǎn)品的功能架構(gòu)、使用流程、視覺識別、用戶體驗、上下線推廣等多維度來傳遞品牌核心價值，同時遵從“少即是多”的設(shè)計理念，形成一套完整統(tǒng)一的設(shè)計語言。

設(shè)計目標(biāo)

經(jīng)過團隊多輪碰頭會議的討論，從“品牌功能”“描述性修飾語”“情感性修飾”三個維度，可以較為準(zhǔn)確的確定了符合公司特色的設(shè)計目標(biāo)，分別為 “更專業(yè)的信息服務(wù)、更國際化的視覺感受、更年輕充滿活力” 

品牌功能：描述了產(chǎn)品或服務(wù)的性質(zhì)，即品牌能夠向用戶提供的體驗或益處的類型；

描述性修飾語：將進一步分類及明確品牌所傳達(dá)出樣貌之性質(zhì)；

情感性修飾語：則解釋了品牌的特性給用戶帶來的最直觀感受是什么。

然后我們以三個關(guān)鍵點為方向，始終貫穿到整個設(shè)計的過程中。

發(fā)現(xiàn)問題

發(fā)現(xiàn)問題階段主要從產(chǎn)品、交互、視覺三個方向進行刨析

產(chǎn)品層面可以拆分為新增功能、業(yè)務(wù)流程優(yōu)化、核心功能點再梳理等方向去發(fā)現(xiàn)問題

交互層面可以拆分為檢查現(xiàn)有交互流程是否順暢、檢查限制條件、各種狀態(tài)、操作反饋信息是否完善、檢查用戶權(quán)限是否缺失等方向去發(fā)現(xiàn)問題

視覺層面可以拆分為 布局、文字、顏色、圖標(biāo)、控件等方向去發(fā)現(xiàn)問題

我所在的產(chǎn)品部門，組織國內(nèi)外業(yè)務(wù)同事，把經(jīng)銷商、客戶對產(chǎn)品還未設(shè)計的訴求以及設(shè)計過但有明顯改進空間的訴求整理近產(chǎn)品 backlog，同時我們同步進行用戶訪談、問卷調(diào)查、產(chǎn)品體驗地圖、線上數(shù)據(jù)反饋等方式，去挖掘用戶訴求以及問題點，之后我們把得到的信息數(shù)據(jù)，進行甄別篩選，以文檔的形式把問題對應(yīng)到線上產(chǎn)品的具體頁面，方便進行后續(xù)產(chǎn)品設(shè)計的排期工作。

為保證讀者的閱讀體驗發(fā)現(xiàn)問題只說明過程以及思路，不具體展示頁面問題，頁面問題將會在下面方案設(shè)計模塊統(tǒng)一展示，方便大家更直觀的作出改版前后的對比。

方案設(shè)計

方案設(shè)計階段要始終遵循上面提到的三個設(shè)計目標(biāo)，在設(shè)計的過程中，要保證始終每一個設(shè)計改動都要有理可依，同時要把更多的精力放在節(jié)約設(shè)計生產(chǎn)成本，增加產(chǎn)品可用性提高使用效率上，下面我將通過幾個具體案例來展示改版的思路。

案例一 設(shè)備狀態(tài)頁面

 設(shè)備狀態(tài)頁面是對設(shè)備的實時監(jiān)控，使用戶能夠即時發(fā)現(xiàn)設(shè)備的使用情況，快速定位設(shè)備問題

舊版本中我們發(fā)現(xiàn)：

一：產(chǎn)品層面

1：目前展示的設(shè)備信息，對于用戶“能夠宏觀看到不同類型設(shè)備狀態(tài)，快速定位設(shè)備問題”這一需求來說功能還不夠，因此切換到企業(yè)空間管理員這一視角，更希望增加每一種設(shè)備類型對應(yīng)的具體屬性，比如會議室需要增加目前使用人數(shù)，和各種狀態(tài)下的使用時長。

二：交互層面

1：雖然是全部設(shè)備的總和，但數(shù)據(jù)太多會嚴(yán)重干擾用戶決策與閱讀效率，舉個例子，真實情況下企業(yè)有可能有上百個工位類型的點位，幾十個會議室類型的點位，全部在頁面呈現(xiàn)，用戶需要下拉很長時間才可以看到下面的信息，同時雖然是全部選項也應(yīng)該區(qū)分出來不同功能的設(shè)備，幫助用戶更加直觀的掌握每種點位大致的情況，如下圖所示

2:右上角顯示信息與下拉菜單篩選字段重復(fù)

三：視覺層面

1.:頁面布局

整體界面，第一眼看上去都是紅綠色塊，用戶很難去聚焦信息內(nèi)容，找到對他有用的數(shù)據(jù)，這是在框架層缺少對信息的歸納整理，所導(dǎo)致的頁面布局不清晰的問題

2:顏色

顏色這一塊,放在整體一起說比較合適，如圖所示，平臺整體以藍(lán)色為主色，紅綠雙色代表數(shù)據(jù)顏色，首先兩種顏色表示數(shù)據(jù)，很明顯是不能滿足多種類型的業(yè)務(wù)需求的，其次紅綠色對有視覺缺陷的用戶來說，大面積的紅綠色是致命的，需要考慮到這部分用戶的使用感受，再來，就是平臺整體飽和度偏低，信息之間的顏色對比不夠，拉不開視覺層次。

3:圖標(biāo)

該頁最大的問題是沒有圖標(biāo)，頁面設(shè)備的不同類型，可以用圖標(biāo)的形式進行展現(xiàn)，目前信息區(qū)分不明顯

4:文字

文字這里也是基于平臺整體描述，經(jīng)過設(shè)計走查發(fā)現(xiàn)平臺內(nèi)的字體沒有形成字體規(guī)范，各種字號字體混亂運用，不符合交互設(shè)計中一致性原則，如果具有相同功能屬性的模塊運用了不同大小的字體，會給用戶造成不必要的困擾。

5:控件

檢查每一個頁面相同功能的控件樣式是否一樣，比如這里加載更多的按鈕的字體為18號，但小弟翻山越嶺，苦苦尋找整個平臺，加載更多這個18號字體基于按鈕也只出現(xiàn)在了這一處。但任何一種表現(xiàn)形式都，要有理論依據(jù)，我們可以整體的對功能進行分級，然后根據(jù)功能屬性與優(yōu)先級，調(diào)用不同的按鈕樣式。

新版本我們的解決辦法：

一：產(chǎn)品層面

1:增加了客戶幾個，較為關(guān)注的功能（前期用戶訪談，問卷調(diào)研得出的結(jié)論），例如工位類型點位增加使用時長，站坐高度、站坐狀態(tài)等會議室類型的點位增加了會議室人數(shù)、使用時長等。

二：交互層面

1：在框架層與表現(xiàn)層對信息進行了歸納分類，每一種點位類型，默認(rèn)展示20條數(shù)，在20條數(shù)據(jù)的底部增加加載，更多按鈕，下拉頁面超過一屏的位置，增加返回頁面，頂部的功能讓用戶快速返回頂部，增強對產(chǎn)品的操控感。

2：點位信息，本身可以作為可點擊按鈕進行篩選，這樣在流程上減少了一步操作.

三：視覺層面

1:頁面布局

在設(shè)計頁面之初就要根據(jù)產(chǎn)品屬性，定義一套統(tǒng)一完整的柵格系統(tǒng)，考慮到該產(chǎn)品頁面信息復(fù)雜，應(yīng)用場景多，我們在內(nèi)容區(qū)進行了24柵格的劃分，Gutter設(shè)定了固定的值（24px），即頁面在自適應(yīng)屏幕尺寸的時候，柵格的Column寬度會進行改變，但Gutter的寬度恒定不變。且對于頁面中所有元素之間的間距始終都要遵循4n原則。

再來就是需要對頁面內(nèi)信息的優(yōu)先級進行定義，該突出的突出，該弱化的弱化，就好像當(dāng)年畫畫，如果一個頁面全部都是重點，那么就沒有了重點，要做到有的放矢，突出信息的層級，使使用者閱讀更清晰，操作更方便。

2:顏色

基于顏色我們調(diào)研了許多競品，并且對競品的視覺風(fēng)格進行投票，最終大家高票聚焦到了兩家平臺身上，這里發(fā)生了比較有意思的事情，兩種平臺的視覺風(fēng)格有明顯差異，一個是明度高，飽和度高，整體給人的感受，年輕有活力，另外一個配色，飽和度低，明度適中，整體給人的感覺嚴(yán)謹(jǐn)，便于對數(shù)據(jù)閱讀，我們通過AB test的方式，各抽離出一個主色，然后再根據(jù)主色，調(diào)配出數(shù)據(jù)可視化顏色和通用功能色，最終根據(jù)反饋的數(shù)據(jù)以及品牌特征，采取了現(xiàn)在這版配色的方案，主要解決了，數(shù)據(jù)顏色單一，整體顏色對比度拉不開，識別性不強的問題。

2:圖標(biāo)

如圖把具體功能如會議室、點位以圖標(biāo)的形式進行展現(xiàn)，增強信息的可視化

同時，因為我們想讓企業(yè)更關(guān)注員工的站立情況，所以對正在站立的點位進行了樣式上的突出，增加了站的狀態(tài)icon，背景為當(dāng)前點位狀態(tài)的不透明度即強調(diào)了站立，又與整體畫面不沖突。

4:控件

我們要習(xí)慣創(chuàng)造屬于自己平臺的控件庫，好處網(wǎng)上一搜一大堆，這里就不重復(fù)贅述了，控件不是僅僅搭建起來就完成了這么簡單，最重要的是熟悉每一個控件背后的含義，控件的使用要符合本身產(chǎn)品的業(yè)務(wù)邏輯，好多剛?cè)胄械男』锇闀]有方向，上來起手就做控件規(guī)范，但缺少建立控件庫的方法論做出來的很可能會很局部與片面，我簡單介紹一下我創(chuàng)建組建庫的分類方法，按照頁面內(nèi)功能模塊，進行宏觀的抽象，組成一個平臺的母模塊，大致可以分為六個大類 導(dǎo)航、反饋、數(shù)據(jù)錄入、數(shù)據(jù)展示、數(shù)據(jù)可視化，通用，同時根據(jù)業(yè)務(wù)需要，看平臺是否有深色版本的需求，然后每個母模塊下都會有許多子模塊，如下圖所示。具體每個母模塊包含哪些子模塊，建議大家去antdesign、餓了么、谷歌、蘋果等官方規(guī)范去看他們都包含哪些控件，我們根據(jù)業(yè)務(wù)需要進行取舍就可以了。

同時，在做全局性的規(guī)范時，我們也可以，針對復(fù)用性強的頁面，進行組件化處理，如下圖所示，這種方式真的極大的解放了設(shè)計生產(chǎn)力。

案例二 分析類數(shù)據(jù)圖表展示頁面

 分析類數(shù)據(jù)圖表頁面，通過時間段內(nèi)數(shù)據(jù)的趨勢變化，可按月度 、周度 、不同時段自由選擇 ，可統(tǒng)計分析最高、平均、最低空間的使用率，助力空間規(guī)劃。      

舊版本中我們發(fā)現(xiàn)：  

一：產(chǎn)品層面

（1）現(xiàn)在的頁面內(nèi)容組成是把所有關(guān)于該模塊的信息圖表都放在了一個目錄中，導(dǎo)致頁面信息過載，頁面很長，瀏覽效率大打折扣。

   圖片

（2）根據(jù)真實場景客戶使用流程，目前的業(yè)務(wù)架構(gòu)是混亂的，產(chǎn)品架構(gòu)不清晰，各個功能點相對獨立，由點連不成線。

二：交互層面

（1）模塊一之前的條件篩選是在頁面頂部單獨陳列出來的，時間篩選是在每個圖表的右上角單獨篩選，如下圖所示，這里通過調(diào)研得出結(jié)論，80%的用戶都希望有一個，統(tǒng)一的篩選入口，進行全局性的篩選，方便進行全局操作。

（2）模塊二圖表區(qū)域存在著大量雙y軸情況，在《用數(shù)據(jù)講故事》一書中強調(diào)，圖表中要盡量避免使用雙y軸，因為會造成閱讀壓力，同時書中也提到了解決雙y軸的方案，下面解決問題部分再做詳細(xì)解答。

（3）圖表的圖例是可以點擊的，現(xiàn)在看上去只是圖例，操作感不強

三：視覺層面

1.:頁面布局

（1）模塊一的排版布局有明顯的問題，因為平臺有多語版本，英文字段是比中文字段要長的一但英文字段過長，就會出現(xiàn)UI Bug，左信息右icon的形式也不利于閱讀信息。

（2）接下來說模塊二，在線上真實平臺中辦公分析模塊下是不僅僅這一個圖表的，我測量了大多數(shù)圖表的顯示范圍、元素間距、文字大小、等發(fā)現(xiàn)圖表并沒有統(tǒng)一的布局規(guī)范與圖表內(nèi)自適應(yīng)顯示規(guī)則的規(guī)范，沒有自適應(yīng)顯示的規(guī)則就會出現(xiàn)下圖問題，當(dāng)選擇較多數(shù)據(jù)時，會出現(xiàn)數(shù)據(jù)堆疊在一起的UI Bug。

（3）模塊三，排行榜的所有元素都是單獨排列算間距的，這樣就會導(dǎo)致前端開發(fā)時還原率會大打折扣。

2:圖標(biāo)

圖標(biāo)的樣式比較陳舊，沒有記憶點。

新版本我們的解決辦法：

一：產(chǎn)品層面

1:我們從新梳理了功能架構(gòu)，把原先只有一級導(dǎo)航包攬所有內(nèi)容的形式進行了按照場景的細(xì)分，細(xì)分到了三級導(dǎo)航，使用戶看數(shù)據(jù)更有邏輯性和調(diào)理，迅速定位模塊。

二：交互層面

（1）模塊一，瑣碎的功能既不利于操作，又不利于閱讀，把它們進行了整合，增加了全局篩選按鈕。

（2）模塊二解決了雙y軸問題，左圖是用數(shù)據(jù)講故事給出的解決方案，我采用的是方案一

（3）對圖例的樣式進行了改進，現(xiàn)在可點擊感很強，視覺上又不會搶圖表內(nèi)容 。

三：視覺層面

1.:頁面布局

（1）模塊一換了一種排版方式，通過顏色、間距、大小，突出了主要信息，這種排版方式，解決了英文字段顯示過長的UI Bug。

（2）模塊二數(shù)據(jù)圖標(biāo)區(qū)域，規(guī)定了統(tǒng)一的數(shù)據(jù)可視化設(shè)計規(guī)范，同時還有圖表篩選時間后柱形圖、條形圖的間距大小怎么顯示，下方橫軸時間顆粒度怎樣顯示的邏輯規(guī)范，這一塊真的鉆研了許久，市場上沒有一篇介紹該邏輯規(guī)范的文章，在這里立一個flag，下半年找一個時間把這個坑填了，規(guī)定了一套圖表顯示邏輯之后，很好的解決了統(tǒng)一性與自適應(yīng)問題，老板再也不用擔(dān)心出現(xiàn)適配bug的問題了呢

（3）模塊三，排行榜這一塊，之前的數(shù)據(jù)都是在同一視覺層級下的，新版排行榜，強調(diào)了前三名，弱化了后面的數(shù)據(jù)，增加了用戶hover時，顏色和前三保持一致這一交互效果

2:圖標(biāo)

給圖標(biāo)進行了一次升級，豐富了一些細(xì)節(jié)，把品牌基因，植入了圖標(biāo)中作為背景，同時在創(chuàng)作圖標(biāo)的過程中也要保持冷靜克制，要符合B端特性。

案例三 列表頁

列表頁是方便客戶對產(chǎn)品功能進行增刪改查的重要頁面，這里想簡單談一談工作中對列表頁的一些思考。

舊版本中我們發(fā)現(xiàn)：

一：交互層面

1：記得看IOS用戶界面指南時，有一條印象蠻深刻，進入通訊論里面點擊列表內(nèi)容，交互形式是左邊進入，點擊加號創(chuàng)建聯(lián)系人頁面從底部進入，這里其實就按照功能，區(qū)分了使用形態(tài)，創(chuàng)建是當(dāng)前頁面的一個動作，更像是網(wǎng)頁版的彈窗，所以從頁面底部彈出，而列表是進入到一個新的頁面，所以會左翻頁彈出，在瀏覽平臺時，發(fā)現(xiàn)了一些類似這樣的問題，有的模塊點擊新建是彈窗的形式，有的模塊點擊新建是彈出了新頁，這會給用戶造成困擾。

二：視覺層面

1.:頁面布局

1:如圖開發(fā)出來之后，列與列之間的間距把控的很差，沒有明顯規(guī)律，會對信息的識別造成干擾

2:控件

1：如圖彈窗的高度超過了一屏的位置，缺少對彈窗的高度限制

新版本我們的解決辦法：

一：交互層面

統(tǒng)一全平臺，基于操作-彈窗，跳頁-新頁面的這一交互邏輯

二：視覺層面

1.:頁面布局

1:這里不建議設(shè)計師去規(guī)定具體列的寬度參數(shù)，這里可以提前與研發(fā)溝通，列于列的寬度都是要基于n（整數(shù)）的倍數(shù)，根據(jù)字段長短研發(fā)可自己判斷列寬，然后開發(fā)出來后基于頁面有明顯視覺問題的地方進行調(diào)整，這樣大大節(jié)約了雙方彼此的時間、勞動成本，可以把精力放在更重要的事情上。

2:控件

1：對彈窗的高度進行了基于大、中、小屏幕的高度限制，超過高度，固定底部操作區(qū)域，增加滑動功能。

頁面展示

結(jié)束語

這次平臺的改版，自己收獲了許多，感謝優(yōu)秀的團隊我們一起成長變強，在改版的過程中也更加發(fā)現(xiàn)UI設(shè)計師，并不能只滿足視覺層面的美丑，簡單的排排版，而是要深入到業(yè)務(wù)中，了解經(jīng)銷商和客戶，了解終端產(chǎn)品的使用人群，時刻以商業(yè)的視角去思考設(shè)計，甚至要往自己的上游-“產(chǎn)品設(shè)計師”“交互設(shè)計師”去合并，才能運用嚴(yán)謹(jǐn)科學(xué)設(shè)計手段為產(chǎn)品提升附加值，同時讓用戶真正感受到“爽”。

Powered by Froala Editor