国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

原型制作是一個(gè)老生常談的問(wèn)題，筆者分享了自己獨(dú)有的原型制作的經(jīng)驗(yàn)，將其歸納為“整”“拆”“合”“移”，并且給出了實(shí)際案例，非常具有參考性。

前言：大家好，本文主要通過(guò)介紹原型制作的四字法則：“整”“拆”“合”“移”，希望大家能夠有所得，更好地應(yīng)用到自己實(shí)際的工作中去，提高自己的工作效率。

本次與前幾次的分享略有不同，我們不講如何構(gòu)建組件的框架，這個(gè)知識(shí)點(diǎn)在前兩篇的分享文章中已經(jīng)介紹的非常詳細(xì)了，要是新的觀(guān)眾不太了解的可以回看前兩篇關(guān)于組件庫(kù)打造的相關(guān)文章。

《技巧分享：Axure后臺(tái)組件制作的全過(guò)程》

《打造高品質(zhì)Axure組件庫(kù)，就是這么簡(jiǎn)單！》

關(guān)于新組件MobileKit的彩蛋在此處放出，希望大家能夠喜歡。

MobileKit預(yù)覽效果：https://uedart.com/demo

本次將著重介紹原型制作的方法體系以及如何將制作與方法體系相結(jié)合，快速幫助大家進(jìn)行手機(jī)交互組件的落地制作。

通過(guò)瀏覽MobileKit組件庫(kù)的預(yù)覽效果，大家不難發(fā)現(xiàn)，本次的組件庫(kù)的體量是以往PC端組件庫(kù)的2倍之多，之所以有這么大的體量是因?yàn)槭謾C(jī)交互的多樣性。面對(duì)如此豐富的手機(jī)交互形式，我們?cè)谥谱鞯倪^(guò)程中一定要有支撐自己思路的方法體系，才能讓我們的制作更有方法。

這套思路體系不僅僅適用于Axure組件的制作，對(duì)于工作中的一些事務(wù)處理也是不可或缺的“利器”。

一、方法體系起源

你們一定很疑惑，我的制作方法體系從何而來(lái)？

說(shuō)起起源，這要感謝一本書(shū)《超級(jí)整理術(shù)》。這是一件很有意思的小事，因參與了當(dāng)當(dāng)網(wǎng)的滿(mǎn)減湊單意外地收獲了佐藤可士和的這本書(shū)，也正是這本書(shū)，讓我改變了很多我做事的方式與想法。

佐藤可士和在書(shū)中介紹的方法，能夠很好的應(yīng)用到學(xué)習(xí)、生活、工作中的場(chǎng)景中使用，幫助我們更好的進(jìn)行知識(shí)整理，希望大家可以從中獲得一些信息整理的啟發(fā)。

1. 進(jìn)行用戶(hù)調(diào)研與需求收集——收集信息；
2. 對(duì)用戶(hù)反饋的需求進(jìn)行需求分析——簡(jiǎn)化信息；
3. 進(jìn)行信息結(jié)構(gòu)與產(chǎn)品結(jié)構(gòu)圖分析——分類(lèi)信息；
4. 按版本計(jì)劃將需求分配到不同版本中實(shí)現(xiàn)——信息優(yōu)先級(jí)；
5. 按流程進(jìn)行信息的梳理整合——信息重組。

在后續(xù)的產(chǎn)品工作中我逐步優(yōu)化簡(jiǎn)化形成了一套制作原型的方法：“整”“拆”“合”“移”。

其實(shí)就像我們平時(shí)接觸到的很多產(chǎn)品一樣， 產(chǎn)品頁(yè)面本身都是由組件、元素構(gòu)成的，這并不復(fù)雜。復(fù)雜的是我們要理清這些頁(yè)面背后的用戶(hù)需求、業(yè)務(wù)流程、邏輯走向，這才是頁(yè)面的核心要點(diǎn)。

有很多人問(wèn)我如何快速畫(huà)原型，他們會(huì)在“畫(huà)”上下很多功夫，這就已經(jīng)走上了一條錯(cuò)誤的道路，我們應(yīng)該花更多的時(shí)間與精力去提升自己的“思考力”，找準(zhǔn)每件事的核心要點(diǎn)，比純粹的制作更為重要。

