首頁

交互設(shè)計公司:提升數(shù)字產(chǎn)品用戶體驗的魔法之手

藍藍設(shè)計的小編 seo優(yōu)化

在當(dāng)今數(shù)字化的時代,數(shù)字產(chǎn)品如雨后春筍般涌現(xiàn),而用戶體驗成為了決定產(chǎn)品成敗的關(guān)鍵因素。在這一背景下,交互設(shè)計公司猶如擁有魔法的工匠,精心雕琢著數(shù)字產(chǎn)品,為用戶帶來無與倫比的體驗。

交互設(shè)計公司的主營業(yè)務(wù)有哪些

藍藍設(shè)計的小編

在當(dāng)今數(shù)字化的時代,交互設(shè)計成為了塑造用戶體驗的關(guān)鍵因素。而交互設(shè)計公司,作為這一領(lǐng)域的專業(yè)力量,其主營業(yè)務(wù)涵蓋了眾多方面,為企業(yè)和用戶創(chuàng)造著豐富而有價值的體驗。

B端設(shè)計攻略!16000字干貨幫你掌握通用/布局/數(shù)據(jù)展示三大組件|北京藍藍UI設(shè)計公司

周周

B 端設(shè)計的文章和資料參考,缺少系統(tǒng)性的說明,這是我總結(jié)第五篇。本文主要闡述——通用樣式、布局和數(shù)據(jù)展示。

淺析用戶體驗四維度

純純

用戶體驗四維度的概念、價值以及相互之間的關(guān)系

用戶體驗,是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。

 

解讀用戶體驗,可以有很多視角。本文提供一個以人為本的視角:用戶體驗四維度。具體如下。

 

HI X:Human Interface Experience,人與界面的交互體驗。

HC X:Human Content Experience,人與內(nèi)容的交互體驗。

HH X:Human Human Experience,人與人的交互體驗。

HB X:Human Brand Experience,人與品牌的交互體驗。


用戶體驗四維度

 

 

01 四維度的概念

 

怎樣判斷一款產(chǎn)品有幾個維度?這就要從四維度的概念說起。

 

1. HI X(人與界面的交互體驗)

 

HI X 是指用戶在瀏覽、閱讀、操作界面過程中產(chǎn)生的主觀感受。

 

HI X 既受信息架構(gòu)、交互設(shè)計和UI設(shè)計的影響,也受根需求和功能架構(gòu)的影響。主要依托手機和電腦的互聯(lián)網(wǎng)產(chǎn)品,天然存在界面。所以,HI X 屬于基礎(chǔ)屬性,所有產(chǎn)品都有。

 

2. HC X(人與內(nèi)容的交互體驗)

 

HC X 是指用戶在消費內(nèi)容時,內(nèi)容本身帶給用戶的主觀感受。

 

這里的內(nèi)容,既包括衣服、鞋子等實體商品,也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴(yán)選等電商產(chǎn)品,以及公眾號、Instagram、抖音等 UGC 產(chǎn)品,都具備 HC X 屬性。

 

3. HH X(人與人的交互體驗)

 

HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時產(chǎn)生的主觀感受,或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。

 

所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間,是指當(dāng)用戶扎堆或溝通交流時,交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間,是指當(dāng)產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務(wù)時,產(chǎn)品工作人員的服務(wù)行為帶給用戶的主觀感受。

 

關(guān)于第一層含義,不管是更強調(diào)社區(qū)屬性的產(chǎn)品,比如天涯社區(qū)、豆瓣小組、百度貼吧,還是更強調(diào)內(nèi)容屬性的產(chǎn)品,比如公眾號、微博、小紅書的筆記,都具備 HH X 屬性。

 

關(guān)于第二層含義,常見的 HH X 由客服人員提供。如果是電商產(chǎn)品,提供人員還包括快遞員和售后人員等。

 

4. HB X(人與品牌的交互體驗)

 

HB X 是指當(dāng)用戶想起、談?wù)撈鹌放?,或使用品牌的產(chǎn)品、體驗品牌的服務(wù)時,品牌帶給用戶的主觀感受。

 

只要一款產(chǎn)品做成了品牌,它就有 HB X 屬性。

 

HB X 會直接影響到我們是否信任、喜歡一個品牌,以及是否會使用它的產(chǎn)品和服務(wù)。所以,我們對 HB X 往往會有一個抓重點的綜合評價。就像一個外向活潑的女生,雖然在外向程度方面和一個內(nèi)向安靜的男生不一致,但雙方也可能會選擇在一起,因為內(nèi)向、外向并非雙方關(guān)注的重點。

 

因為 HB X 牽涉到對品牌的綜合評價,所以就像工作都有一段試用期、戀愛都有一段了解期一樣,HB X 的形成往往也需要較長時間,通常至少要 3~5 年。

 

 

02 四維度的價值

 

每一個維度,各有什么價值?

 

1. HI X(人與界面的交互體驗)

 

作為基礎(chǔ)屬性,HI X 的價值主要體現(xiàn)在以下兩方面。

