92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

阻力設計在產品中的應用

鶴鶴

一.什么是阻力 ?


在百度百科的定義中,阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力,比如空氣阻力、水流阻力,各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示,擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法,這使其游速在某些條件下可以達到每小時 70-100km,遠超現代潛艇的航速。

人類為了擺脫自然界設計的阻力,做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻,提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。

在人類社會,人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律,諸如此類的阻力都無時無刻規范著人類的行為。


類似地,對于互聯網產品,用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響,這些阻力會阻礙用戶完成目標。


二、為什么會產生阻力 ?


在認知心理學中,我們接受外部世界的刺激之后做出反應的過程中,涉及到我們如何感知、學習、推理、記憶,以及如何把意圖轉化為行為。人類數十萬年的進化過程中,對于感知、學習、推理、記憶的神經結構已經初步進化形成,大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力,從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。


2.1 傾向于通過經驗、環境和目標進行判斷

對于一件新事物,我們感知它的方式通常受到三個因素影響:過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦產品界面中與用戶的經驗預期相悖,就會產生阻力。


2.2 缺乏耐心和思考

面對一個我們從未使用過的機器設備時,我們很少愿意耐心閱讀完它的說明書再去使用它,而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法。《點石成金:訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think(不要讓我思考)”,作者認為設計者在設計一個界面時,最好能夠做到讓界面清晰易懂、一目了然,讓用戶能夠不必過多的思考就能夠使用它,幫助用戶跨越思考過程,讓用戶能夠輕松做出復雜的決策,減少認知壓力。


2.3 心流易被打斷

我們可能都經歷過心流狀態,當我們在極度專注地做某件事時完全沉浸其中并且非常高效,但如果意外地被打擾,會讓我們很煩躁。

有關任務執行的研究文獻中就曾經提到過:中斷會導致錯誤,而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個,重新啟動需要的時間會讓每個任務都變慢。

打擾我們的事情可能是工作時突然的一聲噪聲,也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流,造成用戶的使用阻力。


2.4 無法擺脫的認知負荷

認知負荷理論(Cognitive Load Theory)是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出,由于對人類學習認知和教學指導提供了新的理論框架,該理論在教育領域成為重要的心理學指導理論,在交互設計領域也存在著借鑒意義,理論的主要內容如下:

認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量,被分類為內在認知負荷、外部認知負荷以及相關認知負荷(如下圖)。當任務需要消耗的注意力和記憶容量超出學習者的極限時,就會導致認知超負荷,超出的部分將不會被學習者有效獲取。

不同的呈現形式形成的外部認知負荷是不同的,一般來說,文字>圖式>視聽。因此,為了避免認知超負荷給用戶帶來的使用阻力,我們應該設法簡化信息來降低內在認知負荷,通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。


三、產品設計中的阻力應用


如下圖,基于上述的用戶的認知能力分析,合理的降低阻力,能夠讓用戶在使用產品時效率更高,成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面,我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好,在某些場景下,我們需要增加阻力和提高用戶的使用成本,進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。


四、降低阻力的應用


4.1 提高交互效率


4.1.1 減少操作步驟

類似于一個倒金字塔結構,交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法,可以降低用戶行為路徑中的阻力。


使用合適的控件

不同的控件有著不同的應用場景,控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。

舉一個例子,在微信的朋友圈發布頁中編輯內容后點擊取消后,彈出警告框顯示“不保留”和“保留”按鈕,但是考慮到用戶可能會誤操作點擊取消按鈕的場景,此處應增加一個按鈕讓用戶回到編輯狀態,否則不管用戶選擇哪個選項都會退出發布頁重新進入,從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題,使用了默認有返回操作的上拉菜單控件作為提示方式,即使在誤操作場景下也不會增加操作步驟。

控件方面這里就不展開講了,大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。


復雜任務移交系統

任務都存在其復雜性,當我們無法簡化它時,可以考慮將復雜性移交給系統,使其代替用戶操作。

比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別,自動為用戶填充。 


預判用戶行為

預判用戶行為分為兩種方式,第一種是在用戶操作前,預判可能發生的用戶行為,以建議的形式為用戶提供選擇,縮短用戶行為路徑。

比如拍攝照片后,打開微信聊天頁面,微信會以氣泡的形式詢問用戶是否要發送圖片,如下圖。


第二種是由于用戶的認知錯誤進行了非目標操作時,系統提前識別引導用戶進入正確的流程并完成任務。


比如支付寶聊天界面中,很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬,但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能,從而避免了用戶的錯誤操作,如下圖。


優化頁面流程

不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用,將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式,導致從一級頁面(A)進入到二級頁面(B或C)后,如果想切換信息列表還需要返回到一級頁面再次選擇,增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高,希望用戶專注于當前的信息列表,但是我這樣的用戶經常查看過濾信息列表,擔心是否有重要信息被屏蔽,多出的一步操作還是給我帶來不小的使用阻力。


淘寶訂單模塊的做法就比較合理,從一級頁面(A)進入二級的任何頁面(B 或 C)后,二級頁面可以在標簽欄互相切換,而不需要退回一級頁面再次選擇二級頁面,從而節省了一步操作。


快捷方式

快捷方式有跳轉類和功能類兩種,跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。

比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用,減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。


功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務,比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務,并且在下次一鍵即可完成。


4.1.2 減少頁面跳轉

米哈里·契克森米哈賴在《心流:最佳體驗心理學》中將“最佳體驗”定義為:當我們在做某些事情時,那種全神貫注、投入忘我的狀態。這種狀態下,我們身心合一,甚至感覺不到時間的存在,技術水平也會達到頂峰,在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而,周圍突然的干擾或環境刺激都有可能打破心流體驗。 

用戶在使用軟件產品時很少有心流體驗,因為過多的頁面的跳轉和刷新會中斷用戶心流,冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題,我們可以提高單個頁面的動態容量,在不跳轉頁面的前提下使用戶完成任務,為用戶創造在視覺感受層面上的心流體驗,下面是一些方法舉例。


覆蓋層

覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口,可以由用戶觸發或系統自動觸發,在網頁端和移動端都有著廣泛應用。我們通??梢詫⑵溆糜谳斎雰热?、附加信息、子頁面信息外顯、顯示操作指令等。


a.模態覆蓋層

模態覆蓋層一般由點擊觸發,通常出現后會伴隨亮盒效果,使用戶聚焦于覆蓋層上的任務,用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定,它可以是一個小型的顯示警示信息的彈窗,也可能是一個篇幅很大的信息介紹,在保持上下文的情況下展示更多信息,避免了用戶迷失在各種頁面跳轉中。

如下圖,behance的首頁點擊一個作品后,會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容,而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中,一般只需要 1-3 分鐘的瀏覽后就會關閉頁面,模態覆蓋層的方式使得打開和關閉的操作更加流暢,提高了設計師的瀏覽效率。



模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性,為了避免用戶產生明顯的割裂感,一般適合采用模態覆蓋層的方式展示新頁面。如下圖,知乎使用模態覆蓋層展示評論。


b.詳情覆蓋層

詳情覆蓋層在網頁端通過光標移入觸發,觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時,會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息,避免了跳轉新頁面。


嵌入層

嵌入層類似于抽屜,需要的時候將其展開,不需要的時候將其收起。與模態層不同之處在于,展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有:拓展內容、展示下級內容。

如下圖,微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。


Xmind的嵌入層展示了格式的下級內容,可以在保持能夠繼續編輯腦圖的前提下進行格式設置。


標簽頁

對于內容豐富的頁面,希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。


4.2 降低交互成本


4.2.1 降低操作難度

把某些操作難度大耗費成本高的操作使用新技術解決,比如人臉識別和 OCR 技術可以降低信息輸入成本,不但幫助用戶使用較少的時間完成任務,也降低了用戶的犯錯幾率和使用阻力。

手勢的優化也是降低操作難度的可行方法,優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后,針對不同使用場景的用戶提供了三種退出的方式,大大降低了操作難度。


舉一個反例,得到的書籍詳情頁中,查看詳情的按鈕熱區只存在于文字上,但是用戶的使用習慣會誤認為整塊區域都可以點擊,因此每次點擊多次失敗后才理解熱區的正確位置,如果將熱區擴大到整個區域就可以降低操作的難度。


想要了解更多交互手勢知識可以拓展閱讀: 交互手勢的容錯性和邏輯性 


4.2.2 減少用戶思考


提供默認選擇

用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解,會糾結和疑惑不同選擇之間的區別,最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇,同時允許用戶切換到其他選擇,以此來減少思考,降低使用阻力。

以手機淘寶查看相似寶貝功能改版為例,在舊版中,長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項,點擊后會跳轉到對應頁面。在新版中,長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品,同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是,由于舊版的第二步給用戶的兩個選項讓用戶過多思考,導致第二步的流失率過高,很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶,同時也很方便地去切換到「同款寶貝」,這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。


保持一致性

我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦交互界面中與用戶的經驗預期相悖,就會產生阻力。

上文提到過,我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題,我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此,當設計缺乏一致性時,不但會導致我們已經形成的條件反射和肌肉記憶失效,還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作,從而形成阻力。為了避免這些阻力,我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。