這也是我們?yōu)槭裁粗谱鹘M件的出發(fā)點(diǎn)，減少重復(fù)工作量，將制作組件化、模塊化，形成自己的組合思維，將更多有效的時(shí)間花在思考上，減少在原型上的試錯(cuò)成本，達(dá)成快速制作原型的目標(biāo)。

在此我將毫無(wú)保留地分析給大家，希望大家能夠有所收獲。

二、“整”字訣

“整”字訣介紹

何為“整”？——對(duì)所做進(jìn)行信息的整理分析，明確目標(biāo)與思路。

我們?cè)谥谱髟蜁r(shí)可以從以下三方面進(jìn)行整理分析：

1. 信息整理——信息的整理，理明確目標(biāo)、整理需求、流程、信息；
2. 布局構(gòu)建——布局的整理，搭建大體結(jié)構(gòu)，按信息整理的分析結(jié)果進(jìn)行布局；
3. 細(xì)節(jié)處理——細(xì)節(jié)處理方式的整理，各個(gè)環(huán)節(jié)進(jìn)行細(xì)節(jié)調(diào)整，完善整體原型、

這就像一個(gè)“金字塔”，每一層的推進(jìn)都是重要的，從底層開(kāi)始到最后頂尖層，每一個(gè)環(huán)節(jié)都搭建的很好，才可以構(gòu)建一個(gè)穩(wěn)固的金字塔。

示例1：首頁(yè)特色卡片打造

從小的卡片組件打造來(lái)講：

要做什么：這里我們要做的是一個(gè)特色卡片，目的是像用戶(hù)傳達(dá)相應(yīng)活動(dòng)的信息，以及做為活動(dòng)的入口展示給用戶(hù)，達(dá)成首頁(yè)分流的目的。

如何去做：清晰了這一目的，我們?cè)谥谱鞔祟?lèi)卡片上的目標(biāo)就十分明確。

• 信息整理——信息的整理，明確目標(biāo)后，卡片信息的整理；
• 布局構(gòu)建——布局的整理，優(yōu)先級(jí)區(qū)分，卡片布局結(jié)構(gòu)的搭建；
• 細(xì)節(jié)處理——細(xì)節(jié)處理方式的整理，規(guī)范、字體、圖標(biāo)、間距、顏色、點(diǎn)綴、透明度的處理。

示例2：MobileKit組件庫(kù)打造

從大的組件庫(kù)打造來(lái)講：

要做什么：我們此次要做的一件事是打造一個(gè)優(yōu)秀的手機(jī)組件庫(kù)幫助大家快速完成原型制作。

如何去做：在明確要做什么的基礎(chǔ)上，我們要按序推進(jìn)這個(gè)MobileKit的原型制作。

• 信息整理——進(jìn)行內(nèi)容結(jié)構(gòu)的梳理；
• 布局構(gòu)建——構(gòu)建組件整體展示框架；
• 細(xì)節(jié)處理——各個(gè)分類(lèi)組件的細(xì)節(jié)打造處理。

我們不難發(fā)現(xiàn)大的制作思路和小的制作思路的整體流程上并沒(méi)有什么很大區(qū)別，唯一的區(qū)別就在于我們的制作復(fù)雜度上，將復(fù)雜度拆解開(kāi)來(lái)，其實(shí)是這一套流程的重復(fù)應(yīng)用：信息整理——布局構(gòu)建——細(xì)節(jié)處理。

信息整理——進(jìn)行內(nèi)容結(jié)構(gòu)的梳理

事先搭建好自己組件體系的內(nèi)容結(jié)構(gòu)可以很好地引導(dǎo)你去制作，讓制作更有方向性。

通過(guò)mindnode進(jìn)行制作前的組件分類(lèi)：

布局構(gòu)建——構(gòu)建組件整體展示框架

色彩體系確立

本次MobileKit組件采用雙色系模式進(jìn)行制作，為了配合最近MAC熱門(mén)的暗黑模式，我們也做了暗色系模式，雙色系更加符合現(xiàn)在手機(jī)APP的流行趨勢(shì)。

關(guān)于色彩取用：MobileKit沿用了UEDART前期作品制作的主題色系，拓展了暗色系色彩色系。

框架體系確立

