產(chǎn)品的力量:從理論到實(shí)踐(五)

0 評論 1013 瀏覽 2 收藏 11 分鐘

本文通過作者的親身經(jīng)歷,展示了從線框圖到高保真原型的設(shè)計(jì)過程,以及如何通過統(tǒng)一的產(chǎn)品設(shè)計(jì)風(fēng)格和明確的設(shè)計(jì)規(guī)范來解決團(tuán)隊(duì)合作中的問題。文章不僅提供了實(shí)用的設(shè)計(jì)技巧,還強(qiáng)調(diào)了溝通與協(xié)作的重要性,是每位產(chǎn)品設(shè)計(jì)者的寶貴教訓(xùn)。

在數(shù)字產(chǎn)品設(shè)計(jì)的廣闊天地中,每個項(xiàng)目都是一次全新的探險。當(dāng)時的我?guī)е鴿M腔熱情和對產(chǎn)品的無限憧憬,開始了我職業(yè)生涯的旅途。那時,我還沒有意識到,自己即將面對的不僅是創(chuàng)意的挑戰(zhàn),更是團(tuán)隊(duì)協(xié)作與規(guī)范遵循的考驗(yàn)。

一、線框圖/高保真

線框圖是一種低保真度的設(shè)計(jì)產(chǎn)物,主要用于展示網(wǎng)頁或應(yīng)用的基本結(jié)構(gòu)和布局,它通過基本的線條和形狀來表達(dá)頁面的結(jié)構(gòu),不涉及美學(xué)元素,如顏色、圖像等。線框圖的主要用途是在早期階段快速溝通設(shè)計(jì)思路和理念,便于團(tuán)隊(duì)成員之間的溝通和協(xié)作。

它幫助設(shè)計(jì)師、產(chǎn)品經(jīng)理、開發(fā)人員等更好地理解產(chǎn)品的功能、流程和布局,從而提高產(chǎn)品設(shè)計(jì)的效率和質(zhì)量。線框圖的繪制應(yīng)遵循一些基本原則,如減少顏色的使用、使用簡單的組件設(shè)計(jì)、保持一致性、使用真實(shí)內(nèi)容和注釋等。這是以前設(shè)計(jì)的線框圖案例

高保真原型則是一種與最終產(chǎn)品成果非常相近的原型設(shè)計(jì),它能夠模擬最終產(chǎn)品的視覺感受、交互功能以及頁面布局。高保真原型具有逼真的界面、準(zhǔn)確的交互細(xì)節(jié)和真實(shí)的內(nèi)容呈現(xiàn),它在產(chǎn)品設(shè)計(jì)開發(fā)中具有重要的作用,是開發(fā)設(shè)計(jì)與客戶之間重要的溝通橋梁。高保真原型的制作通常在設(shè)計(jì)后期使用,當(dāng)基本的布局和功能已經(jīng)確定后,用于測試和演示設(shè)計(jì)的實(shí)際體驗(yàn)。這是以前抄的高保真案例

二、統(tǒng)一戰(zhàn)線:產(chǎn)品設(shè)計(jì)風(fēng)格

在數(shù)字化時代,產(chǎn)品界面的設(shè)計(jì)風(fēng)格對于塑造品牌形象和優(yōu)化用戶體驗(yàn)至關(guān)重要。當(dāng)時我們遇到了一個問題:一個UI同事在辦公室找到我,說我們一款產(chǎn)品因?yàn)榇嬖诙辔划a(chǎn)品經(jīng)理和UI設(shè)計(jì)師的協(xié)同工作,一個簡單的返回按鈕,最終正式環(huán)境出現(xiàn)了多達(dá)67種版本。給一個案例圖參考,大家想象一下。