如下圖,警告框的按鈕位置一旦第一次用戶經過使用熟悉后,之后用戶會進行無意識地快速操作,此時如果某個警告框缺乏一致性就會導致錯誤的發生。


4.3 降低認知負荷


4.3.1 降低內在負荷

內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了,它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。


簡潔易懂

如果能夠做到簡潔,就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒,從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍,不應該使用用戶難以理解的各種黑話和行話。在此基礎上,如果能夠通過形象生動的修辭手法幫助用戶快速理解,就更勝一籌了,比如針對垃圾分類,一些網友發明的快速記憶方法就是一個很不錯的例子,如下圖。


重點突出

一段文案中可能有些是重點內容,有些是解釋內容,并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶,能夠引導用戶下一步行動就足夠了,至于其他解釋性或者不重要的內容弱化即可。

針對前兩條規則,我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示,每一次購買火車票的過程中,當我遇到 12306 的這個彈窗,都會讓我用不少時間去進行理解和思考。首先在個人看來,“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在,如果沒有標題,直接展示正文即可;其次,正文的內容重點信息不突出,其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車。”過于長和復雜,很考驗用戶的短期記憶和耐心;最后,按鈕文字沒有提供操作路徑,用戶想知道如何操作需要先閱讀完上面的文案。


飛豬的案例就避免了 12306 所存在的問題,做到了簡潔易懂和重點突出,如下圖。


表意清晰

表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案,文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。


保持一致

同一個軟件系統中,表達相同概念的用詞一致。模塊中的相似文案,語法表達方式一致。上文提到我們人類很少愿意思考的特點,一旦一個軟件系統出現表示同一個概念,但是名稱不一樣的詞語,我們大腦就不得不開始被迫思考:“這個詞語和之前那個很接近但是有些不一樣,它們是同一個東西嗎?”這個思考過程從而形成了不小的阻力。《認知與設計》一書中提到一條規則:“同一個名稱,就是同一個東西;不同的名稱,就是不同的東西。”因此,一致性是撰寫交互文案的一條重要原則。


4.3.2 降低外在負荷

當信息的內在負荷不能再進行降低時,通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化,降低外在負荷,使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題,這里就不做展開了。



五、提高阻力的應用


阻力并不是越小越好,在某些場景下,我們需要提高阻力提高用戶的使用成本達成某些目的。


5.1 優化交互體驗


5.1.1 提高防錯能力

類似于馬路上的減速帶,在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力,減緩用戶的操作的節奏,達到防錯的目的。如下圖,在藍湖中如果要刪除一個項目,就需要先輸入項目的名稱后才能成功刪除,通過增加阻力提高了防錯能力。



5.1.2 提供安全感

針對涉及到用戶隱私的敏感操作,通過設計特定的交互流程讓用戶體驗到安全感,比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂,增加用戶的確定感和可控感。


5.1.3 建立儀式感

生活中大部分的時刻都是單調乏味的,我們需要使用各種儀式點綴它。與此類似,在用戶的操作行為路徑里增加一些不必要的過程,也能成為用戶體驗旅程中的點睛之筆。

就像多年前堅果手機一代的包裝,設計師別具匠心的將包裝設計為一次充滿著童趣的體驗,雖然拆包裝的過程時間增加,但是給予用戶似曾相識的場景是不可替代的。


看似使用起來費力的微信搖一搖,可以加強用戶的參與感和儀式感,就仿佛融合著一種占卜未知世界的神秘體驗,這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包,眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包,并樂此不疲。盡管增加了操作成本和使用阻力,但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。


5.2 維護社區生態

用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多,內容質量就越高,進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區,就會同時帶來大量的負面內容,造成對其他用戶的干擾,甚至導致他們大量流失。因此,為了讓一個產品的社區生態能夠健康發展,我們需要采取一些篩選方法來設置阻力,以此來篩選出對平臺有益的用戶和內容。


5.2.1 篩選用戶


邀請制

很多產品在冷啟動階段,為了避免垃圾用戶和提高社區質量,會設立邀請制來控制用戶來源,然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本,保持服務器穩定,甚至可以制造一種供不應求的感覺,獲得更多的討論度。


價格門檻

網絡騙局在社交類產品屢見不鮮,婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量,不僅嚴防死守,還會設立價格門檻,不付費直接無法使用,這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見,但是確實有效地進行了用戶篩選。



測試門檻

通過設置測試題將用戶分成不同的群體,進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試,需要花費的時間成本比較高,通過這種方式篩選出真正認同 B 站社區文化的優質用戶,給予這些用戶更多在社區中互動的權限,從而也大量減少了低質量用戶的負面行為。

上述的三種用戶篩選方法是否適用,需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多,這里只是簡單舉例。


5.2.2 篩選內容

不同的內容形式對于社區的價值是不一樣,我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式,如果用戶想要發布純文字內容,需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容,附有圖片的內容對于其他用戶更具有吸引力,通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間,從而也可以使朋友圈廣告得到更多的曝光。


5.3 迎合商業目標

有時產品的商業目標和用戶目標存在一定沖突時,損失一定的用戶體驗滿足商業目標是不得不進行的選擇,這需要我們進行合理的平衡。


5.3.1 功能引導

為了迎合商業目標,我們有時需要針對一些功能設置一定操作阻力將其進行弱化,然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見,比如通過強化按鈕對比進行功能的引導,如下圖。



5.3.2 歧視性策略

歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分,針對身份等級低的用戶設置使用阻力,以便于引導其投入更多精力和資源,或者通過此方式給予高等級用戶優越感,刺激其進行分享炫耀。

16 年發布的支付寶生活圈就是一個很好的案例,芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖,等待朋友們的膜拜點贊?;ヂ摼W產品中,每增加一個動作,用戶都會呈幾何級流失,但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作,幫助支付寶生活圈實現了刷屏傳播的效果。


六、總結


雖然讓用戶暢通無阻地使用產品是我們的目標,但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下,我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路,助力你在產品優化探索中找到可行的切入點。



文章來源:站酷   作者:Ballen成名

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


設計創新|QQ主題美化體驗升級

鶴鶴

QQ主題自2013年誕生,至今7年時間,保持了整個營收的Top3的成績,受到了廣大用戶的喜愛。隨著QQ數年來版本的迭代,我們也漸漸傾聽到了一些用戶對主題的反饋,為了給用戶帶來更好的體驗,我們決定對QQ主題從上游到下游進行一次全面的優化。





01 主題方案的變革

——————————

產品問題&用戶調研

我們對QQ主題進行了兩輪用戶體驗反饋和調研,發現:目前的外網主題存在機型適配效果差、素材制作質量差、缺少全局美化等體驗問題;而同時,用戶調研的結果表明我們的用戶希望體驗到更好更高品質更全面個性化的主題。





項目設計目標

基于現網產品問題和用戶調研結果,對優化方向進行了歸納分類,最終確定QQ主題體驗升級的項目設計目標:增加主題覆蓋范圍 ,提升主題的美化質量 ,提升主題的可用性。


探索解決方案

為了達成上面的三個目標,一開始我們根據QQ主題的實現邏輯制定了初步的優化方案:通過新增素材增加主題覆蓋范圍,通過修改舊素材提升主題可用性和質量。



但在進行執行評審的時候,我們意識到,這樣的方案雖然可行,但落地成本非常的巨大,需要每個主題包內新增兩端共1800多張切圖,花耗多家cp公司至少四個月的時間和人力。



我們不得不推倒開始的方案,開始思考:是否有更好的解決方案?


在對主題制作流程、客戶端呈現邏輯、日常運營維護工作等問題進行深入的溯源挖掘后發現:QQ主題目前實現個性化的方案是后臺下發素材包替換本地客戶端資源實現個性化。而這就導致了素材包本身是固定的內容,只能被動的接受版本更新帶來的種種問題。


在這樣的情況下,即使我們按照一開始的方案執行落地,多個版本后我們仍需大量的人力去進行維護和更新才能保證用戶的體驗。



所以,我們必須打破舊方案帶來的弊端,要讓素材活起來


在綜合設計思維,開發思維,運營思維去思考問題后,我們提出了一個嶄新的實現方案:終端染色(使用Color-filter,對png進行染色的技術)+分色映射(將資源與色值進行映射,用一套有限色板去管理無限資源的概念)。



在這套新的個性化實現方案支持下,設計師簡單的對色板進行配色,就能夠對QQ客戶端的全局顏色進行變化。而當版本更新發生資源變更時,僅需維護通用的線上映射關系,資源即可自動適配到應有的顏色。




評估解決方案

針對主題方案的變革新方案,分別從優點、變化、難點3個維度進行綜合評估:


- 優點:

(1) 整體學習,制作,運營,維護的成本降低

(2) 美化范圍變大,下載資源變小,用戶體驗得到改善

(3) 效率得到優化,難度降低,設計師有更多時間提升主題質量


- 變化:

(1) CP學習新的制作方式

(2) 產品運營省去了過往定期維護素材的工作

(3) 設計師在版本迭代時候進行新資源的分色映射關系

(4) 開發人員進行統一的分色映射表維護管理