本次MobileKit組件沿用了UEDART常見(jiàn)的框架模式之一，此后臺(tái)組件展示的框架的拓展性更強(qiáng)。

大家在制作時(shí)也可以沿用此類(lèi)型的框架去構(gòu)建自己的組件庫(kù)。

首頁(yè)展示效果

采用ipx的外殼展示模式，來(lái)進(jìn)行各個(gè)組件的展示預(yù)覽。

框架加載效果，黑白對(duì)比展示模式

左側(cè)菜單欄進(jìn)行頻道切換，針對(duì)有黑白模式的組件頁(yè)面，采用了左右比對(duì)的Light&Dark模式對(duì)比查看，針對(duì)圖標(biāo)的瀏覽查看采用了燈泡開(kāi)關(guān)的Light&Dark模式對(duì)比查看。

細(xì)節(jié)處理——各個(gè)分類(lèi)組件的細(xì)節(jié)打造處理

卡片流細(xì)節(jié)處理

滑動(dòng)選擇條動(dòng)效細(xì)節(jié)處理

三、“拆”字訣

“拆”字訣介紹

何為“拆”？——將復(fù)雜事務(wù)進(jìn)行拆分變?yōu)楦鼮楹?jiǎn)單的小事件。

通常我們要進(jìn)行一件復(fù)雜度比較高的事情的時(shí)候，往往會(huì)有一種不知如何下手的感覺(jué)，但是當(dāng)我們把復(fù)雜的事物進(jìn)行分解，拆成一個(gè)一個(gè)的小目標(biāo)時(shí)，這個(gè)時(shí)候再去實(shí)行這個(gè)大的目標(biāo)就更為簡(jiǎn)單了。

“拆”在產(chǎn)品構(gòu)思過(guò)程中的運(yùn)用

我們?cè)跇?gòu)思產(chǎn)品的時(shí)候，使用的產(chǎn)品結(jié)構(gòu)圖和產(chǎn)品信息圖將“拆”字訣運(yùn)用地恰到好處，對(duì)產(chǎn)品結(jié)構(gòu)進(jìn)行各個(gè)模塊的功能拆解。

例如，我在進(jìn)行PRD文檔規(guī)范2.0的產(chǎn)品構(gòu)思時(shí)運(yùn)用到的產(chǎn)品結(jié)構(gòu)圖：

“拆”在流程分解過(guò)程中的運(yùn)用

我們通常在設(shè)計(jì)產(chǎn)品流程的過(guò)程中，先會(huì)根據(jù)用戶(hù)需求，把產(chǎn)品內(nèi)部的主流程確立下來(lái)，后續(xù)逐步根據(jù)用戶(hù)在不同場(chǎng)景下的不同情況，構(gòu)建產(chǎn)品的子流程，從而將整個(gè)產(chǎn)品的所有流程完善起來(lái)。

在進(jìn)行產(chǎn)品文檔交付的時(shí)候，我們也經(jīng)常將產(chǎn)品內(nèi)部的流程進(jìn)行拆分，形成子流程，來(lái)闡述各個(gè)流程的相對(duì)關(guān)系，這樣便于開(kāi)發(fā)的理解。

例如，產(chǎn)品文檔中各流程的拆解闡述：

“拆”在產(chǎn)品原型制作中的運(yùn)用

同樣我們?cè)谶M(jìn)行原型制作時(shí)，也能夠很好的運(yùn)用“拆”字訣來(lái)輔助我們的制作。往往我們?cè)谠O(shè)計(jì)一個(gè)流程的過(guò)程中，里面會(huì)有很多組成部分，我們要從中把它們拆解出來(lái)。

譬如微信的朋友圈中的拍照功能，里面包含了諸多復(fù)雜變化的效果，通過(guò)“拆”來(lái)將各個(gè)步驟環(huán)節(jié)進(jìn)行拆解，會(huì)一下子清晰明朗很多。

拍照流程拆解分析：

• 前置條件：點(diǎn)擊拍攝進(jìn)入拍照頁(yè)面；
• 觸發(fā)條件：點(diǎn)擊事件；
• 過(guò)程動(dòng)效：提示文字隱藏，捕捉面部焦點(diǎn)，點(diǎn)擊按鈕縮放；
• 結(jié)果反饋：拍照完成展開(kāi)照片處理功能。