如果是一款只具有 HI X 屬性的工具型產(chǎn)品,比如視頻會議產(chǎn)品 Zoom,那于這款產(chǎn)品而言,HI X 就是一切,這款產(chǎn)品的成敗也幾乎完全取決于 HI X。

 

如果是一款同時具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品,比如 B 站、快手這些視頻類產(chǎn)品,那此時的 HI X 就會扮演一個類似交通出行(基礎(chǔ)設(shè)施)的角色。如果 HI X 比較差,這個“出行”過程就會像出去玩時的塞車一樣,讓人難受;如果 HI X 很優(yōu)秀,這個“出行”過程就會像準(zhǔn)點的高鐵、飛機一樣,又快又爽。

 

2. HC X(人與內(nèi)容的交互體驗)

 

HC X 主要從內(nèi)容層面影響用戶滿意度。

 

如果 HC X 比較好,用戶消費時的決策時間就會被大大縮減,同時用戶滿意度也會比較高。比如淘寶上就有一些原創(chuàng)設(shè)計、質(zhì)量不錯、價格不貴的精品小店,很受歡迎。我們?nèi)ゾW(wǎng)易嚴(yán)選、優(yōu)衣庫天貓旗艦店這些質(zhì)量不錯、設(shè)計不錯、價格適中的店鋪買 東西時,也會很快很省心。

 

以上說的是電商產(chǎn)品,對于 UGC 類的內(nèi)容產(chǎn)品,也是類似的道理。比如站酷上的首頁推薦和編輯推薦,相對而言,HC X 比較不錯,所以看這些內(nèi)容的用戶也會比較多。

 

3. HH X(人與人的交互體驗)

 

HH X 是用戶情緒的最大影響因素,在情感方面對用戶具有最大吸引力。物以類聚,人以群分。HH X 良好的產(chǎn)品,會像一場談笑風(fēng)生、其樂融融的聚會,吸引用戶去扎堆。

 

良好的 HH X 往往意味著良好的氛圍,它不僅能帶給我們諸如輕松、愉快等積極情緒,還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果,就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好,具體而言就是彈幕氛圍比較歡樂友好,這樣的氛圍帶給用戶的感覺是比較好的,用戶也喜歡在 B 站就著彈幕看視頻。

 

4. HB X(人與品牌的交互體驗)

 

HB X 事關(guān)品牌能不能以正面形象住進用戶心里。

良好的 HB X,往往意味著良好的品牌美譽度和忠誠度。HB X 良好的產(chǎn)品,就像你信任和喜歡的男/女朋友一樣,他/她會在你心里占據(jù)一定的分量和地位,讓你樂意介紹給家人和朋友認識。比如蘋果的 Mac,就有很高的品牌美譽度和忠誠度,用戶也很樂意把 Mac 推薦給身邊的朋友。

 

 

03 四維度的關(guān)系

 

四維度之間存在怎樣的關(guān)系?

 

1. HI X 是另外三個維度的基礎(chǔ)

 

HI X 作為基本維度,相當(dāng)于“水之源,木之本”。如果把用戶體驗四維度比作一個金字塔的話,塔底的基石一定是 HI X,塔尖則是 HB X。

 

2. HC X 通常是 HH X 的基礎(chǔ)

 

HH X 的產(chǎn)生,通常離不開 HC X。也就是說,通常得有一個合適的“內(nèi)容”或“主題”,才能把人聚攏過來。比如結(jié)婚的時候,你可以邀請到很多親朋好友來參加婚禮,但在平時,你很難邀請到這么多人。我們在 B 站看視頻的時候,彈幕通常比較歡樂友好,氛圍不錯,但如果沒有這些視頻,也就不會有這些彈幕,以及不錯的社區(qū)氛圍。

 

3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎(chǔ)

 

HC X、HH X 和 HI X 一樣,都可以成就 HB X。

 

以早期 Keep 為例,剛開始只有課程這個功能,也就是說只有 HI X 和 HC X 這兩個屬性。其中,HI X 還可以,HC X 比較優(yōu)秀。在此基礎(chǔ)上,慢慢發(fā)展出了社區(qū)功能(HH X 屬性),而且做得不錯。再往后,有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下,Keep 有了不錯的品牌美譽度和忠誠度。也就是說,HC X、HH X 和品牌精神等因素,一起成就了良好的 HB X。

 

4. HB X 也可以僅有 HI X 這一個基礎(chǔ)

 

有些產(chǎn)品并不具有 HC X 和 HH X 這兩個屬性,而是僅有 HI X 這一個屬性。單憑一個良好的 HI X,也可以成就良好的 HB X。

 

比如 Zoom,作為一款開視頻會議的工具應(yīng)用,它最初只有 HI X 這一個屬性。但是因為很好用,HI X 很優(yōu)秀,所以如今的 Zoom 即便沒有內(nèi)容(HC X)和社區(qū)(HH X)屬性,依然成了一個在全球都很受歡迎的品牌,擁有了不錯的 HB X。

 

總的來說,在四維度的金字塔里面,它們的關(guān)系如下圖所示。


文章來源:站酷    作者:SnowDesign

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


手把手教你撰寫交互設(shè)計文檔(保姆級教程)

周周

