讓你開闊思維的UI設計案例
本期給大家分享的案例非常給力又有趣,很可能會改變你未來UI設計過程中的思考方式。而且,如果你常常感覺被PM或者需求方牽著走,自己總是在做執行,那這篇文章會讓你找到突破方法。
案例解析
分享案例之前,我們先了解一下PM角色的職業特征,接觸的PM多了會發現,很多PM工作中會給人一種目的性很強的感覺。
比如他們在向交互傳遞需求或自己畫原型圖時,常常是A重要的就把A放到最明顯的地方,看似合理,其實很多時候交互邏輯是缺失體驗的。
當然他們形成的這種思維方式是可以理解的,PM常常被各方需求纏身,沒有時間深入考慮體驗層面。
所以PM非常需要與交互、UI配合,這樣才能更好的完成產品設計。
但是,很多產品經理缺少與設計師建立配合的意識,而是習慣讓設計師去執行自己的設計想法。
更可怕的是,還不能讓設計師理解他設計的目的,這就導致設計師常常被帶跑偏。
開始案例分享
下圖是交互設計師按照產品經理的想法設計的原型圖,此頁面是會員成長值的得分統計。
頁面的功能目的是引導用戶做任務,從而得到更高的分值,升到更高的會員等級。
原型圖分為三個部分,上面是五維圖(蜘蛛圖),中間是平臺的推薦任務,下面是對應五維度的五個Tab任務。
身為UI設計師拿到原型圖,你會從哪些方面著手進行設計呢?
按原型圖來設計,最終的設計稿是下圖的樣子。
按原型圖設計稿
頁面中五維圖與下面的五個Tab是聯動關系,用戶點擊五維圖可以控制Tab切換。
然而,現在中間插了一個“推薦任務”模塊,這就會給人一種割裂感。
設計稿問題解析
從體驗的角度來看,這樣的設計無法過關,與產品經理商討調整“推薦任務”位置,他完全不同意。
他的理由是,推薦任務是系統匹配給用戶最適合當前完成的任務,必須放到首屏這個位置。
產品經理的表述 “必須放到首屏這個位置” 這就是讓設計師執行他的目的方案,而不是與設計師配合來解決這個需求。
遇到產品經理這樣“有理有據”的表述,相信很多UI設計師都會妥協,這時其實就被產品經理帶坑里了。
產品經理落實需求的思考方式往往是直接了斷的,這就很容易缺失體驗,所以,交互設計師的價值就會體現于此。
但無論有沒有交互設計師來梳理交互,UI設計師都需要帶著交互思維進一步去驗證設計。
回到案例,雖然產品經理很強勢,但如果有問題,設計師還是應該去驗證并改正問題,以下是幾種改正方案。
方案一
方案一:雖然符合產品的布局邏輯,但是無法滿足產品需求。
因為推薦是算法得出最適合用戶的任務,不出現在首屏就不能及時曝光,也就會降低用戶提升成長值的速度。
方案二
方案二:產品布局邏輯合理,但加標簽提示,只能曝光當前Tab的推薦任務,所以同樣會降低提升速度。
方案三(定稿)
方案三:把推薦任務放到Tab中,不僅符合產品邏輯,也能在首屏充分曝光,能夠滿足產品需求。
當時把第三個方案給產品經理看后,他微微一笑欣然接受,相信下次他會多聽聽設計師的想法。
總結:
優秀的產品經理善于讓設計師明白他的需求目的,或是同設計師一起去探討設計方案,而不是強勢的讓設計師去遵循他的目的方案。
而作為設計師,要善于挖掘需求目的,多思考并驗證上游的產出,為他人把關就是提升自己的價值。
一個更有趣的案例
如果上一個案例,沒能讓你有所感悟,那讓下面這個案例來直擊你的靈魂。
先說一個事,曾經與產品經理開會過原型圖,當有人質疑為什么這個頁面不能調轉到另一個頁面時。
產品經理隨口就說,“那在這個頁面加個按鈕入口就行了”,然后需求方都認同的說,“嗯,這樣邏輯上就走通了”。
這樣的思考方式,我稱之為補窟窿思維,當產品中出現一個問題時,馬上在問題的基礎上找解決辦法。
這樣往往會因為沒有做到全局思考,而影響到其他功能體驗,久而久之產品還會變得臃腫難用。
接下來要分享的就是一個典型案例,產品經理和設計師都愛在這點上踩坑,領悟到這個案例的精髓,會讓你的思維更開闊。
下圖是線上版本的推薦醫師頁面,現在的需求是在此頁面增加一個用戶歷史預約入口,方便用戶找到曾經用過的醫師。
線上頁面
增加歷史預約入口,按照產品經理的想法設計,是下圖的樣子。
產品經理的設計方案
UI設計師認為產品經理的設計方案,不夠好看,視覺上過于突兀,還破壞了頁面結構。
UI設計師的想法是,把歷史預約入口換成圖標形式,放到頁面右上角,如下圖所示。
UI設計師的設計方案
以上兩種方案你會更傾向誰呢?
如果我選,我選擇產品經理的設計方案,雖然有點突兀,但可以滿足產品需求,因為滿足產品需求才是最重要的。
UI設計師的想法也可以理解,確實使用圖標不會破壞頁面結構,美觀度也不錯,但用戶的理解成本過高,會失去功能性。
敲黑板!重點來了~
產品經理的設計方案雖然好一些,但未必是最好的設計方案。
現在我們拋去在當前頁面中加入口的思維方式,把此頁面當成0-1重新思考設計。
通過整合梳理會發現,頁面中其實是兩大功能模塊即“推薦醫師”和“歷史預約”。
推薦醫師與歷史預約
所以,其實把兩個功能模塊設計成Tab切換更為合適,這樣既能突出功能滿足需求,也不會突兀,如下圖所示。
Tab切換體驗更好(定稿)
以上就是本期分享的內容了,希望對各位小伙伴有所啟發~
轉載聲明:本文來源于網絡,不作任何商業用途

全部評論


暫無留言,趕緊搶占沙發
熱門資訊

【UI設計】UI設計師快速上手B端設計指南

提高Banner圖點擊率的幾個小技巧

2021年流行的插畫風格趨勢

APP端表單表格設計方法

深圳三維動效設計培訓哪家推薦?

ue交互設計師要掌握什么技能嗎?

深圳平面攝影培訓哪個比較好?

初中畢業學設計哪個機構好?

web產品設計操作指南