這樣一來(lái)，我們所有的流程節(jié)點(diǎn)都一清二楚。我這邊模擬了一個(gè)微信拍照的動(dòng)效效果展示給大家看一下：

動(dòng)態(tài)效果預(yù)覽地址：https://axhub.im/pro/a19a455c5cb9ef5b/#g=1&p=%E6%8B%8D%E7%85%A7_%E8%A7%86%E9%A2%91_%E9%A1%B5%E9%9D%A2__photo_video

四、“合”字訣

“合”字訣介紹

何為“合”？——將信息重新組合形成新的模式。

在我們進(jìn)行頁(yè)面布局過(guò)程中，很多復(fù)雜的頁(yè)面其實(shí)就是簡(jiǎn)單組件的重組。

和“拆”字訣很像的是，拆字訣將復(fù)雜的東西簡(jiǎn)單化后，實(shí)現(xiàn)最終的制作目標(biāo)，“合”字訣是將簡(jiǎn)單的東西進(jìn)行重組，實(shí)現(xiàn)復(fù)雜頁(yè)面的重組。

組件化思維制作組件庫(kù)

組件化思維在“合”字訣上運(yùn)用地淋漓盡致，我們將一些常見(jiàn)的元素、組件進(jìn)行組件化。當(dāng)我們進(jìn)行新產(chǎn)品的策劃時(shí)，進(jìn)行產(chǎn)品分析、確定好所有產(chǎn)品流程后，進(jìn)入到原型繪制階段，構(gòu)建新頁(yè)面時(shí)我們不需要再重新制作這一類(lèi)的組件，只需從通用組件庫(kù)中調(diào)取，進(jìn)行重組即可快速構(gòu)成頁(yè)面。

我們根據(jù)手機(jī)交互中的各個(gè)場(chǎng)景應(yīng)用拆分出了很多組件，這些組件為后續(xù)的產(chǎn)品制作提供了一個(gè)很強(qiáng)大的庫(kù)，我們?cè)谥亟M頁(yè)面時(shí)可以很好的應(yīng)用組件庫(kù)進(jìn)行原型頁(yè)面的重組。

例如，我們制作的組件中有：

頂部元素

底部元素

“合”在啟動(dòng)頁(yè)的制作應(yīng)用

在我們的啟動(dòng)頁(yè)制作中我們提供了三種樣式的啟動(dòng)頁(yè)頁(yè)面，其實(shí)從中不難看出，里面運(yùn)用了一些簡(jiǎn)單的元素的重新組合，再加上一些不一樣的元素的構(gòu)成就可以形成新的頁(yè)面形式，達(dá)成了不一樣的展示效果。

• 頂部狀態(tài)欄
• logo
• 標(biāo)語(yǔ)

頁(yè)面本身的制作并不是很難，難點(diǎn)在于從產(chǎn)品入手，本產(chǎn)品更需要啟動(dòng)頁(yè)展示怎樣的內(nèi)容，再通過(guò)其內(nèi)容分析頁(yè)面需要具備怎樣的元素，再把元素進(jìn)行重組。

“拆”與“合”在播放頁(yè)的制作應(yīng)用

下面通過(guò)優(yōu)酷視頻播放的案例來(lái)展示“拆”字訣“合”字訣與的組合運(yùn)用。

將需要制作的目標(biāo)進(jìn)行拆解，尤其在層次分布上的先后順序一定要分明白。

廣告播放流程拆解分析：

• 前置條件：進(jìn)入播放頁(yè)面
• 觸發(fā)條件：倒計(jì)時(shí)事件
• 過(guò)程動(dòng)效：倒計(jì)時(shí)
• 結(jié)果反饋：倒計(jì)時(shí)完畢后進(jìn)入播放主頁(yè)

視頻播放流程拆解分析：

• 前置條件：倒計(jì)時(shí)后進(jìn)入此頁(yè)面
• 觸發(fā)條件：點(diǎn)擊事件
• 過(guò)程動(dòng)效：彈幕控制。上下操作欄緩入，右側(cè)操作區(qū)顯示，截圖/GIF頁(yè)面跳轉(zhuǎn)
• 結(jié)果反饋：出現(xiàn)對(duì)應(yīng)模塊操作模塊

