<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端的用戶體驗?它與C端的用戶體驗有何不同?作為一名過去5年多主要從事B端IT產品的設計師,在這里給大家講述一些我的想法。

          首先,B端產品通常有2種類型:企業內部產品(Internal Solutions)和企業對企業的服務產品(B2B)

          企業內部產品的用戶體驗設計有一些獨特性:

           

          你的工作(可能)永遠與你的作品集無緣

          很遺憾,幾乎所有企業內部產品或項目都被嚴格的保密協議(NDA)保護著。

          絕大多B端項目都是為特定用戶提供的專門內部流程。這意味著除了那些每天盯著它用的用戶,其他任何人都可能不會看到你的設計。即使你設法獲得了將其放入自己作品集的權限,也需要抹掉所有敏感的數據才行。

          不過幸運的是,大多數有足夠能力來構建自己的定制IT解決方案的公司通常規模很大,而且它們的品牌可能帶有足夠的“影響力”,這樣,項目身價得以抬高,也能讓設計師進入面試的下一步流程。

           

          測試對象雖然意愿很高,但總是很忙

          設計企業內部所用產品的優點:你的未來用戶將會是你的同事們。因此,在進行可用性研究時,你無需擔憂任何層面的法律問題。另外,由于大多數內部項目都是為了優化和改進現有的工作流程,你的用戶往往會非常愿意配合你的調研工作。因為設計不當的產品讓他們的工作飽受折磨,因此盡早獲得反饋對他們來說是最有利的。

          但這其中的弊端是,由于你的同事們需要平衡全職工作,你很可能無法占用他們的寶貴時間。如果你能解決這個問題,他們通常會提供比您預期更多的反饋。

           

           

          關于B2B的一些潛規則

          您可能無法(完全)滿足最終用戶

          對于C端產品,如果太丑或不好用,消費者可以拒絕使用。而B端產品即使學習成本比較高,但企業仍然可以“命令”所有員工學習這些用于開展業務的專用軟件。

          B2B產品最終將出售給業務決策者,然后再推給(最終)用戶。他們更關心的是量化提升效率(efficiency)和安全性(security)同時預防錯誤(preventing errors)。大多數組織都在尋找一種解決方案來替代和/或優化現有流程。

          這并不是說企業軟件不應以用戶友好為目標,但通常情況下,只要能夠實現某些被企業視為至關重要的目標,其他能省則省。對底線(bottom line)的影響有時會成為最重要的因素。

          全球各大企業的用戶體驗設計領導者仍在爭奪一席之地,以證明優質設計的價值。不幸的是,許多企業的用戶體驗設計師只能在滿足業務目標、技術要求和用戶需求之間無奈徘徊。

          像在大多數項目中一樣,在企業領域里,如果可以證明更好的用戶體驗可以量化地提升生產率,比如可以節省金錢,這樣你就有了一個絕佳的機會和挑戰。

           

          被“鯨魚用戶”左右

          如果你在B2B領域工作,可能會很熟悉“鯨魚用戶(whales)”的概念。通常,他們是帶給我們最多收入的客戶,因此在某個特定產品的路線圖中擁有極大的影響力。由于較少的鯨魚用戶簡化了需求收集和確認過程,有時你的工作會非常順暢,但不幸的是,這也可能導致你忽視掉很大一部分用戶群體的意見。

          我們見過諸多“被需要”的功能看起來并不適合大多數工作流程的案例(因為這是鯨魚用戶的特性)。通常,決策只是為了“去執行”,因為銷售團隊已經在下一個版本中承諾了這一點,而這個核心客戶占產品收入的40%。這通常會使得產品對于其他用戶而言就有些隨機且不合邏輯了。

          通常而言,在設計師進入管理層之前,他們很難影響到銷售團隊等強大的利益相關者的決策。潛在的利益沖突無疑是需要整個設計團隊共同去面對的,大家需要平衡產品的長期愿景和立竿見影的“快速制勝”二者之間的沖突,以便為產品提供可拓展的設計和構建道路。

           

          企業總是在舊版系統上運行

          幾乎所有財富500強的公司都是通過并購而成長為龐然大物的。

          每一次的并購,都會將一個完全不同的系統和工作流程修補到現有的系統和工作流程中。很多開發于90年代的軟件仍在諸多大型公司中運行。盡管從概念上看,“整合一切(consolidate everything)”似乎很容易,但是協調數據庫和系統的過程著實很繁瑣,且需要足夠的時間。

          B端用戶體驗的大部分工作是將用戶從一套舊版(有時是手動)的工作流程中解放出來的艱巨工作。這涉及到對用戶目標及多個系統的深入了解,需要我們列出規劃,識別冗余和協同效應,然后將其與邊緣案例相結合,以檢驗它產出的結果是否與當前操作模式的產出一致(如果不能優化的話)。

          盡管過程并非總是如此艱難,B端軟件依舊比C端復雜得多,因為即使其概念是“從0開始做新系統”,其數據還是全部來自于一堆與之配套的舊系統。在系統級別上思考流程、提出正確的問題并有效記錄文檔的能力是此類項目中最有用的技能。

          我不是開發人員,所以我不知道我從Google里找的這張圖片是否是能夠準確展示典型的后端體系結構。

          我所知道的是,對于每個項目來說,開發人員都會創建一個外觀相似的圖表,該圖表展示了數據的來源和去向,它非常復雜,并且在提取,存儲和推送數據時可能受到一系列限制。

           

          條款和規則

          大多數企業或組織需要遵循一套嚴格的政策法規,并且通常受到各種管理要求的約束。

          常見的例子包括:法律/隱私要求(例如GDPR),國際化要求(例如日期格式,語言),無障礙(例如WCAG&ARIA),安全性等等。

          這些規則中的每一條都來自于某領域的專家、某類別的檢查清單(checklist)抑或是一系列更為模糊情景下的最佳實踐(這些實踐基于特定的方案和用例)。C端APP監管日漸常規化,同時,由于諸多企業或組織掌握的敏感數據極具貨幣價值,其受到的監管和審查也在不斷增加。

          當然,這個問題的答案顯而易見,你的確切問題是存在第三方解決方案的,但是由于某些規則或規定,你可能根本無法使用它。

          由于必須滿足很多這樣或那樣的標準,對于用戶來說,最終的設計往往不太理想,雖然乍一看可能并不明顯,但這也是歷史上許多政府軟件的設計看起來很蠢的原因之一。

           

          慢慢改進

          與上面的觀點類似,B端產品用戶的獨特之處在于他們對變化的抗拒心理。這意味著你需要認真思考工作流程改變后的結果,諸如使用不同的顏色,或是調整頁面內某個按鈕的位置等簡單變化。

          我們甚至還沒有談及信息架構。當你開始做信息架構時,卡片分類研究可能會告訴我們現有的導航設計是完全錯誤的,或是導航里的某些分類實際上應該嵌套到其他地方。不過你很快就會發現,當實際執行這些變化時,你將面臨巨大壓力。

          知道何時依賴自己的研究和專業知識,何時推進,何時放慢步伐是很關鍵的,這樣你才可以避免疏遠過多的用戶。畢竟對于這些用戶來說,過去幾年的工作流程已經根深蒂固,他們需要時間、資源和指導來學習或重新學習這些系統的使用。

          盡管他們可能會拒絕改變,但這絕對不代表我們作為UX專業人士就無法引領他們擁抱變化,我們要做的便是了解他們的痛點并在設計時時刻考慮到用戶的最大利益。

           

          信息密度

          許多舊版的B端app產品都有一個共同點,那就是它們的信息密度非常高。

          理想的解決方案也許是隱藏所有不必要的信息,僅顯示剛需的信息,但是“隱藏掉錯誤內容”的風險可能非常巨大,以致于不得不將其保留在不斷增加的的實體屏幕上。

          這就容易導致打包的屏幕設計極大增加了用戶的認知負擔。而這些負擔之所以被用戶“接受”,就是因為他們必須且只能“學習”如何使用該軟件來完成工作任務。

          此外,對于許多管理或監控類的產品,用并別模式查看信息進行比較和參考是非常重要的。復雜的非線性(Complex non-linear)的工作流使得界面設計更具挑戰性,因為許多選項都需要既可隨時訪問又不能妨礙其他操作。

          有個很好的例子:為什么Bloomberg(上圖)的UI看起來比Robinhood(下圖)復雜1000倍?

          結論便是,B端產品的界面里,需要犧牲留白空間以展示更多信息的情況并不少見,因為用戶經常需要查看更多信息以便完成更復雜的任務。

           

          你的機遇

          隨著公司或組織越來越依賴技術,B端產品的用戶體驗設計將成為許多公司的主要競爭優勢。

          如果你具有擁抱復雜性、平衡多個利益相關方觀點,并在約束內進行創新的能力,你便能輕而易舉的殺入B端軟件設計領域。

          隨著機器學習等諸多振奮人心的新技術出現,各種業務會帶著其龐大而雜亂的數據庫排隊等候。UX將站在如何產生有價值的見解的最前沿,以便弄清用戶想要從這些數據中獲取什么以及如何對其進行操作和訪問。

          雖然在很長一段時間里,dribbble(追波)上的精美視覺設計仍將占有一席之地,但更繁重的任務還會落在那些不起眼的B端設計師身上:比如設計電子表格、數據集、草圖原型、投入調查以及數小時與用戶和利益相關者的交談和測試。

          最終出現在用戶面前的內容可能并不完全整潔和簡單,但請你相信,在成為備受矚目的明星B端產品前,其每一處基準點都經過了UX設計師的嚴格審查。我們的用戶已經全力以赴地使用這些產品努力工作,我們的產品也通過清除一些障礙來減輕用戶的負擔,這已經很不錯了。

          翻譯:April.H  審校:戴貓子 |   UXRen翻譯組 #366譯文
          作者:Yichen He
          原文標題:《Designing for enterprise vs. designing for consumers》

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

          高精地圖開啟量產博弈

          資深UI設計者

          高精地圖是自動駕駛的必要支撐,高精地圖數據的創建、使用、更新與分享可能會帶來全新的商業模式。本文作者梳理了高精地圖的行業發展情況以及當前存在的問題,并對其發展前景進行了展望,一起來看看~

          乘著自動駕駛的東風,國內高精地圖行業逐漸進入發展的快車道。在L3級別自動駕駛技術的推動下,高精地圖技術在無人駕駛位置感知、路徑規劃等方面的應用愈發廣泛。

          隨著高精地圖行業的快速發展,布局該領域的企業,都想要通過規?;慨a來爭奪市場。在此背景下,高精地圖市場的量產博弈也愈演愈烈。

          01 高精地圖黃金發展期來臨

          自2013年BAT開啟地圖大戰之后,國內數字地圖產業就開始逐步興起。近幾年AI、大數據、衛星定位、自動駕駛等技術的爆發,更讓高精地圖在數字地圖市場中的主流地位愈加凸顯。

          比如在市場方面,2020年智能汽車行業產銷量的暴漲,進一步打開了高精地圖的市場需求。例如,在L3級別及更高級別的自動駕駛技術應用中,高精地圖具備的環境信息數字化能力,可以將高速路等場景的地圖信息直接傳達給智能汽車,實現部分替代激光雷達的作用,能夠極大地節省自動駕駛技術的應用成本,進而推動自動駕駛的商業化落地。

          在技術應用方面,衛星定位系統的進步,也為高精地圖行業發展提供了強大動力。近幾年來,隨著格洛納斯、GPS、北斗等定位系統技術不斷升級進步,目前民用導航誤差直接降低至10m以下,這為高精地圖的發展提供了底層技術支持。

          此外,AI、5G、大數據技術的進步,也從數據制作等方面提升了精度地圖的精準度。這種情況下,高精度導航地圖就成了業內各方企業擴展市場的角逐焦點。

          在此背景下,國內高精地圖市場需求不斷增長,市場規模也在不斷擴大。據中信證券研究部數據顯示,2020年全球高精地圖市場規模將會達到21.15億元,預計2030年全球市場規模將超過200億美元,未來增長潛力巨大。

          巨大的市場潛力,很快便吸引了一批新創企業入場,和BAT等巨頭競爭。而在這些新創企業入場后,國內高精地圖行業的量產博弈也開始升級。

          02 開啟量產博弈

          在國內高精地圖市場爭奪戰中,量產是各家企業“搶灘”高精地圖的關鍵。自百度拉開高精地圖免費戰的帷幕后,行業對高精地圖規?;男枨笥悠惹?。

          隨著免費成為高精地圖行業主題,業內企業被迫通過擴展其他商業模式來實現盈利。不過,對于行業量產的布局,早期入場的BAT、寬凳等初創企業,則選擇了截然不同的模式。

          具體來看,BAT在高精地圖數據收集中,采取了集中制圖的量產模式。比如百度采取的“激光雷達+高精度地圖+人工智能控制系統”的路線,就是使用搭載激光雷達、IMU、GNSS等設備的專業采集車,將環境信息轉化為地圖數據,阿里、騰訊也基本沿用了這種制圖模式。

          而極奧、寬凳等初創企業,則采取了眾包制圖的模式。這種模式是制圖企業通過和整車廠等汽車相關行業合作,借助這些汽車的攝像頭、激光雷達等設備,將地圖數據上傳至云端,然后通過大數據技術解析并完成地圖的制作。

          對比來看,這兩種制圖模式各有優劣。BAT采取的集中制圖模式,在數據精度、性方面表現更佳,但其制圖成本極高,僅一輛基礎采集車的成本就達到了1000萬元,需要極大的資金支持。而初創企業采取的眾包制圖模式,雖然有周期短、靈活性高、成本相對較低等優勢,但也存在數據亂、精度差等不足。

          制圖模式之間的差異,給制圖企業在市場的發展帶來了不同的影響。不過,在行業整體處于發展階段的情況下,規?;琅f是各家企業需要共同面對的難題。

          03 規?;⒉惠p松

          目前制圖企業通過小規模制圖的方式生成局部高精地圖,仍是業內主流的制圖方式。但這種制圖模式,在實際應用中卻面臨多方面的問題。

          第一,制圖效率問題。在自動駕駛落地過程中,數以千萬計的道路測繪,往往需要耗費制圖企業極高的成本。而在當前分米級地圖的測繪車,每天能完成500公里測繪路程,而厘米級地圖測繪車,每天僅能完成100公里的道路測繪,這意味著制圖企業想要迅速擴展其測繪地圖規模,必然會花費難以估量的時間和資金成本。

          第二,場景應用問題。在汽車實際行駛過程中,障礙物遮擋、網絡通信不穩定等不利狀況,都會產生衛星定位誤差的問題,使地圖導航出現錯誤。而在路況復雜的情況下,這種誤差會對汽車的正常行駛則會產生更大影響,極大地阻礙了高精地圖的應用落地。

          第三,更新問題。在車載高精度地圖使用中,更新頁是至關重要的一環。實際行車過程中,道路的情況復雜多變,并且存在不少意外狀況,而這就需要高精地圖做到實時更新,才能保障行車的效率和安全。但在實際應用中,高精地圖卻常難以實現及時更新。

          由于這些問題的阻礙,使得國內高精地圖產業的規?;l展受到不少限制。不過,面對市場存在的諸多問題,寬凳、高德地圖等企業,也正在通過各自的方式解決這些難題。

          04 離量產還有多遠?

          在自動駕駛行業的推動下,高精地圖在市場的應用愈發廣泛,市場潛力也在不斷增長。這種背景下,各家企業推進行業規模化就愈加迫切。

          而對于行業規?;媾R的效率、更新等問題,BAT、寬凳、極奧等企業也正在積極應對。比如資金實力較強的BAT,也在通過眾包制圖的模式提升制圖效率。目前阿里旗下的高德地圖,已經實現了由行業車輛、公眾車輛進行數據采集的采集方式,這樣的采集方式不僅能夠提升高德地圖拓展市場的速度,還能緩解高精地圖因更新延遲帶來的問題。

          而采取眾包制圖模式的初創企業,則通過引入專業采集車、大數據技術應用,來解決數據精度問題。一方面,行業內的寬凳等新創企業,也開始建立自己的專業采集車隊,來提升制圖數據精度。

          另一方面,新創企業也開始通過AI、大數據技術,突破眾包模式的數據精度瓶頸。比如中海庭常務副總經理羅躍軍就曾表示,通過高精度傳感器技術、數據挖掘技術、AI等技術手段,能夠解決眾包模式下數據精度存在的很多問題。據悉,目前中海庭已經通過AI技術應用使其地圖精度得到了明顯提升,并正在以此破解高精地圖量產難的問題。

          由此可見,高精地圖量產的這道坎,也并非不可跨越。而在這個問題得到解決后,國內自動駕駛行業也將會因此受益,高精地圖行業也有望走上一個更高的臺階。不過,從高精地圖行業目前的發展現狀來看,行業要想實現真正的規?;?,仍需要很長的一段路要走。


          文章來源:人人都是產品經理  作者:韭菜財經

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

          服務設計概述及國內外案例分析

          資深UI設計者


          我們常說,現在是體驗至上的時代,用戶對產品的使用不再是單純的需求滿足,更要獲得滿意的體驗。服務設計的發展為我們改善用戶的體驗提供了新的思路,從本質出發,任何產品都是在提供某種服務,服務的質量從根本上決定了用戶的體驗。



          什么是服務設計


          服務設計一直在我們的生活中,我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構31 Volts是這樣描述服務設計的:“如果有兩家緊挨著的咖啡店,出售同樣價格的咖啡時,服務設計是讓你走進其中一家而不是另一家的原因?!边@個描述很生動,同時也說明了服務設計的作用。


          其實服務設計的定義還有很多,行業內不同的專家和學者都有自己的理解和解讀,不管定義如何,重要的是服務設計的思維方式,可以幫助我們從全局改善服務體驗。




          服務設計的原則及案例說明


          2010年在《This is Service Design Thinking》一書中,作者首次提出了5個服務設計基本原則,這些原則之后也被廣泛使用,但隨著服務設計的不斷發展,其中的一些原則也需要重新去審視和思考,因此在2017年作者將其更新修訂為6項。


          a.以人為中心(Human-centered)


          以人為中心的設計理念在產品設計、交互設計等領域已經得到了廣泛的應用,服務設計當然也沒有例外,以人為中心就是要站在用戶的角度上看待和思考問題,考慮所有被服務影響的人。


          在日本,農產品市場存在這樣一個問題,農產品批發商無法及時從種植者處了解農產品的相關狀況、收獲量等信息,因此他們也就無法與要購買農產品的人進行談判,這樣造成的結果可能是糧食的浪費。日本的一家軟件公司NJC(Nippon Jimuki Co. Ltd.)發現了這一問題,他們希望利用自身能力(軟件方面的優勢)去解決這一問題,因此將目標設定為:創建一個可以提供有用數據而又不給農民或農產品批發商帶來負擔的系統。


          最終的產出的結果是Fudoloop這個應用程序,通過Fudoloop,批發商可以提前一天從農民那里收到信息,進而協調買家的各種要求。Fudoloop的使用者分為兩種,一種是需要更新農產品信息的農民,一種是從Fudoloop上獲取農產品信息的批發商,Fudoloop分別為兩種用戶進行了設計。

          圖片來源:Fudoloop



          在設計Fudoloop時存在這樣一個問題,農產品市場中的相關從業人員普遍年齡較大、受教育程度低、軟件使用經驗很少,面對這樣的用戶,顯然通常的軟件設計并不符合他們的需求,因此Fudoloop的界面設計非常簡單且信息突出,從事農產品相關工作的人員可以輕松的使用Fudoloop完成農產品信息的更新,而不會因為學習產生很大的壓力。Fudoloop還在大型農業貿易展覽會邀請了一些行業內的人員和用戶參與到了產品的體驗中,并收集了他們反饋的建議,以改善產品。

          圖片來源:IDEO


          NJC在設計Fudoloop時充分堅持了以人為中心的原則,考慮到服務涉及的不同用戶,并根據用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的:“當簡單、以人為本的思想匯聚在一起時,創新就會發生”。



          b.協作(Collaborative)


          這條原則說的是,不同背景和職能的利益相關者應該參與到服務設計流程中,收集多方訴求,發現不同看待問題的角度,才會更好的解決問題。


          在美國舊金山,有一所學校和Revolution Foods這家餐飲公司合作,為學校內的人員提供豐富的、營養的午餐,但是實際來餐廳就餐的人數與預期相差很大,數據顯示,有72%可以承擔起午餐費用的人并沒有來到食堂吃午餐。經過調查發現其中的原因,很多學生等校內人員并不愿意排長隊或者匆忙的吃完午餐,因此他們選擇了去校外享受午餐的時間。


          為了改善這種情況,這所學校請來了全球頂尖的設計咨詢公司IDEO,他們與1300多名學生、父母、營養人員、董事會專員、校長、老師和社區團體等利益相關者一起工作,重新去設計了學校的午餐,并且制定了針對三種年齡的就餐體驗的建議,完成了飲食、就餐空間、新技術使用等多方面的優化和設計。

          圖片來源:IDEO


          最終,學校完美的改善了午餐服務的體驗,這其中包含了所有利益相關者的想法和工作,因此設計成果也被人們所接受,越來越多的校內人員會選擇學校的午餐,之后,這種設計模式也被舊金山的許多學校采納和推出。


          所以,服務中涉及到的利益相關者有很多,多收集他們的想法與建議,甚至讓他們參與到服務設計中去,問題會得到更好的解決。


          c.迭代(Iterative)


          迭代是一個不斷接受反饋不斷優化的過程,如此重復執行,讓產品變得越來越好。服務設計也需要迭代,不要避免犯錯誤,而是從錯誤中學習和改變,同時也要不斷的收集各方的反饋信息,這些信息是服務進行迭代的核心所在。隨著互聯網的發展,迭代的思維早已滲透到每一個互聯網產品,此處就不再過多解釋。


          d.有序(Sequential)


          服務設計應該是一系列相互關聯的活動,并且是按照順序進行的,精準的把控服務每一個環節的節奏,用戶才能獲得更愉悅的體驗。


          以外賣為例,用戶的使用過程包含訂外賣時的商家選擇到下單過程,下單后配送外賣,用戶收到外賣和用餐后這幾個過程,而服務的提供者主要包括商家、平臺和外賣小哥,為了保證用戶能夠獲得流暢的服務體驗,需要各個服務提供者在服務展開的不同環節推出優質的服務,如下圖。


          在訂外賣時,平臺會為用戶推出“超值優惠”“限時秒殺”等優惠活動,商家推薦、訂單歷史等商家選擇渠道,以及不同的篩選條件,以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后,進入到選擇商品并下單的過程,一方面,商家會推出優惠的活動、推薦菜品等,另一方面,平臺也會給出自己的優惠。


          下單后,用戶面臨的是一個配送過程中的等待時間,為了緩解用戶在等待過程中的焦慮情緒,平臺會及時更新和推送外賣小哥的狀態,如到達商家、取餐中、與用戶的距離等,同時會給出用戶預期的送達時間,若超過預期時間用戶還可進行催單,商家可以聯系用戶表達歉意,整個過程用戶對配送狀態是可視的。


          用戶收到外賣時首先會與外賣小哥接觸,包括與外賣小哥提前確定取餐的時間地點,取外賣時的短暫對話等,這些都會影響用戶對服務的印象,因此外賣小哥需要保證服務態度的禮貌和友好。收到外賣后,食品包裝首先給到了用戶對商家的第一印象,然后是餐品是否符合用戶預期,讓用戶滿意。


          在用戶就餐后,首先平臺要提供給用戶評價的功能,用戶可以分享自己就餐的感受,商家也可以通過平臺為用戶提供更多的優惠,引導用戶能夠再次回到商家訂餐。


          從外賣的案例中我們可以看到,服務是一個過程,是需要有序展開的,每一個環節的體驗都會影響到用戶對服務的印象,在恰當的環節提供恰當的優質服務,才能確保用戶的整體體驗。


          e.真實(Real)


          服務本質上是無形的,應該用“物理元素”來可視化,這樣可以用戶的服務記憶,增強用戶對他們所接受服務的感知。


          同樣以上述外賣為例,商家為用戶提供餐食,這部分是借助美團這個平臺和外賣小哥來完成的,用戶和商家的接觸僅僅是送達的餐食,因此無法通過像到店體驗一樣,讓用戶感知到商家提供的更多服務。


          為了讓服務變得更加“有形化”,商家就需要花費更多的心思,如圖,商家為了增強用戶對服務的感知,一般會在在包裝上花費很多功夫,精致的包裝讓商家的形象更好且更加值得信任,一些有趣的包裝還可能讓用戶的心情變得愉悅。另外,商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務,通過這樣的手段,即使用戶并沒有真的接觸到商家,體驗也會變得很好,商家的形象也會提升很多。

          圖片來源:古田路9號


          f.整體(Holistic)


          整體就是要著眼于整個用戶旅程,考慮用戶與服務的每個觸點(觸點的概念后文會進行介紹),并兼顧多方利益相關者的需求。也就是所謂的全方位服務體驗,考慮服務環境的方方面面,沒有任何遺漏。這個原則實施起來并不是那么簡單,從整體角度思考問題會使問題變得復雜。不過在服務設計中,是有一些方法和工具是可以幫助我們完成整體思考的,比如服務藍圖。




          服務設計的常用方法-服務藍圖


          a.服務藍圖簡介


          服務藍圖是一張圖表,通過列出在每個階段發生的、不同角色執行的所有活動,顯示了服務的整個過程。如圖所示是一個服務藍圖的簡單示例,垂直方向上展示服務中的利益相關者,水平方向上為用戶的歷程,也就是用戶經歷的不同階段。在服務藍圖中有兩條線,一條是可見線(line of visibility),可見線上方為用戶可與之交互的服務,也可以稱之為“前臺”,可見線下方代表的是后臺進程,用戶無法看到但需要給用戶提供支持,后臺進程還可以存在內部交互線,用來表示內部人員的聯系。用戶與前臺服務之間存在另外一條交互線(line of interaction),用來表示用戶與服務之間的接觸。

          圖片來源:Service Design Tools


          明確了服務藍圖的大致框架之后,還需要注意服務藍圖中一個非常重要的概念——觸點。觸點就是在服務的各階段,用戶和產品、服務、后臺產生的接觸,每個觸點也是服務可以進行展開和優化的方向。


          b.Uber服務藍圖繪制


          為了明確服務藍圖的繪制和分析過程,下面將結合下圖所示的Uber服務藍圖進行說明。

          圖片來源:Medium


          (1) 明確用戶歷程


          用戶使用Uber打車服務主要可以簡單分為以下三個階段:注冊(下載APP - 新用戶注冊),乘車階段(下單 - 等待車輛到達 - 乘車 - 到達目的地)、乘車后(付款 - 評價)。


          (2) 明確利益相關者


          用戶與之產生互動的前臺服務人員為司機,而設計師、開發人員、項目經理等負責后臺的服務支持,以保證Uber按照預期的目標運作。


          (3) 明確前后臺活動


          一方面,需要明確和用戶接觸的前臺活動有哪些,Uber打車服務中和用戶產生接觸的主要為司機及車輛,因此需要確保司機是合格的、車輛內部的環境是干凈舒適的,同時司機在與用戶接觸的過程中需要提供禮貌的問候和交流,滿足用戶在乘車過程中的要求,完成乘車費用的收取,提醒用戶離開前帶好隨身物品,以及評價乘客等。


          另一方面,用戶對后臺的流程可能并不了解,但需要明確哪些后臺活動和支持會對用戶產生影響。比如在用戶下單時能夠自動獲取用戶定位,告知用戶預期的時間和價格,以及發送給用戶司機的狀態等。


          在明確前后臺活動時,我們可以以用戶歷程為線,分步驟進行分析,確保每個環節中涉及到的前后臺活動沒有被遺漏。


          (4)明確關鍵觸點


          在服務藍圖中我們可以標注用戶與服務的主要接觸點,針對觸點進行設計是提升服務體驗的一個重要和有效的手段。


          在Uber打車服務中還有一些需要注意的觸點,一是等待時間,這包括用戶發起乘車請求后、付款時以及評價司機時,等待時間是造成用戶體驗較差的一個原因,因此需要注意標注出這些觸點,并想辦法優化,在服務設計中需要注意相關環節的應盡量簡單,減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點,如司機態度不友好、乘客下車時忘記帶隨身物品等,可能造成失敗的服務體驗的觸點應該精心地去設計,避免這樣的情況發生。


          通過以上過程我們完成了Uber服務藍圖的繪制,從中可以獲取到Uber打車服務的整體概貌及其相互關系。



          ///


          結語


          服務設計的思維能夠幫助我們從全局的角度去審視和思考,發現更多改善服務的可能性,從而為用戶提供更好的體驗。因此對于產品和設計等相關人員來說,不能僅僅把目光放在產品本身,而是要從服務的角度去正確看待產品和用戶的關系,以用戶為中心,找到用戶與產品的每一個接觸點來進行服務設計,這樣才能保證用戶在整個流程中都能得到好的體驗。


          文章來源:站酷  作者:百度MEUX

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

          設計與思考-高級體驗設計師的思維養成

          周周

          2021年的第一篇萬字長文,文章主題是一次偶然的反思中總結出的設計師思維進階的過程,詳細講述了我在兩年間從一名應屆非科班設計師成長為一名高級體驗設計師的思維進階過程。與一篇UI教程、一篇交互分析的文章不同,這篇文章希望能夠從底層的思維層面幫助你明確自己的狀態,并提供一個快速進階的思路,所謂授人以魚不如授人與魚正是這個道理。

          一:前言:靈感與反思 


          靈感始末

          最初,在一個偶然的機會讀到一本規范相關的書籍,然后我開始反思自己是否有積累成系統的設計規范、設計技能樹,為了驗證這一點,我便以設計一個彈窗為例子開始模擬演繹,演繹完畢后進一步思考,我是如何積累這些方法論或思維模型的?正因此發現了我作為非科班設計師,從最初開始自學設計到如今晉升到高級體驗設計師的思考方式的轉變。進一步從現象中探究原因,于是輸出了本文。

          如何設計一個彈窗?  

          在做任何需求的時候,甚至是一個極小的需求,你有沒有持續思考過?有沒有進一步思考過?又有沒有刻意、主動完善設計思路,積累思考模型?如果沒有,你可以從接下來這個思考案例中反思一些東西。

          設計彈窗時,我畫的第一個元素——彈窗的矩形背景時,是如何思考的,考慮了哪些元素。進一步設計我還要考慮哪些因素?下面是我的瞬時思考能整理的有效信息。

          方法1:根據彈窗內容進行界定(根據內容極限情況,及你的設計系統定義的間距來控制整個彈窗的尺寸)

          方法2:根據固定比例,主要適用于移動端,例如3比4的矩形比例較美觀,計算彈窗面積與屏幕整體面積的比例、計算留白與彈窗的比例、參考黃金比例Golden Ratio、白銀比例Silver Ratio等。 

          方法3:根據你的系統定義的柵格進行界定,如小彈窗使用1/4,1/3,1/2,大彈窗使用1/2,2/3,3/4柵格。

          方法4:柵格+比例,方法3界定寬度,方法2界定高度 。

           

          更上層規則


          設計延展性:考慮彈窗內的內容發生變化時的自適應情況,內容過多的極限情況/內容過少的極限情況。 自適應的規則,彈窗窗口尺寸的延展方式(橫向拓展/縱向拓展)


          交互:彈窗又叫模態視圖,其通過遮罩突出彈窗視區,在蒙層遮罩上方的最高層,根據通用規則,大部分情況我們不應當在彈窗上再次疊加界面層。若彈窗場景下有新的縱深層,如下一級操作或內容界面,此時如何處理?

          如下方,PC端google drive,就在結構上使用類平級跳躍的形式來“借面板”解決新的操作需求。

          而再下方的IOS使用的bottom sheet則采用了完全不同的解決方案,表面上似乎是違背了彈窗模態上重復疊加的規則,但在移動端一屏僅僅解決一個問題、完成一個任務的語境下,反而更加合理。(而這些成熟的模式、范式,或者說設計單元,正是在主動思考和被動思考階段設計師需要積累的設計經驗,它們將作為設計師知識庫中的組成部分,指導設計并進一步提效和促使設計合規)

          常規易用性:如退出機制——關閉的解決方案,通過關閉按鈕退出,那關閉按鈕尺寸在當前彈窗尺寸下定義為多少合適,視覺尺寸與hover實際可點擊尺寸分別是多少?PC端是否只能使用關閉按鈕退出?點擊空白區域退出是否更,如下方的dribble,點擊上方黑色空白區域即可退出,而無相關經驗的用戶也可以在右上角看到關閉icon的暗示線索。

          場景與業務背景:詳細了解當前需求的業務背景與場景,進一步概覽整體業務背景,即兼顧其他可能性的業務場景。如我設計的B端系統包括辦公室類工作場景,同時也包括站立、遠距離觀看屏幕的工作場景,這將涉及到信息能否直觀清晰的被傳達、獲取。當前需求的業務是主流場景?可向上向下兼顧大部分同系統的其他業務場景?還是無法兼顧而需要同時列出更多場景來制定通用規則?以我所設計的B端系統為例,較高頻的出現在彈窗下存在下一級操作或展示頁面的場景,因此我考慮在工作空閑時輸出一份彈窗場景下有縱深的下一級信息或操作的解決方案,并將其作為產品相同場景的應用解決方案。

          視覺合規性:保證主要信息的對比度,清晰度,保證所有信息傳遞和展示時的節奏和梯度優先級。從字號到字重再到段落行高間距等,從彈窗中ICON的樣式選擇,到Icon語義清晰度等。

          ...

          如果進一步思考,其實可以思考more and more。你會發現,從基礎的結構涉及的柵格,到基礎的視覺合規性涉及到的字體設計、icon設計。再到交互涉及到的典型設計單元,通用交互模型范式等,在設計一項內容前,我們有很多的思考空間,或者稱之為思考機會點更為合適。將充足的思考納入設計過程后,初期設計時間線被拉長,但長遠來看避免了思慮不足引發的風險與反復更改的成本,合理的設計預測與分析則向上向下兼容未來場景,提高設計輸出物的通用性與成效,即所謂的磨刀不誤砍柴工。

          那么這樣成熟(我自己其實是偽成熟,還不夠完善和系統)的思考過程,分析過程是如何學習或者說培養的?

          二:設計思考的三個階段

          這其實是我接下來要講的正題,我將設計中的思考分為三個階段,無思考——主動思考——被動思考,這是一個初期線性發展,后期循環迭代的過程。其實我定義這一套思考階段的分級是在短暫的靈感爆發后立即輸出的,來源于我對自己2年間從一個非科班新手到如今高級體驗設計師思考邏輯的發展變化的回顧。我發現其確實有跡可循,在地鐵上很興奮很興奮的頭腦沸騰過程中快速記錄下大綱,到了工位立即記錄并輸出。 


          無思考階段

          大意為,新手設計師,或沒有刻意練習、思考、總結的習慣的設計師,最初由于沒有通用的設計經驗、沒有相關成熟設計模型或組件與設計單元的使用和設計經驗,因此設計一個新內容實際為從0開始,此時設計師可能會單憑直覺 隨意設計,例如設計彈窗就隨便畫一個矩形,然后隨機調整?;蛘呤褂贸墒斓慕M件系統,直接套用,純粹執行。這就是處于 0思考階段,憑直覺設計(注意和直覺性設計區分開,直覺性設計是從用戶的維度定義的,即用戶可以單憑直覺理解設計,這也是我們常說的可供性"affordance"原理)

          主動思考階段

          而主動思考階段的起點是,隨著設計師接觸的工作范圍、工作內容、合作對象的擴大或增加,及接觸同類工種(其他設計師、設計leader)的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。 

          前者會使新手設計師(或沒有有意識的反思、總結沉淀的初中級設計師,或剛剛轉換行業的各等級設計師)逐漸暴露并意識到自己的問題,大概率可能涉及到輸出物質量、規范性、平臺或行業壁壘造成的經驗缺失等。

          后者則是一個對比與發現的過程,即接觸到更優質的輸出物,更合規的輸出過程,更的設計流程、協作流程等等。可能是被動接受的,如leader或同事的分享,及日常工作中為提高團隊整體效率而被灌輸的新的工作方法和進入新公司要強制適應的新的工作流,也可能是主動接受,如發現同事設計到輸出的質量和效率等遠優于自身而自發去了解,學習。

          因此,在主動思考階段,會有一個從發現問題到解決問題的過程,是不是和設計本身的職能很像,而在這個過程中,設計師自身就是被設計的對象,即如何解決自己身上存在的問題?如何使自己變得更完善更優秀?


          你可以回顧下,在你初入行業時,最熱情的接納各種信息、知識、經驗的階段,你當時的狀態是什么樣的?概括來講就是遇到感興趣的內容-發現自己在此間的不足-了解學習并掌握。從基礎的某個視覺效果的實現方式,到某個設計方法論、某個解決典型問題的交互設計等。

          主動思考階段與興趣(對某個領域的衷情)、個人行為習慣(自學習慣,求知與自發研究的習慣)、周邊環境等因素有關。因此核心是與本人、其他個人(同事,設計圈關系人)、團隊相關。某些人天生對未知事物、信息及技能有濃厚的興趣,所以會自發的廣泛接收各種新的信息,并在這個過程中養成思考總結的習慣(比如在下),同理,個人在大學期間,甚至成長過程中有養成良好的自學習慣,有訂立目標并逐步實現的習慣,他們會長期甚至一直處于主動思考階段。另一種情況則是周邊環境,社交關系人對你所產生的主動及被動的影響,如leader布置課題及學習計劃,同事,好友,行業人員的協作共創活動,分享會等。

          所以,主動思考階段應該是優秀設計師需要長期自發維持的一個設計狀態,持續的發現身邊的問題,發現自身的不足,發現新內容新趨勢新動態。并在發現新的內容并與自身能力模型對比的過程中,發現不足并持續思考和輸入信息,反思,輸入,鞏固,沉淀。是一個升級打怪的過程更是一個知識資本的原始積累階段,與無思考階段相比,由于它是一個主動,刻意學習的過程,因此積累知識的效率要遠遠高于懵懂狀態的初級設計師。(這應該也能解釋為什么一些沒有進入主動思考階段的設計師,工作四五年卻被一些一兩年的新人設計師趕超)。

          從新人設計師“無思考”階段到主動思考階段關系到一個設計師能否完成初級到中級的進階。主要差別則是輸出物的不確定性(初級)與輸出質量趨于穩定并持續迭代提升(中級)。

          這個思考階段線性過程的第一個門檻,雖然是初中級設計師面臨的門檻,卻是能持續影響設計師整個設計生涯的關鍵轉型點,奇異點。就像先賺它一個億中所謂的一個億啟動資金??邕^這個門檻,設計師會迎來第一個爆發期,中級設計師我的理解是下限清晰,上限無窮。即在主動思考階段,設計師可以將個人設計能力,從技巧到方法推動到一個較高上限的地步,概括定義———擁有在從事行業領域內輸出高質量設計方案的能力。


          如何跨過新手期,從無思考到主動思考?

          刻意練習與學習

          最優解是從興趣到發現,即培養興趣,調動興趣去開展某個內容或者技能的研究學習,并逐步掌握為自身技能樹的一部分。次解則是從目標到強制規劃自我再到研究學習和逐步掌握。以興趣為老師是最易收獲的方法,但確定目標并刻意學習才是大多數人要走的路。完美解則是興趣驅動同時嚴格規劃。在我作為非科班設計師開始自學到工作的早期,每天固定不變的是大量瀏覽作品,大量閱讀文章,大量練習技巧,后面逐漸選擇性瀏覽,選擇性閱讀,選擇性練習。這期間發生了什么?是綜合當前工作場景和設計趨勢等各方條件后的縝密思考所做的決策,也就是一個反思的過程,從發散到收束,以提高在當前工作場景下的個人能力,集中精力在核心能力的提升上。

          也是這種能力使我快速B端轉型C端,使我在上手新軟件Figma后由一個新手使用者快速蛻變為講師、分享輸出者。刻意練習和學習的能力與傾向,應當在主動思考階段養成為習慣。

          What——How——Why

          從淺層思考到深層思考,最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美,積累設計相關的表層信息。而當你思考How時,你將掌握如何實現該效果的能力。再進一步,當你開始思考Why時,你終于探尋到設計的本質,該設計是在遇到了一個什么設計課題、問題的基礎上提出的,解決了什么問題,如何解決的,有沒有更優解?目前的解法能否納入自己的知識庫?

          T型構建能力模型

          T型中縱深為你所對應的領域、行業、業務強關聯的能力。 以UIUX為例,其中又以基礎UI界面輸出能力為例。

          視覺:布局結構、柵格、字體、配色、間距、ICON及插畫繪制、對應平臺尺寸規范...

          交互:信息架構、業務梳理、導航設計、流程設計、原型設計、交互演繹

          業務:當前從事行業、細分領域、細分到業務的理解程度,細分需求的業務背景的理解程度

          橫向為拓展能力,通用能力如經常講的共情能力,溝通能力,協作能力,邏輯思維能力,復盤輸出能力等等。除此之外還有特殊能力,比如UI UX以插畫 ,3D作為特殊能力項。


          關注環境

          在最初定義主動思考階段時,我就講過個人覺醒主動思考的過程中,他人和環境的影響因素十分關鍵,因為這是一個發現不足然后去解決問題的過程。整體環境如整個大的設計團隊,及細分的每個設計組,從小環境到大環境都有相當多的團隊沉淀和個人沉淀可以供你吸收成長。如我們設計團隊定期舉辦的月度會議包含超高質量的分享,公共Drive保存有設計團隊成立來的所有設計輸出積淀。再如你的設計小組的定期分享,以及你身邊擁有個人特長能力的同事們,關注優秀的內容,優秀的解決問題的思路,身邊就是老師,萬物都是書。例如我從C端轉型B端后,在一兩個月內快速融入團隊,期間從不同的同事身上學到了時間管理(正經的)、項目管理、規范體系的制定等特長能力,而我給團隊成員的反饋是智能組件系統的制定方法同時搭建了一套常用智能組件,大大提升了復用界面的設計效率,至少百分五十以上。沒有對應的環境和社會關系人,靠自己悶頭苦學很難有這樣的效果 。


          善用工具

          這里專指記錄,輸出類工具,例如印象筆記。從舊的設計過程中獲得收獲與經驗的核心在于復盤。忌諱對所知和所得模棱兩可,因此需要在記錄,總結的復盤過程中真正鞏固從設計思考和實踐中獲得的反饋,并進一步加深為自身的持續性積淀。沒有復盤過的設計師可能不會意識到,你的每一個需求設計經過一次復盤后都有可能發現新的問題,思慮不足的點或者仍然未解決的痛點等,當然也很可能發現能持續復用的思路、設計模塊等優質資源。

          除了筆記類工具,公開分享甚至私人交流都可以作為復盤工具,在這個過程中你會回顧自己的設計流程和思考過程,并在言辭交鋒間發掘新的機會點。因此當你完成一次自我感覺良好的需求設計乃至小的版本迭代后,嘗試著與身邊的工具人同事溝通,嘗試在設計小組內分享,在籌備分享與交流思路時,對于該需求的設計思路便躍然而紙上了。


          被動思考階段

          被動思考階段有兩個核心特征,這里的被動不是指傾向性,而是指無意識且自動處理信息的狀態。可以理解為游戲中的被動技能。

          第一個特征,即達到在主動思考的基礎上,持續積累和迭代知識庫的信息,然后將設計規范,典型范式,通用經驗思考模型等內化后的階段。

          何謂內化,抓起超燙的茶杯會自動放開手,反應速度不會超過零點幾秒,這就是人自我保護機制的內化,即整個過程已經不需要刻意去思考和醞釀,而是在無意識的過程中自發的做出反應,完成系統的思考并形成一個規范的方案建議。


          與主動思考階段相比,主要差別在于對已有能力的使用熟練度,調用效率,及思考的全局性。

          說的通俗些,遇到一個設計問題時,處于主動思考階段的設計師會在遇到設計問題后,從過往經驗,相似解決問題的思路中篩選,尋找一個合適的解,這些解是零散的,且需要設計師主動去回憶甚至瀏覽歷史文件來搜集。而對于被動思考階段的設計師來講,若是面對一個較為熟悉的設計問題,如一個彈窗設計,此時該設計的解答方案會自然而然的出現在腦海,并且存在多個方案進行對比,并且每個方案都完整全面,從業務的考量到體驗的權衡,再到業務與體驗的相互平衡。方案如何推進,按照經驗會遇到哪些阻力,需要說服哪些利益相關者,案例如何演示,有否有設計還原類風險?如何解決等等。

          因此,處于被動思考階段的設計師能夠自然并的調用個人積累的成體系的技能和經驗以及執行和推進設計的流程,從輸出設計到推動方案落地一氣呵成,宛若天成。在沒有一定思考和實踐經驗積累的情況下,主動思考階段的設計師則可能需要花費成倍的時間在方案探索輸出再到落地的過程上,期間遇到的典型性問題則會一點點被消化并推動設計師向被動型晉升。


          第二個特征則是視野與維度,視野也就是常掛在我們口中的全鏈路視野,維度則指的是看待問題或方案的更高維度。這一特征使用實際案例來說明或許更易于理解,


          案例1微信紅包早期推廣的案例

          微信紅包作為微信的一個核心功能,初期花費大量成本推廣并成為一個現象級“產品”,作為產品設計師,底層的視覺設計師與交互設計師在產品視覺交互邏輯等方面投入較大精力,他們只需要將自己負責的需求完成,輸出達標的基礎方案,可能會聚焦于如何設計紅包樣式更易于理解,如何設計紅包樣式能賦予其可供性,幫助用戶快速理解產品與現實中的紅包的映射關系,在進一步可能要考慮不同年齡階層對紅包樣式的接受度,而交互設計師可能要考慮如何縮短用戶路徑,使紅包開啟的愉悅感能夠最的被用戶觸達。

          而此時產品負責人是如何考慮該紅包功能設計的?答案是通過微信病毒式傳播,的綁定銀行卡,為微信支付業務鋪路。綁卡才是當時該產品設計的核心。這就是維度的差異,同一個產品,不同的崗位不同的身份,不同階段的設計師看到的會是不同的維度視角,更高的維度往往意味著更長遠的考慮,意味著碾壓式的決策。“為支付業務奠基”與“糾結紅包是否要帶花紋”相比,維度視野的差距,高下立判。


          案例2與設計團隊負責人評審 Logo方案


          上圖是該提案的部分PPT,在一次品牌LOGO提案的評審過程中,我花費較多的精力去宣講Logo的品牌理念和故事,分析圖形的演化過程,同時輸出多個方案用于對比。設計負責人一針見血的指出幾個核心問題。

          第一點,在設計過程中不要過早的給圖形設計融入顏色,顏色是第二層信息會干擾設計過程,當然也會干擾需求方的理解過程。一次只闡述一件事情,設計圖形,講解圖形就使用灰度模式。

          第二點,給群體及普通需求方宣講可以使用較多包裝或附上比較詳細的設計思路,而需要給企業級Boss過稿時則切記簡化一切過程,開門見山,直接鋪陳LOGO圖形,對不同利益相關者采用不同的策略。

          第三點,該品牌LOGO的單獨設計輸出物看起來不錯,但需要置于我們跨國的多個產品品牌構成的總的品牌體系中,判斷其品牌一致性等問題,一致的產品品牌效果不僅能闡釋品牌歸屬,同時也能很大程度上降低推廣成本。作為設計師,既要細化到每一像素,又要高屋建瓴從全局層面考慮問題。

          當你收到的反饋或建議都是你從來沒有考慮到的問題和想法時,這有可能就是維度的差異。


          資源3:周陟 《設計師如何解決全過程問題》

          周陟分享的《設計師如何解決全過程問題》是一個全局性與高緯度思考的典型案例。該分享詳細的闡述了設計師如何從產品的底層框架,結合業務的思考,市場趨勢、歷史數據對比分析,定義核心設計問題并探索設計方案的過程。

          其中即有低維度的設計師底層能力方面的闡述,如從產品用戶體驗五個層面的設計思考(戰略層、范圍層、結構層、框架層、視覺層)到具體的可讀性、視覺舒適度等具體的設計問題。更有高緯度的市場銷售趨勢、不同手機廠商間的用戶流失流轉情況、市占率、信任度等業務層思考。從上帝視角,全覽產品各個階段的場景及問題,并在對比分析中聚焦核心問題,探索方案去持續解決。 

          《設計師如何解決全過程問題》資源鏈接


          我們可以用一個超級樸實的方式來闡述主動思考階段和被動思考階段的差異。當一個設計師處于主動思考階段,你可以把他置于他所熟悉的設計領域,他將會輸出高質量的設計物,能夠較好的解決當前遇到的設計問題,體驗問題。

          而一個被動思考階段的設計師,你可以把他置于有一定相關性的各個設計領域(比如互聯網方向的設計不能被置于廣告方向),他會在較短的時間內理解不同領域的特征和需求,并輸出高質量的解決方案,且能夠兼顧各個利益相關者,主動推動產品實現進度,并提前規避各類問題。這其中的差別在于,是否有自己沉淀的一套解決問題的方法和過程,是否將通用設計經驗系統化,是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設計師,還是一名高級體驗設計師,前者限制在一個領域內,后者已然破圈。 


          如何從主動思考階段跨越到被動思考階段

          在體驗設計的領域,主動思考階段的設計師與被動思考階段的設計師,在單純的設計能力上,其實沒有太大的差距,即輸出物本身沒有太大差距。都能夠快速輸出達標的設計方案,解決大部分體驗類問題。那么關鍵差距提現在哪里?


          其一是從設計到落地的總的效率。主動思考階段的設計師在整個設計過程中需要頻繁的遇到問題,并陷入陷阱,然后持續的糾正方案,一步步推進,踩著荊棘摸到最終方案所在的那塊石頭。而被動思考階段的設計師只需要在知識庫中的成熟方案中選擇一條更加應景的路,多個方案已經擺在那里,而設計師只需要去考慮低維到高維的一系列影響因素,從基礎體驗,用戶習慣,再到業務和戰略上的布局,最終選擇全局視野下最正確的方案。

          第二點差距在于可能性,被動思考階段的設計師有精力和能力去思考如何把方案做到超標準,超出需求本身的要求,超出利益相關者的期待(如需求方和開發人員)。我們經常會講行業標準這個詞,作為一個設計方案的基礎判斷標準,但行業標準永遠不是上限。微信的撤回功能,從僅撤回到撤回后可編輯就是一次體驗上的超標方案。

          第三點則是打通上下游的能力,即涉及到上游的需求理解與轉化,詳細的設計項目還會涉及到用研類信息的接受與轉化,下游則涉及到開發還原的質量與效率問題。在有意識的關注設計全流程和生命周期的情況下,被動思考階段的設計師可以更輕松的管理設計并反饋到整個項目的開發周期上。


          想要從主動思考階段跨越到被動思考階段,我總結以下三個建議。

          從輸入到梳理

          首先是核心的底層設計能力方面,表面上是基礎能力與通用能力的的刻意學習鍛煉,而關鍵在于對知識體系的梳理。在我們初入職場逐漸積累設計經驗的過程中,一些典型的設計過程,流程,針對某個領域甚至模塊的典型解決方案,將其拆解匯總然后梳理分類,不論使用印象筆記等筆記產品,還是思維導圖等腦圖類產品,都能夠幫你實現這個目的。


          忍受立即獲得解決方案的誘惑

          其次,在真正開始做項目時,主動思考,刻意將個人知識庫梳理的信息與項目需求進行對照,主動回憶和驗證積累的方案,盡可能多的羅列場景,羅列可能性,不要被第一時間想到的方案所誘惑而止于此。設計師在遇到一個設計問題后,會第一時間想到的方案往往是最普通,未經思考的初步方案,但往往該方案可以一定程度上解決當前的問題。此時設計師需要強制自己從最簡單的方案中脫離,進一步思考,并大量的舉例、演繹,探索更多機會點,調動腦海中更多可能性的方案。每當想要就此停下時,反問自己,我能否做的更好,是否有更好的方案可以解決這個問題。


          視野和維度來源于廣泛閱讀、案例、及復盤

          被動思考階段的設計師橫跨了高級體驗設計師到設計專家這個范圍。抵達這個階段的設計師視野將拓展至整個企業機構,而不局限于設計團隊的個人的視野。除了強大的解決設計問題的能力,相較于普通設計師,他們往往有更高的思考維度,全局性的設計視野,此類中后設計生命周期中的經驗往往需要通過閱讀、項目實踐等多個方面持續輸入,然后復盤并沉淀為自己的經驗。

          因此這要求設計師廣泛的閱讀各類設計項目總結,參考實際案例,并在真實的項目中持續計劃、嘗試、驗證,然后復盤。需要脫離設計師基礎能力層面的視野,更多的關注解決問題的思路與流程,最終掌握的設計思路或能力可以稱之為通用性設計解決能力。 


          當然,上面所講的都是我從個人思考方式的轉變中總結出來的經驗,其目的是分享設計師應該如何思考?不同階段應該聚焦于哪些問題領域才能最大化提升思考方式的進階速度等問題,而不是在講設計師如何從初級進階到高級,進階到體驗專家(非設計師位階的進階)。因為不同企業對不同位階、不同專供方向的設計師有不同的具體要求,比如設計leader可能更傾向于業務的理解與把控度,設計推進,研發流程中不同團隊成員間的溝通合作等能力 。


          如果有關于此的疑問,我只能以我的理解解答,不論是什么位置的設計師,判斷其位置層次的標準必然是由上層的企業來制定的,而企業制定規則的出發點源于利益本身,換言之,你能獲得的位置和你能夠為團隊和企業貢獻的利益正相關,所以我們很容易理解,設計師的職業后期或者用于解決超級復雜的設計問題, 以對應的價值映襯其收入,偏具體設計能力層面,或者用于承擔全局性企業需求,如帶領設計團隊支撐某個業務線,偏業務理解和統籌方面。


          從線性流程到循環往復的迭代過程

          我們回顧一個努力的設計打工仔的職業生涯,首先,一個新手設計師從純粹執行的無思考階段,進階到主動思考階段,當他的基礎設計能力不斷進階后,開始拓展視野,思考業務,并在大量的項目鍛煉中形成自己的一套成熟的設計方法論,從設計思考流程到具體的設計流程,從而進階到被動思考階段。但這是一個理想化的描述,真實情況是,設計師會在這三個階段中循環往復,而甚至有些設計師可能會在前兩個階段循環往復。

          人都有惰性,你我都如此。在主動設計思考階段,因為一次小長假,因為種種原因,我們可能會退步回無思考的階段。持續性學習是一件 令人興奮的事,也是一件需要莫大毅力的事情。技巧經驗會隨著時間消磨,這是設計師需要警惕的問題,因為這個行業就是如此,我們只能變化,只能持續不斷的學習。

          而當將經驗與成體系的思考范式內化后,設計師會養成核心的通用設計解決問題的能力。此時,設計師期去接觸一個新的領域,不再需要從0開始,而是可以使用自己積累的通用設計能力,來指導和規范化新的設計領域的需求,并快速融入該領域。而新的領域的經驗與視野會被納入你的整體設計理解中。

          從主動思考,到經驗內化,不斷脫離舒適區,納入新的設計領域、新的視野維度,在這個過程中使個人的通用設計能力螺旋進步。

           


          最佳啟動:消滅設計的不確定性


          我知道,我的讀者中有很大一批人都處于設計能力良莠不齊,沒有系統的設計思路與設計流程,介于初中級設計師之間的狀態。而當今國內的設計領域也是如此,初中級別的設計師完全飽和,而企業對高級體驗設計師又求而不得,這種人才斷層既有培訓爆火下的積弊,也和設計門檻與崗位收益相關,大環境無法改變,能改變的只有自身。

          在這里,我總結一個更簡單的設計思路,只要你按照該方法去執行和反思,應該會有很大的收獲。即從今天開始,對你所接到的每個設計需求都提出唯一一個標準——消滅不確定性。現在停下來詢問自己,你接到的每個需求,對于你輸出的設計結果,你認為其最終效果是確定的嗎?換言之,你認為你的設計真的解決了該需求的問題了嗎?


          你只需要把你個需求設計的思考分為設計前和設計后。

          設計前請思考,我如何設計這個需求能確定以及肯定的解決這個問題,沒思考清楚前不要動手設計,想到第一個方案后也不要動手設計,繼續思考,延遲設計決策。

          如果你乍一想到的方案自己都認為模棱兩可,那不要執行設計。此時發揮主觀能動性去思考,我如何能夠獲得相關信息,來輔助我做出這個設計決策,我需要去參考一些競品?我需要列出目前存在的疑問點,或者我無法解決的問題點去詢問設計專家設計leader?或者我把場景,整體的體驗流、用戶操作流都列出來,然后繼續埋頭探索方案?

          千萬千萬不要在方案還沒想清楚前就開始設計,這將輸出無意義的方案,且浪費大量時間,千萬千萬不要在想到第一個方案后立即開始設計,這將不會給你帶來任何進步,以后遇到相同場景你也僅有一個可選方案,千萬千萬不要忽略競品忽略他人閉門造車。

          千萬千萬試著思考盡可能多的方案,乃至輸出多個方案(僅指體驗設計類,而不是視覺設計)。作為體驗設計師,必須鍛煉的技能是方案演繹能力,在腦海中演繹可能的方案,如果有精力則可以借助工具甚至把演繹過程記錄輸出。  如下方我進行的一個需求的方案演繹與思考。

          設計前保證方案確定性,第一關要能夠經受自己的邏輯考驗,當你探索多個方案后最終確定了一個符合業務場景,同時體驗良好的方案,作為設計師自己給該方案打上一個“確定”的標簽,此時再去執行并輸出,而這過程中的思路,從糾結到決策都是最終設計輸出的關鍵證明,既能提高設計說服力,又能鍛煉個人能力,而這正是初級設計師容易忽略的部分。


          設計后的確定性則是指,產品還原與產品驗證方面。產品還原度是設計稿的視覺確定性,確保開發還原的線上效果與設計一致,這不僅僅要靠開發的努力,更要有設計師的具體標注說明的輔助。驗證則是產品上線后的必要環節,不論是預先根據業務指標設定埋點,還是設計師通過各種途徑獲得用戶反饋,最終都要保證你所設計的產品體驗的確定性是達標的,確定解決了需求提到的問題,確定能滿足用戶需求。若沒有,則重復這個過程,重新思考然后設計。


          作為設計師,應該理解自己也能作為設計對象。在我看來,設計師就是遇到一個問題解決一個問題,遇到兩個解決兩個,直到面前再也沒有問題。所以當不清楚自己該如何設計,下一步該如何做時?你只需要思考,把解決當前的迷惑作為一個需求,去思考,深入思考,列出所有可能性,不管是百度還是詢問同事查閱資料,總歸在思考后,你會有所收獲。 


          結語

          最后,我們一直在思考,在定義,到底什么是設計?

          我自己一直遵循的理念是——設計解決問題,形式追隨功能。

          而有人說設計是做選擇(決策),有人說設計是永遠做正確的事情。

          事實上這些說法都有其正確性,也都有各自的評價標準,因為場景,趨勢,市場各種因素都在發展變化, 設計最終要兼顧場景兼顧各種利益相關者,在正確的時間做正確的選擇并最終做到正確的事情。

          解決問題有多個方案 ,設計師需要在其中做出抉擇,選擇最佳方案,最佳方案如何判斷的?對當下場景,對主流用戶,對更多利益相關者來講是更正確的選擇。那它就是最終方案。

          當設計被置于真實的環境,真實的市場下 實際上其傾向性和評價標準一直在發展變化從最初重視覺到重體驗再到重商業。設計傾向性一直在變就像設計潮流,唯一不變的是設計師面對復雜的場景和問題時一如既往的優雅的解決問題的思路,并幫助設計師讓世界變的更美好。



          文章來源:UI中國     作者:AI-玲玲



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


          用戶體驗地圖如何為產品賦能?

          ui設計分享達人

          設計的最終目標都是驅動業務增長,商業價值轉化。那用戶體驗地圖是如何賦能的?

          在日常的工作中,或多或少都聽過用戶體驗地圖。在一些大公司,這部分通常是由用研部門來負責,對于一些配置有限的公司而言,則是由產品、UI設計(全鏈路設計)等職位來擔任的,一些UI/UE設計也會參與制作過程中。你對它的理解有多深?在工作中,有使用過它嗎?


          有些人會覺得畫圖就行了,搞那么多干什么,又不是我的事。刨根問底的想想,設計到底是為什么服務?你做圖的意義是什么?商業?藝術?最終目標都是驅動業務增長,商業價值轉化。設計在組織架構里面本質是以用戶為中心、幫業務去解決問題,而解決問題能力來源于對用戶同理心洞察、對業務目標的理解。而說到用戶體驗地圖則對于0-1階段的產品的可靠度是很低的,因為沒有數據的支撐,一切都是虛擬的。對于1—階段的產品,可以更好的幫我們找到用戶的痛點、爽點,觸發創意和發掘新的需求。也就是通過我們的專業知識、見解和洞察搞清楚用戶在使用產品這段旅途中坑在哪里、怎么填才能讓用戶走的更順。幫助用戶更容易獲取產品價值,幫助項目組獲得成功。



          一、什么是用戶體驗地圖?

          用戶體驗地圖是用視覺化的方式表示用戶(第一人稱視角)的圖,以敘述故事的方式來描述用戶與產品、服務、系統交互時的體驗和關系,以此來幫助理解用戶需求和尋找用戶痛點。


          可以先看一張圖了解一下用戶體驗地圖



          簡單點說用戶體驗地圖在互聯網產品設計中的主要應用是記錄用戶從使用產品到離開產品的全部過程中的情緒體驗,從中洞察到機會點,幫助設計建立更好的用戶體驗。


          用戶體驗地圖包含兩種強大的工具—講故事(敘述事情)+可視化


          這兩大方法是用戶體驗地圖必不可少的方面。以令人記憶深刻、簡潔明了的方式傳達信息。創建一個完整的體驗視圖,將不同的數據點聚集在一起并可視化,促進相關參與人的協作、對話和挖掘新觀等。



          二、用戶體驗地圖的兩個核心觀點


          第一個觀點:故事比數據更重要。重要的不是零散的收集數據,拿數據證明自己的對錯,而是建立一個有代表性的故事。例如,兩個人相親,最簡單的收集收據的方式就是問:“你多大了?有房有車嗎?多少存款?”而詢問的數據只能代表這個人,你能根據這個數據做決策嗎?他背后的故事是什么?他經歷了什么才會變成現在這樣?直接拿數據說事是很難有說服力的,每個人對于數據的解讀都是不一樣的,更多的是要關注其背后的故事。


          第二個觀點:所以一個好產品,是從一個好故事開始。



          三、用戶體驗地圖的價值

          用戶體驗地圖全局可以幫助大家理解用戶,理解用戶了解產品,使用產品的整個路徑和感受,從而幫助產品決策和設計決策。


          看了上圖,那體驗地圖的價值就顯而易見了:



          1-以用戶的視角來審視體驗的過程

          在一眼地圖中可以選擇和定位用戶的體驗點,觸發更多的創意點和挖掘更多的新觀點。

          例子—公司研發一個高級的木質掛衣鉤,用戶視角就是買回來—裝上去——直接使用。繼續挖掘其中的點,目前的掛衣鉤需要打孔才能裝,這里就衍生出兩條線:第一種方案賣已經打好孔的木質掛衣鉤,可以直接安裝,操作起來方便;第二種方案把安裝工具和木質掛衣鉤一起賣,用戶安裝成本會比較大。


          2-參與感強,促進洞察內化和跨角色合作

          在體驗地圖中,需要多人參與,能夠讓所有的人都梳理一遍流程,促進跨部門協作、溝通與思考。能把所有的人都拉到同一頻道。

          設計師在進入一家新公司后,應趕緊熟悉公司業務,在后期的討論,與產品是同頻的,這樣參與感會增加很多,也會顯得更專業。


          3-情感化設計

          用戶體驗地圖能幫助團隊在梳理的過程中找到重新設計與改進的節點,照顧到用戶在其中的情感需求,精準鎖定產品引發強烈情緒反應的時刻,也就是“尖叫”時刻。

          回到上面的例子,如果你賣的掛衣鉤已經打好孔,直接安裝就可,不用費過多精力,那就是用戶尖叫的時刻,驚喜的時刻,如果使用了另一個方案,就會考慮到這個東西買的人會不會用安裝工具,會不會浪費過多精力,以至于該掛衣鉤有可能被拉入黑名單。


          4-更全面、更全局角度去定位、評估問題點

          用戶體驗地圖,可以讓產品在需求探索的過程中,能夠更全面、更全局的去定位問題、看待問題,并且從中找出潛在的機會點,可以促進讓用戶在使用產品時,爽點更爽,解決痛點問題。

          那整體總結下來就是:

          • 記錄 將模糊的需求拆解為各要素,文字+圖形表達出來;

          • 評估 當前產品和服務的狀態以及預測未來可能出現的情況;

          • 發現 體驗過程中的痛點,尋找創新機會;

          • 提煉 幫助團隊更好的交流和討論、作出更好的決策和設計方案;



          四、如何繪制用戶體驗地圖?

          注:為了清晰的介紹,這里會yy一個電影票的App。



          4.1-了解用戶

          常見的調研方式:用戶訪談、查看用戶投訴記錄、詢問客服、查看用戶在社交媒體上的評價、調研相關競品,定性定量調研


          · 舉例說明

          比如app store上用戶的投訴評價,可以針對性進行收集與分析,理性分析,了解用戶心聲,在評論區有時能找到產品的最痛點。

          比如上面【用戶2】和【用戶3】提出的評價—這兩類總結就屬于一類問題:關于用戶定位準確性的問題。


          用戶訪談中可以面對面、也可以電話溝通,這樣盡可能獲得最直接、最準確的資料。



          4.2-創建角色模型

          根據產品的主要目標進行用戶分類,為每個用戶創建用戶模型(需求、期望、痛點),每個角色將對應不同的用戶體驗地圖。



          4.3-關鍵節點

          羅列出用戶在體驗產品過程中的關鍵節點以及對應的用戶感受。同時通過頭腦風暴,挖掘新的關鍵節點。在每個階段有各個用戶目標,以yy的電影票為例, 主要分為四個階段【線上—購票前,線下—觀影前,觀影中,觀影后】在這四個大的階段里面 有細分一些節點,你怎么去具體操作,選擇app——找電影票——購票——選座——取票、檢票——觀影——觀影后的動作。

          根據每個節點就可以知道用戶在各個階段下的目標。




          4.4-挖掘新的關鍵節點

          這個短時間內挖掘更多新的關鍵節點,同時使關鍵節點種類更加豐富

          已經列出了關鍵節點,那用戶在整個節點中的一連串行為,是不是斷層的?是不是可閉環的?在整個過程中,又可以挖掘新的優化點,讓APP更充盈、更豐富。

          整個用戶行為:從一開始的選擇該APP,對比各APP之間的差異,到app內具體怎么買自己想看的電影票,再到線下取票、檢票、觀影,再到觀影結束后,寫影評。



          4.5-歸納關鍵節點

          對關鍵節點進行分類,對關鍵節點進行篩選,移除掉重復、沒有價值的內容。例如在整個購票過程中,購票支付就是一個關鍵性動作。



          4.6-接觸點

          對于之前總結歸納的關鍵節點的行為,使用場景有哪些?用戶產生的“觸點”的環境有哪些?(例如網站、手機客戶端)


          4.7-情緒曲線

          用以描述用戶在整個體驗過程中的情感變化。在各個節點下,用戶的想法是什么,他的情緒曲線是怎么變化的。量化描述各個階段里用戶的體驗值。把【問題】和【驚喜點】放到對應的每個行為節點上。并區分顏色。

          比如在買票的過程中,邀約朋友一起去觀影,把選中電影的鏈接分享給朋友,打開鏈接,竟然跳轉不了APP,情緒是非常糟糕。



          4.8-總結痛點/機會點

          分析全部過程后,總結痛點,并從中找到機會點。


          繪制完成≠項目結束,報告產出后,要積極與項目參與者同步,對調研問題快速腦暴出解決方案。

          對于一次性產出較多的問題點,劃分優先級,并按計劃分布落地。




          五、總結

          良性用戶故事地圖像一個捕魚的過程,可以發現新的場景和機會點,可以幫助我們站在全流程的角度,挖掘使用場景下更多的體驗優化點。體驗地圖可以使部門或小組在需要解決的過程中具有不同階段或關鍵接觸點的對齊方式更加清晰。


          體驗地圖不是必須的,但是做好一個好產品必要的步驟。它的一切都與用戶有關,在每個階段都可以參與進來。它可以讓我們以用戶的角度來審視體驗過程、可以讓大家都參與進來,促進跨部門跨角色無邊界思考合作,可以協助團隊鎖定“尖叫“時刻,可以更好全局的去定位痛點、解決痛點、找到機會點。


          文章來源:站酷  作者:瑪麗的設計筆記

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


          藍藍設計隨筆:ui用戶界面中的表格設計

          前端達人

          藍藍設計隨筆:ui用戶界面中的表格設計

          藍藍設計 2020-06-10


          作者:藍藍


          表格,是一種最常見的信息組織整理手段,常用于信息收集、展示、數據分析、歸納整理。

                UI軟件設計中最常用、最基本的是表格的設計,有些軟件中80%都是表格類頁面,可以說,設計開發的是否易用,很影響口碑和用戶的使用感受。基礎的東西一定要做好,就像我們吃的主食一樣,雖然都是米和面,但是各地出產各種品種口味都不相同,要根據食客的喜好選擇、烹飪。今天就聊一聊最基礎的表格設計、變化和常見問題。


          一、基礎的表格設計美化

                基礎的表格可變化的地方很少,可以根據當前軟件開發選擇的框架控件(ext/vue/jequery不同框架會有一些不一樣)做色彩和風格的變化,如:加表格不同粗細的線、斑馬格,中間無豎線種種的設計,有的表格需要標題很突出,有的內文突出,這就和內容焦點相關了。

          1.png


                  為了操作直觀便捷,在操作區放一些圖標“刪除、編輯、審核”,配合文字來使用,有的把操作類的圖標放在最左邊,有的放在最右側,按行業用戶習慣而定。

          2.png

                  可以用固定表頭(標題位置不變),允許用戶排序,單元格內有很長的文字,設定最大字節,多內容用……替代避免轉行,有小數點的數字右對齊,每列的大小可調整,這些也是設計開發中可以做好的細節部分。


          二、特別寬的表格怎么設計?


                  有的表格的寬度,達到了屏幕的兩屏和三屏,出現寬寬的橫向滾動條,又有長長的豎向滾動條,但工作的人又必須看,可煩人了!很多軟件都因為這個原因被吐槽。下面就介紹三種方法解決這個問題:

          方法一

                  如果表格的標題是可以定制的,允許省略的,可以從業務角度取舍去掉無關緊要的,不常用的內容,把這部分放在點開的詳細頁內容中即可。這就像一個房間的斷舍離:挑選、丟棄、分類、收納,思考哪些物品是不要的,哪些是必不可少的?哪些是可有可無的?依次排序放在順手的位置,ui設計的道理也是相通的。

          方法二

                  如果表格里面的內容是確定的,不可省略的,比如銀行的報表就是這么長,這么多,那我們就可以從設計的角度來優化,做一個加高版的表格。

          3.png


                  表格為什么一組信息只能一行呢?完全可以一組三行四行,在組中進行重點信息,非重點信息以及符號化的直觀轉變。用大小、對比、濃淡、色彩、間隔這些平面設計的基本原則,讓一個普通的“山里娃”土土的表格變成一個“青春靚麗、人見人愛”自帶明星氣質的表格。

          方法三

                  大表格里面嵌套小表格,利用交互設計,巧安排空間。當用戶光標移至感興趣的那行的時候,關于它更多的內容,在下方滑動撐開出現或者右邊浮動出現。這個方式雖然比較土,但也確實管用。早年在看某一招聘網站的時候,每一個人的簡歷只要點名字就可以看到一組關鍵信息,便于迅速篩選,而另外一個招聘網站,就沒有這個功能,每個人都要打開之后才能看見整體信息,我后來就不怎么看那個網站了。多一步操作,對典型用戶就多了許多的工作量,網站和軟件的使用口碑,用戶粘度就是這樣在為用戶考慮中一點一點積累起來的。

          4.png


          上圖:大表格里面嵌套小表格


                  方法不會只有這三種,其他的方法要根據當時的業務,用戶使用的習慣、重點,因地制宜的去設計了。軟件中的表格節省了許多程序工程師的工作量,如果做大的改動或許是巨大的工作量,如果要做變動,一定要在開始的時候就要讓ui設計納入開發體系,一生二,二生三,在前期第一批實施時越注重細節,后期就會越輕松,甚至省去幾倍甚至幾十倍的時間挨個頁面的去糾偏、修改。

                   一個系統總是需要業務擔當,顏值擔當的核心部分,重要的頁面要額外的對待、花更多的精力和時間。如果千篇一律,也就不能顯示出軟件產品的獨到之處了。

           

          第三 與表格配合的部分設計


          第一種  “搜索查詢”和“過濾”部分的設計

                  大多數表格的前面都有搜索過濾功能,如果搜索條件相當多,可以精選一部分主要的排成一行,其他的隱藏,點箭頭再出現。整個搜索區域也可以有隱藏/顯示的按鈕,來給下面的表格更多的空間。

                  過濾條件區域可以定義好“條件名稱”一致寬度,一般在八個字左右,避免有的字節多,有的字節少,行數多了,參差不齊,區塊和區塊之間也要定義好統一的間距,這樣整體頁面就顯得整齊劃一、條理清晰。


          5.png


          上圖:搜索和卡片式信息的組合

          第二種  表格操作部分的設計

                 對表格的操作“導入,導出、批量導出”有的時候這類操作有1020個,有的時候才幾個,多的時候很占地方,可以用隱藏的方法,over到表格上再出現,以節省空間。

                 也可以分組把同類的操作聚合在一起,把常用的放在目之所及,不常用的點后下浮出現,以節省空間,

          還可以光標跟隨表格的某一行,點選自動浮出一群小跟班,各種操作按鈕。即節省空間,操作移動路徑又很短。只是不支持批量操作。

           

          第三種  表格和卡片式設計、統計圖的整合切換

                  表格是可以轉換成卡片式設計的,用一個卡片代替一行的展現信息,改變一種閱讀的方式。

          有的也可以轉換圖統計圖表:曲線圖,柱狀圖讓用戶直觀的去解讀,而不必一直看枯燥的數字。

          6.png



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







          精致淡雅,“新”擬態 -“新”開端

          前端達人


          原創藝仁 藍藍設計 2020-12-18



                 藍藍設計一直關注著國際國內創新設計趨勢和理念。權威設計平臺Behance上最近發布了2021年設計趨勢,這次的設計趨勢包含了UI、平面、包裝等多個領域。

                其中,3D成為2021年的主要趨勢,我們在所有的設計類型中都可以找到它。2021年3D的新穎之處在于應用在了UI界面上,而在此之前,UI界面一直被平面設計所主導。即將發布的Mac新操作系統Apple Big Sur也讓3D在UI設計中得到更頻繁的使用。

          1.jpg


          2.jpg


          3.jpg

                ios14的界面更新將影響所有的UI設計。ios14新推出的Widgets小工具分為大、中、小三種尺寸,用戶可以自由布置界面。因此設計師需要設計3種樣式的Widgets小工具圖標。

          4.jpg

          5.jpg

                 線稿填色這種插畫風格的流行在2020年已經初見端倪,在2021年也將繼續流行下去。

          7.jpg

          8.jpg

                近年來3D風靡設計界,有一些精致的插畫給我們留下了深刻的印象。簡約而配色鮮明的3D插畫將成為2021年插畫的流行風格之一

          9.jpg

                 時尚是個圈,70、80年代懷舊風漫畫將在2021年重回潮流。這種經典風格的插畫特點是使用輪廓、簡單的形狀和一些細節填充。

          10.jpg

                 這種風格的插畫非常像凌亂的涂鴉,乍看未完成,但所有的細節都是經過深思熟慮的。重疊的形狀和強烈的色彩讓這些插畫與眾不同,同時能有效激發靈感。


          11.jpg


          12.jpg

          13.jpg

                 VFX或視覺,是將現有的鏡頭與計算機生成的圖像相結合,創造出逼真的場景。隨著眾多方便友好的軟件出現,VFX開始在視頻和短片中會變得更加普及。

          14.jpg

                 3D影響了所有的設計領域,我們甚至可以說,2021年,它主導了幾乎所有的數字設計。隨著虛擬現實在越來越多的App、網站或軟件中的應用,3D也將越來越重要。而設計師們可以將3D和攝影或2D結合起來,創造出一種不同的設計效果。

          15.jpg

                 動態logo已經出現了好幾年了,但現在他們被更多的品牌使用,因此非常值得我們的注意。打開App之后,我們首先看到的就是logo,將logo與動效結合能給用戶留下深刻印象,從而更容易記住品牌。

          16.jpg

                 因為疫情隔離,很多公司開始投資AR技術。在未來,我們可以看到,在人工智能和機器學習的幫助下,增強現實技術將大規模應用于各個領域,無論是醫藥、藝術、商業、客戶服務還是導航。

          17.jpg

          18.jpg

                 排版是設計中最重要的元素,有經驗的設計師甚至可以只使用文字排版來設計視覺標識。排版對于建立信息、建立強大的視覺層級、傳遞信息以及為用戶創造良好的體驗都很重要。

                大字體和粗體從設計之初就已經存在了,不管采用什么樣的設計手法,醒目的大字而且將永遠是設計中的一個熱門趨勢。

          19.jpg

                 從上世紀初開始,幾何形狀就已經用于視覺藝術中,盡管這不是一種新的設計趨勢,但在2021年的平面設計中,無論是海報、印刷品、包裝還是品牌識別,都將聚焦于幾何形狀。

          20.jpg 

                 線條藝術充滿魅力,并可以在各種設計領域內應用。

          21.jpg

          22.jpg

                 疫情讓人們對環境保護格外重視,因此包裝行業必須開始采取措施,減少對環境的影響,使用可生物降解的材料。

          23.jpg

                 經過深思熟慮后設計的獨特插畫可以為你的品牌故事產生廣泛影響。因此你必須謹慎地選擇能夠傳達你的品牌故事的插畫。它們必須是有意義,并給品牌帶來一致性的。

          24.jpg


          25.jpg

                 在銷售產品時,用優質的包裝設計講述有關品牌的迷人故事,能有效激發出購買欲。包裝上的所有元素都應該為客戶帶來獨特的體驗。

          26.jpg

                 在人人都離不開手機的時代,包裝也可以和手機產生互動,比如使用AR等手段創造品牌知名度。


          27.jpg


          28.jpg

                 權威色彩機構 Pantone 公布了2021年度雙流行色:灰+亮麗黃。

                 這是繼2016年水晶粉+寧靜藍之后,第二次推出組合年度色,寓意光明,傳遞力量與希望?;?亮麗黃這兩個獨立的色彩,聯手打造出夢寐以求的色彩組合,像是自然風化的巖石上浮起的日出,帶來了一種更深層的體貼和踏實感,同時也表現了對未來充滿希望的樂觀精神。

                 這正是經歷過艱難的2020年后,世界所需要的。
          29.jpg

                 當人們期望尋求能量來強化自己,克服持續的不確定感時,堅實可靠而又熱情洋溢的色調,恰好能夠滿足我們對生命力的追求。

                 在過去幾年里,潘通的選擇充滿了社會意義,被看作是對全球情緒的捕捉。

                 而在經歷了記憶中最黯淡的一年之后,2021年的組合色旨在以堅韌的精神基底傳遞積極和幸福即將到來的訊息,給人們帶來希望,讓人感到一切都將變得更加光明。

          30.jpg

                 目前,已有相關設計產品使用了潘通2021流行色:

          31.jpg

          32.png

                 本文藍藍設計著重介紹一個未來可以配合3D設計趨勢的全新設計風格-新擬態設計。

          33.png

                 光是人眼感知世界的媒介,溫和柔美的光影變化輔以精致優雅的配色紋理展現出真實世界原本物體的豐富質感。光影的把控影響著事物的情感表達,光影的流轉變化傳遞出不同的情緒,同時也影響人對事物空間感的判斷。

          34.png

                 新擬態是一種圖形樣式,其原理是通過簡單富有層次的光影變化為界面的UI元素賦予真實感。新擬物算擬物風格的一種,只不過表現形式相對特立獨行,最早出現在國外網站dribbble上,之后陸續被收錄在2020設計趨勢預測中,在2019年的年末慢慢被大家熟知,討論,重視起來。

          35.png

          36.png

                 在2020年2月11號舉行的三星視覺發布會使用新擬態的設計手法作為設計海報。帶有漸變的淺灰色背景,結合富有層次感的光影漸變,充滿未來感。相對克制的色彩選擇和多角度的光影變化,強調出產品豐富的質感和科技感,簡潔而神秘。

          37.png

                 這是一款多平臺記錄工具,有道云筆記的擬物化設計風格相對謹慎,主要的操作按鈕部分,均采用了“擬物化的”風格,但是在大面積的展示區域和非功能性按鈕依然沿用了簡潔的扁平化設計。在保證“新擬物”質感的同時,保證主體內容的可閱讀性,和整體頁面的清爽感。

          38.png

          39.png

                藍藍設計也在設計項目中結合目前流行趨勢進行探索設計,容器元素通過光影的變化,展現出不同的狀態,通過模擬物理層面“高程”的不同,形成不同的組件狀態,從而演變成承載各式功能的基本元素。

                清晰淡雅的容器元素和扁平活潑的表現層元素在色彩和材質上都形成了鮮明的對比,扁平的圖標配以高飽和度的色塊或者深色的圖片,讓界面元素的對比愈發強烈,容器層和表現層的層疊配合,千變萬化, 組成界面中的各種模塊,讓界面版式更為豐富,給人簡潔靈動之感。

          40.png

                在扁平風大行其道的當下,公眾審美難免已經疲勞,設計風格再次回歸擬物化,或許已經是主流趨勢。未來,3D設計,輕立體設計將與扁平化的設計風格相結合,產生新的設計語言和領域。

                從輕擬物風格到Glassmorphism風格,擬物化設計的演變進程已然開啟,未來,無論是3D設計的加入還是扁平風格的延續,“質感”都將成為設計過程中被著重強調的風格。



                藍藍設計,工作室2008年開始,2011年正式成立北京蘭亭妙微科技有限公司,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UI、UE咨詢和設計開發服務。立足UI,一直在學習進步。
                藍藍設計,秉承設計優秀,不斷超越的理念,誠信敬業、專業耐心的工作作風,進行設計服務創新,幫助企業進行軟件和互聯網產品的界面設計及開發升級,提供卓越的解決方案。對軟件界面用戶體驗與交互設計與實現,國際化標準和流行趨勢,進行不斷的研究和實踐,擁有豐富的解決問題經驗。


          42.png


          欣賞更多界面及其它作品請訪問
          www.syprn.cn




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

          典型頁面拆解-表單頁

          周周

          降本增效一直是為B端賦能的首要宗旨,那么我們該如何從設設層面為用戶提高表單錄入的效率呢?



          什么是表單頁

          表單都是界面中最 常見、最 重要 的組件之一,屬于 數據錄入 板塊。

          表單是2B產品“管理”的第一步。軟件/系統/平臺本身是沒有信息的,像是一個空的架子,表單是用戶向系統輸入信息的一種非常重要的手段,只有用戶向系統添加了豐富的信息,系統才能實現其價值。

          表單是信息添加、錄入的通用形式;主要作用是負責數據采集,是最常用的信息錄入工具,隨著互聯網興起,特別是最近幾年B端的興起,表單的重要性顯得越來越突出。




          表單的設計原則

          充分考慮用戶填寫表單的目的,區分必填項和非必填項,刪減不必要的表單信息(例如:填寫了身份證就無需再填寫出生日期,因身份證信息內包含出生日期,系統自動識別即可),確定完表單內容。必要的時候對信息分組,表單項并非從上到下無序羅列,而是根據表單內容,按照一定的邏輯或者用戶熟悉的模式順序,對表單項進行排序和分組,才能讓用戶瀏覽和填寫流暢且。

          準確- 信息表達要準確無誤,避免歧義,提示說明要合適,不要給正確的廢話,例如:填寫備注的提示用“請輸入備注”沒有意義,換成“不超過100字”更有助用戶對表單的理解。

          一致- 組件的規范和操作的規范同樣重要。同一套系統同一個組件使用一個樣式即可,這樣才能保證頁面的視覺統一。同一個功能按鈕,在A頁面點擊給的彈窗,在B頁面也同樣要為彈窗。

          易懂- 給予高質量的信息提示及反饋,如果需要輸入某種特殊格式,請給出具體要求(例如:密碼長度8-20位);錯誤提示的時候要給用戶錯誤的具體內容(例如:登錄時不能單純去提示“您輸入的信息有誤”,需準確提示是賬號格式錯誤,還是密碼長度錯誤)。





          我們先看看表單主構成,表單主要由這5部分構成:

          分組標題:表單項較多的情況下建議分組,分組標題有引導用戶完成表單填寫的作用。

          表單標簽:也就是填寫或操作內容的標題。標簽規范的方式時標題后帶冒號,還是不帶冒號呢?這個其實都可以,沒有硬性的標準,自定義一個規范去執行就可以了。

          表單域:表單是用來數據采集的容器,也可以視為一個對象。包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框、下拉選擇框和文件上傳等,用于采集用戶的輸入或選擇的數據。

          提示信息:分為說明性提示信息和操作反饋提示。提示信息可以放在表單域里邊(例如:備注的提示“不超過100字”),也可以在表單域或后邊,還可以收進“問號icon”里,鼠標hover后給氣泡提示展示信息即可。

          操作按鈕:操作按鈕為頁面的全局操作,為滿足用戶隨時對表單進行操作的需求,操作按鈕會懸浮在頁面底部。一般情況按鈕最多只有一個主按鈕,可以有多個次按鈕。



          (1) 分類

          左標簽:優勢-節約縱向空間,信息表達明確,多用于web端;劣勢-橫向空間利用率不高,不適用移動端等狹窄空間。

          頂標簽:優勢-視覺舒適,節約橫向空間;劣勢-縱向空間利用率不高。

          行內標簽:優勢-最節省空間,多用于注冊登錄等字段少的表單;劣勢-輸入時和輸入后標簽消失,令用戶迷茫(可優化為浮動標簽,在光標鍵入時,標簽展示輸入框上),字段多的表單不建議使用行內標簽及浮動標簽。


          (2) 對齊方式

          左對齊:從左至右的閱讀順序,符合人們的閱讀習慣,一般用于詳情的陳列。

          右對齊:也被稱為“冒號對齊”,右對齊使得標簽和輸入之間的距離固定,有明確的視覺關聯,操作效率高,非常適合表單錄入。



          表單域大致分為以下5個大類:輸入、內容選擇、日期時間選擇、數值范圍和上傳

          選擇適合的控件,不光能在視覺上做到統一規范,還能提高用戶操作效率。



          (1) 輸入

          文本框:選擇適合的大小,它的大小應該向用戶暗示所需輸入內容的長度,以此減輕判斷負擔(注意:文章類超長文本不適用于長文本輸入框,建議使用富文本編輯器)。

          特定前/后綴:涉及到金額輸入時,當用戶輸入的金額超過千時,出現千分位最數據進行分組,方便用戶快速識別金額。

          帶icon或按鈕:“日期選擇”和“時間選擇”一般都附帶icon,便于用戶快速識別。帶按鈕的表單項在“密碼輸入”用的最多,可做隱藏密碼和顯示密碼的切換用,因為盲輸及可能會出錯。



          (2) 選擇

          內容選擇:含單選、多選、選擇器(常用的有下拉單選/多選)、級聯選擇(多層級聯動選擇)、樹選擇、穿梭框、開關。

          1、單選框、復選框:一般用于選項不多且相對固定的情況,選項控制在6個以內為宜,用戶可以一眼看到所有內容。單選框只能是其中一個選項,多選框則可以選擇其中一個或多個選項。

          2、開關:使用開關控件的條件是選項的性質互斥(例如:是和否、打開和關閉、開啟和禁用等);


          3、選擇器:當選擇項超6個,就需要考慮用到選擇器了。下拉列表是網頁中一種最省頁面空間的選擇方式,單擊下拉按鈕后能看到最多展示的8個選項,少于8個則顯示實際個數自適應,多余8個則出現滾動條。下拉選擇器根據屏幕位置決定向下展示或者向上展示。

          選擇器適用廣泛,同類選項(例如:選擇客戶、商品名稱、貨物編號等)、增量選項(例如:年份選擇)。


          4、級聯選擇、樹選擇:二者都屬層級選擇,區別在于級聯選好選項后框內顯示的是含層級的內容選項,且只能選擇需最子集選項(例如:江蘇省/蘇州市/工業園區,不能選擇江蘇省,因為前面的選項只為導航至最子集),而樹選擇框內展示的是單個選項的內容,不展示層級,但可以選擇任何層級(例如下圖:浙江省)


          日期及時間選擇:分為日期選擇、時間選擇、日期時間選擇,可以是單個時間,也可以是時間區間;他們很特殊,只為日期和時間選項而生。

          1、日期、時間選擇:當用戶需要一個時間/日期,可以點擊標準輸入框,彈出選擇面板進行選擇,或者輸入時間后自動定位到該選項,無需手動選擇。


          2、日期時間選擇:相當于將日期和時間這兩個選擇項集為一身,在同一個選擇器里選擇(年月日時分秒);下例相當于兩個下拉框切換使用,步驟1先彈出日期選擇框選擇年月日,選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”,則切換為步驟2的時間選擇框。


          數值范圍:

          1、滑動輸入器:滑動型輸入器,展示當前值和可選范圍,通過拖動滑塊在一個固定區間內進行選擇。

          2、步進器:也稱為計數器,僅允許輸入自定義范圍內標準的數字值,當自定義標準數字值為整數時,輸入小數點后回車,帶小數點的數字只保留整數呈現。上下按鈕也不是每點擊一次數值±1,可以設置跳每點擊一次±N,N可以為任何數字,也可以為小數。



          (3) 上

          文件、圖片上傳:第一種情況是上傳圖片和文件合在一個上傳控件里;第二種情況是區分了圖片上傳和除了圖片之外的其他文件的上傳,這種情況下的圖片成功上傳后是有縮略圖的;根據需求選擇其中一種即可。要注意的是上傳有四種狀態:上傳前、上傳中、上傳后的成功狀態、上傳后的失敗狀態,UI都需要設計出來,一個都不能少。



          (1) 占位符

          占位符就是先占據一個固定的位置,等著用戶往里面添加內容的符號或文字。在鍵入信息前,出現在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是,要避免使用“正確的廢話”,因為給不到用戶任何提示幫助,如果表單項沒有制定規則,可用表單項編輯方式占位“請輸入”/“請選擇”,以新增商品為案例:



          (2) 幫助信息

          幫助信息和占位符類似,也是在輸入編輯前給用戶的提示信息。和占位符不同點在于“幫助信息”不占據輸入編輯的位置,不會因為鍵入信息后消失,屬于表單中的常駐信息。三種方式可以同時運用在一套系統內,視當前表單情況選定。



          (3) 校驗信息

          校驗信息是在輸入后或者提交后,系統對編輯的信息進行的校驗,分為前端校驗和后端校驗兩種。

          前端校驗:一般校驗顯示錯誤和格式錯誤:必填項、(郵箱、電話號、地址)格式、密碼強度等??焖俜答仯苯犹嵝延脩翦e誤內容,讓用戶及時知曉并更改。

          后端校驗:唯一性驗證、驗證碼、敏感詞等,觸發校驗請求后系統會去數據庫查詢校驗信息,再給予用戶相應的反饋。




          (1) 分布的位置

          表單頂部、表單底部:用于放置全局按鈕,兩個位置的功能按鈕是一樣的,只是出現的條件不同。默認顯示表單頂部按鈕,當頂部按鈕因為頁面上滑被遮蓋了,底部按鈕才懸浮在窗口底部。目的在于用戶無需上下滑動到固定位置才能對表單進行操作,省時增效。

          跟隨表單項:這種情況很少用到,一般是需要校驗的情況下使用,或者可手動增減的表單項。

          分組底部:一般是對于這個分組進行的操作按鈕。

          溫馨提示:當操作按鈕超三個時,可以將相對低頻的操作按鈕折疊收起,點擊或鼠標hover“更多操作”時下拉展開顯示所有按鈕。



          (2) 閱讀順序、按鈕層級、對齊方式

          其實這三者的規則都是一樣的,當按鈕右對齊頁面的時候,閱讀順序自然是從向左,而按鈕層級也是從向左遞減,比如頂部的提交、保存、取消三個按鈕;商品列表的“添加商品”和“刪除全部商品”,左對齊頁面,閱讀順序和層級自然也是從左至右。






          表單頁面主要的交互方式有四種:原位編輯、氣泡卡片、彈窗/抽屜、頁面跳轉。表單頁面在交互方式的選擇取決于表單容量及表單親密度。



          原位編輯是輕量型信息采集表單,適用于表單編輯項較少(盡量低于5個編輯項),且屬于主功能分支的場景。其優點在于操作便捷,隨時啟用與退出,能夠保證用戶對主要功能的操作流暢度。其存在的意義在于完善或者增強主功能的操作,而不是打斷。

          使用場景:常用于列表及卡片,詳情內也可以使用原位編輯(例如:詳情內只有A和B可以編輯,且需分別編輯,此時建議用原位編輯進行操作),需要注意的是,盡量不要用在長文本編輯。

          激活方式:信息展示區域通過雙擊、單擊、hover或點擊“編輯”按鈕即變為激活編輯狀態。最常見的比如:微信/企業微信修改群名就是單擊激活,列表、表格的點擊“編輯”激活,相比之下hover去激活相對用的少。

          與頁面的親密度:親密度高,編輯內容即為展示內容,當編輯內容不止表格內展示的字段數量,且存在聯動關系時,需慎重(例如:“部門”和“班次”屬于上下級聯動關系,列表內只顯示“部門”,而“班次”在詳情頁面顯示,則不適用原位編輯)。



          使用場景:常用于條件篩選的設置,點擊或hover后顯示氣泡卡片內容(建議不超過5個設置項)。觸發生效機制可以是設置項點擊即生效,也可以多個設置項選擇后,觸發操作按鈕生效(操作按鈕建議不超過2個),觸發機制可以根據項目實際需求而定。

          與頁面的親密度:親密度高,所見即所得,編輯前/后都不遮擋列表,用戶剛剛操做了什么,即在當前展示操作后的結果,讓用戶感受到一切都在掌握之中,不會出現斷裂感,交互很友好;



          (1) 彈窗

          雖說設計上對彈窗的使用都是持謹慎態度的,但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦,且不用離開當前頁面就能更快速更容易完成任務。

          其實該使用彈窗的時候也是要用的,特別是在B端,如果彈窗能解決的問題,不建議頻繁的跳頁面去操作。如下例:下單錄入涉及添加產品,而產品信息字段又很多,不是一個模糊搜索就能解決的,此時建議使用彈窗而不是跳頁面去操作。來回跳頁面頻繁刷新,不如用彈窗選擇操作更為簡單,在當前頁的彈窗選擇產品,再將產品信息帶入當前錄入頁面,此流程更符合用戶操作時的心理預期。


          使用場景:所有頁面均可,3個以上的錄入項即可使用彈窗;需要注意保持交互一致性(例如:在列表“新增會員”點擊觸發是彈窗,在其他頁面也同樣要是彈窗);當然也有特殊情況,例如:快捷新增時只需錄入一個名稱,可以先使用快捷操作添加極少的信息,后續在編輯頁面進行補充;

          與頁面的親密度:可以有強關聯,也可以沒有關聯。有強關聯指的是,比如說:點擊“新增會員”按鈕彈出來的此彈窗,在其他也要用這個“新增會員”名稱,避免用戶迷茫(當然了,很多新增和編輯其實用的同一個彈窗,這個特殊情況除外)。沒有關聯是指,可以在列表頁面使用“新增會員”彈窗,也可以在工作臺或者其他有需求的頁面去使用“新增會員”彈窗。


          (2) 抽屜

          抽屜彈窗也被稱為側彈窗,彈窗抽屜和彈窗很類似,使用場景和親密度都是一樣的。相比彈窗,抽屜的側邊彈出的交互方式,其操作成本和用戶使用心理負擔會小很多。

          注意事項:如果系統大部分用的彈窗,就優先選用彈窗,如果表單內增加了更多字段,可以換成抽屜彈窗;



          使用場景:超出了彈窗/抽屜的承載量,就要用到頁面跳轉了,一般一級模塊的設置項也會用到頁面跳轉,因為會牽一發動全身。還有初始化入駐也需要跳轉頁面進行操作,不光因為需要提交大量信息,還因為各種認證審核需要一項一項進行,此時用抽屜和彈窗承載內容顯然不合適,因為彈窗和抽屜,代表著快速完成。

          與頁面的親密度:跳轉了頁面,不管是新開頁面還是刷新原頁面,與原頁面的關聯性已經沒那么強了,只能說他們屬于同一條路徑下不同頁面。



          根據內容的多少及親密程度來決定,我們設計時應選用哪種交互方式,或者可以直接根據內容承載量做判斷也是可以的,從少到多依次此為:氣泡卡片-原位編輯-彈窗-抽屜-頁面跳轉。




          排版布局的方式有四種:平鋪、分組、標簽頁、分步驟。根據內容項的多少及實際需求相應合理的布局。

          輸入信息的分類,是有效的減少用戶操作疲勞度的方法。分類的維度有多種,根據表單輸入內容的相關性、內容的所屬類別,可以將同類型的數據統一輸入,減少用戶輸入信息的跨度,提高輸入效率。



          使用場景:平鋪顧名思義就是指表單項不做分組,全部平鋪展開,很多注冊和登錄都是這種布局。適用于表單項少,或者多但表單項之間親密性很強,就無需額外分組,直接將表單項平鋪開展示,簡單明了。



          對于內容過多的表單輸入頁面,分組、分模塊的排版方式讓用戶感覺更友好,不是密密麻麻一大片,讓人喘不過氣來,而是有條理的布局,張弛有度,疏密有致。用戶可以在填寫好一段內容后進行心理上停頓休息,減少視覺疲勞和心理壓力。


          (1) 標題分組

          使用場景:超過了7個設置項,且較為復雜的表單,標題分組之間的關聯性較弱,就可以去分類歸納表單信息,位的是降低用戶的認知負擔,提高用戶體驗。注意:分組內組內設置項要有強關聯性,否則不能歸為一組,不能因為字段多,為了分組去分組。



          (2) 卡片分組

          使用場景:7-15個設置項,用標題分組不足以給信息做層級區分,為了讓用戶在操作時更聚焦,也需要給用戶更明確的操作引導,即可使用卡片分組。

          卡片分組之間關聯性更弱,分類更明確,多個設置項,多個分類。需要注意,一個表單項不要分過多的卡片分組,不能每兩項做一個分組,這反而會造成用戶視覺壓力和操作負擔。


          使用場景:當標題分組和卡片分組都不足以對表單進行分組時,就可以考慮用tab切換了。每個設置都包含多個錄入,且使用了標簽。

          注意事項:tab標簽的填寫沒有先后順序的規則,標簽頁彼此之間沒有特定的關聯性,可獨立去設置。也就是說先填寫tab1還是先填寫tab2,對表單的其他tab項沒有任何影響,不存在聯動關系。


          標簽頁對應的詳情展示:一項一項上下鋪出來,但如果表單詳情信息過長,可以考慮將錨點定位,點擊錨點定位的標題即可自動定位到該區域,方便用戶快速定位瀏覽位置。



          使用場景:對輸入表單進行分步驟的處理,可以降低用戶的操作頻率,給與用戶一定的休息空間,用戶會有階段性的成就感,同時分步驟的輸入還有利于減少信息的錯誤率。如果輸入表單的內容較多,同時輸入內容有邏輯上的先后順序,此時可以考慮將輸入表單進行分步驟處理。

          利用步驟條,將大型、復雜任務拆解為多個部分,并按照相關性分組,可以提高用戶處理的專注度,降低頁面的復雜性,減輕用戶操作負擔,降低用戶出錯率,提高用戶體驗。



          根據內容關聯性的強弱程度來決定,我們設計時應選用哪種布局方式,或者可以直接根據復雜程度做選擇也是可以的,從弱到強依次此為:平鋪-標題分組-卡片分組-標簽頁/分步驟轉。






          提高易用性的方式有以下四種分別為:視覺清晰、信息降噪、智能、準確易懂,每個表單,每個頁面都要應用這四項準則,不光是在表單頁面,所有頁面都適用。


          布局方式-單列布局:常見的表單布局為單列信息展示布局,比如:蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進行頁面排版。設計中盡量采用單列布局,是為保證用戶的視覺動線流暢,不容易遺漏信息;

          在輸入項較多時,每次填寫完一項都要鼠標選中下一個輸入框,很容易讓用戶失去耐心,而單列布局恰好能解決這個問題并提高用戶體驗,輸入完一項按enter鍵可快速切換至下一項,提高用戶操作效率。

          當然了按Tab鍵也是一樣的效果,只是,一般情況下,大眾都更習慣也更熟悉回車鍵的位置,需要注意的是,長文本輸入框的屬性里回車鍵是文本換行的意思,需要區別設置兩者的操作機制。


          布局方式-橫向布局:橫向布局也是單列布局,是它的發散版本。如果出于業務方復雜需求的考慮,必須在橫向增加內容,那增加的表單項一定要和前表單項有關聯,才可作為分組橫向排列,還需注意不能出現Y軸平行豎向分組(如下圖),避免用戶迷?;蜻z漏信。



          (1) 合理設置必填項

          正常情況下,我們標示“*”標就是為了提示用戶此項必須要填寫方能提交單據。

          但當一個編輯頁面的必填項非常多時,就可以無需標注必填,只標明哪些是非必填項就行。

          當編輯頁全部都是必填項時,可在大標題處用標示必填即可。


          (2) 折疊不重要非必填信息

          在能完整獲取需要信息的前提下,輸入項越少越好,當表單頁很長,且有些信息非必填,或者說填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起,點擊“展示更多”下拉展開全部表單項,讓用戶可以選擇性錄入不重要的信息。



          (1) 智能填寫

          根據上下文信息可自動獲取的,無需用戶再次填寫。如下例:通過客戶名稱數據庫可自動匹配客戶手機號,或者通過手機號匹配客戶名稱。填寫郵寄信息的時候,只需選擇省市區,郵政編碼便自動填充,減少了用戶查找郵政編碼的繁瑣(甚至可以提議“郵政編碼”字段直接去掉)。而生日和性別都可以在身份證號內提取。


          (2) 智能排序

          默認高頻:當選擇器內容超過5個選則項時,可以對內容選項進行一定排序規則(首字母排序、數字排序或設置默認高頻選項等),方面用戶提前預知選項的大致位置,檢索找到相應的選項。


          (3) 智能聯想

          智能聯想是給予用戶鍵入字段的聯想功能,用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇,減少用戶的輸入成本,提高用戶操作效率。

          自動搜索:當下拉選項超過16個時,建議加入輸入選擇功能,用戶可使用下拉選擇,也可以輸入關鍵字后智能匹配顯示對應的選項?;蛘呖梢栽偌由闲畔⑴判?,根據點擊頻次進行排序,高頻選項前置。

          后綴聯想:一般用于郵箱信息的錄入,當輸入內容后,自動將默認高頻的郵箱后綴作為補充數據填充在后方,減少用戶的輸入。



          操作直觀:去除冗余且無用的部件:切換“開關”操作后會立即生效展示結果,無需與操作按鈕搭配使用,避免造成用戶的誤解,導致體驗不友好。


          準確的錯誤提示:反饋提示是頁面系統對用戶的輸入的內容進行的校驗,并對校驗結果予以展示的提示形式。可分為前端校驗和后端校驗兩種。

          錯誤提示的時候要給用戶錯誤的具體內容,而非簡單粗暴的錯誤提示。例如:登錄時不能單純去提示“您輸入的信息有誤”,需準確提示是賬號信息錯誤,還是密碼校驗錯誤。

          前端校驗:也被稱為“即時校驗”,一般是校驗顯現的數據內容,比如字符長度、格式(是否包含非法字符)、是否為空等。該方式的校驗條件多在本地,無需實時向服務器發命令而得到反饋。

          后端校驗:包含“局部校驗”和“全局校驗”,局部校驗:在注冊賬號時,輸入完整用戶名以后,提示用戶名是否可用,則為局部校驗反饋。全局校驗反饋:多指在輸入完成提交或者階段性完成(分步驟跳轉下一步)時,系統給出的校驗反饋。在用戶操作反饋動作按鈕后,界面在相應位置(一般為單個輸入框的下方或右側)一次性給出對應的錯誤提示。



          文章來源:UI中國     作者:AI-玲玲



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


          UI經驗:軟件首頁怎么設計?

          前端達人

          原創 藍藍 藍藍設計 1月1日


                藍藍設計是一家做UE/UI設計的公司,我們常常接到的項目是大屏、pc端、手機端的項目要重新做交互設計和視覺設計。每個軟件首頁怎么設計?如何進行首頁上的內容取舍,最終客戶和上司是究竟想要什么?是客戶們(產品經理或技術總監)普遍感到為難的地方,希望有外部的專業設計力量來參與意見,多一份力量。

          一般進行軟件首頁的設計,我們先思考:

          • 首頁要放什么內容?哪些是核心的,用戶最在意、最常用的。

          • 軟件產品提供什么樣的核心價值?

          • 用戶常用的功能是哪些?

          • 未來1到3年軟件會增加什么重要的功能?發展方向?

          • 需要借助軟件產品傳達哪些企業價值觀?

          • 在交互上和需求上先和軟件公司做一些交流,雙方達成一致再進行。

                我們也了解到,有許多軟件公司做這件事情(開發運營這個軟件或網站)已久,特別想找一個嶄新的方式去看待目前做的這件事。找個靠譜的外部設計公司和做用戶調研是兩個好方法。
                我們建議如果時間充許的話,可以做做用戶調研,做8到10個用戶不同角色的訪談,從真正的客戶的角度去思考一下不同角色對這個產品的期待和理解。(訪談的人不用太多,因為太耗時間,但是可以多輪,一段時期一段時期不斷的去了解用戶的想法),從一線了解許多不同層次的想法和使用者的意見。
                在和客戶的交流中,常常會遇到:改版會帶來多少程序方面的工作量這類的問題。這個擔心很多公司,特別是十年來在一直做著同一個產品的經理們普遍反映都有,特別是很大型的軟件。
                其實,下決定最難。
                改版與否,其實取決于對空間秩序美的忍耐度及它能帶給你的價值。
                就像有的人房間很亂,也不收拾,特別能忍。他省了整理的時間,但他個人可以找到自己的東西,有自己的內在邏輯。但表現在工作上就是:界面很亂,除了開發者自己,客戶都找不到東西,很難使用,花了客戶很多時間去學習使用這個軟件,到了忍無可忍,客戶提出強烈不滿的時候,有可能危及到合作時,在吐槽中被迫進行。
                優勢技術不等于優勢產品,產品的需求和體驗要先于技術和模式而存在,品牌的戰略貫穿在企業的全鏈條中,以用戶可以感知的點滴來詮釋軟件產品核心價值,塑造品牌
                UI的設計能帶來的不僅僅是軟件的美化,UI咨詢公司能帶給客戶的是一種思考的方式和解決問題的行動力。軟件企業最好當然是掌握市場先機,企業內部里去觸發、驅動  ui咨詢類項目,在機會來了的時候才更從容。
                對不熟悉的事情,大家總是會有一定的壓力,表現的行為方式上就會有點拖延,選擇決策困難。我在想,有時候我們的界面設計時間總是被擠壓的特別少,在功能都實現的情況下才來進行,是不是也是出于客戶的這種心理呢?
                其實對于我們這樣一個做了界面設計十多年的設計公司而言,這些都是我們平常日常工作中的工作,沒有什么難點,只是要根據不同的公司,不同的產品去梳理清楚、理解業務,用心體會。
                做好整個系統的交互設計,首頁的內容布局設計,和進行一個家庭的空間物品歸納整理沒有什么區別。不要陷入“要么不做,做就做到最好的”極端思維,只要馬上迭代改進,平時保持一定的水準,總會做的越來越好。
          家庭裝修和軟件界面設計的對比:
          家庭要裝修
          1. 首先要考慮到家庭的空間有多少人要去使用,住幾個人?空間之間的最佳行動路徑。未來幾年內人口會增加或減少嗎?住多久?
          2.了解你和家人所需要的物品,對它們進行分類和預算了解,無用的物品斷舍離。
          3. 物品的使用場景在臥室里用,還是在客廳里看電視的時候用?服裝的裝搭是出門見客還是家居服,有多少件?對客戶來講最看重的是書柜還是衣帽間設計,還是廚房呢?因人而異,選擇對他最重要的物品和場景,好好的設計,創造最讓人感動的體驗。
          apjpk-4pjoz.jpg
          交互設計有點像居室空間的規劃
                  這和產品的軟件界面設計其實是相通的:
          1. 了解就是這個系統有什么功能,準備放到幾個導航菜單中?導航之間的最佳切換路徑。產品核心提供什么樣的價值?未來1到3年軟件會增加或減少什么重要的功能?產品未來的發展方向?這版用多久,多久改版一次?
          2. 把所有的功能進行分類和預算,分版本陸續實現。斷舍離軟件功能,進行取舍歸納。最常用的,重要的先做,花費精力太多,又很少用的功能舍掉或后做,
          3. 了解每一個功能的使用場景,是什么用戶角色使用?是在戶外或者室內用?是日常工作時還是領導視查,開會時使用?他最關注什么?他的使用過程是什么?
                了解每一個功能的使用場景和用戶關聯時,可以畫出一個用戶體驗地圖幫助梳理思路。從使用這個軟件產品的開始到結束,不同接觸點,關鍵點列出來,選擇最需要改善的幾個重點,好好的設計開發,創造最讓人感動的體驗。
          apobm-0g27q.jpg
                有了要表達的界面元素,把它們按照人類的使用習慣去組合,進行這些頁面的內容的排列方式就可以了,比如:
          • 重要的內容放在第一屏重要的地方,按照人類的閱讀習慣,從左到右,從上到下。重點的字大區塊占比大,非重點的弱化小字,歸納為一組,可隱藏。
          • 用好對比,不要讓人思考,該提示的地方要提示(直接打開頁面時彈出或在需要提醒的位置附近,一個地兒一個地兒輪播閃現都可以),盡量傻瓜式的,不要讓人培訓后才懂怎么使用(節省用戶時間)。
          • 思考用戶第一次進入軟件,如何引導他使用的流程和步驟,并在首頁就能開始第一步。(目前B端的產品常見問題就是功能橫向單一,每個功能一個菜單,之間缺乏串連使用的路徑,用戶根本不知道如何使用)
          • 如果是工具類的操作軟件,在首頁要給足相應的操作輔導文案和視頻。如果是辦公任務類軟件,在首頁要很明確展示要做的總數、待辦具體事情,想了解的信息。
                空間(交互)布局設計好之后,易用性就基本已經解決了。
                剩下就是根據用戶不同的審美,巴洛克,簡潔風,歐式,美式(簡約,科技感,質感,時尚、擬物,酷炫,奢華高端,品牌VI、拙樸古風),任客戶選擇,或者是根據用戶畫像的調查去推測,根據產品定位,建立色彩情緒板,研究出這個產品應有的外貌。
                我們藍藍設計一般是有一個UI設計調查表,把各種設計風格和問題列出來,引導客戶在填表的過程中去選擇和思考。
                 步步分解之后,工作就會好理解并逐漸輕松。
                只要您去做這件事,開始思考,最終就會知道界面那些功能該怎么擺放。我們的交流中往往發現客戶是非常有智慧的,一開始可能沒有想法,隨著分析和思考的深入,靈感受到啟發,等到我們設計出方案之后,很會挑方案,能夠感受到不同方案的優點,把他們集中在一起。
                最近流行一個新的職業,叫收納整理師,就是幫助陪伴您收拾家。不僅僅是打掃衛生,還會告訴你一些斷舍離取舍原則。原有的衣柜空間有什么不足,改進的方法,一些方便收納的小工具,手把手教你各類疊衣服的方法。有些工作(整理房間)自己也能做,但是這個工作太枯燥,工作量又很大,如果有人陪,就能夠被鼓勵著,開心,很有成就的去完成。
                陪伴這個詞很重要,代表著共同參與,相伴成長。

          avz1k-b5io7.jpg

                我覺得交互設計師也是在做整理收納這種事情。有些人最喜歡的買買買,買回了太多的東西,又無處安放,屋子變得很亂,開始收納整理,像不像軟件開發中一些客戶角色,喜歡加一些內容(功能)?這個頁面加一點,那個頁面加一點,過了一陣子,這個軟件(網站)就變得不成樣子,需要維護和整理。
                 軟件產品和一個家一樣,他們都是你創造的,如果可以說話,他們可能有許多話想對你:“把我創造的美一些,整潔一些吧,主人
                下面給大家展示幾個實際的案例,我們是怎么從需求到原型,完成這項工作的,設計前后的效果如何?
          asm0e-r1gcl.jpg
                就拿我們最近合作的江蘇銳創來講吧,這是一家非常優秀的公司,江蘇銳創數據中心服務管理平臺項目,產品迭代速度非???,公司內部做過很多版本的設計,由于十年來一直在做這套軟件,產生了審美疲勞,不知道到底要怎么做才合適了。各種之前想過的東西都已經自己練過了,也實施過了,但就是覺得沒有達到自己理想的狀態,內部設計了一稿又一稿,總是覺得還不夠好。
                使用這個軟件的用戶是企業中的網管和工程師,專業人士。在委托藍藍設計之前,內部開發已經迭代四次,企業內部的交互設計師已經把首頁要放的內容思考的比較清楚了。在這類的需求中,藍藍設計的設計師主要的工作是優化視覺設計和進行交互設計的局部優化處理,通過友好的交互體驗讓企業用戶享受到高品質的服務。
          客戶給的原型圖

          a3r1n-6agy9.jpg設計后的效果圖

          aniwl-8inwf.jpg

          1. 理解用戶所需,優化交互,增加部分內容。告警事件除了原型中的時間線按順序發生外,加了用戶頭像,已處理、待處理、緊急任務統計數字,讓用戶可以總覽全局,做到對工作量心中有數。

          a3s8x-ilo2u.jpg


          2. 數據中心信息,秉承著信息簡單易懂,界面引導友好的理解,把信息分組,4個關鍵信息總數并列2排,設計了相應的擬物化圖標,美觀整理有秩序。在線和離線位數增加了表達當前比例的橫向柱狀圖,用戶從綠色和紅色的區塊長短中可以輕松感知,比原型的表達方式又多了一個緯度。

          au0ez-pa0w5.jpg


          3. 本機系統信息,將單個的數字轉化為儀表盤,可以表現出高中低預警和正常的多重含義。通過輕擬物的表現手法,增強駕駛艙的沉浸式體驗,營造中控管理氛圍的真實感。
          arq3s-18p80.jpg


          4. 所有的設計,都是基于對業務的理解,回到本質,思考用戶是否需要多層次信息的統計分析,不同的緯度呈現結果。最終以感性、直觀、優美的方式視覺表達,并考慮到數據可視化的控件類型和實現難度。


          asm0e-r1gcl.jpg

                 中國移動愛流量App整體的設計提案,經過用用戶研究分析、同類競爭App競品分析報告、產品定位、功能分析、交互設計、視覺設計。中國 移動只提供了運行中的上一版App,其它的調研、改版策劃由藍藍設計進行。

          這個案例比上一個案例更加整體,重大的項目應該采用這種方式來進行。

          1   同類產品APP對比:

          藍藍設計觀察了20家流量類的App。通過在應用市場監測流量平臺類app的下載量,我們選取以上三家為競品。

          『流量寶』中國電信出品。

          『流量銀行』中國聯通出品。

          『流量來了』,世紀龍信息網絡有限責任公司出品。

          分析內容:

          1. 界面布局對比

          2. 核心功能對比

          3. 色彩對比

          4. 首頁印象對比

          5. 界面設計優缺點

          2 產品洞察 明確產品的定位和發展方向

          按照用戶對于流量的認識、了解、使用的程度,通常流量經營可以分為三個發展階段。

          在流量消費培育階段(2008-2012年),隨著智能手機的快速普及,客戶上網頻率逐漸加大,對于網絡的使用逐漸從PC互聯網向移動互聯網轉移,其標志就是智能手機用戶在2013年超過了PC保有量。這個階段主要以前向流量客戶經營為主,采取流量包月甚至流量免費等方式驅動流量增長。

          在流量理性消費階段(2013-2014年),流量消費習慣逐漸養成,運營商開始改變甚至取消流量包月無限量使用策略,用戶開始感受到流量的費用壓力,開始對自身的消費行為和內容進行整理,逐步回落到用戶能夠承受的流量消費水平。而流量經營主要收入來源依然是個人客戶。

          在流量后向經營階段(2014年-),隨著運營商發現流量收入增速放緩的現象,運營商開始嘗試定向流量、后向流量捆綁、流量800等面向后端企業的運營。至此,運營商正式邁入流量平臺化經營時期。

          產品不斷的迭代,使我們的產品在不斷的完善。 流量平臺的定位也在不斷的跟隨行業的變化在不斷的變化,才能使我們的產品得到用戶的認可。

          功能方向:使產品向貨幣化、社交化、媒介化轉變。

          增加用戶使用率,創造可以長期登錄使用的情景和功能。

          基于個人:監測自己的手機流量及使用情況,提醒自己:少了可以買,也可以把多余的流量轉給家人、朋友、同學、或充入手機、

          基于社交:比如:發紅包、賺流量、做任務、簽到送流量,流量兌話費等、是可以嘗試的方向,使我們的產品向貨幣化、社交化、媒介化轉變。

          aaryx-rj02r.jpg

          視覺方向:使我們的產品更加的年輕化、擁抱90、00后。

          交互方向:減化路徑、清晰簡潔

          3 基于產品分析策劃進行主頁的交互設計

          在不斷的思考、對功能的深入理解后,交互設計師對首頁構圖了三個方案,希望能契合產品定位并在布局和表現形式上與競品區別,展現出愛流量的。

          團隊討論思考后,認為將“流量監測和流轉“做為首頁目前重點,賺流量做為以后發展點。確定第二種布局(中),進行視覺設計。 

          aca46-05o6b.jpg

          avjc5-qtihj.jpg

          4 視覺設計成果

          a34bi-3t998.jpg

          主頁設計風格確定后,就可以進行其它頁面的視覺設計啦。



          a1uzd-ibxp3.jpg

          1. 軟件的優化設計是一個長久的的事,挑一些典型頁來設計是基礎的部分。

          2. 目前國內都在進行數字化升級進程,這一二十年來,從不知UI為何物,到企業紛紛重視,每個企業都有自己的設計師,重點的項目再外包給專業公司。關注整個用戶體驗,用體驗地圖觸點做設計,在中型的項目上存在認識不夠或目前達不到應有的預算和精度。未來發展中,相信會漸逐把重要軟件的整體用戶體驗設計、服務設計、品牌設計的融入做為增長點。

          3. 藍藍設計公司有一個群,每天都在分享好的UI設計,如果你有興趣,請報上姓名和公司職位,我們共同成長和學習。請加微信ben_lanlan, 標注“想加入設計分享群”.


          日歷

          鏈接

          個人資料

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

          存檔

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