<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

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

          資深UI設計者


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



          什么是服務設計


          服務設計一直在我們的生活中,我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構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)的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。 

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

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

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


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

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

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

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

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


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

          刻意練習與學習

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

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

          What——How——Why

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

          T型構建能力模型

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

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

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

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

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


          關注環境

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


          善用工具

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

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


          被動思考階段

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

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

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


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

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

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


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


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

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

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


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


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

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

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

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

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


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

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

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

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


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

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


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

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


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

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

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


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

          從輸入到梳理

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


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

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


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

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

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


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


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


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

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

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

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

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

           


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


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

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


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

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

          如果你乍一想到的方案自己都認為模棱兩可,那不要執行設計。此時發揮主觀能動性去思考,我如何能夠獲得相關信息,來輔助我做出這個設計決策,我需要去參考一些競品?我需要列出目前存在的疑問點,或者我無法解決的問題點去詢問設計專家設計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%都是表格類頁面,可以說,設計開發的是否易用,很影響口碑和用戶的使用感受?;A的東西一定要做好,就像我們吃的主食一樣,雖然都是米和面,但是各地出產各種品種口味都不相同,要根據食客的喜好選擇、烹飪。今天就聊一聊最基礎的表格設計、變化和常見問題。


          一、基礎的表格設計美化

                基礎的表格可變化的地方很少,可以根據當前軟件開發選擇的框架控件(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) 校驗信息

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

          前端校驗:一般校驗顯示錯誤和格式錯誤:必填項、(郵箱、電話號、地址)格式、密碼強度等。快速反饋,直接提醒用戶錯誤內容,讓用戶及時知曉并更改。

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




          (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個時,建議加入輸入選擇功能,用戶可使用下拉選擇,也可以輸入關鍵字后智能匹配顯示對應的選項?;蛘呖梢栽偌由闲畔⑴判?,根據點擊頻次進行排序,高頻選項前置。

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



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


          準確的錯誤提示:反饋提示是頁面系統對用戶的輸入的內容進行的校驗,并對校驗結果予以展示的提示形式??煞譃榍岸诵r灪秃蠖诵r瀮煞N。

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

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

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



          文章來源: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, 標注“想加入設計分享群”.


          張小龍:“簡單”和“連接”,兩個詞描述微信十年

          資深UI設計者

          微信已經十歲了,如今很多人會用微信作為人與人之間的聯系方式,“加個微信”也成了一種社交方式;微信這十年不斷地創新,開發出越來越多的功能,從社交聊天工具到現在的視頻號以及直播;本文是2021年微信公開課中張小龍的演講內容,我們一起來了解一下。

          2021年微信公開課,如約而至。

          今年有些特別,他在視頻號上開了直播,和更多人線上見——“我覺得直播特別簡單,我都做了好幾場?!?

          微信十年了。張小龍回顧了當初做微信的初心——“出發點很簡單,想做一款產品給自己用。”

          他也感謝了微信平臺上的每一位創作者,因為有他們,微信才能有今天的活力。

          張小龍在視頻號里,講了視頻號。當初為什么想做視頻號,視頻號的意義是什么,視頻號的推薦機制是怎么考量的,視頻號有哪些新的可能等等。

          除了視頻號,他還強忍著想劇透的心,提前透露了即將到來的微信新版本。微信表情的新玩法、可以更新你的微信狀態變成你個人“活”的名片、下拉有更多驚喜……

          究竟有哪些驚喜,歡迎往下拉:

          各位朋友,晚上好!

          謝謝來到公開課現場的朋友們,讓我感受到這是一個面對面的交流,而不是一個人面對屏幕的直播。

          2020,對很多人來說都是很不容易的一年,包括我們的公開課,也改為線上進行了;雖然在幾年前的一次公開課上,我說公開課應該線上開就好了,效率最高,但沒有想到今天是因為疫情的原因被迫做到了。

          去年這個時候我們也沒有想到,這次我們已經通過視頻號來進行直播了。

          張小龍:“簡單”和“連接”,兩個詞描述微信十年(附萬字全文)

          因為疫情,很多公司的年會都改線上了,所以這個時候,我的同事們正在努力給視頻號直播加一個能力,就是只有白名單的人才能進入直播間的企業內直播,希望能給需要線上開年會的企業一些幫助吧。

          回頭看十年前,當時的想法只是,希望有一個適合自己的通訊工具來用。

          于是就開始了微信的第一版。但當時絕對沒有想到,十年后的微信會是現在這個樣子;對此,我自己感覺特別幸運,我想我一定是那個被上帝選中的人,因為光靠個人努力是做不到這一點的。

          我分享一組數據吧,到今天,每天——

          • 有10.9億用戶打開微信,3.3億用戶進行了視頻通話;
          • 有7.8億用戶進入朋友圈,1.2億用戶發表朋友圈,其中照片6.7億張,短視頻1億條;
          • 有3.6億用戶讀公眾號文章,4億用戶使用小程序;
          • 還有很多,包括微信支付,企業微信,微信讀書,搜索等,就不一一說了。

          如微信支付,它就像你以前的錢包一樣,已經變成了生活常用品;而微信,也真的成為了“一個生活方式”。

          今天是公開課,應該有很多的創作者參與,所以,也在這里感謝微信平臺的每一個創作者,公眾號的、小程序的、視頻號的創作者;因為你們的創作,讓微信的生態充滿活力。

          大家知道視頻號今年的變化特別大。這里也想分享一下視頻號的一些想法。

          一、視頻號的起源

          可能在2017年吧,我跟公眾號的團隊說,我們現在公眾號只適合少數人寫長文章,但是大部分人寫不了文章;我們應該在朋友圈下面加一個“非朋友圈”,只能發短文或者照片視頻。

          但后來就不了了之了,確實是很大的工程,因為帳號體系可能都完全不同了,就完全是個新的比公眾號還復雜的系統。

          隨著時間的推移,視頻化表達其實越來越成為普通人的習慣。

          來看幾個數據,最近5年,用戶每天發送的視頻消息數量上升33倍,朋友圈視頻發表數上升10倍;這時候,我們再思考短內容的時候,就會想,不應該基于短文字來做,而是應該基于視頻化內容來做了。

          視頻化表達應該是下一個十年的內容領域的一個主題,雖然我們并不清楚,文字還是視頻才代表了人類文明的進步,但從個人表達,以及消費程度來說,時代正在往視頻化表達方向發展。

          于是在2019年,我們組織了一個特別小的小團隊,開始了視頻號的開發;我們也沒有問公司要什么資源專門去做,甚至沒有在公司開會立項,就自己悄悄做了;我覺得這很微信風格啊,基本上微信做東西,都是成立小團隊開始做起,而不是大規模的兵團作戰。

          并且我說,我們要做,就一定要做成、做大。

          這并不是公司給的任務,因為完成任務是枯燥無味的,并且會因此動作變形,應該說是我們要給自己一些挑戰性的目標,不然工作會顯得很無聊。

          二、視頻號是什么?

          視頻號是一個人人都可創作的短內容平臺。

          所以它是公開領域的內容平臺,就不能基于微信號來創作了。

          因此遇到的第一個問題是,需要有一種新的ID(身份)。

          長期以來,微信的最大價值是每個人的微信ID,比如微信支付能很順暢,因為錢包跟著個人ID走,這是非常自然的,就像你現在只拿身份證也能取錢一樣;但這個ID是通訊和社交領域的,因此是私密的。

          因此,微信的用戶并不能公開對非好友說話,即便評論了,別人也無法聯系你,這對于社交領域當然沒有問題;但對于公開領域,需要新的身份;而在一個產品里,承擔兩個身份,其實是很有挑戰的。

          而這個新的ID,還必須特別方便,不至于在各個場景里遇到身份的沖突,所以處理得不好,雙ID會讓系統變得非常復雜;比如你評論,就需要選擇用哪個ID來評論。

          但是這個ID的意義又特別大,一旦走出這一步,意味著微信不再局限于社交領域,而是進入到公開信息領域。

          因此視頻號的意義,與其說是視頻,不如說是“號”,因為有了一個公開的號,意味著每個人都有了一個公開發聲的身份。

          比如,直播,在視頻號里做得很順利;在視頻號之前,我們是沒法做直播的,最多做到群內直播,那還是屬于群通信的范疇;但有了視頻號這個ID,每個人可以迅速開通自己的直播。這里,ID才是基石,它可以承載視頻內容,可以承載直播,可以承載小程序等。

          我記得當時有個方案是,每個進視頻號的人要創建一個視頻號ID,用這個ID來瀏覽和評論內容。我說不對,瀏覽者應該是微信身份,而不應該強迫每個人開一個新的身份才能看和評論。

          幸好當時選擇了這樣一條路徑,不然就沒有后來的社交推薦體系了。其實產品的迭代是由無數這樣的選擇組成的。

          ID還有一個重要的意義是針對機構的。

          大家知道PC時代每個機構都有一個官方網站,其實微信一直在尋找PC時代的“官方網站”的替代物;做公眾號的時候,我們希望公眾號就是一個機構比如企業的官網。做小程序的時候,我們希望小程序就是官網。

          現在,我們希望視頻號是每個機構的官網。這是合理的,官網是需要進化的。所以未來視頻號會承接一個機構的很多服務內容,并不局限于視頻;比如一個企業的服務,可以通過小程序的方式,展示在視頻號下面。

          所以我開玩笑說,如果有一天我們在每一個廣告牌下面,都能看到廣告主的視頻號的二維碼,那就說明視頻號做成了想要的官網了。

          第一個版本其實只是搭建了這樣一個ID體系。和公眾號的很類似,但是比公眾號的門檻低很多,普通微信用戶可以立即開通它。

          內容表現上,只是一個簡單的信息流,混合了關注的,朋友匿名點贊的,和系統推薦的內容在里面。

          但這樣的效果并不好。因為是灰度,量不大,因此也吸引不到大量的創作者來貢獻內容,因此推薦的內容也一般般。

          但即使如此,我們還是希望推薦的質量能夠好起來。我們組建了三個做推薦算法的團隊,每個團隊十幾個工程師。希望各自用不同方法去找到推薦的最優解。

          應該說我們在算法領域沉淀應該還是很深的,搜一搜背后是個幾百工程師的搜索技術團隊,同時我們自己研發的語音識別和機器翻譯,都是國內的一流水準。

          對了,外界一直有人說我們的語音識別用的是第三方的技術,其實我們從未用過第三方的,一直都是我們自己研發的?,F在微信里面的語音識別每天翻譯的語音條目在五億條以上。

          雖然搜索團隊有很強的算法技術人員,但是,我還是把他們從搜索團隊抽調出來進入到視頻號團隊來工作。因為閉環的小團隊才能迅速迭代。

          推薦團隊很努力,但頭幾個月的滾動特別困難,似乎陷入了死結,就是內容不好看就沒有瀏覽量,就導致沒有人貢獻內容,所以推薦系統也推不出好內容,然后繼續沒有好的內容看。

          5月份的時候,我們做了視頻號最重大的一個改變。

          因為經過幾個月的灰度,表明在現有的內容下,基于機器推薦是走不通的。對比朋友點贊的內容,雖然當時朋友點贊還是匿名的,和機器推薦的內容來對比,我發現,機器推薦的遠不如人工(或者說朋友)推薦的精彩。既然這樣,就應該以實名點贊的社交推薦為主,機器推薦為輔。

          當時我給的理由是,我們所看的書,大部分是因為周圍有人推薦而去看,而不是網上書店推薦的書。你少看幾個機器推薦的內容不會覺得可惜,但錯過了朋友們都在看的內容會覺得可惜。這是視頻號能借助社交推薦起來的理由。

          于是五月份開始了變更最頻繁的兩周,幾乎每兩天就要更新一個版本。然后發布了基于朋友點贊的新的灰度版本,終于看到了上揚的數據,用戶的留存非常高。

          所以6月視頻號的用戶到了一個量級。數字其實不重要,但對于一個內容形態的產品來說,一定量級的用戶意味著解決了生死問題,即流量的循環起來了。

          這是一種典型的微信style的產品方法,即通過產品而非運營的方法,找到事情的撬動點,通過產品能力讓事情運轉起來。

          有這個用戶基數說明生存下來了,這時候就可以開始做基礎功能的完善了,比如直播能力等。沒有過生死線的話,做再多功能也是白搭。

          在這里,是社交推薦發揮了作用,當時機器推薦的占比非常小,留存也非常低,我們也差點就放棄了機器推薦。但是,并不是說機器推薦沒有用,而是要在內容豐富的情況下才能發揮作用。

          插一個小故事,6月份的時候,那時社交推薦的新版還在開發吧,我在黑板上寫下一個斷言:未來有一天,視頻的播放量,關注,好友推薦,機器推薦的消耗比例,應該是1:2:10。即,一個人應該平均看10個關注的視頻,20個朋友贊的視頻,100個系統推薦的視頻這樣的比例。

          當時是這么解釋的:

          內容分兩種,一種是你需要花腦力去理解的知識性信息,是學習;一種是不需要花腦力的思維舒適區的消費類的信息,是娛樂。

          朋友贊是朋友強迫你去獲取你未必感興趣的知識性信息,屬于學習類的;機器推薦,是系統投其所好而讓你很舒服的瀏覽你喜歡的消費性信息,屬于娛樂類的。關注里面兩種信息都有。

          因為關注的東西你已經知道大概會是什么了,反而不會太有吸引力,因此是1。朋友贊雖然看起來累,但是不能錯過,所以是2。而系統推薦,符合懶人原則,是大多數人都更容易消費且獲得舒適感的信息,所以是10。但是我們現在的大盤數據,并不是這個比例?,F在朋友贊產生的整體vv,是機器推薦的2倍。

          于是我讓數據同事統計了一下,只拿有關注的用戶來看。有關注的用戶目前極少,屬于活躍用戶,所以代表了未來活躍用戶的行為。

          前幾天的數據是,有關注的用戶,人均在三個tab產生的vv,差不多是1:2:9。

          拿到這個結果時我非常吃驚。它只是一種粗略的估計,并不是說預測特別準確,而是說我們做東西的習慣是,如果這樣做,應該先推理出來一個結果,然后用數據去驗證,才能檢驗方向是不是對的。

          我估計未來這個9還會變得更大。因為這是和內容豐富度相關的。

          說到這里,可能會有人說當機器推薦這個9變得越來越大,不是不符合用完即走嗎。用完即走跟時間長短無關,跟效率有關。

          我們從來不會關注用戶在微信里停留的時長,那不是我們的目標。當用戶想要看內容的時候,不管是文章還是視頻,如果他花了很多時間看,只能說明微信里面有很多值得看的內容,而不是要刻意去消耗他的時間。

          三、什么是視頻?

          過程中還解決了另一個問題,即究竟什么是視頻的問題。

          說到視頻,大家會想到手機相冊里面的視頻文件。就像朋友圈,只能上傳相冊的視頻。我們也確實是通過這個方式,來希望朋友圈里的視頻更多的是用戶自己拍攝的視頻。

          但視頻文件其實是會消失的。

          從Windows轉到蘋果手機的用戶,都會遇到一個問題,以前的文件和文件夾去哪里了。在iOS里,沒有了文件的概念。文件被各個應用自己定義了。這是把文件應用化了,即文件不能脫離應用而存在,一旦脫離了,就是沒有意義無法解釋的數據。

          這是一種很好的觀念。

          原始視頻只是數據,它沒法關聯到其他信息,如創作者,觀眾數,評論等。它還需要存在本地,數據丟了就丟了。

          因此未來的視頻應該是一種結構化數據。它存在云端,有所有的創作者信息,有觀眾的互動信息,能夠很方便的分享。

          文字和視頻等內容,存在的價值在于有人看到,也就是分享。而分享,如果還需要copy整個原始數據,是很落后的。分享應該只是一個鏈接的傳遞。

          這會讓我反思,朋友圈里面上傳視頻,以后會一直用這種原始方式嗎?

          所以在6月的時候,我們需要把視頻號內容分享到朋友圈來,遇到一個問題,它應該長得像一個鏈接呢,還是像一個本地視頻呢?其實是歸類,它應該歸類到文章鏈接,還是一個視頻文件。

          我的答案是,云端化的結構化的視頻,才是視頻,本地的視頻文件,反而是裸數據,是應該被淘汰的。所以你看到的朋友圈里的視頻號的視頻,和現在的本地視頻的展現沒什么區別。

          在這里,視頻號是結構化的視頻內容的載體。我相信以后微信里面流通的視頻,越來越多的會以視頻號視頻的形式存在,而不是視頻文件的方式。這種變化,其實在公眾號體系里體現過一次。公眾號是一個文章的載體。

          它讓文章因為分享而變得有價值。并且,公眾號定義了文章的展現形式,是所有的用戶在閱讀不同的文章時,能以一種相對一致的體驗來閱讀和互動。在我看來,這是對網頁時代閱讀體驗的一次大的體驗提升。

          不管是文章還是視頻,他們存在的價值在于被人看到,或者說被分享。顯然,文章和視頻需要一個載體來傳播。

          如果你能理解公眾號對于文章分享的價值,那么,可以用同樣的思路去理解視頻號對于視頻分享的價值。

          載體的含義還體現在,我們自己不做內容,也不會去買內容。我們不關注具體的內容是什么。我們只做內容的承載和傳遞。

          四、長視頻和短視頻

          我們也遇到了超過一分鐘視頻的問題。自然而然地,大家會認為長視頻和短視頻是兩種東西,因此應該設計成兩種不同的內容對象。

          中間有個版本確實是視頻號有專門的長視頻這一欄的,甚至長視頻和短視頻的評論點贊還是分開的。

          但如果仔細思考,在微信號體系里,是不應該做這種區分的。長短視頻的區別只是消費的場景不一樣。短視頻適合碎片時間的連續消費,而長視頻適合有一大段時間來看。

          對視頻號來說,簡化這個問題的方法,是把一分鐘以內的視頻是為短視頻,一分鐘以上的視頻的開頭一分鐘視為這個視頻的摘要或簡介。我把它稱為封面。這樣的話,視頻號不區分長視頻短視頻,但是又能兼容短視頻的體驗。

          關于長視頻,我希望視頻號逐漸積累越來越多的長視頻,成為長視頻的云端倉庫。

          將來有一天,也許我們會提供一個檢索或推薦入口,這樣用戶可以找到豐富的長視頻內容。

          這個其實也是未來非常有想象力的。

          五、視頻號和個人的關系

          視頻號的初衷是讓人人都能很容易通過視頻化的方式去公開表達內容。但做產品的人都知道,讓用戶去發表內容去表達是最困難的。

          現階段我們也并沒有做到讓很多人在視頻號去發表自己的日常。但我們有個舉措,讓我們能看到希望。

          我們上線了將自己的視頻號內容關聯到自己的微信名片的功能。我們發現結果比預料的要好很多,到現在已經有非常多人在名片展示了自己的視頻號內容,并且還在持續增長。這是個很好的趨勢。

          這里有一個很有意思的話題,有的時候大家會覺得微信做東西特別保守。其實并不是保守,而是說很多東西是不對或不應該做的。

          舉個例子,我們可以把視頻號的內容掛在名片上,我們以前為什么不做一個類似這樣的展示自己的一些精選的照片和視頻的功能?

          我們內部討論過好多次,因為很多人朋友圈設置了三天可見,越來越多了,我們打開名片有的時候幾乎看不到東西。為什么不給他們提供一個可以把一些照片精選放在那里的功能,這樣朋友進來至少可以看到一些。

          之前我們不愿意做這個功能是因為,一旦這樣做了,你可能只是把你歷史上最好的照片放到那里,永遠就不去修改它了。

          這次我們愿意這樣做是因為,如果你關聯到你的視頻號的內容,那它就是活的,因為你會不停地更新你的視頻號內容,而不是說我選幾個歷史上最好的照片作為精美的裝飾就永遠不變了。

          畢竟,視頻號希望的是人人都能表達,而不是只有網紅和大v的表演。

          六、信息展現的方式

          信息展現形式一直是互聯網產品里的最基礎部分,也是爭議最大的。這里說的是指對信息列表的展現形式。

          常見比如有瀑布流,通俗稱呼的信息流,以及全屏。他們的區別是一屏里放多少條內容合適。全屏就是一屏只放一條內容。

          以我自己的經驗來說,我把這些式樣的選擇總結為一個粗略的規律,就是——

          一屏里的內容條數,應當跟命中率成反比。

          命中率是指用戶可能感興趣的內容條數的比例。比如10個郵件,只有一個是我想要看的,命中率是10%。

          以朋友圈舉例,因為你并不是要看每一個朋友發的內容的,所以命中率并不高,如果改為全屏,就是災難。同時,如果你添加的好友越來越多,命中率還會降低,因此就更不能增加每條內容的顯示面積。

          如果我們要增大顯示面積,就必須提高命中率。但朋友圈的命中率是很難提高的,因為朋友圈的命中率取決于朋友跟你的關系,而非他發的內容,而我們很難知道你對哪個朋友更感興趣。

          而往往關注內容越多的人,命中率就越低。所以公眾號改版的時候,其實是一屏里的內容條數變少了,雖然帶來了點擊次數的減少,但關注多的人還是會抱怨,因為選擇的難度增大了。但對于關注少的人,閱讀量是上升了,因為只關注了幾個號的話,命中率本來就高。后來我們在訂閱號的頂部增加了常讀號的展示,其實是提升了命中率。

          視頻號的上半年,平臺的內容豐富度不夠,命中率是很低的。所以當時半屏式的信息流是合適的,一屏顯示超過一項內容,用戶有選擇的余地。那時候如果直接上全屏,可能死的很快。

          到下半年,內容開始豐富了,命中率開始提高了。并且全屏對于單個視頻的展現效果當然也會比半屏要好,我們開始灰度的切換到全屏模式。

          這里說個有意思的數據。我們把關注和機器推薦灰度切換到全屏,并且和沒有灰度全屏的用戶來對比觀察。發現全屏后,關注tab的人均vv(video view,視頻播放量)下降了,推薦tab的上升了。這應該可以推導出來,關注tab的命中率不夠高,以至于全屏后帶來了輕微的選擇困難。

          我們在公眾號里在給關注的號的內容做排序,以及在視頻號里,也會通過算法對關注的內容做排序,也是為了提高命中率。

          特別是全屏之后,因為用戶的選擇余地是零了,更需要算法來做排序。

          七、直播

          互聯網歷史上,個人在公開領域的表達方式一直在演變。

          最早的時候,需要你會寫HTML來做網頁。后來有了博客,博客之后是微博這樣的短文字?,F在是圖片和短視頻。

          演變的方向是往更能被普通人生產和消費的方向去走的。所以會體現為更短更碎片化。

          所以我在想,還有什么內容形態是比短視頻更能被更多人接受的。

          我覺得直播有這個機會。直播比短視頻的生產更容易,是因為拍一段短視頻是需要有內容準備的。

          而直播,是不需要準備內容的,它就是日常聊天。這是一個非常巨大的差別,直接降低了直播的門檻。這是一種輕松的表達,普通人也能夠去生產出來,朋友也更愿意去消費。

          雖然直播已經發展了很多年,大家對直播的認知還是帶貨的領域,這是作為內容形態的方式來思考,就是個人表達的形態方面來思考的。

          所以,直播在未來有可能會成為一種很多人在用的個人表達方式。

          做一個未來的設想,很久以后,每個人的微信名片應該是活的,意思是,我打開你的名片,如果你剛好戴了一個可以直播的眼鏡正在直播,那我就能直接看到你看到的東西。這可能是個人直播的終極形態。

          前不久有一場流星雨的直播,有超過100萬人觀看了,有點超出我們的意料了。因為,我們并沒有做任何中心化的流量分發去推它,它自然就吸引了100萬人。

          在這里,是社交推薦在發生作用,通過朋友圈,群聊等進行了人群的擴散。當然,在視頻號和直播的入口里面,我們還是會用機器推薦來給用戶推薦適合的直播。

          當直播多了以后,除了你的朋友,我們也希望系統能告訴你哪個直播值得你看一下,這是我們的機器推薦有更大的考驗。但社交推薦,仍然會是非常重要的傳播途徑。

          其實我們現在還沒有直播的入口,下一個版本可能就有了。我們現在有一個附近的直播和人,把它調一下,可能叫直播和附近。

          我們也在豐富直播電商的能力,包括直播里可以掛接到第三方的小程序。

          春節快到了,我們都習慣了在群里發紅包搶紅包來拜年了。但其實線下傳統的拜年是走家串戶面對面的行為。

          直播其實更能模擬出線下拜年這種傳統方式。

          所以我們今年在直播這里也做了一點小小的東西,我們希望今年的春節能夠有一些人通過直播的方式來拜年,那就特別好。

          八、關于創作者

          很多人會關心平臺會給創作者什么樣的支持。

          如上面提到的,我們更希望做視頻的載體,并且讓視頻號成為個人和機構的官網。平臺在這里的角色是連接,而不是做內容。

          但和以前的官網不一樣的地方在于,微信體系里的官網,內容是能自己流通的。因此你不用太擔心做了官網也沒有人訪問。

          我剛剛說到微信里集合了很多產品可能沒法嘗試的東西,比如說對于信息訪問,我們可能會有關注關系可以獲得,有搜索,有推薦,有系統推薦和社交傳遞這樣一些方式,所以不用太擔心自己的內容在這里沒有人會看。

          剛開始我們去邀請一些明星進來,明星會說有沒有簽約費。我們的回答是,我們希望你進來,因為你應該經營自己的粉絲,最終你會實現盈利,但不會平臺出面來購買內容。

          所以視頻號這里,我們沒有花一分錢去購買內容。將來也不想這么做。倒不是為了省錢,而是,當我們不花錢買內容的時候,創作者還愿意進來,才說明創作者能靠自己的努力獲得回報,才說明我們建立了一個能自行運轉起來的生態。

          同時,我相信普通人的創作力是巨大的,相反,購買的內容反而不一定能打動人。

          微信的歷史上,我們一直不強調強運營,也是這個原因。

          系統和規則會比運營的效率高太多了。就像我們現在看到微信支付,其實已經覆蓋面非常大,但是我們微信支付的人數并不算多,對于支付這樣一個需要跟線下接觸的行業來說,我們每個行業微信支付里可能就一兩個人在負責整個行業。

          公眾號的那一個slogan照樣可以用在視頻號上,再小的個體,也有自己的品牌。

          其實你現在放在視頻號上也是很適用的。

          九、一些有趣的實驗性項目

          我們也有一些有趣好玩的實驗性項目在進行中。

          前面提到,做產品其實是個驗證想法的過程。

          如果你腦袋里突然冒出一個想法,可能很不靠譜,但又似乎有意思。然后繼續往深里去想,如果能經過很多次選擇,最終能變為實現,就會體會到做產品的樂趣。

          我就經常會有一些異想天開的想法。

          比如,如果你能拍一下一個人的頭像會怎么樣,如果你能朝跟你聊天的朋友扔一個炸彈在屏幕上炸開嚇他一跳會怎么樣,如果你在聽一首歌的時候能看到其他聽歌的人眼前的畫面會怎么樣,如果你失眠的時候也能看到其他的失眠的人然后大家一起數羊會怎么樣。

          甚至,如果給一個畫布,每個人上去畫一個點,如果有一千萬人輪流去每人依次畫一個點,到最后會不會形成一個圖案?如果在沒有組織的情況下,一千萬人居然畫出來一個圖案,那又意味著什么?

          所有這些都是很有趣的事情。所以做產品絕不是枯燥無味的。雖然大多數想法都會是行不通的,但有少數的能行得通,就非常好了。

          這里,我就簡單描述下微信新版本會有的幾個功能。

          所有的功能在被用戶實際驗證之前,都不能說一定會受歡迎,但是只要思路的方向沒有問題,就可以不斷改進。有些功能也會經歷灰度,完善了才放出來。所以不要抱以太高的期望。這里分享下這些好玩的功能的思考點。

          一個是表情。

          表情是表達方式中的一個基本元素。

          說到表達方式的基本元素,這讓我想起拍一拍。

          很多人會不喜歡被拍,還有很多人因為誤觸而拍錯了人很尷尬。但仍然有1.2億人設置了拍一拍的尾巴,每天幾千萬人在用拍一拍。

          拍一拍也是表達的一種基本元素,并且不同于其他所有方式,它是模擬人類的現實生活中的行為動作,用最簡單的一個身體動作來完成了一次信息傳遞。

          有次內部開會我開玩笑說,未來人們的生活會越來越線上化,人們會懷念這種古老的人和人之間的交互方式的。

          說回到表情。

          人們的表情反映出情緒越來越強烈了。以至于必須經常“裂開”了。

          我的想法可能比裂開更暴力。有一天我跟開發同學說,幫我做一個功能,我扔出一個炸彈,對方的屏幕就裂開來。當然,是動畫效果的裂開,但要求很逼真。

          實現是可以的,但是真的當作一個表情功能的時候,還是會遇到很多坎。

          我說尋找基本元素,即這種表情必須是底層基礎的,而不是一種特殊的。最終我們做到了。

          一個是狀態。

          現在大家打開一個朋友的微信名片,往往除了名字頭像,什么也看不到。朋友圈也很多人設置了時效。

          但事情不應該是這樣的,每個名片,應該是活生生的才對。名片就是我們線上化生活的自己,它應該反映自己真實的狀態。

          我們之前嘗試用視頻動態表達一個人的狀態,但視頻化表達在這個地方其實挺困難的,因為確實拍個視頻讓所有的好友看到,這個壓力還是挺大的,所以視頻動態不算成功,每天大概有100多萬的人在發視頻動態,我們也會把它升級一下。

          升級以后的話,我們希望走到視頻的另外一面。

          以前我說以前每個人發文字是很困難的,其實有一個前提,發一段讓很多人都看的文字是很困難的,其實自己隨便說一句話其實并不困難,狀態就是隨便說一句話這樣一個東西。

          所以我們會走到視頻的另外一面,通過你隨便說一句話,隨便寫幾個字來表達自己的狀態。

          并且,在某一時刻,一定還有其他的人跟你處在同一種狀態里,你會希望看到他們??吹皆诖蛲粋€游戲的人,同一個咖啡吧的人,同一個景點旅游的人等,甚至是,同一種心情的人。

          我一直認為,社交的本質是找到同類。

          狀態,是用來給人看到的,最好還是給同類的人看到。

          所以這一次,我們基于簡單的文字來組織狀態這樣一個功能。

          我不知道結果會怎么樣。對于社交產品,因為它是群體互動來導致結果的,所以很難預料社交功能交給用戶群體后的反應。

          但是,這樣的嘗試是應該的。

          因為,個人的狀態表達的需求沒有被滿足。哪怕是簡單的一句“我今天很郁悶”,你不會發朋友圈,也不會跟朋友專門去說,那么,總需要一個地方可以說的。

          十、歌曲

          還有一個新的嘗試是關于聽歌的,在座有一位聽眾跟我聊過怎樣看見一首歌,歌不是用來聽的,是用來看的。

          自從有了網絡、移動互聯網以后,我感覺是很多人聽歌變得少了,只有在開車的時候才會聽歌,因為在任何其他時候,你會寧愿去看視頻了。

          微信其實是一個包含信息種類特別多的一個東西,但我一直不太滿意的一點是在微信里面聽歌的體驗不太好,比如說我其實特別不理解為什么所有播放器都是一個電唱機在那里轉,因為電唱機在我讀中學的時候,我家里有一個,我還自己去買唱片,但是我想應該大部分用戶不會經歷過那個時代,那為什么他們要看不認識的物品,一個唱盤在那里轉。

          我們在聽歌的時候應該看見什么?

          很多人說我們在聽歌的時候不應該看見什么,而是應該聽就好了,但我希望聽歌的時候能夠看到一點東西,因為聽歌的時候有一點想象力,我們之所以希望在開車的時候聽,是因為你的眼睛能看到很多的東西,讓你的想象比平時更活躍了。

          如果這些東西,聽同一首歌的人往往有很多人,舉個例子,你可以想象你在這里聽這首歌,另外一個人在另外的場景,還有很多類似的人,如果把他們聽歌的眼前畫面都連起來的話,總有一些人的畫面跟你是非常類似的,他能夠打動你的,所以從這個點上出發,我們就把聽歌的體驗做了一個視覺化的展現。

          但這個難度其實特別大,因為技術還沒有到那一步,我們的眼球都有一個攝像頭實時傳到云端,未來遲早會到那一步。

          所以目前只能通過別的產品方式才能做到這一步,就是說有一些熱心的用戶可能會愿意說,我能夠把某一首歌變成一個制作得很精美的,類似MV這樣一個東西,可以分享給更多的人看到。

          十一、浮窗

          我其實一直很不喜歡浮窗,因為它就像狗皮膏藥,這也是PC時代大部分網頁瀏覽的體驗都不好的一個原因。

          為了解決一篇文章要很久才看完,而中途要不斷處理微信消息的需要,我們有了浮窗功能。但它并不完美。

          很多時候,一篇文章,一個長視頻,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁瑣的。

          現在,微信提供了一個尚未看完的內容的列表,方便可以隨時找回這些內容繼續看完。

          尤其是對于長視頻,更加需要隨時可以切走,然后又能快速找到。

          直播也一樣需要。

          十二、輸入法

          還有一個可以提一下的新的研發中的產品,是團隊正在研發的輸入法。

          我們會經常收到投訴,說剛剛在微信里聊到什么,就在其他app里看到這個東西的廣告,是不是微信在出賣我的聊天記錄給廣告主。其實并不會。

          我們從來不會去分析用戶的聊天記錄,即便因此損失了很多廣告收入。

          所以當我們的技術團隊,就是機器語義理解的團隊,說我們自己做輸入法可能會做的更好的時候,我當然很贊成。

          因為至少,在安全性方面,我們可以做的足夠好。

          我們的目標不是一下子獲取多少用戶。

          因為輸入法是文字表達的入口,并且輸入法必然越來越智能,可能出現新的輸入形態,所以還是值得投入去做的。

          十三、團隊

          很多人說視頻號迭代速度特別快,事實上在微信的頭兩年,我們都是這個速度,后來有時快有時慢,其實我認為做產品就是應該快的。

          我經常說的一句話是,如果一個問題,三天沒有想出答案的話,那么三個月也想不出來,因此要么三天內找到解決方法,要么放棄,去尋找新的路徑,而不是耗在那里。

          孫子兵法說到,行軍打仗應該要“其徐如林,其疾如風”,做產品也是這樣,要么沒有想清楚,那不如什么都不做;如果要做,就要非常快速的迭代。

          視頻號團隊到目前為止也就一兩百人,其中還包括了三個算法團隊,前后臺開發,產品運營等。

          這很微信風格。

          互聯網產品是關于創造力的,而不是拼人數。

          如果一個一百人的團隊做不出來一個產品,給一千人也照樣做不出來,甚至做的更差,因為一千人的內耗太大了。

          十四、關于產品

          微信十年,如果非要用兩個詞來描述微信,我想,一個是連接,一個是簡單。

          連接是很美的。

          因為世界的運行就是靠萬事萬物的連接而進行的。對產品來說,做連接,意味著做服務的底層設施,因為基于連接可以演變出來的結果是最豐富的。

          很多的社交產品可能也做連接,但它止步于人,微信的連接范疇更大,公眾號、小程序目標都是連接,連接人和內容、人和服務,包括微信支付也可以認為是一種貨幣的連接,視頻號的目標也是連接。

          重心不是在做內容,而是在做底層的連接,這很重要。這也是為什么我們會提“去中心化“,因為連接和中心化是有些排斥的。

          再說簡單。

          我用簡單來作為美觀,實用,合理,優雅的代名詞。

          簡單是很美的。從一個物理公式到一個日常用品,往往是簡單的是更好的。實現同樣一個目標,有一千種方法,但只有最簡單的方法是最美的。正是因為有一千種方法存在,所以要真正做到簡單是很難的。

          以前在飯否,看到很多產品越做越復雜,我吐槽說,“一個產品,要加多少功能,才能成為一個垃圾產品??!” 不是說加功能會讓產品不好,而是加了不必要的功能,或者加功能的方式不對。

          十年來,微信加了很多功能。

          我很慶幸的是,現在的微信,還幾乎和十年前的微信一樣簡單;雖然比十年前多了非常多功能,但這些功能,都已經是用的最簡單的辦法了,所以增加的復雜度會小。

          簡單才會好用,特別是一個產品有十億人在用的時候。

          有時候也會想,很多用戶其實并不一定很在意產品是否簡單,粗制濫造的產品,也可能照樣會有很多人用的;但是我們還是會追求簡單,因為總有部分人,會認同這種簡單背后的美感。

          微信雖然是這么大用戶量的產品了,并且經歷了10年之久了;但我還是希望,它能一直保持自己的風格,一直像一個小而美的產品一樣,有自己的靈魂,有自己的審美,有自己的創意,有自己的觀念。

          而不僅僅是數字的奴隸,這樣的話,我和團隊,才會為我們的工作而感到驕傲,并且覺得有意義,這是我對微信十年在今天的最后一個總結。


          文章來源:人人都是產品經理  作者:紙盒小卡車

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


          B端產品彈窗以及設計方法

          資深UI設計者

          彈窗作為應用的輔助窗口之一,在B端產品中占據重要作用,很多產品甚至大部分功能都需要在彈窗中完成。有些彈窗會被用來承擔復雜的設置、有些彈窗會被頻繁調用、有些彈窗需要提供更詳細和更結構化的信息,如何處理好彈窗在整個任務流中的交互對UI來說非常重要,因此本文主要探討B端產品中的彈窗設計和規范。文末會提供可供調研學習的B端網站。


          如果你想了解B端系統圖標的設計方法,可以瀏覽上一篇《小白適用:如何快速掌握系統圖標的設計方法》,歡迎討論指正。


          一、彈窗、對話框、窗口,你分清了嗎?


          1、彈窗(popup)


          不知道你們有沒有思考過“對話框”和“彈窗”的區別,我們平常所稱呼的“彈窗”主要著眼于動作,意思就是彈出來的窗口,是泛指,在GUI(Graphical User Interface)屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。


          在常用的兩個前端網頁開發組件Ant Design和ElementUI中,沒有單獨命名為“彈窗”的組件,都是細分在各個功能分類中。比如Ant Design中相關的細分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認框等,而ElementUI中則又是不一樣的細分法,除了分類方法和命名不一樣,歸根結底達到的目的是一樣的,以上我們都可稱之為“彈窗”,當然在工作中用細分的稱呼會更專業更明確。


          2、窗口(window)


          這里的“窗口”對標“對話框”和“彈窗”的概念,窗口是承載應用程序的區域,應用程序的窗口被打開,則表示該應用程序正在運行中。窗口可以移動、可以放大縮小,主要有二種姿態,一種是“獨占式”,一種是“暫時式”。顧名思義,“獨占式”就是需要占據大部分屏幕的應用,ps、ai的窗口就是“獨占式”窗口,而“暫時式”則大部分時間在后臺運行,比如音樂播放器、殺毒軟件等,只需在必要時打開即可。



          一個應用通常由一個主窗口和若干輔助窗口構成,彈窗就是典型的輔助窗口之一。


          3、對話框(dialog)


          對話框強調了用戶與計算機進行對話的過程,是疊加在應用主窗口上的彈出框,一般在對話中它會給出消息或要求輸入。當對話完成后,即可關閉對話框。說人話就是,對話框一般需要用戶進行操作,當用戶輸入或者點擊“確認”、“取消”等按鈕時,計算機會根據指令進行工作,這是一個人機“對話”的過程,因此稱之為“對話框”。



          無論在現實中還是界面交互中,我們都不希望對話被打斷,所以對話框通常是模態的(下文會解釋模態和非模態的定義)。


          梳理完三個容易混淆的概念之后,接下來主要從彈窗的二個角度展開討論:彈窗的分類和應用場景;彈窗的設計細節和技巧。


          二、彈窗的分類和應用場景


          1、彈窗的分類


          彈窗可分為兩大類型:“模態彈窗”和“非模態彈窗”。


          模態彈窗:用戶必須給予彈窗反饋,除非點擊關閉或者操作完成,否則彈窗會一直在。形式上來說就是給當前頁面添加蒙層,使用戶將注意力集中在彈窗上。上文提到,無論在現實中還是界面交互中,我們都不希望對話被打斷,模態彈窗不會輕易被打斷,所以對話框通常也都是模態彈窗。



          模態彈窗的常見場景:你打開了一個應用的模態彈窗后沒有管它,然后切換到其他應用程序中去,等你忙完回到原來的應用時,那個當初的模態彈窗仍舊在那兒等你。這就是模態彈窗,雖然看起來僵硬死板,但是它的目的和使用范圍通常是非常清晰的。


          非模態彈窗:不需要給出反饋,不影響用戶的其他操作,主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。


          下圖紅框中就是典型的非模態彈窗,它們可以同時開啟且互不影響,不會影響主程序的進程。



          非模態彈窗的另一個特點就是:實時生效。點開非模態彈窗的同時仍然可以看見主界面,主界面會根據你的操作實時變化,你可以隨心所欲地不斷選擇、改變、選擇、改變,而模態彈窗則無法在你點擊其中一個表單的當下立即做出改變。


          下圖例子就是非模態的屬性配置彈窗。



          2、模態彈窗的應用場景


          1)通知公告類彈窗(通常是重要的信息,需要加強用戶關注度)


          營銷彈窗

          出于營銷目的,這類彈窗都會第一時間出現在你面前,直到手動關閉,它的特點就是不用登錄也會出現,提高曝光率,便于拉新和轉化。


          公告通知彈窗

          主要是為了將一些重要信息通知給用戶,這些信息要么來自一些被觸發的事件,要么來自應用開發者的信息,一般在用戶登錄后第一時間彈出,確保用戶不會錯過。需要注意的是,在應用的通知中心一般也需要保留這類重要或者高級別的通知,以便用戶可以隨時查看回顧。



          提示類消息彈窗

          提示類彈窗是由應用程序主動彈出的消息,主要有三種狀態:錯誤、警告、確認。通常是用戶進行某項操作后給出的反饋信息,會中斷當前工作流,屬于阻塞型提示。



          以上都屬于通知公告類的“模態彈窗”,特點就是一般不需要用戶具體操作,用戶將其關閉或者點擊“確認”等按鈕即代表用戶已經接收到該消息,彈窗就完成了它的任務。


          2)操作配置(B端應用中大部分的模態彈窗都為這種類型)


          簡單配置(表單少,操作清晰)


          “簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入,交互清晰明了。比如創建項目、分享鏈接、更改名稱等操作。



          標簽頁彈窗


          有些應用的功能配置中有很多復雜的屬性,簡單平鋪的彈窗無法滿足需求,需要分層分類歸納,于是從20世紀90年代開始出現了選項卡/標簽頁彈窗。它的優點是合理利用了空間,也能讓用戶更好的理解信息層級。


          mac os 8.5系統的彈窗(發布于1998年10月)


          monday.com的配置彈窗(簡潔的標簽頁)


          標簽頁彈窗的設計必須合理且適度,找到信息之間的因果關系,仔細斟酌并加以連接整理。同時,單個彈窗中的標簽頁不宜過多,一般不超過五個(動態可增減的標簽頁除外)。



          如果你的標簽頁過度堆疊,你需要嘗試改變交互方式,重新整理信息。一種辦法是增加標簽頁的深度,將能夠歸納在一起的內容盡量整合,放置在單個標簽頁中;另一種辦法是拆分信息,分成多個簡單的彈窗。


          下圖中的例子就是第一種辦法,整個彈窗有三個標簽頁,但是單個標簽頁中又劃分了更詳細的結構化信息,是一個典型的標簽頁少但信息量大的彈窗。



          流程步驟彈窗


          流程步驟彈窗與標簽頁彈窗接近,區別就是步驟彈窗需按順序進行,一般上一步未完成之前無法進入下一步,用戶注冊常用這種方式。


          3、非模態彈窗的應用場景


          1)屬性配置彈窗


          屬性配置彈窗主要為了讓用戶改變某一對象的屬性,可以是局部屬性也可以是全局屬性。


          屬性配置也可以用模態彈窗,如何選擇用“模態”還是“非模態”?當你需要讓用戶實時看到界面的變化或者表單項簡單的時候可以選擇“非模態”,如果操作復雜或者信息加載比較耗時,則采用“模態”更合理。


          下圖為實時生效的日期選擇彈窗

          2)下拉菜單


          下拉菜單幾乎都是非模態,它的優勢明顯,沒有復雜操作和各種表單,只需要鼠標劃過點擊即可,快速。


          3)消息提示


          上文中應用級的消息提示通常是模態彈窗,而非模態的消息提示彈窗則通常從頁面的頂部或者右側彈出,這類彈窗可以長時間駐留在屏幕邊緣,也可以一段時間后自動消失。


          4)氣泡框


          點擊按鈕時,彈出氣泡式的彈窗就是氣泡框,氣泡框可以針對元素進行簡單的操作,尺寸也會根據內容大小不一。


          5)Tooltips


          Tooltips跟上圖的氣泡框很類似,區別在于Tooltips更輕量,屬于頁面中最小的彈窗類型,用于功能的提示說明,通常都是文字,背景用深色來與主界面拉開層次。


          三、彈窗的設計細節和技巧


          1、標題


          一般來說,如果是明確的屬性配置彈窗都應該有一個標題來說明用途或功能,以及關聯的動詞來方便理解。比如“創建列表”、“刪除列表”、“修改配置”、“配置參數”等,不同標題對應不同的功能場景,前提是方便理解。另外,動詞在名詞前面或者后面都可以,注意統一規范即可,不要一會兒在前一會兒在后。


          標題字號一般比默認文本字號大2px或4px,也有應用為了突出標題,選擇使用更大的字號,但大的字號也應該符合文字規范,而不是隨意使用。



          2、關閉


          模態彈窗應至少包含一個以上的關閉方式,常見的彈窗關閉方式有4種:(1)、右上角的關閉按鈕;(2)、彈窗底部的“取消”按鈕;(3)、彈窗外的任意區域;(4)、一段時間后自動消失。


          1)關閉按鈕(彈窗外、彈窗內、彈窗上)



          “關閉”按鈕在彈窗外:常見于營銷彈窗,一方面按鈕遠離彈窗,比較隱蔽,拖延用戶關閉彈窗的時間,提高信息的曝光率。


          “關閉”按鈕在彈窗上:版式設計中有一個“破型”的概念,是一種打破規矩的設計技巧,能讓畫面快速吸引眼球,所以營銷類彈窗經常采用這種設計方法。這種概念可以理解為,我們希望用戶關注于被強調的部分,常見的場景就是ios系統批量刪除App的時候,應用圖標左上角會出現“移除”按鈕。這種方式強調了“關閉”按鈕,視覺上增加層次外,用戶的關閉體驗也更佳,減輕干擾性彈窗對用戶的負面情緒。


          “關閉”按鈕在彈窗內:這是應用最廣泛最不容易出錯的方式,對用戶來說,固定在彈窗右上角的“關閉”按鈕代表了安全感,在誤操作或者想中斷操作時我們會自然而然地去右上角點擊“關閉”。


          2)彈窗底部的“取消”等指令性按鈕


          彈窗底部的按鈕一般有2種功能:(1)、取消或者確認;(2)、進入下一步流程?;诖蠖鄶涤脩粲沂终莆帐髽说牧晳T,一般按鈕居右下角的設計方式更廣泛。這些按鈕上的文字大不相同,代表了對計算機的不同指令,但相同的結果都是關閉了當前彈窗。


          有些應用也會采取按鈕居左的設計,這種方式有一個優點就是減少誤操作,讓按鈕遠離鼠標點擊熱區。



          3)、彈窗外的任意區域


          這種方式一般用于模態彈窗,除了彈窗中的關閉按鈕外,點擊彈窗外的任意區域關閉體驗更佳。操作配置類彈窗不建議采用這種方式,容易誤操作導致正在配置中的彈窗被關閉。


          3、字號


          B端彈窗的標題字號通常比內容文本大2px或4px,常用字號為12px、14px、16px,14px為默認文本字號,12px為輔助說明字號,也有緊湊型頁面將12px作為常規字號。無論選用何種字號,都應跟主界面的字體規范保持一致。


          4、排版


          左對齊:彈窗中應用最多的對齊方式,適合表單較多的配置類彈窗。


          居中對齊:常見于消息提示類彈窗,適合圖文結合或者信息較少時的排版方式。


          兩邊對齊:兩邊對齊的方式讓彈窗看起來更規整,適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式,一方面左對齊比兩邊對齊看起來更有層次,另一方面多表單時兩邊對齊會使彈窗看起來冗長。


          除了對齊方式,表單的排列是B端彈窗中最令人頭疼的一塊內容了,在一些復雜的操作彈窗中,常常包含各種類型的表單,例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項,很容易讓表單看起來凌亂,也影響了交互操作。


          單行一個表單項:常見的表單排列,適用于表單較少的排版方式。


          單行多表單并排:在復雜場景中,單行只排列一個表單項會讓彈窗超長,因此會采用多個表單并列分布的方式。這種方式存在2個問題:(1)、如果表單的標題長短不一,看起來參差不齊,下圖中的表單標題一樣長是最理想的場景;(2)、橫向距離長,導致彈窗過大。


          標題與表單分行排列:越來越多的應用采用這種表單排版方法,這種方法可以兼顧更多場景,可拓展性也更高。這種方法會增加縱向空間的占用,不過眼睛焦點的縱向瀏覽比橫向瀏覽獲取信息效率更高,所以在表單復雜的情況下,相比于上一種方法也是一種更優解。


          表單的排版不只局限于一種,我們需要根據表單內容來設計。但是需要注意3點:

          (1)、當表單標題長短不一,上下無法等距排列時,我們要盡量將標題和表單分行排列;

          (2)、一行不要出現太多的表單項,一般來說彈窗中最多一行排列三個;

          (3)、表單的靈活性很強,哪些需要寬度固定,哪些需要根據內容可擴展可換行,我們都要在設計中加以規范說明,多考慮可能會出現的樣式問題,提前規避。


          5、彈窗尺寸


          彈窗是一個容器,容器的大小取決于放置其中的內容物。這里主要討論場景復雜的對話框的尺寸規范,其他例如Tooltips之類可作為單獨的組件在需要的場景直接調用即可。


          對話框的大小主要根據內容而定,B端應用中,一個尺寸無法滿足所有類型的彈窗需求,所以我們要設定幾種常規尺寸,一般可設定為4種:S(通知提示類)、M(配置簡單)、L(配置復雜或者擴展詳情)、特殊(根據實際情況而定)。pc的小屏幕分辨率為1024*768,所以高度盡量控制在600px以內(除去導航欄、工具欄高度),寬度控制在1000px以內,如果你所設計的B端產品在某個固定的場景中使用,也可以根據使用場景而定,原則就是要讓彈窗能夠一屏展示完全。


          6、設計技巧:巧用sketch組件


          這里主要分享一個小技巧,對于彈窗來說很實用。sketch右側屬性面板有一個“調整尺寸“功能,非常適合各種組件化的應用。不同場景下我們會需要不同尺寸的彈窗,有了這個功能,我們不需要每個彈窗都畫一遍,只需要創建一組基本的彈窗規范,其他尺寸可以根據所需場景調整。



          未調整過的組件不能隨意更改尺寸,否則將變形不可用。


          創建彈窗組件時,把彈窗里需要固定不便的尺寸參數設置好。(設置方法:靠左的左邊固定,靠右的右邊固定,對角的靠兩個邊固定,分割線高度固定,文字圖標寬高都固定)。


          設置好后的彈窗組件即可在設計稿中隨意調整大小,固定參數不會發生變化,因此我們在設計規范中只需要做一種或二三種常見的彈窗樣式即可,不需要把設計稿中的每種尺寸都放到設計規范中。


          表單同理,在組件中設置好參數后,調用時可以根據情況替換圖標、文字和寬高,非常方便。

          結語


          在B端設計中,隨著數據量的增加和業務線的擴大,設計師在設計時,常常需要考慮到交互的可擴展性,我們設計的交互至少要滿足未來半年到一年的產品應用。因此作為使用頻率很高的彈窗,我們在設計時尤其需要考慮全面,不只為了滿足當前的場景,也要考慮未來可能應用的場景。


          最后碎碎念一下,這是一篇從2020年跨越到2021年的文章,加上拖延癥,寫了很久...原本只打算簡單的分享和總結,結果越寫越多,越寫越擴展。其中很多內容是自己在實際工作中遇到的坑中摸索出來的,做個總結也便于自己的成長,歡迎各位大佬們批評指正。


          文章來源:站酷  作者:time不休 

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

          日歷

          鏈接

          個人資料

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

          存檔

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