- 缺點:

(1) 方案工作量大,多達120+的界面檢驗,上千個客戶端資源,大量的代碼需要修改。

(2) 方案執行難度大,包括如何用有限的色板兼容更多的設計需求,資源如何在不同場景得到更有效的復用,設計與開發未來如何進行映射表的對接,以及版本的上下兼容。


推動落地


設計師提出“終端染色+分色映射”的新方案后,通過積極拉動會議,向主題業務相關的多角色進行新舊方案的優劣討論,方案得到一致認同后,多方聯動形成項目組。


其次進行可行性評估,與開發結對緊密協作,共同討論難點攻克新方案落地要點。


最后基于前期可行性評估,以及難點預研,項目組規劃出階段性的落地方案。


方案的落地主要為三部分工作: 梳理標記->歸納轉化->編譯覆蓋。



梳理標記:


前端開發逐個查找界面的資源和代碼并標記,交付給設計師進行資源色值的規劃


歸納轉化:


設計師根據ui的配色規則以及個性場景需要,進行ui色板的構建及資源的顏色映射分配。


在這一過程使用騰訊文檔進行設計語言與開發代碼的轉化。



編譯覆蓋:

修改代碼,讓資源支持個性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進行實機的染色編譯并和設計師共同檢驗效果。


而在上述工作中,設計師的任務難點就在于色板的設計和染色規則的構建。


首先設計師根據QQ的ui規范,建立初步的色板;下一步,創建界面demo,模擬資源與色板的映射關系;然后替換多個不同的色板檢驗主題染色后多場景下的效果,再對色板和染色規則進行反復的調整;最后在效果符合預期的時候,再輸出色板和染色規則并最終在真機上進行驗證。




第一階段成果

QQ舊主題:僅覆蓋6個界面、素材包內涵400+切圖、日常需要花費巨大成本維護1000多套主題。


主題新方案落地后:覆蓋范圍從6個界面擴展到60+界面、素材切圖降低至48張、600多個資源得到梳理優化、60+個舊主題存在的可用性問題得到解決、維護成本得到大大降低。




02 主題智能編輯器的誕生

——————————

主題新方案落地后,考慮到舊主題制作時間長,難度大,設計費用高的問題,產品側希望設計師能配合新的染色方案去優化主題制作、上架、驗收的流程。


確定設計目標

根據舊流程里各個角色反饋的問題點,第2階段的目標可提煉為:提升制作效率、打包效率、驗收效率??紤]到舊流程中效率低、出錯率高的步驟大多是人工操作部分,我們計劃設計一個智能化的主題編輯器來實現工業化的主題生產。



探索解決方案


以提升效率為目標,首先深入制作流程勘察,挖掘制作流程的關鍵核心點,并提煉關鍵觸點、痛點問題;基于各個觸點關鍵問題,逐一給出解決方案,并全局的回顧整個流程,從全局去統領優化方案;繼而以落地為導向,明確問題解決的優先級,穩步前進規劃方案落地。在解決方案中,本地編譯體驗已實現,其他能力落地優先級如下:


- 首先解決智能切圖和智能配色,優先級最高


- 其次解決規范優化和多界面預覽,優先級居中


- 最后是直連后臺,運營做審核,優先級最低



方案落地

傳統的主題制作中往往最費時間和最易出錯的就是切圖,在這里我們使用了雙重保險。


保險1:編輯器將內置一套智能化的切圖合成處理方案,設計師僅需上傳極少量的必須切圖。編輯器還會對上傳的切圖會進行命名、尺寸、格式的檢測。


保險2:官方設計師預設主題的PSD/SKETCH設計模板,附帶切圖命名尺寸格式等,畫完后一鍵即可導出全套切圖資源。

新主題的染色規則中,色板存在21個顏色需要配色。對CP來說,即使有設計規范進行學習,也存在著出錯的可能。為了讓制作通過率達到最高,我們計劃通過編輯器內置的智能配色,將復雜的配色操作簡化為2步操作,達到快速穩定地輸出合格的配色的效果。


新主題色板中,顏色可分為主色系和背景色系,兩大色系下的色值再各有不同的色值要求。



從設計師的理想角度來看,如果只進行主色和背景色的選擇,即可輸出實現21個顏色的話,無疑效率和通過率都會得到大大提升。


為了實現理想效果,我們設計了一套方案:


在選擇主色、背景色后,首先對它們進行一個檢測,在這里我們引入了WCAG2.0的標準,檢測主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們再把QQ設計規范中,對21個顏色的不同微小要求,通過HSB顏色模型轉換為數據化的代碼條件并內置在編輯器中。


這樣,CP選擇的兩個顏色,通過顏色檢測、顏色模型轉換、預設條件的微調,就變成了符合我們視覺層級規范要求和可用性要求的21個顏色。



在實現了智能切圖、智能配色、導入設計稿、在線預覽、結構化打包、手機實際預覽等能力后,編輯器的能力基本得到滿足,我們接下來對編輯器進行框架設計,在多方案權衡后,最終采用了元素作導航,右邊區域保持全局預覽的交互框架,并設計了編輯器的ui界面。





第二階段項目成果

使用編輯器前:從制作到上架需要約4周時間,每月上架主題平均為12個。


接入編輯器后:僅需一天即可完成素材的制作到上架,并且得益于制作難度的降低,可制作主題的CP得到了擴充,目前每月上架主題穩定在2000+個。




03 主題適配規范網站的搭建

——————————

在完成了主題效果優化、主題制作優化后,我們把注意力放在了制作上架之后的流程-適配維護。


舊的主題適配維護涉及到cp/設計師/運營/開發四個角色的大量人力成本。


而新主題優化后,僅需要設計師&開發工程師兩位角色進行低成本的操作。



但在實際工作中,版本中的不同更新都是由不同的設計師&開發負責的,適配工作往往很難執行。所以為了保證適配的效果,除了在產品的工作流程中增加適配規定外,我們還希望能幫助到不同業務方降低適配的成本



新適配流程中,設計師其實僅僅需要根據染色規則對新增資源去定映射關系,而實際映射的寫入是開發操作的。那如果兩個角色的工作能合并,并且省去學習新適配規則以及溝通的成本呢?



從幫助開發去理解分色染色的層面,我們把資源元素和顏色進行了場景化的匹配應對,并且把規則關系整理成了目錄,搭建了Q-Element適配規范網站;開發同學在進行適配時候僅需根據設計稿的新增部分,尋找對應目錄下的規則關系,即可對元素進行適配。





第三階段項目成果

優化前:主題的版本適配需要設計開發產品的多方配合,花費數天時間去完成適配。


優化后:僅需開發1個小時的時間即可完成適配和驗證。



總結


通過3個階段的努力,QQ主題美化初步完成了主題效果、主題制化、主題維護成本的三大優化。上線半年后,目前QQ新主題已經達到1萬八千個,并且借助QQ美化平臺完成了外部創作人、QQ、QQ用戶三者之間的生態搭建,正源源不斷的提供給用戶更多更好的個性化主題。我們也會進一步努力,由QQ主題開始對個性化進行新一輪的優化,帶給用戶更好的體驗。



最后,廣大設計師的機會來了!如果您擅長插畫或者動畫,點此鏈接https://ycg.qq.com/qcc,報名參與我們的原創空間和QQ美化平臺項目。按照頁面引導提交作品審核,經原創館審核后,就可以獲得創作權限。 您的原創作品將被QQ及QQ空間數億用戶付費使用,并獲得相應比例分成。




文章來源:站酷   作者:騰訊ISUX

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


該如何給兒童產品做設計?收下這個思路分析

鶴鶴

針對不同的受眾我們會做不一樣的設計,今天是針對兒童進行的產品設計思路的內容分享,面對兒童產品,我們需要從心理生理上的區別分析,進而推動內容、交互、視覺、動畫等設計,一起來了解下吧~

“小山上的風,沒有一個人知道,沒有一個人能告訴我;風從什么地方來,風到什么地方去?!?

英國的詩人米爾恩在給孩子的詩歌《小山上的風》里如是寫道。

在不同的年紀,這個世界帶給我們的觸動和感知都是不一樣的。那么當我們為兒童進行設計時,該如何去呈現呢?讓我們一起來探討下吧。

他們與我們

近年來,兒童產品的市場是比較火熱的,由于兒童的生長變化較快,他們在心理和生理上都與我們成人有較大不同,對于外界的信號,他們更喜歡得到視覺和聽覺上的反饋。并且常常能夠從挑戰和沖突中獲得快樂,他們不在意結果,目的性較弱,還有著非常強烈的好奇心,無法預見其行為會引發的后果,其模仿能力的強弱隨著年齡成長呈曲線狀呈現。當我們在設計時,應將兒童的這些特性考慮進去。

任務旅程的設計

在某種程度上,兒童產品的客戶形態有些類似我們的 ToB/G 產品的客戶。使用產品的一線用戶,并非最終具有購買權的客戶。孩子的父母是兒童類產品最終具有購買權的客戶,他們對早期教育、智力投資、內容是否健康積極等等都有較高要求。