前言:為什么要寫交互設(shè)計文檔?交互設(shè)計文檔有什么用?


第一,交互設(shè)計師的交互設(shè)計文檔就好像UI設(shè)計師的PSD文件一樣用于保存記錄自己的設(shè)計思路,但交互設(shè)計師負責(zé)的任務(wù)不僅僅停留在頁面當(dāng)中,還包括產(chǎn)品的需求分析、用戶畫像、競品分析、產(chǎn)品數(shù)據(jù)分析、用戶交互邏輯等等..我們都可以寫在交互設(shè)計文檔中做記錄,為我們的交互設(shè)計提供依據(jù)。(其實就是避免開發(fā)懟你問你設(shè)計依據(jù)是啥,你就馬上把分析擺他臉上,避免尷尬)


第二點是交互設(shè)計師作為產(chǎn)品的上游(一般開發(fā)流程是產(chǎn)品經(jīng)理負責(zé)收集需求給予交互設(shè)計師進行交互設(shè)計,撰寫交互設(shè)計文檔,然后文檔評審?fù)ㄟ^后,UI同學(xué)負責(zé)UI設(shè)計,接著提供前端同學(xué)進行界面開發(fā),后端同學(xué)則根據(jù)交互稿搭建框架和業(yè)務(wù)邏輯,開發(fā)完成后進行測試,反饋測試結(jié)果,如此循環(huán),因此交互設(shè)計師一般處于產(chǎn)品線的上游階段),撰寫一份標(biāo)準(zhǔn)和規(guī)范的交互設(shè)計文檔是非常重要的,因為我們需要利用交互設(shè)計文檔去表達我們的設(shè)計思路,通過交互文檔我們可以讓UI同學(xué)知道頁面需要給用戶表達什么情緒,達到怎樣的目的,告訴前端同學(xué)頁面跳轉(zhuǎn)邏輯以及交互模塊怎么寫,幫助后端同學(xué)清晰搭建后臺框架與數(shù)據(jù)庫以及產(chǎn)品業(yè)務(wù)邏輯是怎么樣的,最后測試童鞋還會拿著你的交互稿進行單元測試,編寫測試用例,所以只有我們先把文檔寫好了,才能避免后面產(chǎn)品開發(fā)出現(xiàn)問題。


第三點也是最重要的一點就是未來我們用于跳槽加薪面試作品。內(nèi)行看門道,外行看熱鬧,如果你面試交互設(shè)計師的時候還是帶著一條長長的JPG或者是網(wǎng)上千篇一律排版的PDF作品集,在面試官眼中顯得不入行(或許你會遇到性格好的面試官,畢竟千人千面,面試特別看人),因為專業(yè)的交互設(shè)計師在平時工作中為了避免干擾UI同學(xué)設(shè)計,只會使用黑白灰做交互稿,也很少做成一條長長的PNG或JPG,我們可以適當(dāng)包裝作品集,但如果過度了會讓人覺得不落地,或許只停留在剛?cè)胄须A段,所以在技術(shù)面試,我們可以拿著我們的交互設(shè)計文檔跟面試官敘述產(chǎn)品從需求層面怎樣思考完成交互設(shè)計的,解決了用戶什么痛點,最后取得了什么樣的成果,得到了怎樣的數(shù)據(jù),我相信成功幾率會大很多。(PS:用交互設(shè)計文檔進行面試前請注意把公司機密信息做脫敏處理,避免發(fā)生糾紛)


1、交互文檔包含什么內(nèi)容?以及怎樣撰寫交互文檔?


說了那么多,那究竟交互設(shè)計文檔包含哪些內(nèi)容?


一般來講,一個基礎(chǔ)、規(guī)范的交互設(shè)計文檔應(yīng)該包含文檔封面、更新文檔、設(shè)計說明文檔、業(yè)務(wù)流程圖、交互原型、垃圾桶等模塊,當(dāng)然了,這些模塊也不是永恒不變的,有些是必須要,有些是選擇性添加的,至于這些模塊有什么功能和怎樣進行撰寫,這篇文章會逐一分享給大家~


