用Keep的案例,讓你輕松理解交互設(shè)計(jì)師的職責(zé)
偶然候咱們會碰到如許一個(gè)事情,一個(gè)功能或者內(nèi)容,到底是 UX 做,照舊 UI 做?
假如是在小公司就沒有如許的顧慮,可能一小我必要同時(shí)擔(dān)任 UX 和 UI 兩種職責(zé),只要是 APP 相干事宜,找到某位設(shè)計(jì)師就行了。但在大廠,由于職責(zé)分得比較細(xì),而設(shè)計(jì)又是一項(xiàng)知識交叉比較多的營業(yè),于是邊界也就不那么清楚,必要去判斷,到底一項(xiàng)活應(yīng)該由交互去做呢照舊由 UI 去做。
分清楚這件事的目的并不是為了推卸責(zé)任不去干活,而是為了明確事情比較適合哪個(gè)崗位的設(shè)計(jì)師去做,以達(dá)到時(shí)間和資源行使率上的最大化,用最少的人力去達(dá)到最大的結(jié)果。
以下是閣主所羅列的交互設(shè)計(jì)師的職責(zé),如下圖。
今天咱們就用 keep 的小我頁面來說說,哪些事情是 UX設(shè)計(jì)師應(yīng)該做,哪些是 UI設(shè)計(jì)師應(yīng)該做的事,哪一項(xiàng)是兩者必要共同配合,一同完成的。請先查看 keep 的小我頁面,如下圖。
一、需求角度
首先拿到 PM 給過來的需求之后,UX 會開始從需求的角度分析題目,需求分為商業(yè)需求和用戶需求。
商業(yè)需求 PM 會比閣主講的更專業(yè),在這里閣主只做初略詮釋,即產(chǎn)品的目的是直接想達(dá)到讓用戶進(jìn)行購買的舉動,或者說收集用戶的數(shù)據(jù)進(jìn)行間接紅利,普通地說就是產(chǎn)品是怎樣贏利的。用戶的需求,即用戶為什么要使用該產(chǎn)品,使用該產(chǎn)品可以幫助用戶解決他的哪些題目,為他帶去哪些益處,為了達(dá)到這個(gè)目的,用戶樂意支出哪些成本。
再回到這個(gè)案例中,keep 的產(chǎn)品定位為,為用戶提供優(yōu)質(zhì)的健身視頻教程,并形成響應(yīng)的社交圈子,讓用戶形成風(fēng)俗之后靠電商去進(jìn)行紅利。典型的從一個(gè)工具,到社交,再到電商的營銷模式。它能幫助減肥,保持健康與好的體態(tài),用戶為了達(dá)到目的,可以長時(shí)間沉浸在 APP 中。而好的體態(tài)原本就有利于社交,于是形成一個(gè)良性循環(huán),健身-社交-更多社交-營銷。
在這種情況下,UX 要做的事情是什么呢?一方面進(jìn)步用戶在使用健身視頻中的愉悅感,另一方面將用戶往社交的方向指導(dǎo)。所有的出發(fā)點(diǎn)都是朝著這兩點(diǎn)進(jìn)行前進(jìn)。
二、設(shè)計(jì)角度
原則確定之后,再來看看對于小我頁面,UX 必要做什么。流程是指,用戶在 APP 中的主流程,對應(yīng)到 keep 中,則是打開 APP——選擇訓(xùn)練內(nèi)容——跟著視頻做訓(xùn)練——結(jié)束訓(xùn)練——分享訓(xùn)練的如許這個(gè)路徑。信息架構(gòu)是指 APP 的樹形結(jié)構(gòu),即它是由哪幾個(gè) tab 組成,每個(gè) tab 的內(nèi)容是什么,大體如下圖。
而剩下的內(nèi)容則都屬于單個(gè)頁面信息,包括頁面的布局,是像如今頁面分為兩大塊,上面一大塊是關(guān)于小我社交相干信息,包括頭像昵稱、粉絲數(shù)、關(guān)注數(shù)、動態(tài)數(shù),而下面一大塊則是關(guān)于用戶小我的產(chǎn)出數(shù)據(jù),又分為主頁和相冊兩個(gè) tab 進(jìn)行內(nèi)容分區(qū)。在此案例中,布局中也包含了導(dǎo)航。
而信息的來源、屬性、優(yōu)先級、字段、關(guān)系,又代表著什么呢?打比方說,在圖中有個(gè)顯明的字體,KG.6,是指用戶的等級,由 keep 平臺制訂規(guī)則,用戶達(dá)到響應(yīng)的要求之后,等級數(shù)就會呈現(xiàn)。
那么這個(gè)「KG.6」的描述就是字段,由英文和阿拉伯?dāng)?shù)字組成;它的來源是由平臺的規(guī)則和用戶本身的貢獻(xiàn)一路產(chǎn)生;屬性在這里臨時(shí)可以理解成為描述和評估性子;優(yōu)先級和關(guān)系可以和整個(gè)頁面聯(lián)系起來考慮,它在小我主頁這個(gè)頁面來說緊張級別低于整個(gè)頁面的小我數(shù)據(jù)表達(dá),但是在單個(gè)主頁 tab 上,卻比其他的數(shù)據(jù)更加緊張,所以在顏色和字體大小上做了強(qiáng)調(diào)。
動作是指什么呢,在這個(gè)小我主頁上,用戶的操作重要是上下滑動以及點(diǎn)擊的操作,那么用戶的滑動以及點(diǎn)擊的舉動即用戶的動作。動作之后所帶來的頁面的轉(zhuǎn)變即交互體例,點(diǎn)擊之后是會出現(xiàn)彈框呢照舊 push 到一個(gè)子頁面,這些都屬于 interaction 交互體例。
而 UI設(shè)計(jì)師則偏向于視覺語言的設(shè)計(jì),顏色、字體、間距、插畫等等方面的工作。但也有 UX 和 UI 必要進(jìn)行合作的,比方說空頁面,UX 可以定義空頁面有哪些文本以及指導(dǎo)的動作,UI設(shè)計(jì)師可以繪制更詼諧或者情感化的插畫進(jìn)行表達(dá),是可以進(jìn)行合作的。
以上只是用一個(gè)案例從狹義的方面去表述交互設(shè)計(jì)師的工作內(nèi)容詳細(xì)有哪些,假如說要?dú)w納起來的話,只要與用戶體驗(yàn)的相干的內(nèi)容,UX 都必要進(jìn)行考慮。能夠進(jìn)步用戶感受或者服從的事情,UX 都可以進(jìn)行一些嘗試。還必要秉承一觀點(diǎn),不管是UX、UI,哪怕是開發(fā)GG、QA同窗,所提出的意見,能對項(xiàng)目有益處的,都可以進(jìn)行決定,以及進(jìn)行采納。
作者簡介:Sophia的玲瓏閣,成功從平面轉(zhuǎn)行至UI再轉(zhuǎn)行至好互的設(shè)計(jì)師妹紙。
職場設(shè)計(jì)技能,更多教程爭先看,請關(guān)注作者的微信公眾號:「Sophia的玲瓏閣」
本文地址:http://m.likemindfilms.com/tutorial/di4187.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