因此我們在內容的設計上應更加的多元化,將任務完成后的數據量化體現,使父母便于了解孩子情況,同時也可以從側面激勵用戶后續的付費行為。任務旅程有多種類型,在兒童品類的設計上,我們通常采用下面這 4 種任務類型去設計。

該如何給兒童產品做設計?收下這個思路分析

交互界面

好的設計可以減少認知負擔, 可以最大限度地減少理解功能交互所消耗的智力資源。在年幼的孩童時期,他們的記憶容量比成人小,我們需要關注到這一點,怎樣的信息容量,交互層級和人機互動才能讓他們更好的理解和認知產品界面。

比如 LG 有一款面向低齡兒童的手表,表盤上只有一個按鈕和出聲孔,并且在噪雜環境下,還考慮到家長的心情,非常貼心的設計了 10 秒自動接聽的人機交互方式。

該如何給兒童產品做設計?收下這個思路分析

△ 圖片來源 | 文章作者&Roobo 設計團隊

通常,我們成年人對交互體驗,產品易用性都抱有較高的期望,我們期望產品能為我們帶來效率的提升、便捷的操作、強烈的視覺沖擊力等等。但是,兒童與成人在人機交互的互動上卻有著天壤之別。當產品功能無法正常運行時,孩子們并不會像成年人一樣感到失望。當設計不如他們所希望的那樣時,雖然也會暫時感到沮喪,但他們在自己生命旅程的學習嘗試中,也習慣了那些常常無法正常進行的任務。隨著成長經驗的增加,他們會逐漸熟悉了解世界的運行規則。

該如何給兒童產品做設計?收下這個思路分析

該如何給兒童產品做設計?收下這個思路分析

△ 圖片來源 | 文章作者&Roobo 設計團隊

配色與圖形

有研究表明,在對 120 名學前兒童(3—6歲)進行了12種顏色和12種圖形的辨認實驗中顯示,實驗刺激用速示器分三種速度(0.01秒、0.05秒、0.1秒)呈現。結果表明:呈現速度對辨認正確率有著明顯的影響。3-6歲兒童對顏色和圖形的辨認能力均隨年齡增長而逐步提高。學前兒童對顏色的辨別,在三種呈現速度條件下,均對黃、紅、綠三色的辨認正確率為最高。

該如何給兒童產品做設計?收下這個思路分析

圖標 icon 的設計上,簡約、塊面化、造型避免抽象,例如 3 歲+的孩童已經可以理解向前、向后的箭頭,有研究顯示,在短時段內,兒童對圖形的辨認在不同呈現速度條件下出現優勢與劣勢圖形之分。優勢圖形的正確辨認率百分比較高,而劣勢圖形則較低。

該如何給兒童產品做設計?收下這個思路分析

硬件的配合運用

現在市場上有很多兒童品類的硬件,深受家長和孩子的喜愛,在軟硬件的結合上,我們要善加運用,例如硬件自帶的攝像頭、觸摸屏、聲控等等。當硬件與產品內容相結合,可以碰撞出更加多種多樣令人振奮的新的交互方式。

該如何給兒童產品做設計?收下這個思路分析

該如何給兒童產品做設計?收下這個思路分析

△ 圖片來源 | 文章作者&Roobo 設計團隊

動畫設計

在任務旅程中,內容合理優質的動畫,廣受家長及兒童的歡迎,但是動畫頻繁變換的畫面容易引起視覺疲勞,大多數動畫片每 6 秒會變換一次畫面轉場,超出了幼兒視覺神經的承受能力。在兒童不同的年齡段,注意力集中程度都是有所不同的,皮亞杰理論研究顯示 3-4 歲的兒童注意力集中的平均時長為 10 分鐘,4-6 歲兒童注意力集中平均時長則可達 15 分鐘。在我們為孩子們設計他們喜愛的動畫時,要充分考慮到這些因素。運營類動畫一般控制在 1 分半之內是較為合理的。

市場上很多 AI 兒童伴讀機器人,是可以自動推送產品內容的,考慮到兒童的健康使用,推送動畫的播放時間要善加利用,并減少觀看所需的步驟,在家長端也需要設計對應控制內容的開關,并將音量的控制開關放在顯眼易點的位置。

該如何給兒童產品做設計?收下這個思路分析




文章來源:優設網   作者:JellyDesign

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




日常臨摹如何用到項目里去?這個案例說明白!

高勁

不同的階段,臨摹的目的不盡相同。一般來說,前期臨摹更多的是練習軟件、技法,后期練習別人的風格表達,綜合運用。所以,我把臨摹分為技法臨摹、半原創到原創 3 個階段,每一個階段沒有絕對的界限,都是在積累創意,完全是可以用到自己的項目中去的。

今天會分享一個我當年做臨摹練習并融入實際項目中的小案例。

臨摹

大概是在 15 年左右,在網上看到錘子設計師設計的一個圖標,覺得非常驚艷,當時就想把它臨摹下來,這是當時臨摹的一個效果。


日常臨摹如何用到項目里去?這個案例說明白!△ 原作

日常臨摹如何用到項目里去?這個案例說明白!

△ 這是我當時臨摹的圖

我在臨摹這張圖的時候,想達到的目標是能根據自己的 logo 色及文字,做一個半原創的設計。

然后實際練習中,不斷觀察原作發現有一些細節值得學習:

日常臨摹如何用到項目里去?這個案例說明白!

  1. 圖標分為水上和水下,2 個層級,在水下的圖形因為折射的關系,會發生扭曲
  2. 水下會有深淺的顏色變化
  3. 真實的水會流動,所以在水下會畫出帶明暗細節的水紋線條
  4. 水下會有氣泡,且氣泡的產生符合真實場景,氣泡的大小由小變大
  5. 水面的邊緣因為透光而產生邊緣反射
  6. 投影因為紅色盒子的影響,會偏紅色色相,并且有近實遠虛的關系
  7. 盒子的邊緣會有 1px 的高光和反光
  8. 背景為了增加圖標的展示效果,也做了單獨的設計,把四周壓暗,然后加上雜色,使得整體的質感更加強烈

當時,對我來說,在練習的過程中有一個難點就是關于第 3 個細節水的紋理執行有些難度,因為其中包括了粗細變化、虛實變化、明暗變化等等,單純的用圖層樣式或者矢量去畫的話,難度都比較大。這個細節當時耗費了我不少時間,后面突然想到其實也可以用合成的辦法來實現,然后我去找了真實水紋的圖片進行疊加,很快就搞定了。所以,只要能達到效果,不能太過于局限某一種思路。

日常臨摹如何用到項目里去?這個案例說明白!

分析并完成這些細節后,就是你在做這個練習中學到的點,嘗試把它們學以致用。

運用

記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現,多彩顏料是當地的一大特征,所以決定以染料為關鍵詞去畫一個圖標,又因為顏料本身自帶多彩的特點,所以以它為主題圖標就很合適了。

日常臨摹如何用到項目里去?這個案例說明白!

然后在思考這個圖標的時候,首先會應用參考圖中的配色,并結合染缸的造型做出了第一版的效果。

日常臨摹如何用到項目里去?這個案例說明白!

這個效果雖然是表達了那個意思,但缺乏亮點,聯想之前練習過水的技法表達(臨摹中第 3 點細節運用),正好可以利用水的紋理做下強化,這樣就優化出了第二版。

日常臨摹如何用到項目里去?這個案例說明白!

嗯,看起來感覺有了一些特點,但感覺缺乏細節,接著思考水除了有紋理高光,應該還會有邊緣高光(結合臨摹中第 5 點細節),所以在邊緣嘗試加了高光,增加體積感,做出水要漫出來的感覺。

日常臨摹如何用到項目里去?這個案例說明白!

如果只有這一層高光的話,細節度感覺還是不大夠,在之前的文章《如何從優秀作品中偷師,用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學到他們對于 1px 高光的使用(臨摹作用中的第 7 點),這里因為是液體的材質表現,所以增加一個高光點增加水的通透感。

日常臨摹如何用到項目里去?這個案例說明白!

日常臨摹如何用到項目里去?這個案例說明白!

到目前為止,似乎看起來已經差不多了,但考慮到現實世界中,溢出的彩色液體在透光性很好的情況下,也會對周圍環境產生影響,所以我在顏料設計的四周,配上對應的四種顏色的模糊投影(臨摹練習中的第 6 點)。

日常臨摹如何用到項目里去?這個案例說明白!

在思考下,在臨摹的圖標中為了使得圖標更加自然,作品中其實結合了很多真實世界中會發生的情況,比如水的折射,氣泡的比例,深淺等等,那對于染料來說,會有怎樣的真實情況發生呢?我當時想到一點是,染料在用的過程中其實很容易灑出來,所以圖標背板上現在太過于干凈了,增加一些細節能夠使得背板能夠跟主體物產生關聯,也更加自然。嗯,又是一個小細節。

日常臨摹如何用到項目里去?這個案例說明白!

最后,我們對比下第一版和最終版的效果,細節確實豐富了很多。

日常臨摹如何用到項目里去?這個案例說明白!

一張動態圖可以更加清晰的看到變化。