(說明:作者比較習(xí)慣使用Axure軟件撰寫交互設(shè)計文檔,大家可以根據(jù)自身愛好或者公司規(guī)定進行選擇(例如sketch、figma、PS等等..都是可以的)。這里要引用一句話:軟件僅僅是工具,并不能限制我們的思維,好的工具能讓我們走得更快但不能使我們走得更遠——沃·茲基碩德。


1.1、文檔封面(必須)


文檔封面就相當(dāng)于一本書的封面一樣,用于記錄產(chǎn)品名稱、版本號、日期以及文檔負責(zé)人(這樣開發(fā)童鞋就能精準(zhǔn)找到你進行撕X),只要能展示以上信息,其他信息(例如產(chǎn)品經(jīng)理是誰等..)可以自行添加。


1.2、更新日志(必須)


以前我都習(xí)慣把更新日志放到產(chǎn)品文檔后面,但是隨著工作時間變久,我發(fā)現(xiàn)開發(fā)童鞋在SVN上打開設(shè)計文檔后第一時間就是查看更新日志,所以后來把這一頁提了上來。(是的,設(shè)計文檔也是需要跟產(chǎn)品一樣不斷優(yōu)化迭代的)


更新日志主要用于記錄產(chǎn)品迭代修改的內(nèi)容,讓開發(fā)同學(xué)快速了解這次迭代修改了什么內(nèi)容,他需要做哪些工作。我的更新日志特別簡單,就只有日期、變更內(nèi)容、所在頁面以及備注四個字段,這里唯一注意的是,日期必須是最新修改的內(nèi)容放在上面,以前的日期在下面,很多同學(xué)每次迭代的時候會在下面列進行內(nèi)容添加,這樣開發(fā)同學(xué)每次都必須滾到最下面查看信息,大哥,你是交互設(shè)計師,專業(yè)一點好嗎。


1.3、產(chǎn)品項目背景(必須)


產(chǎn)品項目背景是一個項目的核心關(guān)鍵,告訴所有的團隊成員我們要做一個什么樣的產(chǎn)品,需要創(chuàng)造什么樣的價值,就好比我們寫作文時的中心句,時刻提醒著我們要不忘初心,為團隊成員開發(fā)項目指明方向。


前段時間有個同學(xué)來問我,他們本來是剛開始是做校園教育系統(tǒng)的,但是隨著產(chǎn)品慢慢迭代,功能逐漸強大了,最近老板希望在系統(tǒng)中加上財務(wù)功能,本來用戶學(xué)習(xí)成本就高,如果再加上去會不會適得其反?雖然我不知道那位同學(xué)的老板產(chǎn)品戰(zhàn)略是啥,背后是怎樣思考的,但是在我看來這樣的行為就不能是不忘初心,這頂多能算不忘出薪吧。(拒絕諧音梗從我做起)


好了,至于里面產(chǎn)品背景、產(chǎn)品目標(biāo)以及定位的內(nèi)容應(yīng)該如何撰寫?對,我抄的。一般情況下,這些內(nèi)容我們都能夠在項目立項文檔或者在招投標(biāo)書上就能找到,我們不用親自寫(但可以加以設(shè)計),再不行也能找到產(chǎn)品經(jīng)理去了解。


或者你會說,小公司既沒有立項、也沒有招投標(biāo)書,產(chǎn)品經(jīng)理也是你,那該怎么辦?那么你就得發(fā)揮出自己當(dāng)年高考的作文水平,積極了解清楚產(chǎn)品背景定位,努力完成這一部分,因為信息的傳遞是有消耗性的,只有我們作為產(chǎn)品的上游做好了,才能為團隊成員后面的努力提供方向。



1.4、產(chǎn)品需求(必須)


產(chǎn)品需求列表用于記錄產(chǎn)品需要做哪些【功能點】,這些功能點我們一般能在產(chǎn)品經(jīng)理或者項目經(jīng)理上獲得,我們收集需求后需要對其按照重要程度P0、P1、P2等級進行分類,我分類的原則是KANO法則(不知道的同學(xué)可以百度),P0等級是非做不可的需求,例如像微信的聊天,淘寶的支付功能等,P1是錦上添花的需求,時間緊迫的話可以下次再做的,例如微信的語音、視頻聊天等..,排到最后Pn就是一些不必要可做可不做,就算做了也沒太大影響的功能,就可以與領(lǐng)導(dǎo)層商討是否確認要做。(例如炸屎,你們現(xiàn)在還有人炸屎嗎?什么?炸屎你都不知道?那當(dāng)我沒說)


1.5、用戶畫像(可選)


所謂知己知彼百戰(zhàn)不殆,通過用戶畫像我們可以快速了解產(chǎn)品目標(biāo)用戶群體特征,分析目標(biāo)用戶群體的期望、需求、動機等,再根據(jù)用戶場景去進行設(shè)計,有了用戶畫像的支撐,能避免我們在設(shè)計過程中出現(xiàn)一些不必要的因素,例如我們目標(biāo)用戶是中老年人的話,那么按鈕、字體就應(yīng)該適當(dāng)?shù)姆糯?、排版簡單明了,而針對青少年就可以偏個性化風(fēng)格設(shè)計。


當(dāng)然,如果是小公司的話可能沒有那么多的資源去做用戶的調(diào)研,在這里分享一下我當(dāng)年在創(chuàng)業(yè)公司經(jīng)常使用的一種快速獲取用戶畫像的方法,既快速又特別專業(yè)。


這里需要借助一個網(wǎng)站:艾瑞數(shù)據(jù)(https://index.iresearch.com.cn),打開后選擇自己產(chǎn)品的類型(例如學(xué)習(xí)教育類),網(wǎng)站會把該類型的產(chǎn)品按照用戶數(shù)量從高到低展示給你,然后我們選擇一個差不多的競品點擊去查看他們的用戶特征,最后Ctrl C+Ctrl V到我們的文檔中,完成。


1.6、競品分析(可選)


競品分析相信大家都特別熟悉,我之前的文章也教過大家怎么進行詳細的競品分析,這里就不細講了,雖然在交互文檔中競品分析可做可不做,但是在產(chǎn)品初期階段我們?nèi)绻J真做競品分析的話能夠快速了解產(chǎn)品業(yè)務(wù)、熟悉用戶的使用習(xí)慣,同時當(dāng)我們在做交互原型的時候能提供快速借(cao)鑒(xi),因此有條件的同學(xué)還是建議盡量做一下。


