怎么從零到一設(shè)計(jì)產(chǎn)品?
發(fā)布時(shí)間:2022-01-25 11:24 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 4227

手把手教你 「如何 7 步從 0 ~ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過(guò),設(shè)計(jì)風(fēng)格明確,用戶粘性高的軟件!」

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

據(jù)不完全了解,身邊大部分的 UI 同事都從 0 到 1 參與過(guò)一款或多款軟件的設(shè)計(jì),設(shè)計(jì)過(guò)程中不知道你是否有過(guò)這樣的疑惑:

  • 設(shè)計(jì)稿都做了 100 版了,但產(chǎn)品經(jīng)理還是不滿意,是我設(shè)計(jì)不行嗎?
  • 產(chǎn)品目標(biāo)、用戶目標(biāo)都標(biāo)得清清楚楚了,但總是找不好設(shè)計(jì)關(guān)鍵詞,來(lái)來(lái)去去只會(huì)用「年輕化、輕量化」?
  • 產(chǎn)品目標(biāo)明確了,設(shè)計(jì)關(guān)鍵詞也有了,但為什么做出來(lái)的稿子不是太概念,就是跟競(jìng)品太像呢?

在解決這些困惑之后,我總結(jié)了一套自用的,適合從 0 ~ 1 進(jìn)行軟件設(shè)計(jì)或項(xiàng)目改版的方法 ,并在其他項(xiàng)目上進(jìn)行了二次驗(yàn)證。

以實(shí)踐項(xiàng)目 —— 有道少兒詞典為例,上線一年期間,用戶次日留存峰值 36% 以上,也非常幸運(yùn),被 App Store Today 推薦 4 次,App Store 編輯推薦 8 次,被 App Store 納入 2019 本土優(yōu)秀 App 盤點(diǎn)中,同時(shí)被預(yù)裝到蘋(píng)果線下直營(yíng)店,作為樣機(jī)體驗(yàn)軟件之一。所以,這個(gè)方法親測(cè)有效!

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

這篇文章,通過(guò)分析如何解決類似「產(chǎn)品經(jīng)理不滿意、設(shè)計(jì)關(guān)鍵詞不對(duì)、設(shè)計(jì)風(fēng)格無(wú)區(qū)別」這些問(wèn)題,整理出 7 個(gè)幫你從 0 ~ 1 設(shè)計(jì)一款軟件的步驟。

文章較長(zhǎng),大概需要花費(fèi) 15 分鐘,建議大家先看大綱,優(yōu)先閱讀符合自身情況的部分。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!


產(chǎn)品經(jīng)理為什么不滿意?


從 0 ~ 1 進(jìn)行軟件設(shè)計(jì),免不了要多出幾個(gè)設(shè)計(jì)稿,但做了 100 稿,產(chǎn)品經(jīng)理對(duì)頁(yè)面設(shè)計(jì)還是不滿意的話,很有可能有 2 點(diǎn)原因:

原因 1:目標(biāo)不明確

一拿到需求就開(kāi)始做,很容易忽略需求背后的目標(biāo),從 0 到 1 做一款新軟件更是要了解業(yè)務(wù)目標(biāo)和用戶目標(biāo)。

在提出解決辦法前,我們需要先捋清楚以下 2 個(gè)問(wèn)題:

為什么要了解目標(biāo)?

公司開(kāi)發(fā)軟件是為了達(dá)到某些目標(biāo)或是實(shí)現(xiàn)某個(gè)目的的,只有了解目標(biāo)才能更好地為公司創(chuàng)造價(jià)值。

什么是業(yè)務(wù)需求、業(yè)務(wù)目標(biāo)和用戶目標(biāo)?