日常臨摹如何用到項目里去?這個案例說明白!

總結

這次圖標的優化過程,我覺得有幾個要點對我來說印象深刻的:

圖標的風格可以是扁平的,但想要增加自然舒服的細節,一樣可以像畫寫實風格那樣仿照現實。你需要留心觀察這個世界,就算是一張照片中也能有非常多可以利用的細節。

碰到難做出來的細節,多想想有沒有更效率的辦法。比如在做水紋理的時候,一開始就想著完全靠鼠繪畫出來,結果效果一直不大好,然后利用 PS 合成的方法,很快就能把效果做出來。

對于圖標來說,要注意其整體性。比如圖標中的主體物不要跟背景脫離,不要讓圖標背板只是作為一個容器,而要讓背板也成為圖標本身的一部分,這樣圖標的整體性會更好。

臨摹的過程中,一定要多分析,多記錄自己覺得是細節的點。每一次記錄,都可能是將來設計時提升細節的靈感來源。

以上內容只是我在日常練習中應用到實際項目中的一個小案例,其實還有非常多的靈感想法都來自于你平時做的練習,關鍵是要多動手,多總結,才能增強自己對細節的把握能力。





文章來源:優設網     作者:彩云譯設計



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



主題設計神器來啦!知識點Get了嗎?

鶴鶴

設計系統基本就是組織如何構建數字產品的故事,在公司內部,設計系統改善了產品團隊之間的協作,而設計和工程團隊之間面臨的一個常見問題是:共享品牌準則和界面信息。在開發過程中,應該遵守還原設計的內容,但是我們都知道這并不是那么簡單。


從目標達成的角度來說,設計規則的創建與執行同樣重要。我們期望參與產品的每一個角色,都能記住設計規范,結合設計原則(Perceptual Pattern )最終達成界面展示在用戶面前的樣子。這也就需要設計系統內,有一套控制性強、拓展性高的方法來維系產品的風格呈現,也就是我們今天將要討論的設計變量(Design Token)


構成


什么是設計變量(Design Token)


在數字產品的概念中,許多中心和微小的UI信息片段將在多個平臺上使用,被稱為:設計變量(Design Token),他們是設計系統中設計語言的構建塊,也是設計決策的呈現。他們維護核心樣式的所有值:間距,顏色,版式,斷點,動畫,字體,平臺比例尺,組件狀態等,最終通過數據表示。命名規范和結構化的約束,可確保產品體驗的統一度與靈活性,更進一步可為產品打造賦有情感的品牌認知。


而對于SaaS類或者APass類的公司而言,設計變量還可提供給多個合作商所用,滿足多種定制化的訴求。



實施例舉


在以往的真實產品中,示例(如下),設計人員會發現,實現和樣式管理的環節在開發過程中是完全斷掉的,設計語言轉化為開發的語言時,缺少風格系統完整性的延續。我們通常看到的style代碼都是一些幾乎沒有體感的參數,且公司產品體量越龐大復雜,想要全局迭代就越是痛苦。


但如果我們將這些參數封裝起來,用語義化的方式來進行描述,就增強了“系統下的畫面感”,如“font-size-level03”、“border-distinguish-background” 等,就是設計準則下情景化的歸類與描述。


但語義命名只是一個最終呈現,真正讓設計與開發者都能”讀語義,識運用“。還需要我們在設計系統中建立一整套完整的設計變量對應表,并讓大家對它們有著清晰的記憶。

這里我們將以群核科技旗下,工具設計系統(Tools )中的設計變量為例,來給大家進行詳細分析。首先在設計原則下,我們引申出設計變量規則的制定原則:精準、靈活、易讀。

意指歸類與對象的精準性,配置化的靈活度,語意命名上的易讀性。


對所需范圍進行定義,命名規則與前端書寫規則達成約定。


變量的“結構完整”,有助于設計與工程團隊在長期維護上,提升靈活度,3層繼承結構,很大程度保證了“精準”“靈活”這一原則。


定義完基礎規則,我們具體來看設計變量在產品構建中,三大主用途——1,主題定制   2,跨平臺呈現  3,優化工作流


主題定制


我們找到產品界面中定義“核心樣式”的部分,例如顏色,字體大小,空間,動畫,陰影,斷點等等。通過這些具有統一命名規則的實體,用于代替硬編碼的值,直接集成到設計系統下的組件庫里,也在日常的產品界面開發中使用。


通過繼承,別名變量起到了銜接全局變量和指定變量的作用,指定變量影響了最終的樣式呈現,從而實現主題功能。


單個主題可供多個產品團隊使用,主題本身也提供可配置化,即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”,“產品定位差異”等,也可通過創建新的主題,完成新的對應表,繼而產生相應的風格模式,例如“暗夜/日光模式”或“舒適/緊湊”布局模式,“企業品牌”定制模式等等。


主題功能在產品中體現


跨平臺呈現


多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄,包括音樂,照片,文件和快捷方式,更加高效。它使iPad更具Mac感,也降低了學習成本。


目前我們很多產品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加,設計和開發會消耗較多的時間在上面,而且很難去統一把控。


Design Token 在跨多端設計中不僅是存儲樣式的變量,更是一套用于各操作系統間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性,在不同終端做到自動化的映射。


假設在移動端正文字用14x,而在pc端為12px,雖然它們值不一樣,但他們都是使用的color_text__primary,在不同終端變量會自動根據設備來取不同的值,通過一套設計就能實現多端運行,提升效率節約成本。


優化工作流

擁有了強大的設計變量樣式庫之后,它對我們的工作流程將帶來什么革新呢?


顯而易見的是,團隊將節省非常巨大的工作量,我們不再依賴單個工程人員的修改質量,且能更大程度減少跨組依賴。此外,早期設計工具無法與設計變量生成器進行本地通信,我們通過優化Sketch插件,完成了變量命名數據的輸出,使得工程人員可直觀看見變量名稱。這將為設計驗收節省大量時間。


產品的大批量的歷史問題也得到解決。數字化的自動識別效率遠高于痛苦的人工調整,設計師和產品團隊都將收獲全新的迭代方式,這是有歷史意義的一刻。


結語


簡而言之,設計變量作為一個管理風格樣式的有效手段,可集成主題管理,對跨平臺開發也同樣起到作用。簡化團隊合作協作流程,提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。


文章來源:站酷   作者:酷家樂UED

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



創意設計如何增加粘性?

濤濤

要讓創意產生粘性,有效而又持久,你必須有目的性提升對用戶的吸引力。如何提升?

「讓創意產生粘性」

這篇文章將梳理《行為設計學中的讓創意更有粘性》中的經驗,思考設計背后的六大原則,目的是要幫你把創意變得更有“粘性”。

這里黏性是針對創意而言的,黏性是指你的創意與觀點能讓人聽懂,能被人記住,并形成持久的影響,關注點在聽懂—記住—影響。而我們平常談到創意,想到的是創意的巧精妙。

給設計增加粘性

那么我將用一句話,開啟我的分享“萬物皆可設計,創意設計也不例外?!?

所謂“黏性”,是指你的創意或觀點能夠讓人聽懂,能被人記住,并形成持久的影響(換言之,他們能夠改變受眾的思想或行為)。

創意設計如何增加粘性?我總結了這6個方面

黏性創意的六大原則:

簡單(simplicity):如何才能找到觀念的根本核心?表達必須簡短且深刻。簡單=核心+精煉,找到創意的核心,并用精煉的話語將它表達出來,那么你的創意將擁有強大的影響力,舉例:王老吉涼茶廣告:怕上火,喝王老吉。

意外(Unexpectedness):如何才能吸引聽眾注意我們的想法?必須打破人們的期待,違反直覺,利用對方的驚訝來提升警覺度和關注度,激發他人的興趣和好奇。粘性創意最忌諱的是平淡無奇,最基本的吸引力是引起別人的注意力,打破固有思維,最能抓住大家的吸引力,如海底撈各種出乎意料的個性化服務。

具體(Concreteness):如何才能把自己的觀點表達清楚?必須借用身體行為和感官信息來加以闡釋,因為我們的大腦總是樂于記住具體的事物。實驗得出,人們更擅長于記憶具體化的詞,而不是抽象的,形成一個長期的記憶力,如:香飄飄一年賣出七億杯奶茶,連起來可繞地球兩圈。

可信(Credibility):如何才能讓別人相信我們的創意?必須具備相應的信用背景。我們必須設法幫助他人親自證實這些構想,也就是觀念世界中的“先試再買”的行事哲學。如現在的老爸測評,先進行專業權威的測評報告,得到消費者的信任,最后進行流量轉化最后形成賣貨的電商渠道。

情感(Emotions):如何才能讓別人關注我們的創意?必須得讓他人有所感覺。人們更有感覺的往往是人,而不是抽象的事物。很多創意都采用創意本身與情感的聯系,如互聯網大廠都在進行動物的 IP 設定,其實也是通過故事性的包裝增加與消費者情感聯系紐帶。

故事(Stories):如何才能讓別人依照我們的創意行動?我們可以講故事。故事往往有鼓舞人的力量,我們并不需要創意來激發這些力量。我們只需要準備好生活中每天產生的好東西,通過故事的情節進行吸引粉絲,如快手、抖音很商家都會通過自己的故事情節進行吸引,樹立自己的人設形象。