當(dāng)時UI工程師告訴我:不一致的設(shè)計(jì)風(fēng)格通常源于缺乏統(tǒng)一的設(shè)計(jì)指導(dǎo)和協(xié)調(diào)機(jī)制。在沒有明確的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)流程的情況下,每位產(chǎn)品經(jīng)理和UI設(shè)計(jì)師可能會根據(jù)自己的理解來設(shè)計(jì)界面元素,從而導(dǎo)致風(fēng)格迥異的設(shè)計(jì)方案。此外,缺乏有效的溝通和協(xié)作也可能導(dǎo)致設(shè)計(jì)上的分歧。在快速迭代的互聯(lián)網(wǎng)產(chǎn)品開發(fā)中,這種不一致性可能會被放大,這種設(shè)計(jì)上的分裂不僅影響了產(chǎn)品的專業(yè)性,也增加了用戶的學(xué)習(xí)成本,最終影響到產(chǎn)品的市場競爭力和用戶體驗(yàn)。

面對這一問題,我和UI同事向公司領(lǐng)導(dǎo)匯報(bào),并獲得了推進(jìn)統(tǒng)一產(chǎn)品設(shè)計(jì)風(fēng)格的授權(quán)。以下是我們計(jì)劃的邏輯和步驟:

  • 問題的識別:我們首先確認(rèn)了產(chǎn)品界面還存在那些不一致的問題,并收集了相關(guān)證據(jù),如不同版本的返回按鈕截圖,彈窗截圖等內(nèi)容,以直觀展示問題的嚴(yán)重性。
  • 爭取領(lǐng)導(dǎo)的支持:我當(dāng)時和UI同事向公司領(lǐng)導(dǎo)匯報(bào)了這一問題,并闡述了統(tǒng)一設(shè)計(jì)風(fēng)格的重要性和緊迫性。領(lǐng)導(dǎo)對此表示認(rèn)同,他當(dāng)時也發(fā)現(xiàn)了這個問題,只是公司處于高速運(yùn)轉(zhuǎn)過程中,沒有時間解決這個問題,如果我們有信心完成這個事,他可以號召其他部門一起支持我們的工作。
  • 制定計(jì)劃:獲得了領(lǐng)導(dǎo)的支持后,我們制定了詳細(xì)的計(jì)劃,包括調(diào)研現(xiàn)有設(shè)計(jì)問題、制定統(tǒng)一的設(shè)計(jì)規(guī)范、以及推廣和監(jiān)督這些規(guī)范的實(shí)施。
  • 跨部門協(xié)作:后面我們在公司內(nèi)容和產(chǎn)品部、研發(fā)部、設(shè)計(jì)部召開了幾次產(chǎn)品設(shè)計(jì)規(guī)范交流會,確保每個人都理解并遵循新的設(shè)計(jì)規(guī)范。

最后的產(chǎn)品設(shè)計(jì)規(guī)范發(fā)布工作我沒參與,因?yàn)楫a(chǎn)品設(shè)計(jì)規(guī)范這個事的主體,在當(dāng)時的公司還是設(shè)計(jì)部門去完成,后續(xù)我只是根據(jù)用戶使用情況,持續(xù)向設(shè)計(jì)部門反饋優(yōu)化設(shè)計(jì)規(guī)范,確保產(chǎn)品設(shè)計(jì)始終符合用戶需求和市場趨勢。在這個過程中我也獲取了一些經(jīng)驗(yàn),在產(chǎn)品研發(fā)之前制定產(chǎn)品設(shè)計(jì)規(guī)范是至關(guān)重要的。

三、產(chǎn)品設(shè)計(jì)規(guī)范

后面我回想起來在我職業(yè)生涯的早期,我當(dāng)時也經(jīng)歷了一個類似的案例。那時,我剛完成了一個高保真的產(chǎn)品原型設(shè)計(jì),卻在與UI設(shè)計(jì)師的討論中發(fā)生了爭執(zhí)。我堅(jiān)持認(rèn)為自己的設(shè)計(jì)是創(chuàng)新且實(shí)用的,但最終,事實(shí)證明我忽略了一些關(guān)鍵因素。