平時(shí)產(chǎn)品經(jīng)理跟我們說(shuō),要設(shè)計(jì)一個(gè)頁(yè)面,設(shè)計(jì) 一個(gè)流程,這就是一個(gè)業(yè)務(wù)需求,而這個(gè)需求的背后,能夠解釋清楚這個(gè)需求是為了什么,要做到什么程度,這就是業(yè)務(wù)目標(biāo)(通常包括用什么手段,給用戶帶來(lái)什么價(jià)值,達(dá)到什么目的)。而軟件的目標(biāo)用戶,他們?cè)谝粋(gè)具體的時(shí)間、地點(diǎn)、環(huán)境下做了什么操作,想達(dá)到什么程度,滿足自己的什么要求,這可以理解為用戶目標(biāo)。

解決辦法 :多使用 「為什么+動(dòng)詞」 的問(wèn)法,向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶目標(biāo)。

從 0 ~1 做軟件需要了解的業(yè)務(wù)目標(biāo)和用戶目標(biāo),我們都可以從產(chǎn)品經(jīng)理那里得到。

少兒詞典的產(chǎn)品經(jīng)理很早就給出了業(yè)務(wù)目標(biāo)和用戶目標(biāo)。但,當(dāng)我們需要更多細(xì)節(jié)的時(shí)候,可以使用「為什么+動(dòng)詞」這樣的問(wèn)法。例如:

  • 「我們要做一個(gè)少兒查詞軟件,定位是一款擁有權(quán)威釋義背書(shū),在視、聽(tīng)、觸方面打造良好體驗(yàn),緊扣教材和教學(xué)大綱的適合少兒和家長(zhǎng)使用的伴學(xué)詞典。你來(lái)做吧!」「為什么做這個(gè)?」
  • 「現(xiàn)在兒童教育KOL越來(lái)越多,很多家長(zhǎng)都很關(guān)心k12教育問(wèn)題。市面上的很多產(chǎn)品都不太適合孩子使用」
  • 「為什么這樣的定位可以滿足用戶需求呢?」「為什么是適合少兒和家長(zhǎng)使用呢?」
  • 「為什么……」

在少兒詞典項(xiàng)目中

  • 我們的業(yè)務(wù)目標(biāo)是:一款擁有權(quán)威釋義背書(shū),在視、聽(tīng)、觸方面打造良好體驗(yàn),緊扣教材和教學(xué)大綱的適合少兒和家長(zhǎng)使用的伴學(xué)詞典。
  • 目標(biāo)用戶群體是:小學(xué) 1~6 年級(jí)的孩子和他們的家長(zhǎng)。
  • 用戶目標(biāo)是:當(dāng)小學(xué)低年級(jí)的孩子在家學(xué)習(xí)的時(shí)候,他們的家長(zhǎng)需要一款軟件,能緩解家長(zhǎng)伴學(xué)的壓力。高年級(jí)的孩子需要一款軟件,為他們提供準(zhǔn)確教學(xué)。
原因 2 :沒(méi)有對(duì)產(chǎn)品關(guān)鍵詞形成共識(shí)

我們既了解產(chǎn)品的業(yè)務(wù)目標(biāo),也知道用戶目標(biāo)的情況下,方案還是被 pass 的話,可能是因?yàn)槟憬o出的方案和產(chǎn)品經(jīng)理想要的不是同一個(gè)東西。為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢?怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么?我們可以用產(chǎn)品關(guān)鍵詞來(lái)回答這個(gè)問(wèn)題。

為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢?

我們常見(jiàn)的業(yè)務(wù)目標(biāo)的內(nèi)容是很長(zhǎng)的,用戶目標(biāo)的內(nèi)容也是很長(zhǎng)的,在這種所有已知內(nèi)容都很長(zhǎng)的情況下,如果沒(méi)有準(zhǔn)確理解內(nèi)容,沒(méi)有對(duì)重點(diǎn)內(nèi)容達(dá)成一致,就很容易產(chǎn)生偏差。例如我要向你描述一位美女,她的頭發(fā)很柔順,臉蛋很漂亮,身材比例很好,衣品很好等…… 90% 的可能,我們腦海中想的不是同一個(gè)美女。但是,如果我跟你說(shuō),這是一個(gè)跟芭比娃娃很像的美女的時(shí)候,我們腦海中的形象會(huì)接近很多。

怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么?

就像設(shè)計(jì)師在進(jìn)行頁(yè)面設(shè)計(jì)時(shí),需要設(shè)計(jì)關(guān)鍵詞一樣,產(chǎn)品經(jīng)理在描述自己的業(yè)務(wù)目標(biāo)的時(shí)候,也需要能概括業(yè)務(wù)目標(biāo)重點(diǎn),突出賣點(diǎn)的產(chǎn)品關(guān)鍵詞,這個(gè)產(chǎn)品關(guān)鍵詞能幫助設(shè)計(jì)師弄清楚產(chǎn)品經(jīng)理想要的東西。

部分產(chǎn)品經(jīng)理為了方便大家達(dá)成共識(shí),會(huì)早早亮出產(chǎn)品關(guān)鍵詞,如果當(dāng)你們的產(chǎn)品經(jīng)理沒(méi)有辦法提供產(chǎn)品關(guān)鍵詞的時(shí)候,我們要學(xué)會(huì)在討論中找到。

解決辦法 :從業(yè)務(wù)目標(biāo)開(kāi)始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息,直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞

從業(yè)務(wù)目標(biāo)和用戶目標(biāo)開(kāi)始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息,在討論的過(guò)程中,我們可以留意產(chǎn)品多次提到的幾個(gè)形容詞,寫(xiě)下來(lái),然后跟產(chǎn)品反復(fù)核對(duì)確認(rèn),最后雙方確認(rèn)且保留下來(lái)的這 3~4 個(gè)形容詞,就是這個(gè)項(xiàng)目的產(chǎn)品關(guān)鍵詞。

少兒詞典的產(chǎn)品關(guān)鍵詞是:權(quán)威內(nèi)容,寓教于樂(lè),適合孩子使用。這些關(guān)鍵詞被我貼在屏幕的顯眼處,就怕自己哪天忘記了。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!


設(shè)計(jì)關(guān)鍵詞為什么總是找不對(duì)


尋找設(shè)計(jì)關(guān)鍵詞,是設(shè)計(jì)師非常熟悉的步驟,但常常也在這里翻車,甚至還會(huì)出現(xiàn),不管做什么軟件,反反復(fù)復(fù)就那幾個(gè)關(guān)鍵詞的情況,我們可以把原因歸結(jié)為:

原因:對(duì)用戶不夠了解

為什么不了解用戶會(huì)導(dǎo)致關(guān)鍵詞找不對(duì)?

我們的用戶在選擇軟件、使用軟件的時(shí)候,最先了解到的是軟件的設(shè)計(jì)、體驗(yàn)和功能。用戶下載軟件時(shí),他們已有的認(rèn)知會(huì)影響他們對(duì)軟件的幻想。就像給小男孩的衣服是天藍(lán)色,小女孩的衣服是嫩粉色一樣,如果用戶想要一件天藍(lán)色的衣服,而我們給他展示的是深藍(lán)色或是嫩粉色的衣服,這都會(huì)讓用戶產(chǎn)生疑惑甚至離開(kāi)。因此,如果對(duì)用戶了解不準(zhǔn)確,會(huì)導(dǎo)致我們輸出錯(cuò)誤的設(shè)計(jì)關(guān)鍵詞。

而了解目標(biāo)用戶是又一件復(fù)雜的事情。

首先,我們的目標(biāo)用戶可能是一類人,如有道詞典,下載軟件用戶和使用用戶大概率是同一個(gè)人。目標(biāo)用戶也有可能是兩類人或是更多,如少兒詞典,下載用戶是家長(zhǎng),使用用戶是家長(zhǎng)和孩子,企業(yè)協(xié)作軟件也類似。

