一個有靈魂的UI設計案例

1、案例解析分享案例之前，我們先了解一下PM角色的職業(yè)特征，接觸的PM多了會發(fā)現，很多PM工作中會給人一種目的性很強的感覺。比如他們在向交互傳遞需求或自己畫原型圖時，常常是A重要的就把A放到最明顯的地方，看似合理，其實很多時候交互邏輯是缺失體驗的。當然他們形成的這種思維方式是可以理解的，PM常常被各方需求纏身，沒有時間深入考慮體驗層面。所以PM非常需要與交互、UI配合，這樣才能更好的完成產品設計。但是，很多產品經理缺少與設計師建立配合的意識，而是習慣讓設計師去執(zhí)行自己的設計想法。更可怕的是，還不能讓設計師理解他設計的目的，這就導致設計師常常被帶跑偏。開始案例分享下圖是交互設計師按照產品經理的想法設

2、計的原型圖，此頁面是會員成長值的得分統(tǒng)計。頁面的功能目的是引導用戶做任務，從而得到更高的分值，升到更高的會員等級。原型圖分為三個部分，上面是五維圖（蜘蛛圖），中間是平臺的推薦任務，下面是對應五維度的五個Tab任務。身為UI設計師拿到原型圖，你會從哪些方面著手進行設計呢？按原型圖來設計，最終的設計稿是下圖的樣子。按原型圖設計稿頁面中五維圖與下面的五個Tab是聯動關系，用戶點擊五維圖可以控制Tab切換。然而，現在中間插了一個“推薦任務”模塊，這就會給人一種割裂感。設計稿問題解析從體驗的角度來看，這樣的設計無法過關，與產品經理商討調整“推薦任務”位置，他完全不同意。他的理由是，推薦任務是系統(tǒng)匹配給用

3、戶最適合當前完成的任務，必須放到首屏這個位置。產品經理的表述“必須放到首屏這個位置”這就是讓設計師執(zhí)行他的目的方案，而不是與設計師配合來解決這個需求。遇到產品經理這樣“有理有據”的表述，相信很多UI設計師都會妥協(xié)，這時其實就被產品經理帶坑里了。產品經理落實需求的思考方式往往是直接了斷的，這就很容易缺失體驗，所以，交互設計師的價值就會體現于此。但無論有沒有交互設計師來梳理交互，UI設計師都需要帶著交互思維進一步去驗證設計?；氐桨咐m然產品經理很強勢，但如果有問題，設計師還是應該去驗證并改正問題，以下是幾種改正方案。方案一方案一：雖然符合產品的布局邏輯，但是無法滿足產品需求。因為推薦是算法得出最

4、適合用戶的任務，不出現在首屏就不能及時曝光，也就會降低用戶提升成長值的速度。方案二方案二：產品布局邏輯合理，但加標簽提示，只能曝光當前Tab的推薦任務，所以同樣會降低提升速度。方案三（定稿）方案三：把推薦任務放到Tab中，不僅符合產品邏輯，也能在首屏充分曝光，能夠滿足產品需求。當時把第三個方案給產品經理看后，他微微一笑欣然接受，相信下次他會多聽聽設計師的想法?？偨Y：優(yōu)秀的產品經理善于讓設計師明白他的需求目的，或是同設計師一起去探討設計方案，而不是強勢的讓設計師去遵循他的目的方案。而作為設計師，要善于挖掘需求目的，多思考并驗證上游的產出，為他人把關就是提升自己的價值。一個更有趣的案例如果上一個案

5、例，沒能讓你有所感悟，那讓下面這個案例來直擊你的靈魂。先說一個事，曾經與產品經理開會過原型圖，當有人質疑為什么這個頁面不能調轉到另一個頁面時。產品經理隨口就說，“那在這個頁面加個按鈕入口就行了”，然后需求方都認同的說，“嗯，這樣邏輯上就走通了”。這樣的思考方式，我稱之為補窟窿思維，當產品中出現一個問題時，馬上在問題的基礎上找解決辦法。這樣往往會因為沒有做到全局思考，而影響到其他功能體驗，久而久之產品還會變得臃腫難用。接下來要分享的就是一個典型案例，產品經理和設計師都愛在這點上踩坑，領悟到這個案例的精髓，會讓你的思維更開闊。下圖是線上版本的推薦醫(yī)師頁面，現在的需求是在此頁面增加一個用戶歷史預約入

6、口，方便用戶找到曾經用過的醫(yī)師。線上頁面增加歷史預約入口，按照產品經理的想法設計，是下圖的樣子。產品經理的設計方案UI設計師認為產品經理的設計方案，不夠好看，視覺上過于突兀，還破壞了頁面結構。UI設計師的想法是，把歷史預約入口換成圖標形式，放到頁面右上角，如下圖所示。UI設計師的設計方案以上兩種方案你會更傾向誰呢？如果我選，我選擇產品經理的設計方案，雖然有點突兀，但可以滿足產品需求，因為滿足產品需求才是最重要的。UI設計師的想法也可以理解，確實使用圖標不會破壞頁面結構，美觀度也不錯，但用戶的理解成本過高，會失去功能性。敲黑板！重點來了產品經理的設計方案雖然好一些，但未必是最好的設計方案?，F在我們拋去在當前頁面中加入口的思維方式，把此頁面當成0-1重新思考設計。通過整合梳理會發(fā)現，頁面中其實是兩大功能模塊即“推薦醫(yī)師”和“歷史預約”。推薦醫(yī)師與歷史預約所以，其實把兩個功能模塊設計成Tab切換更為合適，這樣既能突出功能滿足需求，也不會突兀，如下圖所示。Tab切換體驗更好（定稿）問題來了！Tab切換是非常常見