后面意識到我的錯誤源于沒有從0—1參與項(xiàng)目。在我加入團(tuán)隊(duì)之前,UI負(fù)責(zé)人和老板已經(jīng)在項(xiàng)目初期制定了一套詳盡的產(chǎn)品設(shè)計(jì)規(guī)范。而我設(shè)計(jì)的高保真原型,雖然在滿足用戶需求和功能實(shí)現(xiàn)上沒有問題,卻沒有與這些既定的設(shè)計(jì)風(fēng)格保持一致。

那次教訓(xùn)也教會了我一些東西。

  • 保持產(chǎn)品一致性的重要性遠(yuǎn)遠(yuǎn)超出了視覺美學(xué)的范疇。它關(guān)乎減少用戶的認(rèn)知負(fù)擔(dān),培養(yǎng)用戶習(xí)慣,以及展現(xiàn)產(chǎn)品設(shè)計(jì)的嚴(yán)謹(jǐn)性。一致性貫穿于交互邏輯、設(shè)計(jì)元素、語言表述、信息架構(gòu),乃至視覺呈現(xiàn)的每一個細(xì)節(jié)。是為了讓用戶能夠更快捷、更直觀地與產(chǎn)品互動。
  • 同時,這也讓我認(rèn)識到了簡潔性的價值——”少即是多”。精簡界面元素,減少視覺干擾,精煉文字表述,簡化操作步驟,這些都是為了創(chuàng)造一個更清晰、更易用的產(chǎn)品體驗(yàn)。

因此在產(chǎn)品開發(fā)的早期階段,團(tuán)隊(duì)成員需要共同遵循一套標(biāo)準(zhǔn)來確保產(chǎn)品設(shè)計(jì)的連貫性和一致性。隨著產(chǎn)品復(fù)雜性的增加,如果沒有統(tǒng)一的規(guī)范,團(tuán)隊(duì)成員可能會采用不同的方法和標(biāo)準(zhǔn)來實(shí)現(xiàn)設(shè)計(jì),這可能導(dǎo)致最終產(chǎn)品出現(xiàn)功能不一致、用戶體驗(yàn)碎片化等問題。因此,制定產(chǎn)品設(shè)計(jì)規(guī)范成為確保產(chǎn)品質(zhì)量和市場競爭力的關(guān)鍵步驟。

產(chǎn)品設(shè)計(jì)規(guī)范通常包括以下幾個方面:

  • 視覺設(shè)計(jì)規(guī)范:定義產(chǎn)品的顏色方案、字體選擇、圖標(biāo)風(fēng)格等視覺元素,確保產(chǎn)品具有統(tǒng)一的視覺識別度。
  • 交互設(shè)計(jì)規(guī)范:明確用戶與產(chǎn)品交互的方式,包括按鈕點(diǎn)擊、滑動操作、表單填寫等,以提供流暢和直觀的用戶體驗(yàn)。
  • 布局和結(jié)構(gòu)規(guī)范:規(guī)定頁面布局、組件排列和信息層次,以實(shí)現(xiàn)清晰和邏輯性強(qiáng)的產(chǎn)品結(jié)構(gòu)。
  • 品牌語言和語調(diào):確保產(chǎn)品的所有文本和溝通都符合品牌個性和市場定位。

網(wǎng)絡(luò)上有很全的產(chǎn)品設(shè)計(jì)規(guī)范參考,我也給大家一個最簡單的設(shè)計(jì)規(guī)范作為展示

隨著時間的流逝,那些迷茫和爭執(zhí)逐漸遠(yuǎn)去,取而代之的是我對產(chǎn)品設(shè)計(jì)規(guī)范深刻理解和實(shí)踐的堅(jiān)持。現(xiàn)在我學(xué)會了在創(chuàng)意與規(guī)范之間找到平衡,明白了在團(tuán)隊(duì)中溝通與協(xié)作的重要性。如今,每當(dāng)我回望這些項(xiàng)目,不僅看到了個人成長的腳步,更看到了整個團(tuán)隊(duì)在追求卓越設(shè)計(jì)的道路上,還有互聯(lián)網(wǎng)人如何一步步建立起統(tǒng)一戰(zhàn)線,共同創(chuàng)造出既美觀又實(shí)用的產(chǎn)品。

本文由 @得閑 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!