從接觸軟件,下載軟件,使用軟件,到判斷是否繼續(xù)使用軟件,不同的階段的目標(biāo)用戶是不一樣的,目標(biāo)用戶在不同階段的需求也是不一樣的。

其次,開(kāi)發(fā)軟件的周期是很長(zhǎng)的,在開(kāi)發(fā)軟件的過(guò)程中,我們的用戶在不斷地接收新的知識(shí)和觀點(diǎn),用戶的喜好,認(rèn)知可能會(huì)發(fā)生很大的變化。

因此,為了更好地了解用戶,我們需要找到用戶跟軟件之間的交互關(guān)系,以及影響用戶喜好的因素。一共有 2 個(gè)步驟:

步驟 1. 分析不同用戶跟軟件之間的接觸點(diǎn),從未來(lái)趨勢(shì)和用戶當(dāng)前認(rèn)知角度收集用戶資料

在這一步驟中,我們加入了 2 個(gè)概念,接觸點(diǎn)和未來(lái)趨勢(shì)。

什么是接觸點(diǎn)?

接觸點(diǎn)指的是用戶與產(chǎn)品發(fā)生交互的關(guān)鍵點(diǎn),用來(lái)捋清楚我們剛剛提到 「用戶跟軟件之間的交互關(guān)系」。以少兒詞典為例,家長(zhǎng)和軟件之間的接觸點(diǎn),可以羅列為:家長(zhǎng)聽(tīng)說(shuō)少兒詞典 – 到應(yīng)用中心下載軟件 – 打開(kāi)軟件 – 使用軟件……可見(jiàn)要想打造一款用戶好評(píng)度高的好產(chǎn)品,僅僅優(yōu)化軟件的體驗(yàn)是不夠的。

為什么要從未來(lái)趨勢(shì)和用戶當(dāng)前認(rèn)知角度去收集用戶資料?

剛剛有提到新軟件的周期是較長(zhǎng)的,前期定好的風(fēng)格、關(guān)鍵詞等,到了開(kāi)發(fā)上線后卻不適用了,既浪費(fèi)人力,也浪費(fèi)資源,因此要考慮未來(lái)趨勢(shì)對(duì)用戶的影響。同時(shí),用戶在選擇軟件的時(shí)候,已有的喜好/預(yù)期/經(jīng)驗(yàn)等用戶認(rèn)知會(huì)影響用戶對(duì)軟件的判斷。就像大家想到夏天的冷飲時(shí),腦海中會(huì)浮現(xiàn)冰塊、西瓜等元素,因此雪碧、西瓜等符合用戶對(duì)夏天認(rèn)知的食品在天氣炎熱時(shí)會(huì)熱銷,但是受到大部分買家越來(lái)越注重卡路里這一未來(lái)趨勢(shì)的影響,低卡的西瓜冷飲也可能在未來(lái)一段時(shí)間大賣。

接觸點(diǎn)和未來(lái)趨勢(shì)、用戶認(rèn)知之間有什么關(guān)系?

了解用戶接觸點(diǎn)之后,我們就可以猜測(cè)用戶在這一接觸點(diǎn)的需求和心理,加入未來(lái)趨勢(shì)和用戶認(rèn)知,能讓我們做出來(lái)的東西更符合用戶預(yù)期。

尋找接觸點(diǎn)。我們了解到,少兒詞典的目標(biāo)用戶群體是 1~6 年級(jí)的學(xué)生和他們的家長(zhǎng),即 6~12 歲孩子,和 30~44 歲家長(zhǎng)。然后,我們粗略地將用戶的接觸點(diǎn)劃分為,篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件,孩子、家長(zhǎng)跟接觸點(diǎn)之間的關(guān)系就可以展示為:

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

孩子是軟件查詢、練習(xí)、核心功能體驗(yàn)者,家長(zhǎng)是內(nèi)容審核者、軟件篩選者、伴學(xué)時(shí)軟件使用者。