1.7、數(shù)據(jù)分析(可選)


數(shù)據(jù)分析時交互設(shè)計師必不可少的一項技能,也是驗證設(shè)計成果的重要因素。如果缺少了數(shù)據(jù)分析而單憑個人主觀因素的話,我們難以說明設(shè)計效果的好壞,畢竟現(xiàn)實中會出現(xiàn)各種意想不到的情況。


 所謂“無對比,不分析”,一般數(shù)據(jù)分析都是通過數(shù)值進行對比,去查看數(shù)據(jù)相對是上升、下降、還是持平,是否跟當(dāng)初設(shè)計預(yù)期的一樣,對于初期的產(chǎn)品會更關(guān)注產(chǎn)品的一些DAU(日活數(shù))、GMV(成交總額)、以及支付人數(shù)等,因為這些數(shù)據(jù)的增減是直接影響到整個產(chǎn)品的存活,如果產(chǎn)品的DAU不斷下降的話,那你就要馬上查找原因,及時調(diào)整,避免惡性循環(huán)。


一般情況下,像日活數(shù)那些簡單的數(shù)據(jù)可以直接問后臺同學(xué)就能獲得,而用戶某些環(huán)節(jié)的存活率、轉(zhuǎn)化率等就需要利用【數(shù)據(jù)埋點】,市場上也有很多第三方做數(shù)據(jù)埋點的,例如神策數(shù)據(jù)、Growing IO等,這里就不展開說了,但是面試的時候你能說出這些就會顯得很專業(yè)。


1.8、信息架構(gòu)(必須)


信息架構(gòu)屬于用戶體驗的結(jié)構(gòu)層,就像產(chǎn)品的骨架一樣,而信息架構(gòu)設(shè)計就是對產(chǎn)品信息進行構(gòu)架、歸類的設(shè)計,信息架構(gòu)能夠防止我們對產(chǎn)品功能點遺漏,同時也可以通過產(chǎn)品大體的信息架構(gòu)觀察出產(chǎn)品設(shè)計是否合理。


一般來說(干貨來了),產(chǎn)品架構(gòu)分支可以分為度和層,而好產(chǎn)品的信息架構(gòu)在廣度和層度都是恰到好處,下面我舉兩個反例大家就懂了:


  1.產(chǎn)品架構(gòu)的廣度太廣(不懂的看下圖):信息架構(gòu)的廣度太廣意味著頁面的承載信息量特別的多,沒有側(cè)重點,這樣用戶點進頁面后會思考很久而不知所措,最經(jīng)典的就是某某寶和某同城,新用戶進入到首頁真的模棱兩可。


    2.產(chǎn)品架構(gòu)的層太深:信息架構(gòu)的層太深會導(dǎo)致另外一個問題就是頁面非常的多,要找到一些功能的話操作非常的困難,最常見的就是某些視頻的取消會員流程(包括當(dāng)年的ofo退費),你們是不是為了退費或者取消某APP會員百度過很多次?(反過來思考,如果某些功能你不想被用戶發(fā)現(xiàn),但是又必不可少的話應(yīng)如何設(shè)計,你懂得)


1.9、業(yè)務(wù)流程圖(可選)


繪制業(yè)務(wù)流程圖的目的就是:梳理并分析優(yōu)化業(yè)務(wù)流程。我知道很多同學(xué)做UI設(shè)計師的時候可以完全不管業(yè)務(wù),直接做設(shè)計,但是作為交互設(shè)計師了解產(chǎn)品業(yè)務(wù)是非常重要的,因為不了解業(yè)務(wù)你就無法完成交互設(shè)計,優(yōu)化業(yè)務(wù)場景。


舉個例子:在教育考試系統(tǒng)中一般流程是:教育局出通知→學(xué)生報名考試→老師審核→報名通過→老師編排學(xué)生考試名單→學(xué)生開始考試對號入座→教育局公布成績→學(xué)生查詢成績→考試結(jié)束,看這一些列的流程,因為關(guān)聯(lián)特別多,如果對業(yè)務(wù)不熟悉的話設(shè)計起來會非常的不便,如果前期因為業(yè)務(wù)流程不熟悉而設(shè)計出錯誤的交互稿的話,后面就會特別麻煩。


那么如何去繪制完整的業(yè)務(wù)流程:


  1. 如果你的產(chǎn)品經(jīng)理比較專業(yè)的話,可能會直接給你一個現(xiàn)成的業(yè)務(wù)流程圖,那樣就能省事很多。

  2. 要是沒有產(chǎn)品經(jīng)理的話,最直接的就是問用戶,這里介紹我最常用的方法就是“一聽二問三確認”。一聽:先聽客戶代表或者業(yè)務(wù)方的介紹。聽得過程中,不打斷對方,以最簡單的方式勾出主體脈絡(luò),即基本要素中的角色、活動、協(xié)作關(guān)系梳理出即可。二問:完成上一步后,就可以進行提問了。主要是沿著流程進行發(fā)問,重點放在分支、產(chǎn)物關(guān)系上??纯词欠翊嬖诜种У那闆r,各協(xié)作之間是否有交付物。一邊問,一邊修正。三確認:最后一步就是自己講一遍流程,和客戶代表或者業(yè)務(wù)專家進行最后的確認。