打造成功觀點的六項檢查表:簡、奇、具、信、情、事。合起來的英文首字母為(SUCCES)。

在營銷設計中如何提升用戶感受

以上是體驗設計學的一些理論,我們經常會在實際商業項目中思考,如何把商業目標與設計做結合?

創意設計如何增加粘性?我總結了這6個方面

我們進行設計時候首先應該關注三點:

  • 商業思維,你做的這個設計為公司/社會創造了什么價值。
  • 用戶思維,在做設計之前大量的學習并了解用戶環境,了解用戶場景,了解你所做的設計是不是會有技術限制。
  • 設計思維,在一個成熟的品牌和設計團隊中一定要遵循設計語言的規范、把握市場和行業的設計趨勢、并且對于你自己做的設計的結果負責。

設計師針對這三點我們應該怎么提升思考?

創意設計如何增加粘性?我總結了這6個方面

1. 了解商業目標

詢問你的產品經理或者運營,從他們那邊了解產品想要達成的商業目的是什么?

2. 設計上的支持

從中思考設計該如何支持商業目的,產生商業價值。

3. 監視市場反饋

關注目標完成后的商業價值指標,理解當初的設計思考是否吻合市場的思路。

商業目標可能是:引起市場關注

市場中有很多好的商業案例都在,如增加用戶(拼多多砍一刀“簡單”)、提高轉化率(網易考拉會員卡片“具體”)

創意設計如何增加粘性?我總結了這6個方面

提高客戶貢獻度(iCloud 升級儲存空間,多種選擇“具體”)、留住用戶(刪除軟件后哭泣的形象“情感”)

創意設計如何增加粘性?我總結了這6個方面

在這些營銷設計中,他們是如何使用打造成功觀點并且運用體驗設計法則,使用原則后,我們可以通過數據化的監視市場反饋上,如轉化率、點擊率、UV/PV 增長,如果你所在的公司沒有數據怎么辦,其實我們可以做問卷、電話回復、App 評價,微博/公眾號評價獲得反饋。


文章來源:優設   作者:土撥鼠

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

超詳細!總監出品的B端設計規范指南:布局

鶴鶴

在 C 端設計中,不管是給車載客戶端、手機客戶端、電腦客戶端設計界面,都有比較具體的規范需要我們學習和遵守。

而唯獨 B 端設計,或者說網頁設計,我們在網上是找不到具體詳細的規范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統,其規范都只是針對自己這套產品的設計說明。

當我們不使用這些框架,要完成自定義設計,那么新人就完全不知道該怎么下手。所以,今天這篇內容,就是針對 B 端設計所需具備了解的基本規范進行說明。

幫助大家快速了解和掌握 B 端設計所需的規范知識。

B端規范認識導言

B 端設計是 UI 類設計中的一個大類,它包含了非常多種面向企業、商業的客戶端類型,包括電腦、手機、平板、大屏等等,針對不同客戶端和系統,基礎規范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。

WEB 管理界面雖然看起來和一般的網頁差別很大,但說到底,它也是網頁的一種,它遵循網頁設計的基本原則。我們對規范的解釋以網頁基礎規范為框架展開,并會加入一部分 B 端特有的設計元素規范說明。

主要包含的規范內容包含下面這些模塊:

  • 布局規范
  • 色彩規范
  • 字體規范
  • 圖標規范
  • 控件規范
  • 表單規范
  • 表格規范
  • 動效規范

規范的解釋,會涉及到不少網頁前端制作的知識點,建議立志在 B 端進行深耕的設計師,都要掌握 HTML + CSS 這些前端知識。

我們過去做過這個系列的詳解,可以通過下方的鏈接查看:

還要聲明一點,規范中總結的內容,包含 “規則” 和 “建議” 兩種類型,規則指的是瀏覽器、代碼等限制產生的硬性規范,而建議則是我根據自己經驗整理出來便于大家理解的內容。

在自己的項目中,如果出現 “建議” 無法適應的情況,那么完全可以根據實際場景來做決策,不需要拘泥于我給出的數值和限制。

下面,就開始進入正題吧!

B端布局規范

首先,我們來解析一下 B 端布局的規范,即界面排版應該遵守的基本原則。

在前端 HTML CSS 的知識中,需要定義不同 DIV(或其它標簽)的長寬數值,并將這些大小不一的矩形進行排列、移動、嵌套,來實現界面的視覺樣式。

超詳細!總監出品的B端設計規范指南(一):布局

超詳細!總監出品的B端設計規范指南(一):布局

換句話說,所有置入畫面中的元素都包含一個矩形的外邊框,無論是文字、圖標、圖片、按鈕、標簽還是符號。

超詳細!總監出品的B端設計規范指南(一):布局

所以,在界面的布局中,無論我們使用什么樣的內容、字段,對于前端的頁面來講都只是無數矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。

矩陣布局法是設計方式和前端開發方式的統一,提升開發階段實現設計稿的效率和準確性,是每一個專業 B 端設計師都需要具備的素養。

在此基礎上,我們還有幾個統一的原則需要遵守:

  • 數值的使用標準
  • 固定和響應尺寸
  • 常用的界面布局

1. 數值使用標準

在 UI 領域中,元素尺寸的定義不像平面設計大多以比例或“感覺”來制定,更多是使用手動輸入數值的方法來完成。

主流的系統、規范都會建議我們通過網格化參考工具來輔助我們進行布局設計,比如 Android MD 系統使用的 8*8 網格系統(常用電腦分辨率可以完美支持)。

超詳細!總監出品的B端設計規范指南(一):布局

也就是說,在這個系統中,元素的外邊框、間距,都是以 8 的倍數來設置的。這樣無論我們在設計還是在開發過程中,對于使用的數值都會有相應的默契。

但是,以 8 的倍數為基準的設計,跨越的幅度有點太大了,比如一個圖標,當你覺得 16px 小的時候,那下一檔 24px 頁可能太大了。所以,我的建議是對于相對比較復雜的項目來說,使用小一級的 4*4 網格來設計,會更兼顧靈活度和數值的統一性。

即設置元素的尺寸、間距的時候,我們都用 4 的倍數來完成,當你覺得元素的長或寬不合適,就對它進行 4px 的增減,比如下面的案例:

超詳細!總監出品的B端設計規范指南(一):布局

要警惕的是,4px 的基準,是針對元素視圖邊框的值,文字字號、圖標柵格等次級內容,并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”,而不是限制,在特殊場景中可以選擇打破它。

2. 固定和響應尺寸

使用 4 的倍數完成設計,并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中,我們會加入響應式的邏輯,即頁面元素尺寸隨瀏覽器窗口的變動而變動。

所以,在設計 B 端界面元素的時候,我們要考慮兩種場景,固定尺寸和響應尺寸。

固定尺寸即不管環境發生什么變化,它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸,則是一個 “未知數”,是需要一定的計算規則 “求得” 的。

比如還是搜索欄的案例,搜索框響應尺寸,而搜索按鈕是固定尺寸,那么在不同的寬度下面,它們顯示的效果如下:

超詳細!總監出品的B端設計規范指南(一):布局

要理解響應式尺寸對應規則,除了了解 CSS 中 Width:auto 屬性值的使用外,最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。

超詳細!總監出品的B端設計規范指南(一):布局

元素是響應還是固定尺寸是我們在設計過程中就做后決定的,而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容,在我們定義組件的過程中就要通過軟件的響應式功能進行設置,并需要在后期的標注和文檔中進行說明。

3. 常用的界面布局

最后,就是 B 端界面設計使用的主流布局形式了。雖然網頁因為畫布比手機大得多,設計的靈活性更高,但在 B 端中可以應用的布局形式也不多,只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位:導航、標題欄、工具欄、內容區域。

主要使用左右或上下布局兩個方向:

超詳細!總監出品的B端設計規范指南(一):布局

左右布局的形式,通常是左側作為導航區域,頂部作為工具欄使用。這種做法通常是因為系統內模塊較多,需要的導航數也多,用戶需要經常切換到不同模塊中去,所以左右分欄的布局可以很好的提升操作效率。

而上下布局中,則是面向一些處理場景、功能比較簡單的平臺,導航模塊少,且切換的頻率不高,主要的操作都集中在內容區域的設置上,沒有邊欄的影響還能提高操作的專注性和效率。

要使用哪種類型的布局,需要根據當前的項目功能做決定。但即使選擇了其中一類,也并不代表我們的工作就結束了,還需要在這個布局的框架下做進一步的規劃。

比如,我們需要制定內容區域多欄設計的比例劃分、復雜表單填寫系統中的內容引導欄、列表條目展開的側邊欄形式等等……

超詳細!總監出品的B端設計規范指南(一):布局

每套項目都需要先確定頁面的布局框架,然后再開始針對具體頁面、業務內容進行設計,保證整套系統操作方式的一致性。

文章來源:優設網       作者:超人的電話亭



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


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

鶴鶴

5分鐘帶你了解服務設計的原則、案例及常用方法!




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