找到接觸點(diǎn)之后,我們還需要把影響用戶認(rèn)知的內(nèi)容具象化。

例如,我們想了解夏天做什么口味的飲品更好,我們可以從夏日飲品口味銷量排行榜,夏日新品類型,夏日廣告等角度來(lái)獲得更清晰的用戶認(rèn)知。應(yīng)用到少兒詞典中就是,家長(zhǎng)在篩選軟件時(shí),老師的要求,未來(lái)孩子考試的內(nèi)容、日常輔導(dǎo)內(nèi)容、大 V 推薦的內(nèi)容等會(huì)影響家長(zhǎng)對(duì)下載軟件的判斷。每個(gè)接觸點(diǎn)都可以使用這樣的方式,來(lái)聯(lián)想更多影響用戶認(rèn)知的內(nèi)容。然后我們將得到類似下面的表格:

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

根據(jù)表格,我收集了 近 10 頁(yè)的用戶信息

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

步驟 2. 提取收集到的信息,并放入四象限中,總結(jié)出2~4個(gè)視覺(jué)關(guān)鍵詞、體驗(yàn)關(guān)鍵詞

雜亂無(wú)序的信息只有經(jīng)過(guò)歸納之后才能被大家使用。

怎么歸納總結(jié)雜亂的信息呢?

UI 設(shè)計(jì)師都清楚,在進(jìn)行界面設(shè)計(jì)時(shí),大標(biāo)題、縮進(jìn)、分層等排版方式能讓我們的頁(yè)面看起來(lái)更清晰易讀。處理雜亂的信息也同理,最先要做的是找到信息的重點(diǎn),然后把信息歸類,最后再用一句對(duì)內(nèi)容進(jìn)行總結(jié),方便大家理解。應(yīng)用到我們提取關(guān)鍵詞的環(huán)節(jié)中就是,挑選重要信息、放入四象限中、總結(jié)出能歸納這些信息的關(guān)鍵詞。

挑選重要信息。以家長(zhǎng)篩選軟件為例,當(dāng)我們將熱門大 V 推薦的教學(xué)方法、內(nèi)容,進(jìn)行整理的時(shí)候,會(huì)發(fā)現(xiàn)美學(xué)、樂(lè)感、編程、外文圖書(shū)、兒童心理教育、英文教學(xué)方法(自然拼讀)等內(nèi)容出現(xiàn)的頻率很高,在一堆內(nèi)容中挑選跟少兒詞典相關(guān)的內(nèi)容,如美學(xué)、外文圖書(shū)、兒童心理教育等。

放入四象限中。在這一方法中,我們將四象限劃分為設(shè)計(jì)和用戶認(rèn)知 2 個(gè)方向,其中設(shè)計(jì)劃分為視覺(jué)風(fēng)格和體驗(yàn)風(fēng)格,用戶認(rèn)知?jiǎng)澐譃楫?dāng)前認(rèn)知和未來(lái)趨勢(shì) 。以剛剛挑選的兒童美學(xué)教育為例,這是一個(gè)屬于未來(lái)家長(zhǎng)會(huì)越來(lái)越關(guān)注的少兒視覺(jué)發(fā)展方向,所以我們放在視覺(jué)風(fēng)格、未來(lái)趨勢(shì)這一象限中。其他內(nèi)容也類似,不斷地提取出現(xiàn)頻率高、用戶熱點(diǎn)高的內(nèi)容,并根據(jù)內(nèi)容類型放入四象限中

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

總結(jié)出能歸納這些信息的關(guān)鍵詞。以視覺(jué)和未來(lái)趨勢(shì)象限為例,我們收集到大 V 的美學(xué)教育,未來(lái)的課本發(fā)展趨勢(shì),小學(xué)建筑風(fēng)格發(fā)展趨勢(shì),他們都有一個(gè)特點(diǎn),顏色柔和無(wú)攻擊,色彩豐富,因此,我們總結(jié)出一個(gè)視覺(jué)關(guān)鍵詞是柔和多彩。