1.10、交互原型(必須)


幾乎可以說,上面所有的東西都是為了完成交互原型做鋪墊的,我相信對大家來講交互原型都非常熟悉,但是給大家分享幾個經(jīng)常犯錯的點。


【1】頁面盡量只采用黑白灰配色,避免干擾UI同學(xué)設(shè)計。這是大家經(jīng)常犯錯的一個點,畢竟很多同學(xué)以前是UI出身,做交互稿時也順便配配色,這樣會非常影響UI同學(xué)設(shè)計的(不在其位不謀其政,你做UI的時候也不希望有人在旁邊指指點點吧),所以我們做交互稿時只采用黑白灰就夠了,灰度大小就代表信息的重要程度,簡潔規(guī)范即可。


【2】頁面的跳轉(zhuǎn)用連線表示其實就很方便了,真正厲害的人不會到處炫技。有些同學(xué)在交互稿上各種跳轉(zhuǎn)、動態(tài)面板、中繼器等花里胡哨一大堆,這樣開發(fā)同學(xué)看起來特別的難受,所以很多時候用連線的方式表示往往是最簡單明了的。


【3】如果涉及到多端設(shè)計(IOS、Andriod、PC端)的話,除非產(chǎn)品非常龐大,不然就放在同一個設(shè)計文檔中,避免以后評審還要弄多個文件。


【4】創(chuàng)建一個適合自己的組件庫,在日常設(shè)計中,80%的控件是可以重復(fù)利用的,做一個合適的組件庫能節(jié)省大量時間(我整理了工作多年的B端以及移動端常用的組件,你們需要也可以分享給你們)。


1.11、垃圾桶(可選)


做交互文檔時垃圾桶就相當(dāng)于后悔藥,因為一些頁面如果刪掉保存后是不能還原了的,因此在改稿時如果一些暫時不需要的頁面可以丟到垃圾桶中,避免到最后用回以前的方案時重新再做浪費時間。


最后總結(jié)


好啦,文章分享的內(nèi)容比較多,但是并不是每一部分都非做不可,文檔也并不是絕對的規(guī)范,每一家公司交互設(shè)計師的職責(zé)可能都不太相同,所以大家可以根據(jù)自身需求因地制宜,曾經(jīng)有人說過,設(shè)計的本質(zhì)并不是把簡單的事情做復(fù)雜,而是把復(fù)雜的事情做簡單,所以我希望有一天你們能把交互設(shè)計文檔做到很簡單,而把產(chǎn)品做得非常好,然后跟我分享經(jīng)驗,這才是我寫文章的初心。


文章來源:站酷 作者:北沐而川

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


移動端交互控件規(guī)范總結(jié):彈窗(二)

周周

以下內(nèi)容主要以 iOS 官方設(shè)計指南和網(wǎng)絡(luò)上的相關(guān)文章為參考,但同時也包含個人理解與思考,并非絕對、唯一的標(biāo)準(zhǔn)。

交互設(shè)計|產(chǎn)品細節(jié)體驗筆記

周周

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展,每一個軟件背后都有一個優(yōu)秀的項目團隊和公司,騰訊或是阿里巴巴,他們旗下的APP我們也耳熟能詳,但是關(guān)于每個軟件的細節(jié)之處我們應(yīng)該大多數(shù)都沒有關(guān)注到,每個產(chǎn)品的人性化設(shè)計為我們增加了方面,想要了解和學(xué)習(xí)的崽崽們可以看看哦!

交互體驗思考|產(chǎn)品體驗

周周


本文大綱

一、好的收藏體驗這么做

二、互動信息隱私的保護

三、確定按鈕放左邊or右邊?

四、手機實體鍵分布的合理性

五、靜音鍵存在的必要性

六、經(jīng)典的旋鈕式交互



App 信息架構(gòu):如何讓用戶始終有掌控感

ui設(shè)計分享達人

信息架構(gòu)是產(chǎn)品的骨架。具體而言,就是一款產(chǎn)品有幾個一級頁面,以及支撐起整個產(chǎn)品的一級頁面、二級頁面各有幾種內(nèi)容樣式。所謂一級頁面,微信的“發(fā)現(xiàn)”頁就是一個一級頁面;在“發(fā)現(xiàn)”頁點“朋友圈”,進去的就是一個二級頁面。所謂內(nèi)容樣式,Banner 是一種內(nèi)容樣式,九宮格是一種內(nèi)容樣式,設(shè)置頁面那種列表也是一種內(nèi)容樣式。

 

這樣的信息架構(gòu),有什么價值?

 

 

01 信息架構(gòu)的價值:掌控感與健康迭代

 