拆解完畢后從原有的組件庫(kù)中調(diào)用了廣告標(biāo)簽、倒計(jì)時(shí)組件、播放操作欄組件進(jìn)行頁(yè)面的組合。

動(dòng)態(tài)效果的預(yù)覽地址：https://axhub.im/pro/a19a455c5cb9ef5b/#g=1&p=%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE_video

五、“移”字訣

“移”字訣介紹

何為“移”？——借用解決其他事情的思路來(lái)解決當(dāng)前的問(wèn)題。

我們從書(shū)中獲得的知識(shí)，將其應(yīng)用到實(shí)際工作的場(chǎng)景中就是“移”字訣的很好體現(xiàn)。在我們的產(chǎn)品工作中，我們也經(jīng)常去找”參考”，分析其他產(chǎn)品是如何解決相近問(wèn)題，并將其解決問(wèn)題的思路轉(zhuǎn)移到自己產(chǎn)品的問(wèn)題解決上來(lái)。

“移”在產(chǎn)品設(shè)計(jì)中的應(yīng)用

找參考產(chǎn)品的兩個(gè)維度：

• 從大的層面：研究產(chǎn)品相關(guān)的業(yè)務(wù)，有競(jìng)爭(zhēng)關(guān)系的產(chǎn)品；
• 從小的層面：研究產(chǎn)品的某個(gè)功能，能提供參考意義的產(chǎn)品功能。

無(wú)論是借用競(jìng)品產(chǎn)品的參考，還是借用相似功能的參考都是“移”字訣的很好運(yùn)用。在我的產(chǎn)品設(shè)計(jì)過(guò)程中，我更趨向于運(yùn)用相似功能的參考，簡(jiǎn)化成一個(gè)一個(gè)的功能模塊，你會(huì)發(fā)現(xiàn)這樣的參考產(chǎn)品十分之多，我們可以從不同業(yè)務(wù)模式下的同類(lèi)進(jìn)行類(lèi)比，找到最適合當(dāng)前產(chǎn)品此功能的交互形式。

他山之石可以攻玉，合理利用其它方面的知識(shí)，加以利用，變成好的方法去解決當(dāng)下的問(wèn)題。這種能力轉(zhuǎn)移的處理方式是很好的處理事務(wù)的方式，同樣在制作原型中也十分適用。

原型組件庫(kù)的運(yùn)用同樣也是“移”字訣的實(shí)際運(yùn)用。我們?cè)谌粘５漠a(chǎn)品工作中，將一些產(chǎn)品經(jīng)驗(yàn)轉(zhuǎn)化為實(shí)際的原型組件產(chǎn)物，方便自己在其他產(chǎn)品設(shè)計(jì)中的復(fù)用，這種組件化的思維復(fù)用正是“移”字訣的的精髓。

“移”在原型制作中的應(yīng)用

圖片選擇，參考產(chǎn)品“微信”和“閑魚(yú)”。

選擇-查看-編輯：

手勢(shì)解鎖，參考產(chǎn)品“京東金融”。

解鎖前-解鎖正確-解鎖失?。?/p>

聊天窗口，參考產(chǎn)品“淘寶”。

歷史消息-語(yǔ)音消息-發(fā)送操作：

六、總結(jié)

到此關(guān)于原型制作的四字訣方法體系就介紹完了，大家可以從四字訣中發(fā)現(xiàn)“合”字訣與“移”字訣中都提到了組件庫(kù)。我喜歡組件庫(kù)中運(yùn)用的組件化思維，這種思維如果能夠很好地運(yùn)用起來(lái)，相信大家的工作效率一定能夠得到很大的提升。希望大家能夠快速掌握應(yīng)用到自己的工作當(dāng)中去，四字訣不僅適用于原型制作，在很多方面都是適用的。

筆者一直以來(lái)都希望能夠給大家輸出一些有用的知識(shí)，在此感謝大家的關(guān)注與支持。正是你們一路以來(lái)的支持，我才有堅(jiān)持不懈努力寫(xiě)下去的動(dòng)力，希望能夠在設(shè)計(jì)研究這條道路上一直走下去。

推薦書(shū)籍：這邊推薦三本相關(guān)書(shū)籍給大家，希望大家能有所收獲。

本文由 @時(shí)光若刻 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議