其他內(nèi)容也采用相同的方法進(jìn)行總結(jié),少兒詞典的視覺(jué)關(guān)鍵詞是柔和多彩,輕質(zhì)感,親和陪伴,體驗(yàn)關(guān)鍵詞是,探索多變,感官刺激和重復(fù)熟悉。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!


為什么做出來(lái)的設(shè)計(jì)稿不是太概念就是沒(méi)風(fēng)格?


視覺(jué)關(guān)鍵詞出來(lái)了,產(chǎn)品的業(yè)務(wù)目標(biāo)也出來(lái)了,從關(guān)鍵詞到頁(yè)面樣式的邏輯也很嚴(yán)謹(jǐn),但出來(lái)的風(fēng)格卻會(huì)覺(jué)得跟關(guān)鍵詞不太搭,或是跟競(jìng)品差異不大,在多款 App 實(shí)踐后,我們發(fā)現(xiàn)可能是這樣的原因:

沒(méi)有把關(guān)鍵詞的作用發(fā)揮出來(lái)

引用一句說(shuō)爛了的名言 「一千個(gè)人眼中就有一千個(gè)哈姆雷特」。大家在對(duì)關(guān)鍵詞的理解是有差異的,以「年輕」為例子,一款針對(duì)活力的年輕人的衣服和一款針對(duì)潮流的年輕人的衣服,設(shè)計(jì)風(fēng)格上可能是隔好幾條街的。因此,僅僅得到幾個(gè)視覺(jué)關(guān)鍵詞和體驗(yàn)關(guān)鍵詞還不足以讓我們找準(zhǔn)方向,我們還需要將關(guān)鍵詞組合和具體化。一共有 2 個(gè)步驟:

步驟 1. 分別組合產(chǎn)品關(guān)鍵詞和視覺(jué)關(guān)鍵詞,產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞,找到同時(shí)滿足 2 組關(guān)鍵詞的規(guī)則

為什么將關(guān)鍵詞結(jié)合能讓關(guān)鍵詞的作用發(fā)揮出來(lái)呢?

我們的目的是要做一款滿足產(chǎn)品需求,符合用戶認(rèn)知的軟件。

從問(wèn)題 1 和問(wèn)題 2 中,我們得到了符合產(chǎn)品需求的產(chǎn)品關(guān)鍵詞,和符合用戶認(rèn)知的視覺(jué)關(guān)鍵詞和體驗(yàn)關(guān)鍵詞,想要同時(shí)滿足產(chǎn)品需求和用戶認(rèn)知,我們需要找到他們的重合點(diǎn)。如下圖所示,將產(chǎn)品關(guān)鍵詞和視覺(jué)關(guān)鍵詞、體驗(yàn)關(guān)鍵詞分別結(jié)合,這樣的出來(lái)的規(guī)則就能最大限度地符合我們的要求,既滿足產(chǎn)品需求,又符合用戶認(rèn)知。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

具體怎么做呢?下面將分別從視覺(jué)和體驗(yàn)角度舉例子。

視覺(jué)角度,以權(quán)威內(nèi)容和柔和多彩結(jié)合為例:

「權(quán)威內(nèi)容」 要求我們輸出的內(nèi)容是符合教材,符合老師標(biāo)準(zhǔn)的,內(nèi)容是準(zhǔn)確無(wú)誤的、來(lái)源是可靠的;「柔和多彩」 要求我們?cè)谶M(jìn)行頁(yè)面設(shè)計(jì)的時(shí)候減少大面積顏色的使用,色彩柔和,且顏色多樣。