什么是服務設計


服務設計一直在我們的生活中,我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構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

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




如何建立價值思維?

濤濤

用戶體驗設計就像是一場直面自我的修行,無論是從認知提升、工作能力等維度,都在時間和實踐中不斷去促進自我對事物的探索,在過程中不斷獲取對世界的感知和成就感。在學校里所接觸的關于交互設計的認知,大部分局限于產品領域與基礎交互,而后逐漸過渡到交互體驗與設計的結合并且作用于商業,成長過程中也會不斷思考,這次想聊聊設計價值,大概分為三點:價值思維、價值判斷、價值體現。

建立價值思維

我的設計能夠給用戶/產品產生什么價值?如何體現設計的價值?可能很多朋友也會和我一樣有這樣的疑惑,假如能夠在接觸需求后便思考該需求背后的價值,那對應的行動也會有很大差異性。

1. 設計的困境

可能對于大部分的設計師而言,作為主要的執行力,需要肩負起項目的責任,所以會把大部分時間都投身在項目需求和日常溝通來提升自身能力,很少有剩余時間去沉淀已做完的設計,只有在產品體驗會或者其他渠道的反饋中獲取最后的問題,久而久之就像是打補丁,既無法體現設計價值,自身能力也無法得到完整的提高。然而促使設計師進步的往往不是技能的熟練,而是對業務需求思考的廣度和深度。因此需要樹立起價值的概念,價值可以驅使行動產生改變。

2. 價值驅使行動

價值觀因人而異,而價值觀會影響一個人的行為引導其做出選擇,對價值的思考取決于思維上升空間有多大。因此需要有一個思維模型能夠幫助我們更好的建立起價值思維,可以幫到我們更加有邏輯的思考。相信許多朋友都聽過「Why-How-What」即黃金圈法則,個人認為可以從日常需求中幫助設計師建立起一套價值思維。黃金圈解析:

  • Why:為什么做一件事,基于什么樣的目標
  • How:怎么做,是實現目標的途徑
  • What:具體的行為

設計師進階知識點:如何建立價值思維?

△ 圖片來自網上

3. 黃金圈法則實踐

了解黃金法則后,我們看看如何把黃金圈的思維模型運用到工作中。

假設我們接到一個「商城系統」的設計需求,可以嘗試這樣拆分:

WHY:我為什么做

  • 商城是產品重要的盈利渠道,能夠為產品帶來核心收益
  • 設計賦能商業化,是設計的價值體現
  • 能夠幫助設計師更好理解產品的商業化結構

關注點:站在產品角度,對產品真正的幫助和提升

HOW:我要怎么做:

  • 梳理玩家的購物場景和細分需求
  • 整理同類競品的優缺點,挖掘機遇點
  • 明確設計目標,突出商品展示特點

關注點:需求做的更好,超出玩家預期

WHAT:需要做什么

  • 高效便捷的購買流程
  • 兼顧玩家的情感訴求(炫耀、儀式感)等細分場景設計

關注點:讓玩家使用更加高效,滿足多種場景

綜上所述,設計師處于不同的階段,所關注的價值層面對應的行動也會不同,不僅要求設計師在需求之外還需要全局思維的思考延伸,了解當前產品階段最需要的是什么,更多需要設計師自我審視,建立價值思維的思考模型,不僅僅停留在行動層的思考。

(我為什么要做)價值觀——(我要怎么做)能力——(我要做什么)行動

形成價值判斷

「黃金圈」法則可以幫助我們建立起價值思維,然而每個設計師有各自的價值衡量,以下是我認為的一些價值維度:

1. 層次與目標

日常我們總會接受到大大小小的需求,簡單和復雜會摻雜混合,從工作角度而言需求是都要做的,但是從設計價值的角度而言,需求是有輕重緩急之分。那如何進行價值判斷呢,一般的設計需求從目標上可分為三個層次:

  • 基礎目標:滿足「可用性」
  • 體驗目標:滿足「易用性」
  • 驚喜目標:滿足前兩者基礎,讓用戶感受「愉悅感」并且超出預期

設計師進階知識點:如何建立價值思維?

2. 二八法則分配

當有了一個基礎劃分后,就可以對需求進行合理評估,考慮到現實情況下通常會面臨這些情況:

時間緊迫:日常需要大量的時間進行協作溝通和跟進

精力有限:任務重加班多,無法長時間保持高效的工作狀態

所以可嘗試根據二八法則對時間精力進行分配,對于一些價值較低的需求,可以和需求方充分溝通,過濾無效信息后快速處理;對于價值較高的需求,投入大量時間與精力設計與打磨。對于初中級的設計師來說,滿足「可用性」和「易用性」是仍需要多加錘煉的基礎能力,對于高級以上的設計師來說,有了一定的經驗下達成前兩者較為容易,可以把更多的時間精力投入在「愉悅感」的設計上。

體現設計價值

前面講了價值與判斷,但設計無論是賦能或者是驅動,還是需要明確最終目標是什么,我的理解是最終服務于產品解決問題。那如何體現設計價值就顯得尤為重要,以下簡單拋出兩點:

1. 提升體驗和口碑

雖然不能直接為產品帶來實際收益,但是帶來體驗提升,而口碑的增長相當于為長線運營打下基礎,也為后續進入的產品矩陣留下增長空間,例如最近大火的《天地劫》,相信后續的出品也會讓玩家更加期待。

像這類的例子有許多,例如《王者榮耀》的公眾號還有專門的 UI 迭代日記,即便是運營多年的產品仍然在不斷的打磨和提升體驗,為產品帶來正面影響。

設計師進階知識點:如何建立價值思維?

△ 圖片來自王者榮耀公眾號

2. 帶來商業利潤,促進社交、消費增長

這類體現通常是商業化/社交相關,《陰陽師》眾所周知的抽卡系統和「畫符咒」的交互方式也帶來了大量的社交互動和用戶增長,還有《Pokémon GO》捕捉寶可夢和「投擲精靈球」,促進了玩家大量的線下的互動場景,我認為這些都是設計價值的體現。

設計師進階知識點:如何建立價值思維?

這些設計相對于大部分玩家是一種「隱形」的存在,不像角色、場景設計等容易被感知,對于設計的價值體現一定不只是給產品錦上添花,是能夠通過對用戶/玩家群體的理解去塑造和滿足需求。

文章來源:優設   作者:阿澤與設計

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

有用性,可用性,實用性:為什么對設計師如此重要

濤濤

今天,我們來談談有關使用的三個概念的含義:有用性,可用性和實用性。前兩個術語,:有用性,可用性,在用戶體驗和設計方面被廣泛使用,而第三個術語,實用性,很少被提及。然而,我們將會提到,在三個術語中,實用性可能是對設計師和企業來說最重要的一個。

Author/Copyright holder: MsSaraKelly.


有用性


一個有用的產品能讓用戶完成一個任務或目標。這些任務或目標只有在一些情景中才是明確且意義重大的,其他情境中則不行。


例如,用戶使用文字處理程序包,如微軟的Word或者LibreOffice中的Writer能夠制作文字文件,包括信件、報告、整本書等等,但任務是明確的,結果是看得到的。我能用這個工具寫信嗎? 是的,你可以。對于任何想使用文字處理程序包的人來說都可以。


另一方面,一件藝術品可能對某個人是“有用的”,可以照亮他們的工作室,但可能對另一個人就沒用了。藝術具有主觀性,這意味著不同的人對“點亮工作室”這個任務有著不同的要求,可能需要極為不同的產品來達到這個“有用的”標準。


然而,無論提到哪種有用的形式,重要的是有許多潛在用戶認為產品有用。(從商業角度來看,至少要有足夠的用戶才能讓產品盈利)。


任何用戶都不可能接受沒用的東西。

Author/Copyright holder: Alastair Cook.


可用性


可用性針對的是某個特定產品??捎眯哉f明產品不僅具有有用性,它還要仔細考慮產品的使用方式,以及確保用戶愉快、簡單(或盡可能簡單)且有效地使用產品。


大衛·麥奎琳曾在《達爾文》雜志中發表文章《可用性》,里面提到;“可用性與人類行為有關。它承認人類是懶惰,情緒化的,不愿投入大量的精力做事,比如,獲得一張信用卡,他們通常更喜歡做容易的事,逃避難做的事情。”


許多“有用的”產品并不具有可用性。想象一下,有一扇門,外面有個把手,上面寫著“只能推”。門肯定是一種有用的產品——它把里外分開,可以確保人們有效地使用空調和暖氣,還能降噪,等等……


但是一個需要指示的門可用性有多大呢? 其實,一扇門也就只能推或者拉。從用戶的角度來看,當他們看到門時,他們應該清楚地知道需要采取什么行動——如果不能而且需要一個標志來解釋; 那么這個門的可用性太小。


值得注意的是,對于一個產品來說,即使可用性小也沒關系,但要不具備有用性才是真的糟糕。你看當今世界上有很多帶有“推”或“拉”標志的門,這就說明了這一點??捎眯暂^低通常只是一個小麻煩(你可能會抱怨那扇門有多不靈活,但你可能不會去修——因為付出太多回報甚微),而不會影響全局。