對用戶而言,信息架構(gòu)的主要價值在于掌控感;對產(chǎn)品而言,信息架構(gòu)的主要價值在于健康迭代。

 

1. 掌控感

 

如果房間里很亂,到處都堆滿了東西,常穿的衣服也找不到了,我們就很容易變得煩躁不安。相反,如果混亂的房間被收拾得很整潔,我們的心情也會隨之變得愉悅起來。

 

這中間的原因是什么?

 

個人覺得,從原始社會到 21 世紀(jì),我們?nèi)祟愐恢鄙钤诟偁幹?,所以一直在追求一種對生活的掌控感。這種掌控感,會讓我們找到一種存在感和價值感,從而給身處競爭中的我們一種安全感。一個收拾得井然有序的房間,會讓我們覺得一切盡在掌握中;一個胡亂塞滿東西的房間,則會讓我們覺得這個房間處于失控狀態(tài),從而引發(fā)煩躁不安。

 

一款 App,如果主要的幾個一級頁面也都塞滿了各式各樣的內(nèi)容,那么用戶通常也會感到煩躁不安。這是因為用戶不能馬上理出頭緒,不能馬上獲得那種掌控感。另外,如果大的改版經(jīng)常讓用戶體會到這種煩躁不安,用戶就會對這款 App 感到不滿和失望,甚至失去信心和期待。

 

所以說,信息架構(gòu)的第一個價值,就是讓用戶始終有掌控感。

 

2. 健康迭代

 

產(chǎn)品的更新迭代,有時會出現(xiàn)“發(fā)?!焙汀拔⒄巍钡那闆r。這都屬于不健康的迭代。

 

所謂發(fā)福,就是變得臃腫了,比如一級頁面突然增加了很多內(nèi)容樣式。所謂微整形,就是和之前比有點亂套了,比如有的一級頁面突然消失了、有的一級頁面突然出現(xiàn)了、有些常用的功能突然找不到了,諸如此類。

 

一款產(chǎn)品,如果大的改版總是通過發(fā)福、甚至微整形的方式實現(xiàn),用戶就很難獲得掌控感。

 

反過來,一個優(yōu)秀的信息架構(gòu),是接近“凍齡”的。也就是說,不管產(chǎn)品怎么更新、怎么加新功能,都能簡單如初,都能讓用戶馬上獲得掌控感。典型的例子是微信:微信已經(jīng)加了很多功能,但整體給人的感覺依然是簡單的。

 

這樣的信息架構(gòu),很少發(fā)福,也幾乎不做微整形,所以能讓用戶永遠有掌控感,從而確保產(chǎn)品能夠健康迭代。

 

 

02 怎樣實現(xiàn)信息架構(gòu)的價值

 

什么樣的信息架構(gòu),能夠?qū)崿F(xiàn)“掌控感”和“健康迭代”?

 

其實參考答案剛才已經(jīng)出現(xiàn)了,那就是接近凍齡的信息架構(gòu)?;蛘吒_切地說,是一種“以不變應(yīng)萬變”的信息架構(gòu)。

 

這里的不變,是指信息架構(gòu)看起來永遠沒有明顯變化,永遠都很簡單。萬變,是指不斷新增的功能,不斷變化的功能。

 

如何做到以不變應(yīng)萬變?一級頁面和二級頁面都很關(guān)鍵,其中最核心的是一級頁面。這里也順便拋一個問題:一級頁面,用來干啥?

 

一級頁面主要用來干三件事,分別是:提供掌控感、提供常用功能、提供小入口。也就是說,一級頁面尤其要把掌控感給到用戶,要讓用戶快速找到常用功能,同時還要為不常用的功能提供一個小入口。需要說明的是,這個理念可能不太適合一些商店類產(chǎn)品,比如淘寶這樣的電商產(chǎn)品,所以僅供參考。

 

那如何完成這三件事?主要有以下四個要點。

 

1. 不要超過 4 個一級頁面

 

4 個和 5 個,它倆之間存在微妙的區(qū)別。比如我們給手機號或銀行卡號分段時,更喜歡每段最多分 4 個數(shù)字,而不是 5 個,直觀對比見下圖。


4 個還是 5 個

 

很多 App 的底部導(dǎo)航欄,也是只有 4 個Tab,即 4 個一級頁面。受生活經(jīng)驗等因素影響,當(dāng)我們看到 App 有 4 個一級頁面時,內(nèi)心或潛意識里可能會覺得:哦,4 個,還算簡單,基本能記??;而當(dāng)看到有 5 個一級頁面時,可能會感到一絲壓力:5 個啊,有點多了。

 

總的來說,我們更偏愛只有 4 個一級頁面的產(chǎn)品,因為 4 個仍在簡潔的范疇內(nèi),5 個就已經(jīng)開始走向復(fù)雜。在《微信背后的產(chǎn)品觀》這場分享中,張小龍也提到過:“微信保證只有 4 個底部 Tab。”

 

2. 不要超過 3 種內(nèi)容樣式

 