將兩者結(jié)合,我們得到的規(guī)則是:

  • 市面上的語(yǔ)文和英語(yǔ)教材以橙色封面為主,因此軟件把橙色作為主色,僅在重點(diǎn)區(qū)域使用橙色;
  • 展示內(nèi)容要準(zhǔn)確,在牛津內(nèi)容布局上參考《牛津小學(xué)生》字典,中文字體采用跟教材相似的文鼎新中楷,英文字體采用跟衡水體相似的 Averta Std;
  • 參考大 V 推薦的繪本、動(dòng)畫(huà)片常用的顏色,將顏色定為橙色、黃色、藍(lán)色和綠色,降低顏色飽和度;
  • 參考繪本的圖案,選擇圓形作為主要的形狀,加入柔和色彩,使用深色和淺色疊加的圓形;
  • ……

根據(jù)這些內(nèi)容,我們將得到下面的 4 個(gè)顏色和圓形疊加的形式。(ps:通過(guò)這樣的形式確定的是規(guī)則,如:以橙色為主結(jié)合另外 3 個(gè)顏色,圓形,使用深淺色搭配。具體顏色和疊加形式需要在具體頁(yè)面中進(jìn)行調(diào)整)

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

體驗(yàn)角度,以權(quán)威內(nèi)容和探索多變?yōu)槔?/p>

體驗(yàn)上,「權(quán)威內(nèi)容」要求我們的操作形式是跟老師的教學(xué)相似,學(xué)習(xí)方法需要參考成熟且有效的方法;「探索多變」要求我們?cè)诮换バ问缴峡梢圆捎枚喾N形式,給孩子探索未知的機(jī)會(huì),交互形式要符合兒童操作習(xí)慣,如涂抹、翻轉(zhuǎn)、拖拉等

將兩者結(jié)合,我們得到的規(guī)則是:

  • 中文字體跟寫(xiě),手寫(xiě)涂抹交互形式,添加錯(cuò)誤抖動(dòng)反饋;
  • 單詞記憶,參考如師通學(xué)習(xí)方法,采用卡片翻轉(zhuǎn)形式,將單詞和圖片內(nèi)容分離;
  • 英文跟讀,采用表情代替評(píng)分機(jī)制;
  • ……

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

其他幾個(gè)關(guān)鍵詞的結(jié)合也是使用這樣的形式,這里就不一一展開(kāi)。下圖是少兒詞典的視覺(jué)關(guān)鍵詞和產(chǎn)品關(guān)鍵詞結(jié)合后的樣式。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

步驟 2. 選擇復(fù)雜的核心頁(yè)面,把具象化的體驗(yàn)規(guī)則、視覺(jué)規(guī)則融進(jìn)頁(yè)面中,確定設(shè)計(jì)風(fēng)格

規(guī)則梳理出來(lái)后,我們就要挑選一些重要頁(yè)面進(jìn)行風(fēng)格嘗試,以結(jié)構(gòu)復(fù)雜的中文查詞單字結(jié)果頁(yè)為例:

分析小學(xué)一年級(jí)到六年級(jí)的考試內(nèi)容,我們了解到部首、筆順筆畫(huà)、跟寫(xiě)、發(fā)音等漢字的基礎(chǔ)信息是低年級(jí)用戶(小學(xué)三年級(jí)及以下)會(huì)使用到,他們要求信息完整且準(zhǔn)確;像詞組、造句這些信息則是針對(duì)高年級(jí)學(xué)生,要求快速準(zhǔn)確定位到具體的內(nèi)容板塊。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

分析完內(nèi)容結(jié)構(gòu)后,我們就需要根據(jù)內(nèi)容布局,加入表格中總結(jié)的體驗(yàn)規(guī)則:

  • 重復(fù)熟悉,針對(duì)低年級(jí)用戶的使用習(xí)慣,我們將頂部信息劃分為展示區(qū)域和操作區(qū)域,方便用戶操作,降低用戶學(xué)習(xí)成本;
  • 重復(fù)熟悉,中文查詞結(jié)果頁(yè)中,使用田字格上下布局的形式,使用課本同款楷體字,滿足學(xué)生的識(shí)別文字書(shū)寫(xiě)規(guī)范的需求,也符合用戶認(rèn)知;
  • 探索多變,在 tab 切換的時(shí)候,我們將 tab 選中的顏色變成軟件的 4 個(gè)主色循環(huán)切換,激發(fā)孩子對(duì)軟件的探索欲望;
  • 探索多變,按鈕形式上采用出血的圖案形式,打破常規(guī);
  • ……

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