然而,許多品牌(如蘋果)已經建立了整個產品線,設備比他們的競爭對手更具可用性,即使用途實際上是一樣的。例如,iPod并不是世界上第一個MP3播放器。然而,從用戶的角度來看,這是當時最好用的MP3播放器。正是良好的可用性讓iPod從一眾MP3里脫穎而出,成為世界上最暢銷、最受歡迎的播放器。

Author/Copyright holder: Aido2002.


實用性


一個產品既具備有用性又具備可用性,但仍然不能被使用。設計的最終目標不是讓產品具備這兩種性能,而是讓用戶能用上這個設計。如果沒有用戶使用,這個產品就是失敗的,不管它的設計有多好——它仍然是個敗筆。


在個人交通領域有兩個有名的案例。第一個例子可能對于大多數讀者來說非常陌生遙遠—辛克萊C5。克萊夫?辛克萊爵士(Sir Clive Sinclair)是計算機行業的一位領軍人物,他普及了計算機并使千家萬戶都用上了這款產品。他旗下的ZX Sinclair系列電腦賣出了數百萬臺,全世界的家庭里都傳出磁帶游戲的嗡嗡聲,十分快樂。


成功后,克萊夫爵士決定公布他的酷愛的一個項目—單人電池供電的環保汽車。(盡管它在營銷文獻中被稱為“輔助踏板自行車”)??巳R夫在C5產品的投放市場時投入了數百萬英鎊。這款產品既具備有用性,也具備可用性,但遺憾的是,人們討厭它。沒有人使用C5,英國電視和媒體經常嗤之以鼻。該產品最初的產量為14000臺,結果直到公司破產前,只售出了5000臺。


第二件事就比較新。“賽格威”是一種個人交通工具,可以讓用戶用兩個輪子去(幾乎)任何地方,它于2001年推出,2002年投放市場。它的發明者迪安·卡門(Dean Kamen)預測在世界各地銷售上百萬臺。事實上,在投放市場后的6年里,它的銷量還不到3萬部。該公司已經出售和轉售多次,自從它推出,雖然賽格威滿足了少數人的需求,取得了些成功。但事實卻是,人們不使用這種工具。


為什么這兩個具備有用性和可用性的產品沒有得到使用?在Sinclair C5的案例中,產品未能滿足特定的需求。正如BBC最近提到的,如今公眾的環保意識十分強烈,Sinclair C5產品可能非常受歡迎,但在C5發布的時候,環保問題還沒有這么迫切。

Author/Copyright holder: Aido2002.


以賽格威為例,《連線》雜志說:“但這根本沒用: 賽格威在技術方面無人能及??上н@毫無意義。“該公司未能確保產品在發布時通過過相關法律規定(在許多地方在公共場合使用它們不是合法的,現在仍然是不合法的)。”早期的使用者也報告說,他們因為使用賽格威電動車而遭到嘲笑,形象受到詆毀那么銷量肯定無望。


一個成功的產品肯定要得以應用。就算生產了一個具備有用性和實用性的產品,但用戶仍可能不想使用它。


如果要使用一個產品,它必須是有用的。但如果沒有得到使用,它就沒有意義,這意味著它永遠不會成功。一個產品也應該具備可用性,以增加使用的機會——一個產品的可用性越大,用戶用起來就越舒心,也會更容易說服別人使用它。然而,就算具備可用性和有用性,也不能保證一個設計得以使用。除了可用性和有用性之外,還有其他的考慮因素會影響產品的市場普及度。

文章來源:站酷   作者:馬克筆設計留學

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

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
亚洲欧洲中文天堂| 精品网站999| 97精品视频| 久久视频在线免费观看| 亚洲精品一区三区三区在线观看| 蜜桃视频在线观看www社区| 东京久久高清| 欧美成人黑人xx视频免费观看| 欧洲精品在线一区| 亚洲欧洲www| 69堂精品视频在线播放| 精品在线手机视频| 国产精品久久久久久亚洲伦| 99精品在线免费| 国产人伦精品一区二区| 亚洲三级 欧美三级| 欧美丰满少妇xxxxx做受| 99久久99热这里只有精品| 亚洲欧洲高清| 中文国产字幕在线观看| 国产精品久久久久久久久久久久久久久| 国产精品久线在线观看| 无码日韩精品一区二区免费| 久久久久久久久久久久电影| 天堂社区 天堂综合网 天堂资源最新版| 不卡一区二区三区视频| 亚洲日本aⅴ片在线观看香蕉| 一区二区三区电影大全| 成人午夜电影网站| 二区在线观看| 亚洲制服欧美中文字幕中文字幕| 久久九九久久九九| 不卡av在线免费观看| 偷拍一区二区| 蜜桃精品在线观看| 在线观看欧美黄色| 精品国产第一区二区三区观看体验| 色与欲影视天天看综合网| 国产精品日本一区二区三区在线| 日韩精品在线看| av免费在线网站| 国产精品永久| 亚洲男人av| 国产精品美女久久久久aⅴ| 国产精品国产三级国产aⅴ无密码| 精品免费av一区二区三区| 精品一区二区三区中文字幕| 国产乱人伦偷精品视频免下载| 成a人片国产精品| 亚洲国产成人在线播放| 日韩在线观看电影完整版高清免费| 国产精品chinese| 精品国产一区二区三区久久狼黑人| 亚洲精品福利免费在线观看| 亚洲精品中文字| 日韩欧美久久久| 久久成年人免费电影| 亚洲男人的天堂一区二区| 91国内产香蕉| 国产精品亲子伦av一区二区三区| 亚洲第一页中文字幕| 欧美系列电影免费观看| 水蜜桃一区二区| 日韩欧美亚洲国产精品字幕久久久| 亚洲欧美区自拍先锋| 亚洲+小说+欧美+激情+另类| 亚洲校园激情春色| 精品久久香蕉国产线看观看亚洲| 国产自产2019最新不卡| 国产成年精品| 男女av一区三区二区色多| 中文字幕精品av| 亚州欧美一区三区三区在线| 精品久久国产字幕高潮| 午夜精品剧场| 中文字幕在线三区| 中文字幕自拍vr一区二区三区| 日本道精品一区二区三区| 17c精品麻豆一区二区免费| 亚洲精品一品区二品区三品区| 亚洲欧美日韩电影| 日韩av一级| 最新日韩中文字幕| 韩国主播福利视频一区二区三区| 欧美日韩和欧美的一区二区| 欧美激情视频一区二区三区| 国产91在线视频| 亚洲福利视频专区| 久热精品在线| 久久视频这里只有精品| 中文字幕亚洲自拍| 91精品国产日韩91久久久久久| 欧美激情视频免费观看| 欧美人与禽zozo性伦| 亚洲精品视频免费观看| 欧美精品自拍偷拍动漫精品| 国产午夜精品一区二区三区| 欧美激情网站| 国产精品一区二区av影院萌芽| 亚洲承认视频| 亚洲免费观看高清完整版在线观看| sis001欧美| 最近2019中文字幕大全第二页| 亚洲九九在线| 日韩精品一卡二卡三卡四卡无卡| 91精品国产乱码久久久久久久久| 亚洲精品免费看| 欧美成人合集magnet| 久久九九热re6这里有精品| 国产伦精品一区二区三| 亚洲男人的天堂av| 国语自产在线不卡| 捆绑紧缚一区二区三区视频| 午夜日韩激情| 久久视频国产精品免费视频在线| 色综合久久影院| 女囚岛在线观看| 日韩avvvv在线播放| 日本肉肉一区| 97免费资源站| 日韩中文欧美在线| 亚洲精品国产a久久久久久| 欧美视频完全免费看| 亚洲一区不卡| 国产精品免费一区二区三区四区| 国产乱码精品一区二区三区日韩精品| 欧美视频三区在线播放| 懂色av噜噜一区二区三区av| 亚洲欧美综合国产精品一区| 国内成人精品一区| 亚洲最大的成人av| 91精品综合视频| 欧美激情一区二区三区久久久| 亚洲一区二区在线播放相泽| 26uuu国产在线精品一区二区| www.8ⅹ8ⅹ羞羞漫画在线看| 欧美精品一区二区三区久久久竹菊| 亚洲国产精品yw在线观看| 91久久国产婷婷一区二区| 国产精品一区一区| 国产性色av一区二区| 久久www成人_看片免费不卡| 国产片一区二区三区| 久久久精品午夜少妇| 亚洲精品日韩在线| 26uuu精品一区二区三区四区在线| 国产乱码精品一区二区亚洲| 亚洲欧洲国产日韩| 九热爱视频精品视频| 激情婷婷综合| 一本一道波多野毛片中文在线| 最新日韩av在线| 亚洲色图av在线| 国产精品亚洲成在人线| 国产视频一区二区三区四区| 亚洲精品在线一区二区| 色婷婷综合久久久久中文| 成人精品久久一区二区三区| 亚洲香蕉成视频在线观看| 免费亚洲一区| 欧美视频不卡中文| 98精品久久久久久久| 欧美精品videos另类日本| 久久九九全国免费精品观看|