Keep 6.0 系列的“探索”頁面有 5 種內(nèi)容樣式,顯得很復(fù)雜。微信的 4 個一級頁面中,“發(fā)現(xiàn)”和“我”頁面只有 1 種內(nèi)容樣式,“微信”和“通訊錄”頁面只有 2 種內(nèi)容樣式(加上頂部的搜索框),顯得非常簡單,和 Keep 的對比如下圖所示。

 

Keep 6.0 系列與微信的內(nèi)容樣式數(shù)量

 

像微信這種內(nèi)容樣式數(shù)量上的極簡,可能很多產(chǎn)品難以做到。那么,我們不妨退而求其次,早期先從 1 種、2 種內(nèi)容樣式開始。后期加功能了,可以考慮第 3 種,謹慎考慮第 4 種,盡量不要增加第 5 種,因為一定會變得復(fù)雜。

 

大家可能會說,產(chǎn)品的功能很多,3 種內(nèi)容樣式不夠用。

 

針對這種情況,只要邏輯上不存在大的問題(比如把“支付”放到“通訊錄”頁面),就可以嘗試把不同內(nèi)容合并成一種樣式。微信在這方面就做得很好,大家可以參考它的設(shè)計。比如下圖的“通訊錄”頁面,聯(lián)系人上方那些內(nèi)容,和聯(lián)系人不是同一類內(nèi)容,但它們共用一種內(nèi)容樣式——一個簡單的圖文列表。

 

微信“通訊錄”頁面:不同內(nèi)容合并成一種樣式

 

3. 不為二成需求,去打擾八成用戶

 

產(chǎn)品設(shè)計里存在一個比較常見的問題,就是往一級頁面塞很多內(nèi)容或功能,其中有相當(dāng)一部分是用戶日常用不到的,這種設(shè)計容易讓人覺得臃腫。比如 Keep 6.0 系列的“運動”頁面,就用了較大空間來推薦付費計劃和運營活動,如下圖所示。

 

用較大空間來推薦付費計劃和運營活動的 Keep 頁面

 

相信有相當(dāng)一部分用戶是不需要這些內(nèi)容的,所以這其實也是一種打擾。這種打擾會影響到這些用戶對這個界面的掌控感。

 

這種現(xiàn)象有兩個可能的原因。一是企業(yè)擔(dān)心用戶不用這些功能,所以就在一級頁面用很多空間來展示它們,Keep 的例子應(yīng)該屬于此類。二是有部分用戶提建議,所以企業(yè)就加了這些功能。

 

關(guān)于第一個原因,個人觀點,有些功能本身就屬于二成需求,在一級頁面占用太多空間不僅改變不了這個現(xiàn)實,還會對用戶形成打擾。

 

關(guān)于第二個原因,個人看法,用戶的建議通常只代表個人立場,而企業(yè)至少要代表大部分用戶的立場。比如,網(wǎng)上就有人建議微信在朋友圈加一個屏蔽別人的功能,實際上微信有這個功能,只是一直隱藏,沒有放出來——因為用的人少,它屬于二成需求,放出來的話會對八成用戶形成打擾。

 

總的來說,理想情況是接受現(xiàn)實、尊重規(guī)律:是八成需求就提供八成空間,是二成需求就提供二成空間。具體參考如下圖所示。

 

是八成需求就提供八成空間,是二成需求就提供二成空間

 

4. 盡量不在標(biāo)題欄使用 Tab 或下拉框,增加維度

 

這其實是張小龍分享過的一個觀點,我個人很贊同,就直接引用一下。下面直接看兩個例子。Keep 6.0 系列的前三個一級頁面,標(biāo)題欄都使用了 Tab,就顯得內(nèi)容很多,有點復(fù)雜,如下圖所示(僅展示前兩個)。

 

使用了 Tab 的標(biāo)題欄

 

微信中擁有標(biāo)題欄的前三個一級頁面,其標(biāo)題欄都沒有使用 Tab 或下拉框,就顯得簡單、內(nèi)容少,如下圖所示(僅展示前兩個)。這也是微信保持簡單的一個重要原因。

 

沒有使用 Tab 的標(biāo)題欄

 

 

結(jié)語

 

一般情況下,產(chǎn)品都需要更新迭代:增加新功能,完善舊功能。

 

用戶則是一個矛盾體:一方面對新功能和新事物懷有好奇心;另一方面又希望每次打開常用的產(chǎn)品時,都有一種回到家一樣的熟悉感和一種家里井然有序的掌控感。

 

好的做法,就是類似微信那樣:盡管加了新功能,但是看起來沒有明顯變化。也就是說,以“不變”的信息架構(gòu),來應(yīng)對萬變的功能。


文章來源:站酷  作者:Snow Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


交互規(guī)范制定指南

周周

瀏覽了許多關(guān)于“設(shè)計規(guī)范”的文章,發(fā)現(xiàn)很多都是在針對通用流程和視覺方面在整理,關(guān)于交互層面的內(nèi)容比較少?;诖?,結(jié)合最近項目中沉淀的實際案例,以及參考了不少行業(yè)通用的設(shè)計規(guī)范,總結(jié)了一篇關(guān)于搭建交互規(guī)范的流程、框架、要點。希望能夠幫助大家更好的沉淀交互規(guī)范。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