最后,梳理好頁(yè)面的體驗(yàn)形式之后,我們開(kāi)始給頁(yè)面添加視覺(jué)規(guī)則:

  • 在推導(dǎo)中,我們選擇多彩的顏色模式,常見(jiàn)的小學(xué)課本是以橙色為主,因此,軟件也選擇橙色作為主色,并加入黃色、綠色和藍(lán)色作為輔助顏色;
  • 圖標(biāo)采用的是孩子熟悉的元素+輕質(zhì)感這樣的組合;
  • 結(jié)合繪本和孩子常見(jiàn)元素,使用兩個(gè)圓形疊加的形式,作為軟件的主要元素;
  • 為了讓內(nèi)容更符合孩子閱讀和使用習(xí)慣,使用大字號(hào)和大間距的形式,常用字號(hào)是 32px,最小字號(hào)是 28px;
  • ……

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!

對(duì)比產(chǎn)品原型和市面上的一些競(jìng)品,我們可以發(fā)現(xiàn),查詞軟件在內(nèi)容布局上相差無(wú)幾。如果沒(méi)有找到符合我們產(chǎn)品業(yè)務(wù)目標(biāo),同時(shí)符合用戶認(rèn)知的規(guī)則,我們將被淹沒(méi)在一群查詞軟件中。

步驟 3. 建立一個(gè)畫(huà)板,把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來(lái),并給他們限定使用范圍,方便自己查閱和團(tuán)隊(duì)合作

最后一步,相信很多設(shè)計(jì)師都會(huì)在設(shè)計(jì)過(guò)程中建立一套方便好用的設(shè)計(jì)規(guī)范庫(kù),這里就不展開(kāi)來(lái)說(shuō)了。

如何從零到一設(shè)計(jì)產(chǎn)品?有道設(shè)計(jì)師總結(jié)了這7個(gè)步驟!


總結(jié)


最后,再對(duì)上文的所有內(nèi)容進(jìn)行概括。從 0 到 1 進(jìn)行軟件設(shè)計(jì)我們需要用到下面這 7 步:

  1. 多使用「為什么+動(dòng)詞」的問(wèn)法,向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶目標(biāo)。
  2. 從業(yè)務(wù)目標(biāo)開(kāi)始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息,直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞。
  3. 分析不同用戶跟軟件之間的接觸點(diǎn),從未來(lái)趨勢(shì)和用戶當(dāng)前認(rèn)知角度收集用戶資料。
  4. 提取收集到的信息,并放入四象限中,總結(jié)出2~4個(gè)視覺(jué)關(guān)鍵詞、體驗(yàn)關(guān)鍵詞。
  5. 分別組合產(chǎn)品關(guān)鍵詞和視覺(jué)關(guān)鍵詞,產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞,找到同時(shí)滿足 2 組關(guān)鍵詞的規(guī)則。
  6. 選擇復(fù)雜的核心頁(yè)面,把具體化的體驗(yàn)規(guī)則、視覺(jué)規(guī)則融進(jìn)頁(yè)面中,確定設(shè)計(jì)風(fēng)格。
  7. 建立一個(gè)畫(huà)板,把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來(lái),并給他們限定使用范圍,方便自己查閱和團(tuán)隊(duì)合作。

完成這 7 步,將可以讓你從 0 ~ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過(guò),設(shè)計(jì)風(fēng)格明確,用戶粘性高的軟件。

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC