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

          首頁

          B端產品設計分析方法總結

          資深UI設計者


          做一個完整B端系統項目前,從交互設計的七大定律,B端產品業務調研,用戶訪談研究方法,精準推導B端用戶畫像,到B端產品主風格的設計定調,深度理解B端主流組件庫的視覺規范,進而為B端產品設計做充分的準備工作,以下內容較多,大家可以根據上述目錄來進行選擇性閱讀。

          1.1 B端組件庫的概念及作用


          概念:組件庫的底層邏輯就是原子理論,類似于我們在拼樂高積木的時候,根據說明書一個模塊一個模塊來拼湊,先找零件,再拼成部件,然后是成品,這個過程和UI中的組件化是一模一樣的,組件化就是原子理論集中得表現,原子(圖標、按鈕、字體樣式等)——分子(標簽欄、導航欄、搜索框等)——有機體(圖文列表、內容卡片、布局模塊、瀑布流圖等)——模板(原子、分子組合排列組成了模板,也就是原型圖)——界面(最后根據原型圖形成視覺設計稿)


          作用:一致性:比如在不同得界面中,如果用樣的按鈕,他的按鈕的展現形式,要保持一致性。

          高效性:比如所有的按鈕不用單獨去設計了,從組件庫里調用就可以,這樣對于設計師來說就是高效的。對用戶來說,也會讓用戶的使用效率提升,比如當用戶看到藍色的按鈕就是可以提交的按鈕,看到白色得按鈕就是次要得按鈕,看到不帶邊框的按鈕就是一個危險按鈕等等。

          組合性:通過調用不同的組件來進行組合可以形成不同的頁面。


          1.2 如何正確使用組件庫


          1.2.1 組件庫的使用前提

          一些主流的組件庫,比如AntDesign、Element Design、ZanDesign組件庫等,這些框架機構本質都差不太多, 但他們有自己的特點,具體用哪個組件庫,通常由公司的架構師來進行架構選型,比如VUE(Element Design)和REACT(Ant Design),這是兩種不同的技術選型,(VUE和REACT是一種前端框架的技術架構版本,可幫助前端工程師快速進行開發的前端框架)。從技術角度講,大部分公司會首選AntDesign(React),因為有很多案例提供,VUE和有贊也可以但用的少。從設計角度,Ant Design得設計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺,沒有設計層次化,Ant Design更好看一點。所以先選擇底層的前端框架,再根據這個選擇前端的機構布局。

          1.2.2 組件庫的使用過程

          設計師和前端最終目標是一樣的,都是快完成保證設計質量的,原生組件不能達到要求的時候,設計師可以根據原生組件庫修改樣式來表達到自己的想法。但對前端來說最好什么都別改,就用原生組件庫前端工程師直接復制就行,這也是因為我們設計師的要求和前端的要求是不一樣的。但修改后樣式的組件,底層邏輯還是原來的組件。從Antdesign等組件庫里復制出來,經過figma里的各種功能操作后,比如分離組件、改變組件得形狀、替換內容等,但這個組件仍然是Antdesign里的組件,組件是否改變取決于,這個圖形,這個組件是不是已經代碼化,我們設計師設計的組件,只是樣式,需要經過前端來形成代碼,只有代碼化的組件,才是組件,如果沒有代碼化,那只是一個樣式而已。所以,我們用Antdesign里是已經實現代碼化了得組件,組件庫里有的組件前端一定是可以代碼實現的。


          1.3 如何設計組件庫


          1.3.1 每個項目都會分這四個周期


          項目初期:在一個B端項目得初期,大家都會有疑問,B端組件庫應該什么時候開始建立?是不是先建組件庫再開始設計?答案是,如果不是從0開始的項目,組件庫在設計之初就應該建立起來,如果項目是從0開始,由于沒有業務的案例,組件庫組件庫也無法建立,但可以建立一些最小元素:原子。比如字體(應該用什么樣的字體,在正標題,副標題,大標題,正常情況下應該怎么樣使用字體的得明度)、色彩(色彩規范是什么,比如醫療行業,航空行業,交通行業應該用什么色彩,決定主色不是好不好看,而是由企業來決定得,首先了解企業的VI色,通過結合VI色和產品分析出的用戶畫像特征,來確定主色,輔主色,確定主色后,相應的背景色、深色背景、淺色背景、灰度背景、卡片背景等,也就都可以做出來了)、按鈕(通常狀態,點擊狀態,當前焦點狀態,不可點狀態)、基本控件、布局柵格、圖表(圖標icon、文本標簽、按鈕、圖表)、圖標;通過建立原子組件,完成一些基本典型的頁面設計。

          項目中期:繼續完善基本組件庫,應用案例的完善,迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進入基本組件庫。


          項目后期:形成最終組件庫與設計系統的規范建立,根據項目不一樣詳細程度也可以不一樣。


          延展期:為項目2.0升級準備根據使用反饋、迭代之前得組件庫與規范,預計未來版本中出現的典型案例,并針對性的設計應用組件。通常很少有公司進行到這一步。


          1.3.2 組件庫的開發流程


          1.3.3 B端組件庫存在的價值


          B端組件庫的存在是不是意味著不需要設計師了?其實并不是,組件庫可以幫助設計師增進設計效率和溝通效率,和前端溝通告知按照對應的選型組件庫規范使用就可以了,同時組件庫得一致性、準確性、協同性它的質量有保證。但設計師做完組件庫后,繼續需要關注的點是:

          01、根據業務場景來優化設計組件庫:因為組件庫是一定會去更新的,如有必要再去更新,那一定會是很復雜得業務場景下去做更新的,這個業務場景是程序員或者以前的組件不能實現的,需要很強的設計技能去做迭代,所以需要設計師繼續去做一些結合業務場景的組件來放到組件庫里。

          02、需要設計師把更多時間精力投入更多設計體驗中,而非搬磚:組件庫的建立同時解放了設計師的精力,設計師可以把時間投入到設計體驗中去,而不是做一些搬磚得工作,比如按鈕怎么畫,用圓角還是用什么顏色,這些沒有技術含量的工作,這樣一來,可以投入更多時間來賦能業務更好體驗設計工作。


          1.3.4 B端主流組件庫有哪些

          2.1 B端產品的設計過程


          2.1.1 用戶體驗五要素


          戰略層(屬于產品愿景,滿足用戶的需求,產品的愿景和目標


          由于用戶有不同的需求進而產生了不同的產品,戰略層決定了用戶用干什么樣的產品,比如,用戶需有很多銷售客戶的線索需要進行管理,用戶需要管理客戶,那就做一個CRM系統。比如,用戶想寫日報,想要一個打卡的OA系統,那么產品目標就是要做一個OA系統。比如,電商里面很多商品,牽扯到很多進銷存,那就做一個ERP系統。這部分跟設計師相關度沒有那么高。


          范圍層(指功能規劃,功能的規格、包括內容的需求)

          功能規劃:比如要做一個OA系統,其中就包含了打卡、日報、項目管理、報銷、人事流轉等等都是跟辦公相關聯的,需要把規格和功能畫出來,畫成簡單的表格并且將它們分類,這里所有的功能都不是詳細的,就是簡單的分類,將功能簡單描述一下,同時做一個簡單的用戶畫像。這部分設計師只需要閱讀產品經理給到得PRD需求文檔即可,整體看還是偏愿景,沒有形成具體的產出。比如OA系統中就總結出重點做一個審批得功能,并不知道什么樣的界面,只知道一個大概的范圍。


          結構層(指原型設計)

          這部分,設計師通常就需要參與進來,如果設計師只按產品給的設計好的原型來設計,就顯得很被動,這樣只能叫做視覺美化,被稱之為美工,設計師應該從沒有形成原型的時候,可能只是一個簡單的PRD需求文檔或者草圖,設計師就應該參與進去。


          設計師對原型進行優化設計,優化的不是業務,因為很多業務內容肯定沒有產品經理了解得深刻入,這時,設計師需要優化的其實是它的交互邏輯、交互內容,一旦原型里里產生點擊,一旦產生多種狀態,那就要去了解它,每種狀態產生不一樣的界面結果,其實對標的就是設計師設計的界面將產生什么樣的變化,換句話說,如果有界面的變化,內容得變化,設計師就需要參與到其中。目前來看,很少公司有專門的交互設計師,要么這部分工作由UI設計師來完成,要么由產品經理來完成,很多企業已經把設計進行前置化,由UI設計師來完成交互的工作。


          其中交互設計+信息架構設計是設計原型圖的關鍵,這兩個是密不可分的,如何制作原型圖,如何在原型圖里設置一些交互事件,給大家推薦《信息架構設計》這本書里有專門講到。再了解原型設計之前,不得不提到一個通用知識點,交互設計的七大定律。(后文有介紹)


          框架層(指界面設計、組件設計)

          框架層這部分有一些爭議,有的設計師認為就直接做界面設計了,其實框架層還不能把它理解成是界面設計,它僅僅是做了一些業務的模塊兒的框架而已,更多的其實是將它組件化: 將原型組件化、模塊兒化,類似我們直接從Antdesign組件庫復制來內容簡單改改之類得操作,完成的是組件和界面的設計,這些界面并不是最終完整的交付樣式。


          表現層(可視化呈現,UI視覺呈現)

          這部分和設計師關聯度最大的一部分,就是界面中的配色、配色、圖標、樣式、結構、布局、排版等設計,但是我們設計師需要從范圍層了解業務熟悉最初PRD產品需求文檔去一點點做起,其中設計師在戰略層參與度可能只有2%左右,范圍層參與度5%左右,從結構層開始逐步往上參與度越來越高,至少結構層,框架層和表現層的參與度是很深得。



          2.1.2 B端產品的設計過程是什么

          所以,通過梳理用戶體驗五要素,不難看出B端UI設計師的工作流程就是,01. 接到項目后,設計師主要閱讀產品經理給到的PRD需求文檔,同時去參與原型設計,根據最初版PRD輸出一份低保真原型圖,和其他部門進行初次評審;02. 經過初次評審討論過后,完善后的功能和頁面文案,產品經理補全和輸出完善后的產品PRD需求文檔,由設計師根據完善后得PRD需求文檔經過規范設計輸出高保真原型圖 ,與其他部門帶著初次評審討論后的問題,進行二次評審。03. 最終再由設計師經過組件化形成視覺圖。04. 同時設計師提供切圖,與前端緊密溝通,上線前制作設計走查表,進行設計走查。05、最后上線后根據數據、用戶反饋等提出交互和視覺可優化得方案建議,進行版本迭代。


          2.2 交互設計七大定律


          01. 菲茨定律:當設計師需要讓用戶重點去看到頁面中某一個突出點,點擊到一個區域時,設計師就需要做到適合的大小,適合的區域,適合的位置,適合的形狀,適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的,不想讓用戶點擊退出的,就把它設計的的足夠小。比如按鈕得退出和付款,實心付款按鈕為主要按鈕,虛線置灰退出按鈕為次要按鈕,比如常說的海報中字要大,logo要大,這些都屬于菲茨定律。


          02. 席克定律:用戶面對的刺激(或選擇)越多,他們做出決定的時間就越長,由于用戶的時間很寶貴 ,用戶沒有義務花更多留在我們的網站上,所以我們需要有選擇的地方對選擇進行分類。


          03. 7土2法則(米勒定律):比如圓周率3.1415926,一般都能記住,而如果再往后加幾個數字,大家往往很難記住,原因就是經過大量測試,人腦容易記憶7位數字前后得數字,比如設計銀行輸入密碼的時候就用到了7土2 法則,設置密碼過多人腦不易記憶。


          04. 接近法則:格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。


          05. 防錯原則:當用戶在使用產品中,預判用戶本身或產品一定會出錯時候,可以告訴用戶怎么可以不犯錯,或者將風險降低。比如電腦的關閉電源鍵,就允許電腦司機時允許系統犯錯,讓用戶使用關閉電腦電源鍵進行重啟。比如銀行取出錢后,銀行卡有忘拔現象,銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程,就可以避免忘記拔卡,但其他銀行都沒有這么改進,仍然是先出鈔后拔卡得原因是允許用戶犯錯。


          06. 奧卡姆剃刀原理:化繁為簡,如無必要,勿增實體。比如小米電視遙控器的設計,由原來傳統的很多遙控器按鍵只優化成了保留上下左右為數不多的幾個重要按鍵,原來的遙控器數字按鈕如果真正要輸入數字的時候通過功能性,調出數字來,這樣在遙控器得設計中基本只保留20%主要功能按鍵。這就是交互上的優化。比如在UI界面中,也會用到這個問題,簡化文字,把文字用圖標替換,還有各種流程得優化等等。


          07. 雅克布定律:以用戶習慣的使用模式去設計產品,降低用戶學習成本,遵從用戶使用習慣。 利用現有的思維模型,用戶習慣,我們可以創建出色的用戶體驗,使用戶可以專注于自己的任務而不是學習新的模型習慣。



          2.3 B端產品用戶畫像


          2.3.1用戶畫像概念

          用戶畫像又稱用戶角色,作為一種勾畫目標用戶、聯系用戶訴求與設計方向的有效工具,用戶畫像在各領域得到了廣泛應用。用戶畫像分為兩種,不論C端和B端都會做這樣的用戶畫像??偣部煞譃閮刹糠?,基本信息數據和行為數據。


          基本信息數據:當我們去了解用戶的基本信息的一些數據時,職業,收入,年齡等等,這些和功能有很多的關聯度,比如唯品會用戶畫像關鍵詞是:女性、折扣、白領 ,唯品會產品定位聚焦女性,這些基礎信息數據,就能給產品帶來很好的結果,當我們要做一個女性的購物平臺的時候,可以先把男性用戶拋除掉去考慮設計方向,再比如收入就知道了,大概產品面向的收入群體將是什么收入群體的人,那么我賣貨的價格區間、包括設計的風格就是一個什么樣群體的設計風格。那些賣奢侈品的不是黑色就是灰色,要不就是棕色,但未必是適合唯品會產品的風格,需要找出這些基本信息去和產品進行關聯度,把基本信息放到設計結果中去考慮。


          行為數據:指用戶的愛好,這部分群體有哪些愛好,是喜歡購物,還是喜歡運動,他/她的消費情況是什么,喜歡旅游還是美食,他/她經常用哪些APP,他常用的設備,是蘋果手機呢還是安卓,小米還是華為,等等得到這些數據,也能得到一些用戶喜歡什么樣的競品,這些數據就能側面的在我們的產品中得到反饋,得到功能和設計上的指導和其他產品的區別。這些行為數據,不管我們做C端還是B端,都要獲取到,但C端和B端獲取到這些行為數據的結論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人,給他帶來的很多屬性,這些等等都會成為他的用戶畫像。

          進而找到這個人,將他的社會屬性,從抽象的角度慢慢變得具象,C端是他/她的社會屬性,把他做成一個普通的人,這個人有他的社會屬性,有他的社會價值,有他的社會行為。比如一個女性,一定喜歡美食,一定會買化妝品。


          2.3.2 B端用戶畫像本質

          比如做一個和電影相關的管理系統,電影行業包括很多人員管理,設備管理等,這里不能把用戶畫像抽象成一個男性或者女性了,而應該把它抽象成一個職業,比如抽象成一個導演,導演需要去管理什么東西,它需要哪些資源去整合。導演就又叫做行業屬性坐標。B端不以社會屬性去做用戶畫像,一定以行業坐標去做用戶畫像,我們在整理作品集的時候需注意不要與C端畫像整理混淆。


          我們要做一個行業可以不用管他/她是誰,也可以不用管他/她有什么樣的社會屬性,比如做CRM最重要的在里面起到作用的是,客戶關系管理和銷售等; 比如做OA系統,就是一般的員工,等級,職能等等,可以看出行業屬性(職業屬性)決定了他的用戶畫像的精準度,一定把這個人拉到行業里去研究,研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區別。


          2.4 B端產品用戶調研


          2.4.1用戶調研的作用/目的/重要性


          01. 了解產品業務需求定位:可以幫助了解目標用戶的信息,從用戶的角度:未來使用你產品的用戶,他理不理解你的產品想要表達什么,你的產品講了哪些功能。因為很多好的產品我們打開它第一眼就知道要干什么,是給我們做什么的。同時站在設計者的角度:怎么可以把這個產品設計清楚,比如做一個CRM客戶關系管理系統,具體管理什么我們是不清晰的,想要清晰就需要通過用戶調研這個過程給它展開。


          02.解決功能信息架構問題:可以幫助設計師更明確需求功能得合理性和優先級,比如頁面標題的使用、標題的層級、需要在信息層級清晰得情況下體現出來,而明確信息層級同樣需要通過用戶研究體現出來。


          03.讓可用性測試更加準確:可以幫助鎖定合適的測試用戶,來測試我們的產品使用程度,使用體驗是不是好,這時需要要找目標用戶去測試,比如小米有品針對群體是米粉,唯品會針對的群體是職場女性,而不像C端找所有的人去測試。


          04.解決團隊協作溝通問題:確定用研目標可以有理有據的把設計目標和產品經理的意見達成共識,因為未來一定會多次和產品進行PK,像諸如設計師組件化沒用好這些理由也不會是pk點,確定用研護鏢可以更好的深度去理解原型圖,可以把團隊協作溝通的問題解決好。


          2.4.2 用戶調研的方法


          01. 確定研究對象:首先拿到一個產品,拿到一個需求的時候,這個需求通常很模糊,比如只告訴做一款CRM客戶關系管理系統,但汽車行業,服裝電商行業,保險行業,銀行金融等等,都有CRM客戶管理系統,不同行業的CRM肯定是不一樣的,這時候,比如要做金融的CRM,那研究方向就已經確定了,金融CRM就可以確定去研究金融行業的業務鏈,業務流程,具體找哪些用戶群體,可以根據以往的驚經驗和產品的目標去確認。


          02. 找研究方法 : 研究方法分主動和被動,我們通常用的方法是被動方法,比如自我報告法:當這個產品產生了一些數據,我們從后臺可以拉取這些數據的時候,通過這些數據去分析,這是被動的方法,這個被動的方法所有項目都可以用。而主動的方法,就是觀察和采訪,主動去找用戶去找關聯度。


          03. 獲取到數據 : B端和C端區別之一是提高效率,它要產生的結果只有一個結果,就是減少成本,任何B端的系統都是為了實現這個目標,提高效率和減少成本。所以獲取數據,研究數據的方向不能偏離搞錯,用戶研究的方向不要搞錯。比如我們以用戶為中心來設計,就會認為用戶的操作體驗感是第一位的,其實不對,放在第一位去考慮的應該是以系統的最優化,提升效率為第一位,而用戶也可以為這件事情做一些改變而找到平衡點,數據導向得提高效率,減少成本有時會大于用戶的操作體驗。


          04. 用研行為: 剛才前面提到的這些注意事項,到底應該找什么方法去得到這些數據呢?第一我們可以通過后臺數據比如通過百度統計等系統來獲得;第二通過問卷法發出一些問卷,用戶可能散落在全國不同位置;第三可以通過用戶定性訪談來獲得;第四可以通過用戶旅程圖來決定用研行為。


          05. 分析調研結果: 研究結果不是為了放到我們的B端作品集里的,而研究結果一定是為了去定性、定量、讓數據回歸到產品功能本身。同時經常問自己這些問題,去根據研究結果和問題進行匹配思考,比如研究了那么多,用到了用戶畫像得出的結論了么,用到了哪里?在項目中能舉個例子嗎?采用什么樣的視覺去實現了用戶體驗要素?


          2.4.3 B端用戶訪談模板


          2.4.3.1 用戶訪談概念:


          01.確定訪談目標:了解目標用戶群體,通過訪談信息來進一步構建所需要的用戶畫像,從而確定設計方案與功能優先級。02. 定性/定量訪談目標:將這些目標定量、定性,選擇不同的訪問對象,構建不同的角色畫像。比如問銷售的用戶畫像,要找不同的訪問對象,銷售總監,普通實習生等等,三到四個角色,樣本越多,用戶畫像越準確。03. 訪談過程:提前把問題寫出來,拿著問題去聊,用錄音設備,記錄表格,一個提問,一個記錄,分開后記錄比較準確。04.訪談結束:要做信息匯總,要做分析建模。分析建模就是將信息最終變得有意義。


          B端用戶訪談模板有30個問題,這30個問題決定了我們的用戶畫像的精準度和產品的用戶畫像的價值。用戶訪談會問些什么問題呢?當我們調研的時候把問題寫出來的時候,就已經解決了一半的問題了。


          2.4.3.2 B端用戶訪談30問


          01、基礎特征


          崗位:你是從事什么崗位的?是總監還是普通職員?目的是為了知道不同的權限的使用者,進而就可以在系統中設置這些權限。

          職責:需要獲取到用戶不同的需求,因為每一個崗位有不同的職責,他們的需求點也是不一樣的。根據這些不同的需求,我們在界面中得動態儀表盤部分,就可以根據不同職責來顯示不同的內容。

          姓名:可以讓訪談記錄得到更加真實的體現,目的是可以獲得產品的一些真實的基礎字段。

          年齡:是用戶認知和經驗度的體現,用戶的年齡可以代表他們對行業的認知,和整個企業流程的認知程度,一般性理解,用戶的年齡越大,那么他的經驗越豐富。

          教育:指用戶是什么學歷,目的是為了了解用戶的經歷與熟練程度,通常認為,用戶的教育越高的人,他們往往使用軟件操作的熟練度會越好。

          位置:指用戶在什么地方來使用,目的是知道了場景與優先級,用戶是在寫字樓里還是精英場所來使用我們的產品。因此得出基礎特征是要得出這些結論,得出這些結論進而反饋到產品中去。


          02、行為接觸點


          使用頻次:不同的崗位用戶使用功能的優先級是不一樣的,用戶使用頻次越高的功能,這個功能的優先級就越高。了解之后,那在下次迭代的時候就需要把重要級別的功能放在易操作的區域去體現。比如這個重要功能就是一個icon,那么把它放一個快捷入口。

          使用時長:也能代表功能的優先級,用戶使用時間最長的功能,代表可這個功能優先級很高。

          時間段:用戶在什么時間段使用的是最多的,我們就知道了這個功能的活躍度,這個數據指標,主要和技術有關,我們可以從后臺數據去獲得。

          使用設備:用戶使用設備兼容的優先級,平時用戶用什么設備,再訪談過程中,需要問具體使用電腦的分辨率,屏幕的尺寸,屏幕的比例,都可以去實際的調研一下。在我們做B端界面選擇屏幕尺寸的時候,可以采用結合實際情況用戶使用的屏幕分辨率尺寸來設計界面。

          相關軟件:用戶平時的操作習慣和流程是什么,還會使用其他軟件嗎?比如他們還用什么其他的競品,可以繼續問用戶其他的競品哪里比較好,哪里是亮點,那最終得到的目標就是用戶的操作習慣和流程,這些也可都可以反饋在我們產品中。


          03. 使用環境


          碎片化時間:主要解決用戶場景的問題,比如汽車4S店銷售,當你去買車時,銷售人員會問,你會買什么樣的車,會記錄你的年齡,用車習慣,用車時間,姓名,預算,都會記錄,銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結論:1.我們在設計的時候是否可以考慮讓銷售充分利用碎片化來進行這些信息的錄入,而且方便他的錄入,比如他本來只有電腦端,電腦端是一個完整版的功能,我們能不能給他設計出一個移動端來,讓銷售不用回到電腦屏幕中就可以去記錄這些內容。2. 記錄時也有兩種記錄方式,是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設計結果,比如有人問你們公司為什么要做B端的移動端設計?以上就可以有理有據去解決銷售的場景問題。


          用戶的操作環境是什么:主要解決視覺體驗問題,用戶是白天操作還是晚上操作,是在強光環境操作還是弱光環境操作。這些都應該是考的點。比如B端使用的ATM機,應該設計成白色還是深色模式,我們知道一般都是深色模式,是因為通常是室內,它和光線有關系,如果是室外的取款機,四周又沒有遮擋,如果還設計成深色,肯定是看不清楚的。比如HMI車載系統,白天模式開了深色,一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式,也需要考慮在設計的時候使用什么樣的色彩和色調,在室外使用還是室內使用,如果對色彩不怎么挑,那也可以使用VI色,這樣一來視覺的保障色就確定了。還可以確定在使用周期時間,要多長時間完成一個操作,應該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環境可以得到以上信息。


          是否有平行事件:用戶在做這件事情的同時,他是不是需要做其他的事情,要得出至少兩種平行事件,得到的結論是,我們的界面是不是需要把某些功能整合在一起,因為用戶經常是需要同時做這兩種事情,同時去打開這兩個功能,通過這樣的反饋可以把同時使用的這兩個功能結合到一起,通過訪談可以得到這樣的依據,來進行功能的整合。


          04. 主動詢問用戶觀點


          用戶的驅動力: 去了解激勵因素,就知道了什么功能應該做完善,什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息,因為可以增加汽車的銷量,錄入越準確的用戶信息,他的銷售量越高。也就是用戶做這件事情,他的原因是什么。


          用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情,這件難的事情,就是產品的痛點,就明白了當前產品迫切需要什么樣的功能去幫我們設計師來解決當前產品痛點的問題。


          用戶遇到最颯事件:他在使用過程中最滿意的是什么事情,就是爽點是什么事情,那些產品中解決了用戶很好的問題的部分,去把產品更好的放大,讓用戶繼續使用。也就是通過訪談我們知道了產品的爽點是什么。


          用戶擔心事件:在他們使用過程中擔心的是什么,我們也要要了解這些隱藏的問題.


          用戶期望事件: 用戶希望得到什么樣的改善,最終的目標是想解決什么樣的問題,到這一步其實所有問題目前都沒有答案,我們可以繼續訪問,先做記錄,不做最終的答案.


          問用戶目前狀態: 我們可以了解待解決的問題,通過產品想解決什么問題,進行收集需求;用戶對于產品升級有什么小期待,進行收集需求;通過用戶的反饋目前產品的哪些問題,收集到目前反饋的問題;以往問題是否有效解決;進行收集反饋。覺得不錯的同類型產品有哪些,通過了解競品情報,我們可以競量多問一些 覺得不錯的競品有哪些;目前產品有哪些地方很好,很好的地方要保持,有的產品升級后,以前特別好的功能突然消失了,改了沒必要,好的功能保持就可以;前產品有哪些地方不好,我們去優化不好的地方;以往問題是否有效解決,當有問題需要解決的時候,用戶的問題是否是通暢的。通過看用戶如何反饋,我們可以了解功能傾向,了解整個流程是否通暢


          05. 聊生活

          發覺人性閃光點,提升產品差異競爭力,1、問目前的生活狀態,婚姻狀態,有沒有孩子,接送孩子的時間,平時有什么愛好?什么愛好不錯?發覺人人性的閃光點,好的不好的產品都有共性,B端產品中視覺的傾向是什么?比如有插畫,溫馨的語言提示,通過什么樣的情感設計可以照顧到每個人的生活。


          2.4.4 B端用戶訪談得出結論


          如何判斷功能在用戶那里好還是不好?前面所有的都只是在記錄,現在才是在做判斷,判斷的第一件事,是做定量的整理,所有的問題都收集到了,也記錄到了,至少需要有兩個樣本,去做定量整理。

          2.4.4.1定量整理:行為


          第一步是行為的總結,量級的總結,把記錄的問題點、功能點和關鍵詞放到表格里面,經常出現,迫切需要解決的是什么問題,較少的問題是什么,偶爾的行為問題是什么,因此偶爾的優先級就不高了,主要關注經常遇到的問題點、功能點和關鍵詞。


          2.4.4.2 定量整理:特征


          把每個角色按照以下表格里的的特征進行定量的描述,這時候仍然不能找出它的共性點,但已經把用戶的特征進行分類整理了,定量之后再去定性。


          2.4.4.3 定量整理:特征/角色/流程


          這個角色名稱是一個具體的名字,比如王某某。以下這張表:可以看到在我們的系統中有哪些的權限,有哪些的角色,他們的需求是怎么樣的,這是一個完整的用戶畫像。用戶畫像是一個結果,是通過用戶訪談的形式完成了用戶畫像,并不是被動的接受數據信息得出的,所以通過用戶訪談的形式進行定量定性分析得到的結果是最準確的。


          3.1 建立情緒版


          3.1.1 情緒版的概念及作用

          本質是將情緒視覺化,情緒版并不是玄學的東西,它確實可以通過圖片找到對應的圖形元素,因為圖形(照片)是可以表達情緒的,比如看到一張照片會感受什么什么情緒:熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關的關鍵詞。


          情緒版是一個特別快速能和產品,我們的團隊包括設計團隊進行溝通的一種方式,比如要設計一個界面,需要幾天才能設計出來,但我想提前知道一下未來界面設計成什么樣子,那就先做一個情緒版,讓大家知道,找的方向是什么,這樣適合與大家及時的溝通,大家也會明白產品將會做成什么樣子,達成產品的最終設計定調。


          3.1.2 怎么建立情緒版


          01. 提煉關鍵詞:獲取本次產品設計中所要實現的產品3-5個必要的關鍵字詞組,其中包括交互或視覺目標,通常由一些比較抽象的形容詞組成。比如:在做的產品是醫療行業,那么醫療相關關鍵字詞組是:生命/健康/安全等。


          02.關鍵詞發散:通過獲取到的關鍵詞的基礎上,發散出來一些新的詞語,這種發散詞匯,不是簡單頭腦風暴產生的,而是要有目的性的進行提取,要更加的具體。比如剛才舉例醫療行業,生命可以繼續發散出血液、器官等衍生關鍵詞。


          03. 搜索圖形: 對之前總結出的幾個關鍵詞在圖庫中進行查找,也可以在直接在behance里找別人收藏好的情緒版圖片直接用,效率可能更高一點。


          04. 制作情緒版: 搜索大量圖片后,挑出我們需要的進行整理,采用一種拼貼方式進行設計排版,拼貼出來需要得到需要得到的色彩,構圖,質感和字體。


          05. 得出結論: 在圖形、色彩、字體、質感、構圖,以上五點,得到合適的設計方案,快速與團隊進行溝通,直觀表達產品清徐,達成產品的設計定調。產品調性(企業調性)其實就是用企業的方式把故事講述出來,是一種通過情緒版方法來講故事的方式。


          3.2 品牌三元法


          3.2.1 品牌三元法為什么逐漸替代情緒版


          品牌三元法是通過品牌三板斧模型得出的一個確定設計主風格的一種新得方法,品牌三板斧模型可以總概為用戶調研關鍵的三個維度,一目標用戶是誰?二產品服務是什么?三對于目標用戶來說,你的產品服務有什么核心價值。當在回答完這三個問題以后,我們其實就已經清楚我們的品牌定位是什么了,因為它的核心優勢是比較明顯的,這樣我們就知道我們將來會面對什么樣的人群,去怎樣去宣傳它的賣點,同時做出產品的差異化。


          通過這幾年得工作案例設計實踐,在確定設計主風格時,情緒版方法逐漸有被品牌三元法替代得趨勢,因為情緒版這種把抽象的詞不太好表現的詞,翻譯成圖片的方式,比如剛才提到醫療行業的關鍵詞是生命,健康,安全的,設計師找到很多這種相關的圖片,挑出來后從這些圖片里面找到一個共同的規律,最后去設計。這里面就有兩個問題,一個原因是關鍵詞非常的平,生面,安全,健康,很難更準確的表達衍生關鍵詞。另外一個問題是它非常局限設計師的創意,因為它是從一些現有的圖片里面然后去挑,所以很多設計師就反饋現有的方法不是很好用,比如當我們想到安全這個詞,可能所有人想到都是特別綠的感覺,或者干凈這個詞,就會統一聯想到白色這個畫面,大家從一開始想法就差不多,所以它很難體現出創意。所以由于情緒版嚴重限制了自己的想象力,沒辦法把產品核心的氣質表現出來,雖然情緒版正確但是是一個平庸的結果,大家沒辦法記住的結果。


          3.2.2 如何應用品牌三元法


          01. 理性層面(業務層面),傳遞產品理念:獲取本次產品設計中體現業務層面,可以傳達產品理念得5-10個關鍵詞,對應的放在左邊。


          02. 感性層面(人文層面),營造產品氛圍:主要體現這個產品給用戶帶來什么好處,宣傳的角度是什么。獲取本次產品設計中體現人文層面,可以傳達產品氛圍的5-10個關鍵詞,對應的放在右邊。


          03. 個性層面(氣質靈魂),創造獨特風格:結合理性的業務層面和感性的人文層面,來創作出什么樣的畫面,和獨特風格的感覺。同樣總結出5個左右的關鍵詞,放在下邊。


          04. 結合以上三個維度,提煉主視覺畫面:當出現這三部分詞的時候,經過思考或者大家一起頭腦風暴,可能一開始想到的比較淺,但最終一定能想到一個最終關鍵詞或者特別符合我們這個產品氣質的畫面,因為以上三部分得出關鍵詞也都是經過品牌三板斧模型推演出有關聯的關鍵詞,想到一個符合產品氣質的畫面并不難,再得出這個主視覺畫面后,這就是最終產品調性的主視覺,既符合產品定位,又具有獨特的差異性。


          05. 傳達產品,用視覺語言講故事:接下來,當這個主題、主視覺確定了以后,在看怎么樣用具體的視覺設計技能,去傳達我們的產品,也就是用視覺語言來講故事,具體注意三個方面,一是表像,元素要符合這個視覺主題,二是關聯,元素之間要具有關聯。三是隱喻,用視覺的手段含蓄的表達產品的一些特性。比如云計算的一些產品,做得比較復雜每一個圖標上都有一些曲線切割的畫面,這樣做的原因其實不是為了炫技,它是為了表達云計算彈性可擴展的特性,好比拍電影,中國人講究隱晦。


          4.1 色彩規范


          4.1.1 選色

          在系統色彩中,以Antdedign為例,系統色彩里包含了很多不同的色調,但不可能用到這么多顏色,這時要應用選擇幾個顏色,選幾個我們應用的顏色。第一步要做的就是選色,選出應用色彩,這個應用色彩也就是我們建立得視覺規范中的基礎色板,在選色時候需注意,要有有明確的心理預期,比如醫療行業中常用藍色和綠色,就是符合預期的顏色。在基礎色板里選擇調色,應選擇兩個相同級別的藍色和綠色;基礎色板里選不同顏色時不要超過三個級別的跳躍;當選擇一個確定的顏色時,可以選擇草綠或者青綠色來作為輔助色;在基礎色板里,最頂部的顏色最適合做背景色,中間的顏色適合做按鈕色,底部的顏色適合做狀態色,或者小面積文字的填充色,其余就是搭配過度的作用。再比如零售、比如金融行業的產品,會選擇不同的顏色,那這些顏色代表了什么,是不是會和企業的VI色是有相符之處,這些都是我們去要考慮的。


          4.1.2 注意色彩的兩個特性


          01. 注意品牌性:體現特性和傳播理念、價值觀:比如宜家,我們立刻會想到的是黃色和藍色。比如京東,我們會想到紅色。如果是餓了么,我們會想到藍色。這些都是標識性的色彩,體現和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的,比如,宜家的黃色和藍色,其實是瑞典的國旗的顏色,代表著宜家的來源地來源于瑞典,因為瑞典是一個很強調簡約設計的國家,貫穿始終是在強調它的的價值觀。一些關鍵行動點:比如選中的狀態,按鈕的顏色,在很重要的地方用主色表達,這就是在體現B端的產品的色彩價值觀和企業價值觀的地方


          02. 注意色彩的功能性:色彩需要體現功能有明確的信息以及狀態含義,色彩代表它獨特的含義,比如成功色,通常會選擇綠色,再系統色板里,青綠草綠都可以選。比如出錯/刪除/失敗用紅色,表示警告警示。比如鏈接要用藍色。


          4.2 圖標規范

          畫圖標要注意圖標的識別性、統一性和獨特性。圖標首先要一眼看出來表達的含義,其次是圖標設計圖標的大小,線寬粗細,圓角大小,圖標風格等這些都需要統一,最后最好可以體現出圖標的獨特性,獨特性就是差異化,這也是品牌三遠法得核心,塑造產品的差異化,具體分析方法也可應用在圖表設計當中,比如根據品牌基因進行延展,也可根據主風格主視覺設計定調,設計出獨特風格且符合產品定位得圖標應用在產品當中。


          4.3 文字規范


          4.3.1 字體家族

          在B端頁面中字體的顯示順序,有固定的一套代碼模式,可以理解為,比如有的用戶電腦沒有平方字體,所以會顯示出冬青黑體,來替代平方字體的設計稿,如果沒有冬青黑體,就用微軟雅黑替代顯示,字體家族中,從左到右代表了字體顯示的有限順序,平方、冬青黑體、微軟雅黑、黑體、宋體,中英文都是。


          4.3.2 主字體

          在系統中有中文常用PingFangSC、微軟雅黑、思源黑體;英文常用San FranciscoUI(SF字體)、Helvetica Neue、Arial


          4.3.3 大小與行高


          方法一:在Antdesign中規定的,比如字體大小是14px,行高就是22px。規范里最小字體是14px,但可能有注釋字體,字號最小是12px。表格里的內容是按照表格里的行高來約定的,與字體行高無關,這個前提是,不在表格里內。當沒有出現文本字體,表格里的字體的時候就需要去設置字體的行高,Figma里默認行高是140%,比如14px字體,行高就設置成22。這是Antdesign里的規范,但不是唯一的規范。需要注意的是,如果使用一個標準就全部使用一個標準,這個需要把選中文字段落進行調整行高。


          方法二:是當按倍率去算的行高規范,方法步驟是先調整好行高,去改變字體大小,比如無行高時,1/100%/1倍行高,注意加上%號;緊湊行高,1.3行高/130%;常規行高1.5行高/150%;寬松行高,1.7行高/170%。


          4.3.4 文字的層級關系

          輔助文字12px、正文(小)13px、正文(常規)14px、小標題(16px,小標題是相對于14號字出現的)、標題18px、主標題20px


          4.3.5 字重

          比如常用的蘋方有6個字重,但在平時的設計中根本用不上。中文環境6個字重在實際顯示并沒那么好,常用兩個字體,萍方常規體400(常規),蘋方中黑體500(粗體)。而英文可以用粗體600。


          4.3.6 字體顏色

          在深色背景下、和淺色背景下不同內容的色彩透明度不同,具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下,字體應該使用白色還是黑色,應該按著規范嚴格使用,難點在顏色相近的時候選擇白色還是黑色,也需按照規范執行。


          4.3.7 文字對齊關系


          文案類對齊:頁面的字段、段落較短標題、需正文左對齊


          表單類對齊:保證整齊適合閱讀,冒號對齊法找到中間的冒號,(左右對齊),如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環境,不是國際化。冒號左右要留多少像素:8px的倍數相關值,4(窄點)、8(正常)、12、16(寬一點)都可以。


          數字類對齊:日期,居中對齊;年齡,居中對齊/左對齊;非固定的數字:價格,采用右對齊,因為右對齊很容易看到價格的多少,哪個超出的更多,就越貴的,更容易區分數字的多少。


          4.4 層級規范


          層級規范得核心是對信息的間隔和區分,信息的區分間隔要用偶數8的倍數。具體可分為同層級的區分,用色塊(比如氣泡)、邊框(欄目之間抖索狂等)、線段來進行區分。錯層區分,用彈窗(背景變暗)、邊框陰影(陰影的出現是擬物化的出現,當物體離它的光源越近,比如高度越高,它的陰影就越大越寬。離它的底部越近,陰影就越小,比如下拉框、搜索框、日歷控件、彈出窗口來區分)。


          這里需注意,關于投影,再前端角度考慮盡量不要用太多的特效濾鏡來設計,因為在B端網頁中,瀏覽器的兼容性不好,比如用ie瀏覽器就根本看不到這樣的效果,如果用谷歌瀏覽器能看到,用safri瀏覽器能看到,但在火狐下等又會看不到,想要都看到就需要兼容很多代碼,需要前端加很多代碼實現兼容性的效果,很增加前端的工作量,所以在B端很少用非標準型的濾鏡代碼使用,雖然可以實現,但一般不太用,一般就是變灰、變深、變透明度最簡單的方法實現。不同于移動端,因為IOS用的是原生的開發,所以不存在這個問題。


          文章來源:站酷   作者:morning_c

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

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

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




          設計師搞定B端用戶指南

          資深UI設計者

          相較于C端產品,B端產品的系統更復雜,用戶角色也更多樣,故而更強調針對角色的個性化服務。這篇文章分析了B端產品的用戶構成,提出通過他們關心的內容來對癥下藥的方法,詳述了接觸用戶合適的時機、渠道以及跟進和維護用戶的方法。一起來看看吧!

          一、背景

          面對B端產品,設計師該如何認知用戶以及做出相應策略?作者通過對自身一些做B端產品設計經驗、踩過的坑進行總結,期望能夠給感興趣的讀者帶來一些啟發。

          二、B端用戶有哪些

          不同于C端消費產品的用戶比較唯一,B端產品系統更為復雜所以用戶角色也更多。本篇將從商業銷售的角度來研究B端用戶。

          1. 用戶構成

          B端產品的售賣大多針對一個組織/一家企業,往往存在著產品價格高、產品體量大、適用范圍廣的情況,所以商家決定購買的決策成本更高,按照組織層級從上向下、可以歸納出「決策者」、「運維者」、「使用者」三個層級的角色。

          設計師搞定B端用戶初級指南

          1)使用者

          一般是企業內的內部員工,在日常工作時需要一些支持性軟件來更好地辦公。比如公司內的員工進行上下班打卡,這時他們對于考勤系統就是使用者。

          2)運維者

          一般是企業管理內部的部門負責人或管理員,他們為企業提供支持性的服務,也是產品工具輔助完成工作的管理者。

          3)決策者

          一般是一個企業的CEO/負責人,他們來決定是否需要支付一筆不小的費用購入一款軟件,來更好地管理企業。比如某公司的CEO最終決定買企業微信還是釘釘,讓員工進行內部溝通。

          2. 關于決策鏈

          B端用戶的三個角色,通過相互影響形成了產品購買的「決策鏈」。

          這個“決策鏈”的作用產生在「是否購買」、以及「是否續費」兩個核心問題上,通常我們簡稱為「新購」與「續購」。

          在這里我還是重審下背景:出現的新購與續購概念,好像看起來已經脫離了本篇文章的主題,但這確實非常重要。對于B端產品,產研開發的核心目的還是將產品賣出,設計師作為產研的一員也需要背負這樣的任務。所以我們需要研究用戶,并且從商業的角度出發給出建議。

          基于此,新購與續購的商業概念可以幫助大家更好地聚焦用戶場景與設計策略。

          設計師搞定B端用戶初級指南

          3. 關于新購

          新購即指從未買過產品的商家、初次購買的過程。

          1)對于新購,有的商家是自上而下決策

          決策者主動有意愿有想法,從而購買產品。

          這樣的方式在購買后對產品的推廣和使用更為容易,下面人員的配合度更高,產品取得的效果也就更好,更容易成為優秀的標桿案例。

          設計師搞定B端用戶初級指南

          2)有的商家是自下而上決策

          從運維者主動有意愿有想法,并通過游說決策者、讓其理解當前企業存在的問題、通過什么樣的產品去解決,從而購買產品。

          這樣的方式取決于決策者獲取到產品價值從而支持購入,如果沒獲取或不認同,則會導致產品售賣失敗。

          沒獲取,卻因為其它因素(比如競品企業都在用了),也可能會進行購買。但這樣的方式因為不能獲得決策者最大限度的支持,在推行起來會存在一些障礙和困難,因為B端產品往往牽扯組織內多個部門或人員,所以往往啟動較慢,產品效果也不能保證。

          所以在這個階段決策者的態度與意見是非常重要的,運維者提供一定的建議,使用者通常沒有話語權。

          設計師搞定B端用戶初級指南

          4. 關于續購

          續購即指已經購買過的商家,續約產品的過程。

          決定續購的核心標準:產品是否有效果,翻譯到產研側就是產品是否被用起來了。

          在這個問題上,因為決策者幾乎不會參與過程,所以更考驗運維者本身的使用策略,同時也非常看重使用者的實際使用體驗。

          在決策鏈上,核心角色的建議權,往往比決策權還重,是否被用起來以及用起來的效果是一個從下向上檢驗的結果。所以在這個階段,運維者和使用者的體驗非常重要。

          設計師搞定B端用戶初級指南

          5. 對癥下藥

          在了解基礎的概念后,還要知道他們關心什么才能將設計對癥下藥。

          對于決策者來說,擁有最終購買決定權,但因其并不是實際業務執行人,所以會考慮其他角色的建議與意見。他們關注營收增長、效率提高、減少成本等方面的問題。一般都是階段性的查看成果,權衡產品價值。

          對于運維者來說,是提供重要意見的核心建議者,也是實際業務的執行人,會對產品有更多的要求和考慮。他們同樣關注營收增長、效率提高、減少成本等方面的問題,但更多地是實際執行時的種種細節問題,具體些就是管理方面的功能完不完備(比如社區中是否能精選評論、是否能自定給精選評論發獎勵)、數據能力完不完善等等。

          對于使用者來說,前期幾乎只能被動接受,但承載著后期衡量產品實際使用效果的作用。他們關注產品便捷性、是否為自己解決問題。幫他們解決問題,他們才愿意用,產品才能用的起來、用的好。

          三、如何尋找用戶

          對B端用戶有一個大概了解后,我們再來了解下設計師如何介入用戶,了解用戶與用戶相處,讓我們的設計更打動人心。

          不同于C端可以較為自由的選取用戶,B端產品對于用戶的選取與接觸較為受限。

          產品供應企業針對所服務的商家會提供一套售前+售后的服務體系,并配備了不同的人員分管各個階段,例如有客戶銷售、客戶成功、專屬運營等。設立的目的是針對性的個性化服務,面對不同商家情況,所轉述的產品價值甚至價格都會有所區別,當然這些信息也都非常敏感和隱私。

          所以當你想尋找用戶做調研時,一般要找到對應的商家運營,告知目的后幫你推薦合適的用戶與聯系方式。除此之外,在話術方面例如什么可以溝通、什么不可以溝通,如何回答敏感問題等更為嚴格(這個我們后文會再詳細描述)。

          設計師搞定B端用戶初級指南

          四、如何接觸用戶

          在認知用戶基礎信息所處身份后,還需了解如何與用戶接觸,本文將從接觸時機與接觸渠道兩個方面闡述,內容來自實際經驗總結以供參考。

          1. 接觸時機

          1)功能類變動

          • 在涉及操作的流程設計前后,需要跟進商家意見,看是否真正解決商家問題、減少成本或符合習慣。
          • 在大模塊頁面優化前后,需要調研是否符合使用習慣或預期。

          2)視覺類變動

          在重要的視覺表現設計上(比如證書樣式、皮膚設置等),需要調研是否符合其審美。

          2. 接觸渠道

          除了尋求運營幫助推薦單個用戶,還有一些渠道方式可以幫助你接觸用戶。

          1)日常溝通商家群

          一般一個商家會建立一個包含該商家的運維者、B端的產品經理以及運營的群,用來解決對接問題以及日常咨詢,所以設計師可以通過加入這個群,了解商家如何使用產品,都在反饋些什么問題。一般商家反饋的最多的,是某某功能如何使用和bug類。

          2)產研反饋優化群

          不同于商家群的人少而精的特點,問題反饋群更多匯集了各類技術與全部運營銷售人員,用以處理運營在平時遇到的商家的各種問題,還有商家從故障平臺等多個方面回收的使用反饋。

          這個群不僅可以幫你了解商家更關注哪些功能、還能通過技術對于問題的解答更加了解產品邏輯。

          設計師搞定B端用戶初級指南

          五、如何跟進用戶

          一般B端產品的用戶數量有限,使用深度也更高,除了非常少頻的調研問卷,更多采用訪談的形式來進行問題的挖掘與調研。這些跟進方式其實在各個領域已經非常成熟,作者通過自己的實際經驗羅列了一些方法和區別以供參考。

          1. 實地拜訪

          通過實地走訪,真實地走入用戶的實際使用場地,近距離、近環境的接觸用戶。

          操作指南:

          1)一般運營通過聯系商家用戶確定上門的時間以及目的,來發起一次拜訪。

          2)拜訪是在設計師提前準備好問題的情況下,過程中因為B端商家的使用場景往往不能預想,且面對面聊天會更加激發用戶的表達欲。所以在深度追問的過程中,用戶的回答可能不會按照預想的方向進行,會經常跑偏,此時需要根據你的目的,視情況引導談話方向。

          3)溝通時,用戶除了回答產研預設的問題、還會提一堆優化需求或是功能需求,此時要注意避坑,除了自己能力范圍外的,不能擅自答應,但同時也需要給出比較委婉的解決方案安撫用戶。

          4)對用戶所有提出的問題給出明確的后續反饋時間,并同步組內其它產研同學,及時跟進和反饋結果。不然商家會覺得一直在提重復的問題給不同的人,但沒什么反饋,造成不良印象。

          實地拜訪好處是面對面增強真實感,更準確地解讀用戶需求,也能一次性了解商家幾乎全部的用戶類型,有更為全面的用戶源可了解,同時更容易跟用戶熟悉起來,建立長期的關系。壞處是成本高、費時間。

          2. 線上訪談

          一般遇到沒辦法花時間實地拜訪的情況,線上聯系也是一種好方法。此時需要聯系好運營確認好溝通訴求后,自行線上聯系用戶進行調研。

          操作指南:

          1)聯系前要說明來意、并預約時間(區別于C端直接打電話開始訪問),一般商家都會很高興(可能因為畢竟花了錢)。

          2)需要提前準備好問題,一般會按照問題逐個回答,很少跑偏。

          線上調研的好處是便捷快速地聚焦問題,壞處是對問題的理解還有回答的準確度判斷可能沒那么高。

          3. 調研問卷:

          不同于C端場景,B端產品因為用戶體量上的原因,較少用到問卷。但依然有一些必要場景會用到,比如針對某一功能的認知、產品的滿意度等。

          操作指南:

          1)B端問卷的一個難點在于“如何發放”。C端一般在產品內留有問卷入口,因為用戶量大、總會收集部分反饋.但B端用戶較少,若要確保收集到一定量的問卷,就得主動出擊提高觸達率。

          目前作者所在團隊每周會針對運維者進行答疑直播活動,相當于每次直播都自動匯集一群目標用戶,在直播過程中可以穿插問卷及入口,能夠極大概率地收到反饋(當然填寫獎勵必不可少,可以準備一些公司周邊小禮品抽獎)。

          2)問卷如何設計按照普遍方式進行即可,在此不詳述。

          設計師搞定B端用戶初級指南

          六、如何維護用戶

          建立個人用戶庫

          通過以上方法我們已經開始并可以與各類用戶認識、并進行調研了。

          做完調研后,我建議可以針對一些愿意發聲的用戶建立更深一層的關系,比如直接幫助他們解決設計問題、解答功能疑惑等。用戶其實是樂于接受更多交流的,這樣可以構建個人用戶庫,它可以幫助你避免重復地走預約流程,更加便捷地獲取用戶信息,讓你對用戶也能夠更加了解。

          七、關于B端的標桿客戶

          在B端產品迭代中,我們經常聽到這樣的話“我們要打造一個標桿”,“目前這個功能還沒形成標桿”等。這里涉及到一個詞“標桿客戶”。其實除了企業內部角色的劃分,針對企業本身,也有不同維度的劃分,「標桿」相當于企業的一種分層維度。

          1. 什么是標桿

          標桿客戶指該B端產品在商家內部推行后、使用的效果超過預期,對商家某問題起到了極大的正面作用。

          2. 標桿的作用

          1)驗證產品可行性

          只有通過標桿的建立,才可以一定程度證明產品能力是符合市場需求的。如果遲遲沒有標桿產生、可能產品本身就得重新考慮定位與方向了。

          2)為產品站臺增強說服力

          在很多銷售售賣產品時,如果只是單薄的產品邏輯講解,往往商家沒那么容易理解獲取產品價值,但如果有標桿案例,銷售將標桿商家是如何運營、如何取得成果的流程闡述出來,基本上同行商家能夠立馬理解產品價值。

          所以商家對標桿是很看重的,且要求會越來越高,不僅是同行標桿、有的還會要求有細分行業的案例給到(比如除了同樣是家居行業、更希望有硬裝行業、甚至家居-硬裝-瓷磚行業的案例)

          設計師搞定B端用戶初級指南

          八、為B端用戶做設計的避坑指南

          關于「如何為B端用戶做設計」又是一個宏大的主題,在此先不做系統性的分析和展開,僅提供一些經歷實戰后的小技巧以供讀者參考。

          1)產品模塊對B端商家的作用不同、需求不同、要保證適配各類商家的靈活性

          2)B端產品往往復雜,更注重頁面引導、新功能的解釋,所以每做一個新功能對于“能不能理解”的新人引導設計非常必要(且是人性化的)

          3)避免個人經驗主義,B端場景往往不能共情,不能依靠個人生活經驗去做設計判斷

          4)決策者和使用者有時會在功能模塊上有利益沖突,需要根據該功能對產品購買的影響程度,來權衡利弊(參考決策鏈)

          5)B端產品是用戶花錢買的,與C端的免費使用是一個本質區別,“買的東西去享受”和“免費的東西去享受”,感受與包容度完全不一樣。

          買,代表有所需,使用時,會有準確的預期,在產品設計時需要考慮該功能商家是否買單,是不是當初買這份產品所預期的,如果不是,謹慎添加,且要保證不增加任何認知/操作成本。

          6)商家更注重儀式感,對于某些一次性場景不可因頻率不高而忽視視覺表現,比如產品初始化設置。

          九、最后

          B端用戶既是普通消費者也是企業打工人,在使用B端產品時天然擁有兩重身份,會有職業屬性的因素存在,所以拆解好這兩種角色并對癥下藥,就可以了解他們,深入他們設計出極致的產品。

          文章來源:人人都是產品經理   作者:酷家樂用戶體驗設計

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

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

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



          B端表格頁詳解

          資深UI設計者

                 那么之前的文章都是對于B端這樣一個系統,進行概括性地講解,系統的講解。那么從今天開始,我將對B端系統對大家進行一個詳細的講解,包括每個控件的具體使用。這就是我們從大到小,再由小到大的這樣一個學習過程,那么目前我們要進行收縮范圍,要精確的明白某個控件應該如何使用。今天我所講解的是表格頁的具體使用方法,以及如何分析現有表格頁的問題。

                 文章句句將會直擊重點,拒絕長篇大論。

                 那么為了方便大家的理解和查看,我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片,進行詳細的剖析講解。那么,在看的過程中,我們要時刻的翻到上面這張圖片,對照著這張圖片來吸收消化今天的知識。

                 大家可以看到這是一個關于資產清單的表格頁,那么它的構造也符合我們常規的表格頁。首先我們對這個表格也進行分析,我們可以看出表格頁是由這幾部分組成的,它們分別是數據過濾,數據操作和數據查看。

          數據過濾部分指的就是我們頁面上方的這樣一個搜索框,包括。我們表格頁內容頂部的資產編碼,資產名稱,它們后邊都有這樣一個篩選器,我們可以按照順序或者是倒序進行篩選。這里我把數據過濾的部分用紅色框標注一下。

                 那么這個表格頁我們可以看出,它的數據過濾其實是非常少的。更多的數據過濾有什么呢?按照資產的新舊程度,我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數據過濾放在我們表格內容頁的頂端。

                 當然,維度有很多個維度,我們不僅可以對資產的新舊程度進行分類,我們也可以對資產的購買時間進行分類,比如2018年、2019年、2020年至今,我們可以對這樣一個時間維度進行分類。同樣,操作按鈕也是放在表格也的頂部,也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便,具體需要按照什么維度進行劃分,需要我們找到,我們的業務目標是什么?我們要找到我們的這個表格頁希望給用戶傳達出怎樣的信息?那么用戶最關心的點是什么?找到這些之后我們就可以對用戶最關心的點以維度進行劃分更多的篩選器,有助于用戶更好的去瀏覽內容。

                 此頁面我們可以看出他的篩選器過于少。在這里我們并不評價,數據過濾少是好事還是壞事?但是我們要記著,我們時刻要具備分析某個功能模塊。究竟應該放在哪里?它應該怎樣去劃分?這是我們要牢記的點。



                 那么剛才也說過,一個表格頁分為三部分,分別是數據過濾,數據操作和數據查看?,F在我們來講第二部分,也就是數據操作。那么什么是數據操作?數據操作,顧名思義就是對頁面中的某些數據進行操作功能,可以是增,刪,改,查等等,它都是屬于數據操作。那么數據操作,它一定是一個可點擊的一個功能按鈕,在頁面中,我們如果仔細找一找很容易就會發現數據操作的模塊。在這里呢,我同樣用藍顏色的框給大家框起來。

                 在這里,藍色框框起來的部分,就是我們這個表格頁中的數據操作部分,也就是第二個部分。

          那么很多人可能會有疑問了,說為什么同樣都是數據操作,有的數據操作在上面是純色的一個按鈕顯示,那么有的數據操作又在表格內容頁里,這些究竟有什么區別?

                 沒錯,數據操作。它擺放的位置是多種多樣的,但它遵循一個規律,什么規律呢?也就是說在我們執行數據操作的設計這樣一個功能模塊的時候,我們需要對其進行第1次的劃分。數據操作部分我們可以分為單行操作,批量操作和全局操作三個操作點,也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好,下面我來給大家詳細講一下什么是單行操作,什么是批量操作和全局操作。

                 我相信大家通過字面意思也能對這三種操作方式有一定的了解,單行操作指的是針對表格內容頁的一行數據進行操作,一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數據進行操作,他一般放在表格內容的頂部,那么什么是全局操作?全局操作是對整個表格頁的頁面進行操作,比如說我要導入新的表格,或者說我要替換這個表格,那么根據優先級順序來說,全局操作大于批量操作,又大于單行操作。這就是數據操作的三個不同點,那么很顯然在我們上張圖片中。只存在單行操作和批量操作,并沒有全局操作。


                 接下來我對最后一個部分,也就是數據查看這個部分進行一個講解。數據查看也就是我們系統所反饋給用戶的一些數據,它包括具體的數字,也包括一些漢字,所有的信息都可以被列為數據查看。那么由于這個表格頁上的數據查看部分沒有去寫一些信息,將這些信息打碼隱藏了,但是我們不難想象它填入信息后的樣子,也就是整個表格的內容頁的核心部分就是我們的數據查看,無論是數據操作還是數據過濾,只是進行一些功能上的操作,那么用戶最終的視線還是要落在數據查看這個部分,同樣我用橙色的框給大家標注出來。

                 如果說我們的數據查看部分,其中的數據是混亂不堪的,或者說它的列數是非常的繁瑣的,那么對用戶的體驗非常不好,也不能在第一時間抓住有效信息,所以我們在設計的過程中一定牢記7±2法則進行設計。

                 那么有的人有疑問了,說如果我的列數非常多怎么辦?如果你的列數非常多,那么你只顯示其中的重要信息在表格頁這一塊,其他信息應該歸納到查看詳情,或者是二級頁面內,不能在一屏中展示過多的信息,即使你放了這么多信息,你要記著那也是無效的擺放,用戶在進來之后根本就不想看一眼,所以在這里我們要一定要記著7±2法則,或者說我們給自己定一個列數的系統規范也是可以的。



                 以上,就是今天對表格頁的詳細講解,那么要學習更多知識也可以進我的公眾號學習。我們要知道再簡單、再復雜的表格頁也無非就是三塊,數據過濾、數據操作和數據查看,當然在頁面中也存在我們的導航系統,它們共同組成了一個完整的表格頁,表格頁所遵循的宗旨是簡單高效,信息直觀,操作方便快捷。


          文章來源:站酷  作者:弧形線


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

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

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


          聊一聊所謂的B端C化

          資深UI設計者

          編輯導語:B端和C端是產品經理經常接觸到的兩個話題,那么什么是B端C化呢?這篇文章從B端和C端的區別入手,詳細解答了什么是B端C化以及為什么要B端C化,一起來看看吧。

          一、寫在前面

          最近很流行一個詞——B端C化,解釋出來就是可以用C端的模式和思維來對B端產品進行設計,討論者大致分為兩種觀點:

          1.C端產品市場已經趨于飽和,可拓展空間剩余不多了,B端產品市場還是一片藍海,于是產生了一些C端設計師轉型去做B端了,將一些C端的模式和思維帶到了B端設計中,導致越來越多的B端逐漸C化;

          2.B端產品市場互相競爭,為了在同市場中打出差異化,于是一些B端市場開始招攬C端設計師培養轉型,并且嘗試融入C端產品的模式和思維在同市場內競爭,是產品設計的“內卷化”現象,導致市面上的C化的B端產品越來越多;

          但上述無論哪一種觀點,都在闡述一種現象或者趨勢:不管是交互還是視覺還是UI,目前部分C端設計師正在往B端設計師轉型。這個現象的發生對整個設計行業來說無異于新增了很多新亮點——市場上越來越多的B端交互、數據可視化視覺等需求,進而導致對市場培訓行業開始產生B端培訓的訴求,同時也破空而出了很多優秀的B端設計師。那么B端C化到底是什么,和傳統B端C端有什么區別,有這方面想法訴求的同學怎么去實現轉型?

          由于我本人之前是做C端UI設計師,到后來轉型成為B端交互設計師,而接觸的業務恰好涉及B端和C端的聯動以及多角色之間的協作,所以這篇文章借助結合我個人的經驗和看法,談一談自己對B端C化的理解。

          二、B端C端的區別

          在談B端C化之前,需要先了解B端和C端的區別是什么。B端C端的區別網上有很多文章和概述了,大致歸納下來主要以四個維度去區分:受眾主體、上線周期、業務類型和產品側重點這四個維度,其余的維度也會有區分,但是影響較小,主要還是圍繞以上四個維度進行B端和C端區分。

          1. 受眾主體

          受眾主體也就是相對應產品的用戶群體。C端的受眾主體是大眾用戶,特征為多樣化,用戶與用戶之間跨度也大,但是場景和路徑較為單一的,比如C端產品就以年齡層、城市、性別等來劃分用戶,每個階段的用戶都有不同的訴求、認知和習慣等等;在做任何決策方面都屬于偏感性(Heart)的個人決策(Personal);用戶穩定性則比較差,要是對產品不滿意,可以立馬換另一款產品,轉換門檻低,有多個競爭對手產品可供選擇;

          而B端產品的受眾主體則是為組織群體,特征為多場景和多維度,用戶群體較為清晰明確,可以按照崗位、角色、權限等劃分用戶群,但是之間的關系更加復雜,比如設計一個銀行內部管理系統,用戶群就很明確清晰——銀行各級職員角色,根據職級關系設計不同的功能以及權限;在做任何決策方面都屬于偏理性(Head)的團隊性決策(Team);用戶穩定性較強,要是對產品不滿意,也只能被迫適應和忍受,轉換成本較高,幾乎沒有其他產品可供選擇

          2. 上線周期

          上線周期就是指產品從需求階段到設計階段到開發階段直至最后產品上線所需要的周期。

          C端產品上線周期模式有個很明確的特點:快速迭代、敏捷,很多C端產品功能更新迭代的速度很快,上線周期非常短,往往半個月甚至一周就完成開發上線,加上用戶群的多樣性和跨度大,所以在上線的時候往往會需要AB實驗去驗證方案可行性;

          B端產品上線周期則是和C端一個對立面——長,少則雙月/季度多則半年/一年等,因為B端產品流程上都屬于重型流程,角色之間關系復雜,交互系統較為繁瑣,需求的改動和迭代并沒有那么頻繁,也不需要像C端產品那樣快速上線搶占市場,所以B端上線周期會很慢,也導致在工作強度上相比C端較為輕松一些,但是缺點就是結果沒有C端來的那么快和明顯。

          3. 業務類型

          C端產品的核心競爭力就是產品本身,關鍵總結就是讓用戶爽就完事了,所以C端產品的需求類型往往圍繞用戶群的痛點產生;因為C端用戶跨度大,不同的用戶群體有不同的痛點,所以導致C端的需求類型不是很明確清晰,需要不斷從用戶身上去探索挖掘需求,在不斷的試錯中逐漸得出正確的結論;

          B端產品的核心競爭力除了產品本身,還依賴復雜的關系、渠道、技術和資源,你的關系夠硬、渠道夠廣、技術夠領先、資源夠豐富,哪怕你的產品很一般,一樣能領先其他同行業的競爭對手,關鍵總結下來就是讓用戶贏就夠了;B端產品的需求類型雖然也是圍繞著用戶群的痛點產生,但需求的目標是更加明確清晰的,加上需求變更的頻率、范圍往往都有契約/合同所約束,所以相較于C端產品來說,B端產品是需求更加明確且容易達成目標。

          4. 產品側重點

          產品側重點無異于區分C端和B端最明顯的門檻了,C端產品的側重點主要在于體驗,而B端產品的側重點主要在于效益。

          前面提到過C端產品核心讓用戶爽就完事了,加上基于用戶更換產品的成本很低:你這款產品我用不爽就換掉了,所以C端產品的側重點永遠以用戶體驗為主,前面說的需求業務類型也幾乎是圍繞用戶體驗產生的;大家對比市場上同類型的C端產品,界面、交互、功能都不會差很多,是因為經過長時間的更新迭代,已經沉淀下來目前最好的用戶體驗類型了,隨著產品量級越大,改變用戶體驗類型就越謹慎;

          C端產品就是為了尋找并解決用戶痛點、癢點和爽點,加上品牌性、用戶隱私等因素考量,產品側重點聚焦于用戶體驗。

          B端產品側重點則是圍繞效益了,因為作為一個團隊使用的產品,不管是從易用性、功能性還是安全性,為這個團隊解決問題為首要基礎,那么使用者的體驗、產品的美觀度等等相較于優先級就沒有那么高了,所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上;

          B端產品就是為了使用產品的團隊解決效率、成本、營收的問題,加上產品的穩定性、安全性等因素的考量,產品側重點自然更聚焦在效益上。

          二、什么是B端C化

          前面了解了B端和C端產品的區別,接下來聊一聊什么是B端C化;簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端,網上也有很多B端可視化、趨勢潮流的設計和文章,但是B端C化不僅僅是從視覺設計上的改良,下面我逐漸從大到小聊一下我對B端C化的理解。

          1. 功能架構

          在做過很多B端產品之后發現,往往很多產品經理是對整個產品架構、功能形態一切都清晰地了如指掌,但是有時候在搭建產品架構的時候,功能形態單一粗糙,步驟復雜且笨拙;站在業務產品的視角來看,架構邏輯上都是沒有問題的,但是站在用戶視角來看,整體框架是混亂破碎的,步驟繁瑣且復雜,導致用戶對產品的認知變差,但是又不得不去用這個產品,只能被迫去學習使用。

          比如一個產品案例,就是一個產品的底層邏輯是前端輸入素材id,后端返還一個素材后就可以使用了,站在產品業務視角來看,這樣設計沒有什么問題,符合產品的底層邏輯;但是站在用戶視角就特別難受了,用戶想用一個素材,還要去尋找id然后輸入搜索,像C端那樣全部鋪出來給用戶選不好嘛?

          2. 行為習慣

          行為習慣自然是指用戶群在該行業下的行為習慣,電商行業、社交行業等等不同行業的習慣、專業術語等都不相同,這個在C端產品中都很能得到體驗,比如電商行業的大紅大紫,社交行業的左右滑動等等,這類有著很明顯的行業屬性和大眾認知,一樣是B端設計中應該注意的點。

          最經典的案例就是紅色綠色的定義區分,在數據產品認知中,綠色代表數據漲了,紅色代表數據跌了,比如GMV數據,DAU數據等,紅色為重點關注的數據;而在金融行業中,基金股票紅色代表漲了,綠色則代表跌了,所以設計的原則一定得是基于不同行業的用戶行為習慣。

          3. 信息層級

          B端產品的信息量一般是很龐大的,尤其是數據、表單、審批等B端產品,涉及到不同角色不同權限的開放等,所以用戶能否能一眼看清關鍵信息,能否幫助用戶快速達成目標,是交互層面針對信息層級的設計處理一個重要的環節。

          之前很常見B端產品中信息處理的方法就是堆積處理,直接將信息、數據等平鋪展示,比如很久之前的某牛商家端后臺等老舊系統;現在很多新的B端產品都是以模塊化處理方法將信息層級區分,使得模塊之間間隔更明顯,信息處理的效率更高,宛若C端中的卡片式設計。

          4. 設計語言

          設計語言自然是B端設計中標題、字號、顏色等規范標準,早些年把B端產品組件化后且開源的自然是阿里老大哥了,當時最早的AntDesign、以及后來的ElementDesign組件庫,到現在都被很多中小企業甚至大廠某些產品一直使用中,但隨著B端產品的普及和發展,越來越多的企業開始將自己產品沉淀出完善成套的設計語言,并搭建出自己的組件庫投入使用了。

          5. 用戶體驗

          如何去衡量用戶體驗是否是好的,最客觀來講當然是通過數據去衡量,而數據往往在C端產品中很常見,不管是體驗數據還是表現數據,都是C端產品中最為關注的;然而在B端產品中,更多收集的一般都是業務表現數據,幾乎沒有衡量用戶使用平臺的相關數據,大多衡量體驗的方法都是依靠問卷反饋的形式;但在B端C化的過程中,用戶體驗的數據也逐漸被加入到B端產品當中來,成為體驗標準的考核之一:比如某個任務完成的時長,報錯出現的頻次、某某工具的使用率等

          6. 視覺設計

          最后就是B端C化表現層的設計,包括目前主流的設計趨勢如大數據可視化、3D建模、材質質感、Dark模式等都逐漸融入到B端產品中,使得B端產品不再追求簡單的“功能優先”和“能用就行”,而是像C端那樣追求更美觀的視覺,更極致的體驗

          三、為什么要B端C化

          總結下來“B端C化”就是B端產品無論是從功能架構還是視覺體驗,越來越趨于人性考慮設計,越來越關注使用者的感受和反饋,因為說白了不管B端產品代替成本高不高,用戶是一群專業人士還是普通職員,使用者歸根到底還是“人”在使用產品,那么必然會帶來體驗相關的問題;

          所以B端C化會逐漸形成一種趨勢,在企業平臺資源支持的情況下,會將B端產品的功能放大,追趕市場競爭,逐利行業內卷,在體驗和視覺感官上也會更加的人性化,結果自然是產品設計者們更加的卷了(手動狗頭)。

          無論是現在的B端C化還是將來其他多元的設計趨勢,隨著市場的競爭和行業內卷,已經反推著設計師們不單單局限于照顧自己的“三分田地”了,無論是之前視覺設計師開始學習3D建模,還是UI設計師嘗試接觸代碼設計,設計師最大的品質就是應該緊跟時代的趨勢變化,及時調整補充自己的能力,提升自我的競爭力,才是在當今環境下立足的根本。

          文章來源:人人都是產品經理   作者:雨灰


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

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

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

          B端兩大設計系統哪家強?

          資深UI設計者

          編輯導語:有效地利用 B 端設計系統,產品設計師將可以更高效地做出更好的交互設計。那么前段時間發布的 Arco Design 設計系統,和已有的阿里 Ant Design 系統,二者有什么區別呢?本文作者對兩大設計系統典型頁面發表了他的看法,一起來看一下。

          簡介

          前兩周字節發布了自己的中后臺設計系統 Arco Design,在仔細閱讀官網文檔了過后,想和大家聊聊我自己對于 Arco Design 設計系統的與阿里的 Ant design 的一些對比和差異分析。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ArcoDesign 是一套設計系統的簡稱,是基于字節跳動所有的中后臺產品。ArcoDesign 主要服務于字節跳動旗下中后臺產品的體驗設計和技術實現,主要由 UED 設計和開發同學共同構建及維護。

          Ant Design 是阿里打磨出的一個服務于企業級產品的設計體系, 通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          總覽

          Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue,設計價值觀和設計原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設計價值觀,試圖建立務實而浪漫的工作方式。在「設計價值觀」的堅持上,Ant Design 有四點與眾不同:「自然」、「確定性」、「意義感」、「生長性」。

          我的個人理解 Arco Design 是站在設計規范的基礎出發點考慮,希望給用戶傳遞出來的價值出發,讓用戶深刻感受到系統是「清晰」、「一致」、「韻律」和「開放」的,而 Ant Design 所傳遞出來的價值觀似乎更加玄學或者說格局更高,上升到更高的思維境界,即大自然思想和社會責任。

          當然這部分的內容相對比較虛,每個人側重點想法都不同,大家可以自己去理解一下這部分內容。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B 端典型頁面分析

          接下來會從工作臺、表格、表單幾個典型高頻的 B 端界面進行分析,看看兩者的差別。

          1. 工作臺

          1)布局

          Arco 的卡片列布局靈活,基于 24 柵格進行布局,將整個柵格區域 2:2:1 的比例進行分割,信息卡片的寬度根據柵格寬度進行自適應,這樣的工作臺頁面既靈活也能夠滿足業務需求。

          Ant 的卡片列布局采用 3:2 比例進行布局,同樣是基于 24 柵格。目前主流的 B 端頁面都是以 24 柵格為基礎進行設計。3:2 還是 2:2:1 這兩種卡片布局方式沒有絕對的優劣,主要是根據我們頁面的信息量以及行業屬性去確定。如果工作臺所展示的單個信息量較多可采用少列大寬度進行布局,滿足信息展示的最優布局。

          作為 B 端的工作臺頁面,核心訴求是能夠清晰找到用戶想要的信息,想要做的內容,所以我們設計師要優先保證用戶能夠快速定位到核心的信息,快速到達要到達的功能。

          2)信息展示

          Arco 針對同系列的模塊設計了兩種尺寸的間距,例如歡迎問候信息與下方的數據信息之間是大間距,數據信息與下方的團隊動態最近項目之間是小間距。

          格式塔心理學的接近原則指出:接近的事物會被認為是同一個整體,擁有相似的功能或特征。所以在這里設計師通過兩種間距的留白對我們視覺進行暗示,強調信息之間的關聯程度,便于區分信息層級。

          Ant 在卡片方面沒有為卡片間距設置兩種尺寸,從上下到左右都是一種尺寸,這樣做的好處可以讓視覺更加對齊,顯得頁面更加規整,不好的一點就是內容區域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦,顯得內容區域很散。標題方面沒有進行加粗重色強調,將內容進行突出,使用戶更加聚焦于內容。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          3)導航方式

          兩個系統默認都采用側邊欄導航方式,側邊導航在國內的 B 端產品當中最為常見的。將菜單欄放置在左側,頁面布局上基本為左右結構,將導航菜單放置左側固定。側邊欄導航擴展性強、展示靈活、能夠快速定位,缺點是不易閱讀、閱讀沉浸感低。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Arco 導航區域與內容區域都使用同類淺色,采用線的方式進行分割,整體視覺比較清爽。Ant 導航區域使用了傳統的重色與內容區進行區分。

          目前的設計趨勢流行淺色導航,有幾個產品的 WEB 端進行了一系列的大改,YouTube、Twitch、Twitter 都進行了重新設計,他們不約而同地將塊面去除,去掉多余的的灰色,通過留白和空間將頁面拉開。這否是下一個 WEB 端所要追尋的趨勢,我還不得而知,但是對于導航層級多的側邊欄導航,我仍然建議使用深色背景區分導航欄。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          有一個細節,在頁面背景有一個以登錄的用戶名形成的一個背景水印,在 B 端的頁面中,對信息的保密程度要求很高,這里是為了防止公司核心數據資料泄露,在截圖的時候會有水印的存在,增強了信息的保密級別,這是一個很好的設計洞察點。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          2. 表格

          1)表格樣式

          表格作為組織整理數據的手段,可以有效地向用戶展示數據信息,是 B 端產品中出現最高頻的模塊之一。

          用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化(關聯和區別)。好的表格信息展示設計,應當是能夠輔助用戶高效便捷地實現以上場景中的訴求。

          Arco 和 Ant 的表格設計樣式與市面上多數產品都類似,采用表格列無分割線條、表頭與內容左對齊、數字右對齊的方式。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          合格的表格設計要定義合理的表格行高,在具體設定表格行高時,由于表格中以文字信息為主,我認為可以參考文字排版的常用做法,將整個表格的行高分成文字行高、文字與分割線間距離,即上下間距兩部分來考慮。

          文字行高可以設定為字號的 1.2~1.8 倍,文字與分割線間距離可以設定為字號的 1~1.5 倍。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          2)信息展示

          表格行高決定屏幕內能呈現的行數,即用戶在一屏內能獲取信息的數量,主要影響用戶縱向對比數據的效率。

          在 B 端用戶使用場景中,數據量極大的表格的展示問題是體驗優劣的關鍵因素。對于 1920*1020(包含該分辨率)以上的大屏用戶,對于一屏顯示行數的感知不強,但對于 1366×768、1280*720 等這類小屏,顯示行數有限,用戶進行縱向數據對比的效率就會有所降低。在設計前,應當充分了解目標用戶的行為訴求,了解目標用戶設備屏幕分辨率的占比分布情況,有針對性的設置行高。

          B 端產品的特點之一是通用化,覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。產品為了讓不同用戶都能獲得較好的體驗,可以考慮把表格疏密度的設置開放給用戶,建議不是完全開放給用戶去調整尺寸,而是給出一定階梯度的快速選項,例如舒適、標準、緊湊三種高度來滿足用戶需求。

          Ant 的表格功能很齊全,很多功能都是 B 端產品的痛點,例如表格可以通過調整單元格行高來調整密度,緊湊模式下可以顯示更多的數據。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          3)操作路徑

          作為一個查詢表格,我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置,而將明顯的左上角放一個添加按鈕,如果存在多個查詢條件是不是要從右往左放置呢?這里我不是很理解,大家也可以說一下自己的想法,相互探討一下。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Ant 的表格使用路徑符合 F 型視覺動線布局,在 B 端的市場中這種表格的設計方式已經符合用戶的操作習慣了。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          在 2006 年時候,尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享,他們通過研究發現,用戶傾向于一種 F 模式去查看網站。F 模式,能很好地幫我們創建好的視覺層次結構設計,因為這是人們可以輕松掃描設計一種布局,它能讓大多數用戶感到舒適,因為我們用戶一直從上到下,從左到右閱讀。

          在設計之前,我們先要去確定哪些內容最重要,明確信息的優先級,只有清楚知道你希望用戶看到什么,才能將它們放在用戶視線熱點中。

          個人認為在表格設計的完整度和設計的合理性方面來看,阿里的 Ant 系統做得比字節的 Arco 更好。

          3. 表單

          表單在界面中主要負責數據采集的功能,任何一個表單都可以被拆解成三個最基本要素:

          標簽(標題)、輸入框和按鈕。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          1)表單布局

          Arco 的表單屬于復雜表單,當表單條目數在 7 個以上,可歸類到復雜表單,這時候就需要根據表單的復雜度、邏輯性、關聯性進行判斷,選擇合適的分組方式,進行歸納簡化,降低表單填寫負荷。采用 3 列布局,便簽與文本框上下左對齊,這樣的對齊方式有利于用戶瀏覽的效率、對齊的美觀以及國際化拓展頁面的對齊問題。

          Ant 的表單也是較為常規的布局方式,有一點差異就是文本框并沒有右對齊,這里阿里自己也做出了解釋:文本框是根據需要填寫的字段進行長度展示的,需要填寫內容比較長的文本框就會比較長。實際業務中,大部分 input 所需填寫內容都存在理想長度,input 的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

          2)標簽對齊方式

          Arco 和 Ant 都使用了頂標簽的形式對齊。

          標簽分為左標簽、右標簽、頂標簽三種,不同的對齊方式,使用場景不同。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          該如何選擇呢?我們需要從 3 個方面進行考慮:操作效率、標簽長度、屏效、視覺對齊。

          ① 操作效率

          根據 Matteo Penzo 的研究總結得到的瀏覽時間表發現,標簽移動到輸入框的時間,頂部對齊最快只要 50ms,其次是右對齊 240ms,左對齊耗費時間最長 500ms。

          因此當以操作效率為主時,推薦使用頂對齊的方式。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ② 標簽長度

          當標簽長度超過 8 個字,或者需要考慮中英文雙版本時,推薦使用頂對齊的方式,其容納的標簽文字更多,拓展性更好,比如 Ones 的建任務的標簽,就采用標簽頂對齊的方式:

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ③ 屏效

          如果只考慮屏效,那么標簽左對齊右對齊均可,但是如果還考慮表單錄入效率,那么推薦使用標簽右對齊的方式,比如蜂鳥匯報:

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          顏色主題配置

          Arco 的顏色主題配置可以說是讓人眼前一亮了,可調整的范圍非常廣非常牛逼??梢跃庉嫷木S度從基礎的顏色、字體、陰影、 到組件的按鈕、導航、分類、表格 一共有接近 40 款組件的樣式,并且都是可以進行可視化編輯與實時預覽的。

          如果你用了 Arco 過后,或許不用苦苦地站在前端后面,讓他幫忙調整頁面,作為設計師自己就能夠搞定,并且每一個組件可以調整的粒度是非常之細,包含各種寬度、圖標大小、顏色、投影,等等…在這里可以編輯自己的主題,也可以在商城社區查看到別人發布的主題,真的是很方便啊。

          真的有些 amazing!假如你需要去設計一套官方的設計系統,完全可以通過 Arco 進行設計和預覽、落地。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Ant 并沒有做這方面的功能,顏色主題配置這一塊確實是 Arco 很大的亮點。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          總結

          無論是 Arco Design 還是 Ant Design 設計系統,都代表了字節跳動和阿里兩家互聯網巨頭公司在 B 端領域的沉淀和競爭。對于 B 端交互設計師來說,兩個設計系統都值得我們去研究和學習,建議大家都去看看設計規范里面的內容,對于我們認識和熟悉控件以及和開發對接都很有幫助。

          文章來源:優設 作者:哄哄
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何去做好響應式設計?

          資深UI設計者

          對于大多數網頁設計師來說,你的成品需要在各種類型和尺寸的設備上進行外觀和工作,這是顯而易見的。創建多個設計來實現同一目標的日子已經一去不復返了。


          這一切都歸結為選擇響應式或自適應設計模型,以實現任何規模的一致網站設計。


          但是響應式和自適應之間有什么區別?它們真的只是一回事嗎?讓我們來看看并解釋你需要知道的一切。喜歡記得關注UI范,每天更新,打造你的知識武器庫!




          1.與設備無關的設計的兩種方法



          就其核心而言,響應式和自適應技術在最終用戶看來可能是一樣的。創建設計和開發方法都是為了使網站在所有設備類型上都具有良好的外觀和功能。
          主要區別在你如何使用響應式或自適應技術創建網站。




          2.響應式設計



          響應式設計是任何使用網站的人的“家庭”術語。也許幾乎令人驚訝的是,它并沒有那么老。它是由Ethan Marcotte在 2010 年創造的:

          現在比以往任何時候都更重要的是,我們正在設計旨在沿著不同體驗的梯度觀看的作品。響應式網頁設計為我們提供了一條前進的道路,最終讓我們能夠“為事物的潮起潮落而設計”。


          而這正是我們目前關于響應式網站的思想學派的起點。




          響應式設計是一種技術,其中網站在任何給定尺寸下“響應”瀏覽器的尺寸,以便針對屏幕優化設計。理想情況下,用戶應該從單個網站獲得相同的體驗,無論他們是在只有幾百像素寬的移動設備上手持它還是在超寬屏幕顯示器上觀看它。

          響應式網站使用了許多你可能熟悉的元素:媒體查詢、靈活的網格和響應式圖像。它可能是針對多種屏幕尺寸進行設計的最流行方法。(純粹主義者會注意到響應式設計與設備本身無關,只與大小有關,而不是自適應,它在完美渲染的道路上檢測設備類型等。)

          根據交互設計基金會的說法,響應式設計更容易,實現的工作更少。這可能是它被更廣泛使用的原因。


          響應式設計師創建一個單一的設計,用于所有屏幕,通常會從分辨率的中間開始,并使用媒體查詢來確定將對分辨率標度的低端和高端進行哪些調整。這往往會讓用戶感到高興,因為熟悉的網頁設計似乎保證可以轉換到任何設備的屏幕上。均勻性和無縫性是提供良好用戶體驗的關鍵考慮因素。

          此外,由于涉及開發時間,響應式設計通常是大型網站的選擇。響應式設計植根于網格系統,響應式測量(考慮百分比或最小值和最大值)可幫助設計以不同的尺寸擴展、收縮和堆疊。
          這種設計技術是新開發的規范。



          3.響應式設計的優點

          • 無論設備或瀏覽器如何,該設計都適用于任何視口尺寸。

          • 響應式設計對搜索引擎友好(谷歌甚至推薦它)。

          • 允許設計中的很多精確度,以便設計師可以調整任何或每一個細節。

          • 高度移動友好的設計選項。

          • 與你可能用于網站項目的大量主題、網站構建器和工具兼容的常見設計實踐。

          • 該設計將具有統一和無縫的外觀,這將提升整體用戶體驗。





          3.響應式設計的缺點

          • 確保響應式元素在不同尺寸(尤其是較小尺寸)下仍保持可讀性和可訪問性非常重要。
          • 通常需要比其他網站更多的編碼,這可能需要時間或導致重量。重要的是要注意并注意這里。
          • 你無法控制所有設備尺寸,最終可能會設計出與舊尺寸或更模糊尺寸不符的設計。
          • 元素可能會在你身上四處移動,并不時以奇怪的位置結束,甚至由于核心內容管理系統或網站框架更新,因此重要的是要隨時了解變化。



          4.適應性設計


          自適應設計幾乎與響應式設計一樣古老。該技術于 2011 年首次使用,涉及針對特定設備尺寸和類型進行設計,以獲得更加個性化的體驗。
          這是來自MDN Web Docs 檔案的一個很好的解釋:“自適應設計更像是漸進增強的現代定義。自適應設計不是一種靈活的設計,而是檢測設備和其他特征,然后根據一組預定義的視口大小和其他特征提供適當的特征和布局。”

          設計植根于六種固定變化(寬度):

          • 320 像素

          • 480 像素

          • 760 像素

          • 960 像素

          • 1,200 像素

          • 1,600 像素


          自適應設計最常見的用途是將舊設計轉換為更適合移動設備的設計。這并不是說它不會發生在新的開發中。




          5.自適應設計的優點


          • 移動設備會告訴設計它們是什么,以便設計非常適合該設備和瀏覽器類型。
          • 自適應設計在事物的設計方面提供了幾乎精確的控制。
          • 智能廣告是一種可能性,允許來自智能設備的鏈接。
          • 自適應設計在速度測試中的得分往往高于響應式設計。
          • 該設計可以使用更多的個性化功能,連接到智能設備的使用選項和適配。
          • 對于需要刷新的小型網站來說是不錯的選擇,因為你只需“設計”較小的尺寸。



          6.自適應設計的缺點

          • 由于配置錯誤,您在設計時可能會遇到一些不太常見的設備(例如平板電腦)的問題。

          • 自適應設計可能是勞動密集型的,需要更多的開發時間和成本。

          • 由于內容重復,搜索引擎在使用自適應網站時會遇到更多困難。

          • 有一個偷偷摸摸的現實,你設計同一個網站六次。

          文章來源:站酷 作者:UI范

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

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

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


          如何高效地進行網頁設計?

          資深UI設計者

          把握中心目標

          大多數網頁設計是以目標為導向,也就是網頁做出來能為用戶提供什么、能解決用戶的哪些問題。例如電商網站的終極目標是賣出更多的商品,資訊類網站的目標是讓用戶能更多地閱讀最新訊息,目標不同,兩類網站在設計上也會有截然不同的差異。

          在設計上,電商網站會更注重頁面氛圍的營造,把紅紅火火的促銷氛圍搞起來,用戶看到會更興奮。

          如何高效地進行網頁設計?重點關注這7個要素

          在電商網站中,設計重點放在幫助用戶瀏覽店鋪并輕松找到特定商品上,放在詳情頁上用盡可能好的方式展示商品;付款流程也經過簡化和仔細計算(例如某寶最近更新的訂單頁把價格聚集在一起),因此用戶不需要經過太多思考就能快速下單購買。

          打造平衡的效果

          網頁中炫酷的視覺效果能讓用戶印象深刻,但效果實現需要付出更成本。能明確知道什么時候更簡潔的視覺效果能讓整個設計變得更好,能讓用戶專注于正確的事情,這一點很重要。

          有時候在網頁中添加過多元素,會分散有價值的信息,用戶也難以識別他們想看的內容。

          如何高效地進行網頁設計?重點關注這7個要素

          對齊和對稱是頁面保持平衡的重要因素。對齊既保證了布局統一,又將有聯系的元素緊密連接起來;對稱營造一種平衡的感覺,元素整齊有序。

          如何高效地進行網頁設計?重點關注這7個要素

          網站的登錄注冊頁往往都設計得很簡潔,有大面積的留白處理,只保留關鍵的信息輸入框,這樣用戶能更專注于輸入內容。

          如何高效地進行網頁設計?重點關注這7個要素

          在宜家網頁中,清晰的視覺層級結構以及留白的運用讓整個頁面看起來非常整潔有序。好的結構能讓用戶知道他們在看什么,留白提供了視覺上的緩解作用,有助于引導用戶的注意力。

          了解基本的設計原理

          格式塔原理基本上定義了我們感知事物的六種不同的認知規則。在網頁設計中,這意味著需要以一種合理的方式來安排元素,幫助用戶從整體上理解設計。

          如何高效地進行網頁設計?重點關注這7個要素

          設計中需要考慮不同元素的對齊關系、相似元素或按鈕的排放位置、一組信息要如何展示、列表類信息該如何展示…

          另一個重要的原則是希克定律,也就是向用戶展示的選項越多,做出決定需要的時間就越長。因為我們的大腦需要考慮和分析所有選擇,然后再選出最好的選擇,當選擇太多時,這就會成為一個問題。

          這就像我們在餐廳里點菜一樣,如果拿來一個 20 頁的菜單,我們可能會從頭到尾把這 20 頁全看了,仍然不知道該點哪個,然后又把這個 20 頁的菜單重新翻一遍。去餐廳吃飯是件放松高興的事,我們肯定不想在點餐上給自己帶來壓力,這樣吃飯的樂趣也會大打折扣。

          如何高效地進行網頁設計?重點關注這7個要素

          如果需要填寫很長的表單,考慮將長表單拆分成幾個短的問題,讓用戶按步驟依次作答,避免一下看到過多問題給用戶帶來負擔。

          了解面對的用戶

          網頁設計需要知道面對的用戶是誰、他們想獲取什么、想處理什么問題以及他們是想法是什么等等。

          對最終用戶的印象越清晰,越有可能創造出成功的設計,就像設計一個面向兒童的網站與設計一個供老年人使用的網頁會完全不同。所以在一開始,要先學會把自己的觀點先放在一邊,傾聽目標用戶的意見,然后再慢慢驗證自己的想法。

          如何高效地進行網頁設計?重點關注這7個要素

          抖音千人千面的推薦機制,能為用戶精準推送他們感興趣的內容,把握住了用戶的興趣,產品才能越來越受歡迎。

          排版很重要

          排版需要長期的積累和沉淀,如何合理地安排頁面中的品牌標識、圖片、文字等元素,是始終需要考慮的事。比如不管網頁設計的目標是什么,或者選擇什么樣的視覺效果,在選擇字體時我們總要考慮字體的粗細、大小或對比度等因素。

          如何高效地進行網頁設計?重點關注這7個要素

          根據設備不同,最佳字體的選擇可能會發生變化。在移動端設計中,文字可讀性是首要的,屏幕越小越要保證信息的可讀性。

          信息架構和導航

          網頁的導航設計和信息架構共同構成了產品的主干,讓用戶能夠了解產品和功能并找到需要的信息。

          如何高效地進行網頁設計?重點關注這7個要素

          無論信息的長短如何,合理的層級結構有助于在產品中創建邏輯結構,以便用戶可以查找信息。導航能反映出產品架構,這樣用戶無需花費大量精力,就能輕松找到主要信息和功能。

          如何高效地進行網頁設計?重點關注這7個要素

          點擊按鈕之后會切換到哪一頁、怎么返回到當前頁、點擊哪些按鈕頁面不跳轉。架構流程不僅自己要明確,更需要用戶看得懂。

          降低認知成本

          咱們前面提到,如果面臨的選擇太多,就需要經過大量思考,這樣用戶很可能會變得有壓力甚至困惑。其實這里面還包含著另一層意思,過多的選擇會增加用戶的認知成本。

          只有降低認知成本,才不會給用戶帶來過多壓力,才能快速做出判斷。在網頁大框架已經設計好的基礎上,降低認知成本的地方往往更在于細節。

          如何高效地進行網頁設計?重點關注這7個要素

          準確拿捏細節。在面包屑導航中,鼠標懸浮上去是一種狀態,點擊后又是一種狀態;選中的標簽與未選中的標簽在顏色上做出區分;當前頁碼重點突出的同時,告知用戶前后頁碼還支持左右切換。




          文章來源:優設 作者:Clippp


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

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

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





          B端設計規范

          資深UI設計者

          1.準備工作


          設計工具

          Sketch

          精不精通Sketch,就看插件用的溜不溜,推薦個網站:http://sketch.cm/

          無論是學習Sketch,還是搜插件、找素材,都是Sketch使用者的優選項。

          Sketch是OS X平臺獨占,需要下載Sketch可以到這個網站去下載。

          這里推薦個Mac平臺應用的下載網站,使用Mac的小伙伴可以去這里下:http://xclient.info/

          我個人是很推薦使用Sketch做UI設計的,軟件本身已經提供了大量的IOS和Android系統設計資源,配合各類插件,幾乎無所不能。



          Photoshop

          相比于Sketch來說,體型胖了點,在UI設計上略遜一籌。不過因為Sketch是OS X獨占,所以因為平臺限制的原因,用PS設計也沒有問題。

          我很久沒用它做UI設計了,也沒啥可推薦的了。



          Adobe XD

          全稱為Adobe Experience Design;這是一款集原型、設計和交互于一體的小清新時代風格的設計軟件。雖然有人說,Adobe XD將會是Skech的勁敵。然而在windows系統當中,Adobe XD的確是產品原型設計領域最順手的設計軟件。它使用簡單,界面整潔,雖然之前一直使用的是Axure 8.0,但看來,Adobe XD在界面、素材以及設計操作上的確甩了Axure好幾條街,至少它成功的吸引到了我。



          做好版本管理、文件歸檔的工作

          專業水平不僅體現在設計能力之上,優秀的管理能力也是重要的職業素養。

          合理規劃好設計版本,進行明確的文件歸檔工作,有助于提高設計師的工作效率。

          這里不贅述了,每個人有自己的版本管理方式,不過目標只有一個:清晰高效。




          2.關于手機的基礎概念

          這里的概念性內容不要強行記憶,理解即可,它是做移動UI設計的理論常識。


          手機分辨率

          手機屏幕的像素點數。比如750*1334、720*1280等等,細分還有物理分辨率和邏輯分辨率,這里不擴展講解了,想了解自行百度吧。

          手機分辨率牽扯到的就是工作時設計稿的尺寸,只要記住設計尺寸就可以了。


          屏幕尺寸

          手機對角線的物理尺寸,單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

          屏幕尺寸和設計其實關系不大,主要是用來計算屏幕密度的。


          屏幕密度(DPI或PPI)

          每英寸的像素點數。簡單理解就是屏幕密度越大,畫面越逼真細膩。

          下面是屏幕密度的計算方法,范例是5英寸,分辨率為1920*1080的手機:



          屏幕密度牽扯最多的是安卓系統,安卓手機屏幕本身的密度種類非常多,這也是導致了安卓系統需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題,這個我們下面會提到)




          3.基礎設計規范——IOS系統

          這是蘋果的開發者官網:https://developer.apple.com/

          這里有持續更新的最新設計規范和資源模板,雖然是全英文的,但并不影響閱讀。

          設計師應該學會從官方獲得設計資料,這比其他途徑獲得的資料更加全面和權威。


          最新系統版本:IOS 11.4.1

          中文字體:蘋方黑體

          英文字體:San Francisco

          官方系統設計模板下載:

          https://developer.apple.com/design/resources/


          官方系統設計字體下載:

          https://developer.apple.com/fonts/


          下圖是截止到目前,可能還需要支持的機型和對應的設計尺寸:




          設計稿尺寸

          只推薦750*1334的尺寸來做設計稿,這是向上向下都最容易適配的尺寸,包括用這個尺寸去適配Android版。

          除了IPhone X的比例特殊外,其他的IPhone比例幾乎差不多的,比較容易適配。



          Sketch設計

          使用375 * 667尺寸即可,開發在Xcode里也是使用這個尺寸。

          導出的@2x圖適配IPhone 5/5S/5C/SE   6/6S/7/8

          導出的@3x圖適配Iphone 6/6S/7/8 Plus    IPhone X



          Photoshop設計

          畫布就建成750 * 1334尺寸的即可,在這個前提之下,

          導出原尺寸圖片加后綴@2x,適配IPhone 5/5S/5C/SE   6/6S/7/8

          導出1.5倍圖片加后綴@3x,適配IPhone 6/6S/7/8 Plus    IPhone X



          常用數據

          下面的內容蘋果官方提供的模板文檔其實都有對應的數據,可以去官網下載。


          字號使用建議(這個不是硬性規定,根據視覺效果酌情使用)

          導航文字            34-38px

          標題文字            28-34px

          正文文字            26-30px

          輔助文字            20-24px

          Tab bar文字       20px



          圖標尺寸建議

          APP應用圖標,建議使用1024*1024尺寸去做,逐級縮小去應用到各種場景中。

          SKetch已經提供了IOS和Android系統的APP尺寸圖標模板,直接使用就可以了。


          界面適配

          程序內部的功能界面:這種界面通過寫成自適應的界面可以很好的適配各種機型;如果有特殊的布局要求,也可以讓開發根據特定機型去調整,不需要單獨為各類機型再做設計稿。


          覆蓋全屏類的界面:比如閃屏、啟動頁、引導界面、插畫頁面等等,這類覆蓋全屏的界面必須要單獨為IPhone X的比例重新繪制或者調整設計稿。

          其他的IPhone機型,遇到這種界面,整體放大縮小、微調之后按照各機型的設計尺寸輸出對應的切圖就可以了。


          IPhone X的安全區域:IPhone X的安全區域就是扣除頂部劉海狀態欄和底部虛擬home鍵之后,中間的內容顯示區域。如果你不得不使用IPhoneX的尺寸做設計稿,請一定設置好參考線,不要把內容做進這兩塊區域內部。

          IPhone X規范:iPhone X 人機交互指南及其設計細節



          簡單理解APP構成

          下圖是IOS開發工具Xcode里的一個空白頁面,圖片的文字標注請仔細閱讀。

          本質上,開發寫APP界面和設計做設計稿是一樣的,只不過兩者實現方法不同。



          APP的構成遠遠要比上圖寫的復雜的多,我們這里使用最簡單的理解方式。



          設計稿的標注

          根據上圖我們可以理解設計稿和程序之間的關系:

          設計稿里的按鈕、文字、圖標、列表、背景色、線條等等所有的設計元素,

          在Xcode里都有對應的控件,設計元素必須使用對應控件,才能在APP的界面里顯示出來。


          設計稿的標注,實質上是標注的各類控件的屬性以及相對于其他控件的關系:

          設計稿中:

          文字的自身屬性:顏色、字號、字體、行間距、對齊方式、透明度;

          圖片的自身屬性:寬高、間距、距離、透明度。

          至于標注在上篇文章有詳解:一款APP從設計到切圖標注適配全記錄,這里就不累贅了!




          程序的對應控件

          Label的自身屬性:顏色、字號、字體、行間距、對齊方式、透明度;

          Image View的自身屬性:寬高、間距、距離、透明度。

          實際上各類控件的屬性也要比這個復雜的多,這里是最簡單理解的舉例說明。


          如今使用本地化插件Sketch Measure,幾乎不用手工標注,標注導出HTML后,扔給開發,他們想看什么屬性自己點擊查看就是了,所以我們這里了解下標注原理就行。

          而一些線上工具的插件,比如藍湖、墨刀、Mockplus等等,功能更加豐富,各位根據自身情況靈活運用吧。

          Sketch Measure去http://Sketch.im下載





          設計稿的切圖

          IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴,是為了在Xcode導入圖片資源時,識別對應機型所用的圖片。

          Xcode里提供了相應的位置,相同命名圖片會根據后綴填入到對應的位置。



          目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。

          但是對于UI設計來說,常用的圖片格式就以下幾種:


          PNG      常用圖片格式,沒什么解釋的,目前大部分產品還在使用此格式;

          WebP    安卓的圖片格式,同等質量圖片下體積非常小,非常推薦給安卓使用;

          SVG      矢量格式,完美解決適配問題,但也有部分缺點。

          想具體了解WebP和SVG,可以查看之前的文章。



          切圖輸出規范

          前提:同一類型、位置的切圖,請保證切圖尺寸、規格一致,圖片尺寸為偶數大小。


          1.有操作功能、可點擊的功能性切圖:最小點擊區域問題

          蘋果官方提供的能準確點擊的最小點擊區域:88 * 88px;

          小于這個范圍也可以點擊,但是點擊不靈敏,體驗較差。

          對于比這個范圍小的可點擊按鈕,周圍需要用透明區域填充后再輸出切圖。



          解釋下為什么用透明區域填充來擴大點擊區域范圍:

          圖標這東西,對設計師來說沒區別,都是圖片。

          但對開發來說,可操作和不可操作的圖標是兩種類型的控件,圖標的樣式不過是傳給該控件的顯示圖片罷了。


          可操作的功能圖標在Xcode對應控件是UIButton。

          對控件來說,如果不在代碼里明確固定控件的大小、點擊區域等等各類屬性,設計師傳給我多大的圖,這個控件就會被這張圖撐到多大。


          你給我一張40*40的按鈕切圖,如果開發什么都不做,那這個UIButton在手機界面里就被撐到40*40的大小。

          我也可以在Xcode里寫幾行代碼,固定圖片的大小就是40*40,擴大UIButton這個控件的大小變成88*88,這樣這個控件的點擊區域也擴大了。


          但是一張規范的切圖就能解決的事情,為什么還要在代碼里再手動加幾行呢?

          一個可點擊按鈕需要加一行代碼,整個APP就可能多加上百行上千行的代碼。


          規范的切圖也是可以提升產品開發效率的。


          2.非功能性切圖,比如列表圖標、說明圖標等,按統一規格的最小尺寸切。

          這么切還可以減少一些程序因圖片資源大小導致的體積大小問題。



          這類切圖,對應的是UIImageView控件,就是一張圖片,無操作,只是占位和顯示。

          所以你按照相同規格,最小尺寸切就可以了。


          有朋友問:一定要切正方形的嗎?如果圖標都是30*20的,那我統一切30*20的行不行

          答案是:可以,這個沒有完全的硬性規定。雖然我是設計師,但也會去寫一些IOS程序。正方形規格切圖就是為了方便開發,當然還是推薦你使用正方形規格來切圖。

          但實際開發過程中,只要保證同一位置,切圖規格統一就可以。


          切圖輸出狀態:

          同一按鈕、元素的不同狀態,要明確命名對應狀態之后,分別輸出對應圖片。

          下圖示例按鈕的選中狀態多出現在游戲APP中,這里僅表示說明。




          命名規范

          不要使用中文、特殊字符,請使用英文、下劃線、數字對切圖命名,數字不要打頭。


          命名方式盡量清晰,推薦采用:種類_位置_功能_狀態

          示例說明:

          btn_homepage_seach_normal@2x.png


          開發看到就會明白:這是位于首頁,處于正常狀態的搜索按鈕2倍切圖。



          4.基礎設計規范——Android系統


          這是Android Material Design中文版的地址

          https://www.mdui.org/design/


          Android的英文版地址

          https://material.io/


          最新系統版本:Android 9.0

          中文字體:思源黑體

          英文字體:Robot


          Android不整理各類機型的尺寸規范了,數據零散,難以整理。所以我們從屏幕密度這里理解設計規范就可以了。


          Android手機屏幕密度

          上文我們提過屏幕密度的計算方式,安卓手機因為各種屏幕尺寸和分辨率,導致如果單純按照數值計算,可能屏幕密度種類會多到讓設計師崩潰。


          所以為了解決這個問題,安卓手機出廠時,屏幕有自己初始的固定密度,系統會根據這些屏幕密度自行適配,下圖是對應的屏幕密度表:




          Android的開發單位以及設計尺寸


          正因為Android手機分辨率多樣,為了保證同一設計在不同屏幕密度的手機上顯示效果一致,Android系統使用了下面兩個單位:

          dp:android開發單位,相當于比例換算單位。使用該單位,可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果;

          sp:android開發文字單位,和dp類似,也是為了保證文字在不同密度的屏幕上顯示相同的效果。


          當屏幕密度為MDPI(160DPI)時,1dp=1px

          當屏幕密度為MDPI(160DPI)時,1sp=1px


          按照上面兩個公式的換算,同樣dp大小的圖片在不同屏幕密度的手機上如下圖所示,

          基本可以保證圖片顯示效果在各類手機上相同。




          設計稿尺寸

          通過上面的分析,在xHDPI這個密度等級下,倍數關系為2,推薦使用720*1280尺寸做設計稿,換算方便,適配容易。


          不過目前的現狀是,如果公司的產品有IOS和Android兩個版本,基本上設計師只會做IOS的版本,然后套用給Android,這樣做也是可以的。兩者的切圖,在這個設計尺寸之下是可以通用的。



          設計稿的標注

          推薦使用dp和sp進行標注。但是呢,如果你用720*1280做設計,使用像素單位標注,現在也不會影響什么。

          因為前面已經提到過IOS的標注了,這里也就不再贅述了。



          設計稿的切圖

          理論上,對于Android系統來說,如果你想完美適配各種機型,應該為不同的屏幕密度提供不同尺寸大小的切圖,而Android的開發工具也為不同的屏幕密度提供了對應的資源文件夾。


          但實際上,并不需要提供上面密度表那么多套的切圖,程序安裝包的大小基本就是由于圖片占用了太多的位置。

          所以需要提供多少套圖片,請和公司的開發溝通,確定你們的產品實際支持哪些屏幕密度。



          圖片格式

          WebP和SVG

          我個人是推薦現在為Android系統使用WebP格式,體積小,顯示效果好;

          而SVG這種矢量圖片格式完美解決了Android多套切圖的問題,一套切圖,完美適配各種屏幕密度。



          最小可點擊區域

          48dp:這和IOS的最小點擊區域性質是一樣的,都是考慮到手指點擊的靈敏性的問題,設計可點擊控件的時候要考慮到這一點。


          更多的注意事項和IOS切圖是相同的,這里不再贅述了。




          5.UI設計師的職業道路

          如今的移動UI設計行業已經很成熟了,針對移動UI設計的便捷工具層出不窮;移動UI設計的理論體系知識也已經漸漸完善。但這些都是外部因素,社會發展了,我們跟著一起向前適應就好了;


          但對于設計師工作能力的提升,還需要有明確的方法體系,更要有清晰的職業規劃!

          很多設計師工作了幾年,卻一直在原地踏步,苦苦掙扎,甚至沒有職業目標。


          目前我工作5年,就從我自身的體會來分享我自己的方式,當然資深的、精英設計就別跟我較真了,我代表的是那90%還在向上努力爬的普通設計師~


          工作能力,不僅僅指的是自身的專業技術水平,還包含了各種綜合性能力,請務必對自己有明確的職業規劃和能力發展軌跡。



          工作0~2年

          這個階段對于新人來說,是一個設計能力和工作經驗的快速積累過程,不夸張的說,這兩年內的經驗可以決定你之后的職業發展道路是否順利。


          此階段目的:提升設計專業能力、完善理論知識、積累實際項目經驗

          這個階段就別想著一專多能了,先把那個“一?!备愫镁涂梢粤耍斎徊皇遣蛔屇銓W習別的知識,而是說重心應該發在提升目前的專業能力上。


          提升設計能力:

          一方面,通過公司的實際商業項目提升能力,這個沒什么可說的;


          另一方面,業余時間務必進行大量的作品練習,無論是臨摹、還是重設計都可以,目的就是一個:量大 從優!

          臨摹請用高質量作品,臨摹一堆垃圾還不如不做,臨摹請務必做到99%以上的相似度,不然那不叫臨摹,臨摹的過程是考驗軟件功力、設計技法能否完美復制的過程。


          重設計請使用成熟知名產品,不要重設計一堆垃圾應用,成熟產品每個界面的布局、樣式、功能、邏輯都是經過深思熟慮后呈現給你的。

          重設計的目的是要體會產品背后反映的設計意圖,不是為了重設計而重設計。

          所以重設計之前請自己思考原產品這么做的目的再動手。


          完善理論知識:

          沒有理論體系方法的支持,在設計道路上是走不遠的。

          現在關于UI設計的知識網站已經很多了,當然不局限在這類專業性網站上。

          人人都是PM、UI中國、25學堂等等很多這類網站都是學習理論知識的好地方。

          當然,你也可以關注我嘛~(給自己打個廣告,吼吼~)



          工作2~3年

          3年對于互聯網從業者是一個坎兒,其實這是相對于職業規劃來說的。

          通過前兩年的積累,對于UI設計本職工作已經可以勝任了,接下來的要考慮的是個人的職業發展規劃了。


          此階段目的:拓展技能、明確職業目標、為進大廠做準備


          拓展技能:

          這個階段可以考慮“一專多能”的多能了,作為UI設計師,可以學習的東西實在太多了,交互、動效、產品設計、開發等等。

          不要求你達到那些專業從業者的地步,你要學到專業程度,還干什么UI設計啊。

          目的是為了拓展自己的技能樹,為自己提供更多的競爭力,這個習慣要一直保持伴隨之后的工作……


          明確職業目標:

          設計師最怕的就是迷茫,如果說前兩年因為剛入行,對行業,對自身都不完全了解,那情有可原。但工作兩年后,對自身的情況再不清醒那就說不過去了。


          可以從以下方面考慮:

          是始終堅持在一線崗位的設計技術大牛,還是想做設計管理者,亦或者想從UI設計師轉職成交互設計、產品設計等等。

          工作兩年已經對自身,對行業有理解了,自己的能力是否適合設計崗位,對設計的熱愛是否能經久不變都可以作為參考調節了。


          為進入大廠做準備:

          剛工作,可能限制于能力實力問題,委身于小公司。

          但是!雖然我們身在小公司,但心要在BAT CAO  TMD,

          Apple、Google也不是不可以!

          Skr!Skr!


          這階段可以為大廠準備一下,當然不是讓你工作兩年多就去面試啊,如果你的能力特別突出,就當我放屁吧~

          意思是,可以以進入大廠為目標,綜合性的考慮自身的缺陷并盡量彌補。


          千萬別以為就在小公司將就著干吧,反正拿的錢也差不多,大公司的滋味你是體會不到的。

          拿同樣的薪水,在小公司和大公司的感受可是完全不同的,小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。




          工作3~5年


          對互聯網人來說,3年一個坎,5年一個坎,都是職業規劃的節點時間。

          3到5年的設計師,如果你真的用心工作了,一個人可以實實在在的頂起來一個項目。

          我們上面說,為進入大廠做準備。在這個階段,可以考慮進入一些中大型企業,提升個人的綜合能力、拓展人脈。

          部分企業也比較喜歡要這個階段的設計師,有工作能力,職業道路又剛開始,搞不好可以在公司培養起來。


          此階段的目的:提升綜合能力、拓展人脈圈子

          這時的個人專業水平其實已經不是問題,繼續在工作中磨練積累就可以了;

          這里需要的是打開個人在職場上的道路。

          說實話,即使是互聯網行業,搞技術除了要保證自身技術過硬之外,會不會發展人脈,能不能提升綜合能力才是最后職業道路能不能走遠走高的決定因素。


          提升綜合能力:

          與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對項目的把控能力等等,都算綜合能力,這是對內部的能力。

          不要以為對設計師來說,我悶著頭接需求,做設計就可以了。

          這樣的設計師,也許你可以踏踏實實當個接需求的小設計,但你永遠也只是一個這類的設計,對于有更高更強的職業追求的人來說,沒有幫助。

          所以,張開嘴、邁開腿,一步一步嘗試去推動自身進步吧,這個沒什么技術性方法,必須要自己親自去做。


          拓展人脈圈子:

          人脈對個人職業道路的幫助,遠遠要比專業能力的幫助要大的多,這是對外的能力。


          設計師的圈子,說實話不算大。搞技術的,本身就坐辦公室,而做設計的人本身性格也有一部分原因,但還是請你努力拓展自己的人脈。


          對于自身的專業圈子,努力分享自己的設計經驗、工作心得,總結自己的體會,發布到各類設計專業論壇上,積極的幫助別人,這都算一種拓展方式。

          時間久了,就會結識非常多的設計界朋友,設計大牛也會逐漸注意到你,這些都是你職業道路上的寶貴資源。


          還可以認識幾個不錯的獵頭朋友,有好的職位,他們都會優先想到你的。


          作者自述

          這也是我寫的最后一篇關于基礎規范類文章,也算是整理一下工作到現在的基礎常識類內容,以后不再寫這類基礎文章了。

          人總要進步的,設計師還是要靠干貨作品來撐腰的,對吧。

          以后發的內容都是我做過的實際商業項目,我會把設計經驗和工作方法融入到這些作品實例里來寫,這總比我單純講理論知識要強。




          文章來源:站酷 作者:Z085740511 

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

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

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


          關于toG系統的一些總結思考

          資深UI設計者


          寫在前面


          近幾年云計算和大數據的興起,以及政府數據化戰略的升級,G端逐漸出現在大眾視野里,受到各大互聯網公司、IT廠商的青睞,BAT也在2018年宣布進軍G端市場,給信息化市場帶來了新的氣息。


          由于工作需要,經常會和客戶溝通,總結出來G端客戶有一個特性是,他們大部分為高知人群,從學歷、社會地位、經濟收入、家庭背景等都占有相當的優勢,長期在政府部門工作,他們習慣于政令形式、層級森嚴的環境,會有工作任務固定、重復率高、失誤率低的需求。


          與toB相比,toG產品項目的特點是——


          1/ 客戶業務主導性強

          調研對象政府相關部門的領導和科員,對業務主導性強


          2/ 改變用戶行為難

          原系統運行時間較長,形成了用戶習慣,接受新系統難度較大


          3/ 項目工期短

          部分toG項目要求工期緊,系統需求調研、開發時間較短


          4/ 系統應用阻力大

          涉及原系統、單位內部環境等問題,系統使用過程需要長期博弈



          工作以來做了不少toB和toG的項目,這兩者相似卻又不同。


          【相同點】


          • 都是服務于用戶,需要站在用戶的角度分析用戶需求,為用戶解決問題

          • 都是要把產品和項目做好,兼顧功能的同時,使用戶體驗更好,才能實現盈利

          • 都是重功能、輕視覺,要符合產品的實際需求,并有效提升業務運營的效率

          • ...



          【不同點】


          1/ 面對的客戶群體——

          toB是面向企業客戶的,一般為企業內部人員使用,不向大眾公開。

          toG是從toB衍生出來的一種特殊劃分,面向的企業是政府相關單位。


          2/ 資金來源——

          toB通常由企業撥出資金

          toG通常由國家財政撥出預算,并非完全基于自身的組織或企業的資金。


          3/ 決策機制——

          toB一般為客戶、公司管理層

          toG的話,不同層級的決策者有不同的考量,比如高層領導希望打造影響力來獲得政績,中層領導希望體現布局和價值,小領導希望解決自身申請項目和提升職稱等的需求,最終用戶能否用起來,反而不是很重要。所以解決方案要滿足不同層級和角色的需求。


          4/ 產品需求——

          toB滿足剛性需求并滿足一線使用者需求為主

          toG非常多的產品功能非剛性,通常會讓研發人員難辦,因為比較難證明產品或研發價值,但在售前和控標階段,大而全的功能又會成為各產品之間的軍備競賽,最后將產品功能補齊,開啟同質化競爭。所以更多的是滿足非剛性、但有利于搞定決策人的、有價值的功能需求。

          5/ 產品標準化——

          toB面對中小型客戶,需求淺、沒有足夠的談判籌碼,不需要定制化;大客戶的話,需求更深入,定制化不可避免。

          toG比較難實現標準化,因為toG本質上是重政績輕實用,這就導致相關決策人總希望做出不一樣的東西,不僅別人有的我要有,我的還要有特色。所以可以從兩方面入手,一是只做通用層能力,定制化找合作伙伴來做,保證渠道和底層能力的核心競爭力;一是自建定制化團隊,專做定制化需求,避免拖累正常的產品迭代。


          6/ 視覺設計——

          toB一般冷色系居多,整體簡潔

          toG要根據客戶喜好來設計,最好能體現單位或地方特色;視覺方面,界面不能過于簡單,互聯網扁平化并不適用,要盡可能充實界面,但要把握「度」,不能太花哨,一般配色以紅&藍為主,莊重、大氣;內容方面,要遵循國家相關要求和當下政策環境,不可隨意亂造,最好是當前業務測試內容;交互方面,不可有過多的交互層級和特效,操作路徑要盡可能短一些,一般是一到兩個交互動作就可以完成任務,要考慮40-50歲人群的體驗習慣。

          (這里可參考之前寫的一篇文章,詳細介紹了簡化操作路徑的案例,一站式解決問題,有需要的同學可以看看,鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html)


          7/ 產品迭代——

          toB一般有一定的周期

          toG產品項目,一般第一次上線之后,客戶會提出一系列問題,返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產品),因為政務用戶不同層級的需求和對需求的認知不同,造成了對統一功能不同用戶的意見有很大的不同,其實第一次上線運行就相當于一次內部測試,返工的時候不必太挫敗,只要做到核心業務流程和業務模塊完整即可。接下來再通過幾次的測試、收集意見反饋,討論決定最后的需求,這就是很多toG項目需要去客戶現場駐場的一個原因,采用小版本、多迭代、多溝通,及時解決問題。


          PS: 關于去客戶現場,這里想多說幾句。

          通常情況下,是產品經理和開發團隊駐場居多,但有時候設計方面常會遇到一種情況是,客戶需求不明確。通過產品經理在客戶和設計師之間來回轉達消息,效果也并不是很好,這個時候就需要設計師主動爭取機會去客戶現場。有一個典型的案例是,去年做GAB的項目,需要設計一個登錄界面。設計稿做了很多,客戶一直不滿意,于是我申請到客戶現場進行面對面溝通,去的時候會帶幾個有代表性的風格給客戶看,先把不想要的風格排除掉,然后把握大的設計方向。具體設計的時候同步表達自己的設計理念,一步步引導客戶,客戶中途一步步給意見建議,參與其中,這樣更容易明確需求,客戶也會覺得這是自己與設計師共同的成果,會更容易接受,做出雙方都滿意的設計,促進驗收,最后雙贏。

          這就是那個「看起來平平無奇 · 但解決了實際問題 · 客戶很滿意」的登陸界面,如下圖:



          8/ ...




          很多toG的產品項目上線后造成的客戶影響不好,這個時候要調整好心態,只要你設身處地站在用戶的角度思考,分析場景和需求,用我們的專業技能來解決問題,當你經歷各種否定和困難最終得到客戶的認可,這種打磨過后的成就感真的難以言喻。

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

          文章來源:站酷  作者:Alita Joyce


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

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

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



          從易讀性和易操作性兩大方面,如何做好表格設計

          資深UI設計者

          導語:提起中后臺,除了高效、靈活和強大之外,不可忽視的還有它的海量數據。海量數據的篩選與呈現,直接決定決策人員的效率高低。本文作者主要是結合自己在實際工作中遇到的表格設計問題,針對Web端數據呈現方式之一,表格的設計進行探討。

          表格,是一種常見的信息組織整理手段。常用來展示、保存、對比分析、排序、篩選 、歸納等,是最清晰、高效的數據展現形式之一,由內、外兩部分組成。

          • 內部:由表頭、表體、表尾共3部分組成;
          • 外部:由篩選區域、操作按鈕區、分頁區共3大類組成。

          從易讀性和易操作性兩大方面,教你做好表格設計

          說完表格的組成,接下來將會從易讀性和易操作性兩個方面來分析下表格設計。

          易讀性

          1. 行與列

          表格的組成,也可以看作行與列的自由組合,這種組合賦予了表格多樣性的特點。行與列構成了單元格的長與高,不同的長高會有疏密之分,充實與透氣之感。

          B端中后臺通常會對應不同的角色及場景需求,根據目的及信息主體的不同,讓用戶根據自己的需求來定義表格的展示列及列的順序,也可以通過行與列的顯隱變化,來更好的滿足信息的傳達。

          但需要注意的是系統應記住用戶上一次的自定義列設置,減少用戶重復操作。對于列的選擇,應盡量減少列的數量,既要展示用戶必要信息,又要避免出現用戶無關數據,以免信息冗余,影響信息閱讀效率性。對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。

          默認排序,應從用戶目的出發,遵循用戶查看數據的習慣,尊重數據之間的關聯性,設計用戶查看、操作數據的路徑,而非隨機排列。

          從易讀性和易操作性兩大方面,教你做好表格設計

          2. 數據展示

          B端中后臺中的表格展示的數據多且雜,這就要為用戶先一步對數據進行梳理歸納,提高用戶獲取信息速度。

          為便于對數據進行對比分析,一般需要在原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果,減少用戶二次加工數據的過程,提升用戶閱讀信息的效率。

          數據匯總展示

          在表頭或者表尾分別提供了總計的數據,方便用戶進行快速查閱。

          從易讀性和易操作性兩大方面,教你做好表格設計

          數據對齊展示

          常用對齊方式有數字右對齊,文字左對齊,混合型文本左對齊,列標簽的對齊方式與數據的對齊方式保持一致。這樣能形成的視覺邊界線,便于視線的流動,從而快速提升數據的瀏覽、對比效率。

          從易讀性和易操作性兩大方面,教你做好表格設計

          空數據展示

          B端中后臺數據類型較多,對于空數據,切忌不要與數據為“0”進行混淆,對于空數據通用做法是用“-”表示,而不是什么都不顯示,會讓用戶誤以為是沒有數據還是“0”數據。

          最好做法就是為空數據做出釋義,可以加在“列標簽”的名詞解釋文案中。

          從易讀性和易操作性兩大方面,教你做好表格設計

          數據的關鍵屬性標識展示

          對于用戶重點關注的數據狀態、上升和下降等,可以用符號進行標識,幫助用戶快速定位到目標信息。

          從易讀性和易操作性兩大方面,教你做好表格設計

          3. 固定表頭、固定列和固定分頁

          在有限屏幕內,有限的內容展示區域內,閱讀豐富且繁多的表格時,用戶不得不拖動橫向或縱向滾動條來閱讀信息。

          固定表頭、固定列和固定分頁,能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。

          固定表頭

          在固定的小區域內滾動會非常局促,而且區域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識別信息,在全屏滾動上去后固定表頭,有利于用戶向下翻屏時能夠便利的閱讀數據。

          從易讀性和易操作性兩大方面,教你做好表格設計

          固定列

          固定列的內容可視業務及目標用戶的訴求而定,一般采用方法是固定比較重要信息,方便用戶進行數據定位與對比,最好可以讓用戶自定義,滿足不同用戶訴求。

          從易讀性和易操作性兩大方面,教你做好表格設計

          固定分頁

          分頁處理目前有放在上部、下部或上下部均有,需要根據場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進行操作的麻煩。

          特別是可以自定義每頁的數量和需要橫向拖動數據查看,這就需要把分頁固定在底部,方便用戶橫向拖動滑條查看信息和進行翻頁操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          4. 分頁

          在Web端中的表格,涉及到跨頁的數據操作時,分頁會帶來不便。

          但往往受限于數據加載的壓力,這種情況在大廠中尤其突出,加載數據都是億量級別的,在Web端和手機端都需要實時下載數據的終端,我們通常做法就是提供分頁展示數據來緩解服務器的壓力。

          表格中的的數據內容超過一定“數量”時需要提供翻頁功能,而這個“數量”是由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定。

          原則上整張表不要超過一屏,考慮到每個用戶的使用習慣,我們一般提供可以讓用戶自定義每頁的顯示的數量,相比于跨屏翻頁而言,向下滾屏會更便利,也更符合瀏覽信息路徑。

          從易讀性和易操作性兩大方面,教你做好表格設計

          5. 全屏查閱

          表格全屏展示是非常有必要的:

          • 特別是在小屏設備上,全屏模式下可以直接屏蔽掉左側導航欄、上方的報表區域和頂部的導航欄,可為用戶提供更多可視區域。
          • 在大量數據前面,可為用戶提供沉浸式閱讀體驗,讓用戶更加專注,可減少與表格無關的視覺干擾。
          • 用戶可通過ESC鍵或關閉按鈕隨時退出全屏模式,操作成本低。

          從易讀性和易操作性兩大方面,教你做好表格設計

          易操作性

          1. 篩選

          在大量的表格信息中,如果沒有篩選查找信息簡直猶如大海撈針,而表格跟篩選是不分家的。

          說到表格一定會說到篩選,篩選也就是數據過濾,常在數據量較大的場景中使用,其目的是通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內容。

          對于表格外部篩選,如果有時間會單獨出一篇詳情介紹。這里不展開詳細說。

          篩選根據篩選功能的位置不同,可分為表外篩選和表內篩選。

          • 表外篩選:篩選功能位于表格上方,與表內篩選的不同之處是過濾值可以不限“表格列”的內容、可單次進行多列的交叉篩選。
          • 表內篩選:篩選功能位于表格內,也就是放置在列標簽上的篩選,受“表格列”內容的限制,僅能做單次單列的篩選。

          從易讀性和易操作性兩大方面,教你做好表格設計

          2. 數據選擇

          在信息列數較多的情況下,數據的選擇就尤為重要。當鼠標指針懸停在表格列或行時,給予視覺狀態的變化提示,可以讓用戶捕捉到所在的位置,而不至于視覺上的錯行,能夠降低人的心理壓力和增加掌控感。根據數據選擇功能分為單個選擇和批量選擇。

          單個選擇

          鼠標指針懸停在整行時應與默認態有所區分。當標識選中行或選中行的數量,選中行可操作的命令狀態須同步,明示當前行可操作的命令或反饋當前已選行的數量。

          從易讀性和易操作性兩大方面,教你做好表格設計

          批量選擇

          提供選擇當前頁部分行、選擇全部行、取消選擇全部行三種功能;狀態反饋分為半選態 、未選態、全選態共三種。

          • 當用戶未進行選擇時,表頭的選擇框的狀態是未選態;
          • 當用戶選擇一行數據時,此時表頭的選擇框的狀態切換為半選態,同時反饋此行的數量;
          • 當用戶在表頭勾選“當前頁所有行”時,表頭的選擇框切換成了全選態,且給出了選擇“全部所有行”的操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          3. 數據操作

          對于數據的操作,主要針對表格內部來說。表格操作大體可分為顯性操作和隱形操作。

          顯性操作

          指操作選項顯示在行內,優點是明顯直觀,可以根據列表上的信息做出快速的判斷并且高頻發生的操作。

          適用列數較少的列表。但弊端是信息過載,尤其是列數較多,可展示列數會隨操作數增加而減少,同時誤操作率較高。對于危險系數比較高的操作,也不建議采用這種設計。

          從易讀性和易操作性兩大方面,教你做好表格設計

          隱性操作

          當鼠標懸?;螯c擊時才顯示其他低頻、高危的操作選項,優點是界面簡潔明快,信息密度低,可以幫助頁面突出更加重要的信息,可減輕空間壓力,減少干擾。

          弊端是增加用戶的點擊次數和提高了操作門檻。列數較少的表格不適用隱性操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          4. 數據下載

          為方便用戶對數據進行再次整合分析、統計分析等,可提供數據下載功能及多種下載格式。

          從易讀性和易操作性兩大方面,教你做好表格設計

          5. 空表

          對于B端中后臺來說,表格顯示最多就是兩種情況:一種就是表格有數據,這種最容易解決,有數據就顯示相應數據;還有一種表格是沒有數據,也就是空表狀態,這也是讓很多設計師容易忽略掉的頁面。

          空表分兩種:可創建和純展示

          可創建

          是用戶有創建訴求,數據是由用戶或系統產生的,可創建分兩種:

          • 比較輕量的方式,是直接示意用戶創建數據,無須給出表格樣式。
          • 在表格的空白內容處加入創建的快捷入口,引導用戶新建。

          從易讀性和易操作性兩大方面,教你做好表格設計

          純展示

          沒有創建訴求的,數據是系統產生的,不是由用戶創建的,直接告之暫無數據。

          從易讀性和易操作性兩大方面,教你做好表格設計

          寫在最后

          看上去平淡無奇的數據表格,其實是非常重要的,通過合理的組織架構和呈現方式,使原本枯燥的數據呈現出生命力,這是一件很神奇的事。

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

          文章來源:優設  作者:WOWdesign


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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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