中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

視覺(jué)設(shè)計(jì)師有自己的組件來(lái)定義視覺(jué)規(guī)范，前端工程師有系統(tǒng)SDK自帶的UIkit調(diào)用，而我們產(chǎn)品經(jīng)理也應(yīng)該有一套適合自己的元件庫(kù)來(lái)提升畫(huà)原型的效率。

網(wǎng)上有不少文章叫你如何使用Axure的元件庫(kù)功能，側(cè)重于講工具使用。

而我這篇文章側(cè)重于講方法論。從定義元件庫(kù)的結(jié)構(gòu)，到如何設(shè)計(jì)每個(gè)元件。點(diǎn)擊預(yù)覽元件庫(kù)。

一、前言

有不少大公司提供了Axure元件庫(kù)可以下載回來(lái)使用，比如餓了么用戶端Web元件庫(kù)、阿里巴巴后臺(tái)Web元件庫(kù)、Axure官方元件庫(kù)，小樓的APP元件庫(kù)。

這些元件庫(kù)當(dāng)然不錯(cuò)，但是存在幾個(gè)問(wèn)題。

• 不是為自己設(shè)計(jì)的，不知道運(yùn)用到什么場(chǎng)景
• 帶有強(qiáng)烈的公司風(fēng)格，無(wú)法通用，只能借鑒
• 配色有強(qiáng)烈的視覺(jué)風(fēng)格，很難適合自己
• 很多元件是截圖，不太通用
• 有很多無(wú)用的元件，不知道該刪除還是保留

建議每個(gè)PM為自己定制元件庫(kù)并長(zhǎng)期更新，這樣能夠極大的提升自己設(shè)計(jì)原型的效率，而且可以保證原型整體的視覺(jué)統(tǒng)一。

二、定制元件庫(kù)的思路

該元件庫(kù)存放了一個(gè)個(gè)元件，而且必須是常用的。并且需要保證這些元件在設(shè)計(jì)其他手機(jī)APP的時(shí)候，也大部分適用。

從PM畫(huà)原型的工作中，我們其實(shí)梳理出大概有哪些工作，哪些可以轉(zhuǎn)化成通用元件。

拆分產(chǎn)品工作

移動(dòng)端原型的具體設(shè)計(jì)有四步驟：

定架構(gòu)→畫(huà)頁(yè)面→加交互→寫(xiě)邏輯

• 定架構(gòu)的過(guò)程中，畫(huà)業(yè)務(wù)流程、功能流程、頁(yè)面流程的時(shí)候，需要用到哪些圖形。
• 畫(huà)頁(yè)面的過(guò)程中，大概有哪些常見(jiàn)的組件呢。有頁(yè)面本身、視覺(jué)組件等。
• 加交互的過(guò)程中，大概有哪些東西呢，比如彈窗、吐司提示，模態(tài)視圖等。有時(shí)候也需要用手勢(shì)表示一下邏輯，畢竟Axure的手勢(shì)對(duì)移動(dòng)端支持不夠。
• 寫(xiě)邏輯的過(guò)程中，可能需要用到一些常見(jiàn)的邏輯，也可以放進(jìn)去。這一點(diǎn)看各自的需求。

需要注意的是，雖然我們遵循Axure的命名規(guī)則叫它元件庫(kù)，但本質(zhì)上和Axure默認(rèn)的Default、flow、icon元件庫(kù)是有區(qū)別的。前者側(cè)重于功能組件，后者側(cè)重于最細(xì)粒度的控件。事實(shí)上前者是控件的組合，稱(chēng)之為組件庫(kù)其實(shí)更合適。

元件庫(kù)的結(jié)構(gòu)

按照上述的產(chǎn)品工作拆分，可以得到對(duì)應(yīng)的元件庫(kù)結(jié)構(gòu)。

請(qǐng)注意Axure的元件庫(kù)在載入的時(shí)候，不支持多級(jí)目錄。請(qǐng)盡量設(shè)置成一級(jí)。

或者像我這樣命名多層目錄，雖然是多層，但是最終載入的時(shí)候，自己還是能夠清晰理解的。

最終載入元件庫(kù)的效果如下：

接下來(lái)我們一一來(lái)講解如何設(shè)計(jì)。

三、元件庫(kù)的設(shè)計(jì)原則

之所以你從網(wǎng)上下載的元件庫(kù)不太好用，是因?yàn)槲醋裱韵略瓌t。

配色只使用黑白灰

勿用彩色，這樣不會(huì)影響視覺(jué)設(shè)計(jì)師定義視覺(jué)風(fēng)格的思路，以及不會(huì)誤導(dǎo)視覺(jué)設(shè)計(jì)師。

使用默認(rèn)元件加工而成

因?yàn)槭悄J(rèn)元件，所以原型的視覺(jué)風(fēng)格都是統(tǒng)一的配色黑白灰，統(tǒng)一的控件樣式。

默認(rèn)元件大家都很熟悉，當(dāng)在rp中插入該元件庫(kù)中的組件，如需二次修改也很方便。

默認(rèn)元件不自帶交互不帶注釋不帶有命名，如果你使用網(wǎng)上下載的元件，那么有很多干擾信息，定制元件庫(kù)的時(shí)候修改起來(lái)特別麻煩。

盡量不要導(dǎo)入位圖

往往該圖表示了一定含義，無(wú)法用到在其他項(xiàng)目。

很占空間，如果二次壓縮又會(huì)模糊。

補(bǔ)充一點(diǎn)，有時(shí)候需要圖標(biāo)表示重點(diǎn)內(nèi)容，可以導(dǎo)入svg的矢量圖來(lái)配合著設(shè)計(jì)組件。不占空間而且通用。

元件尺寸基于同一機(jī)型制作而成

如果不是基于某一機(jī)型的分辨率制作，那會(huì)導(dǎo)致制作的原型中的控件，尺寸不協(xié)調(diào)，不專(zhuān)業(yè)，并且視覺(jué)設(shè)計(jì)師很難理解功能。

以iPhone6/6s/7的邏輯分辨率制作

也就是375×667，以這個(gè)分辨率制作的原型，可以基本適配所有的iOS和Android機(jī)型，所以倒推回來(lái)，元件庫(kù)也應(yīng)該以這個(gè)尺寸來(lái)設(shè)計(jì)。

具體的可以查看我的文章《為什么375×667是移動(dòng)端原型的最佳分辨率》，以及《如何在Axure中正確設(shè)置APP原型的尺寸》。

四、頁(yè)面組件

由于定架構(gòu)這個(gè)比較復(fù)雜，大部分初級(jí)PM不懂。

我們先從最簡(jiǎn)單常見(jiàn)的頁(yè)面組件來(lái)講，也就是APP中最常見(jiàn)的視覺(jué)組件、基礎(chǔ)功能。

頁(yè)面框架

我所謂的頁(yè)面框架是指這個(gè). 每設(shè)計(jì)一個(gè)頁(yè)面都需要用到的公用部分。

你也可以在rp文件中定義可脫離母版來(lái)多次使用，但是其他rp不通用。所以還是推薦用元件庫(kù)的方式來(lái)滿足重復(fù)使用的需求。

頁(yè)面框架有帶手機(jī)框和不帶手機(jī)框兩類(lèi)。特別反感使用帶手機(jī)框的頁(yè)面框架。除了花哨沒(méi)有任何價(jià)值。而且無(wú)法設(shè)計(jì)超過(guò)一屏幕高度的內(nèi)容。

如果不帶手機(jī)框，就不會(huì)有這個(gè)問(wèn)題。此時(shí)還有2種做法：帶狀態(tài)欄和不帶狀態(tài)欄。

至于你選擇帶狀態(tài)欄的375×667，還是不帶狀態(tài)欄的375x(667-20狀態(tài)欄)，因人而異。我因?yàn)橐笞约旱?a href="http://www.aharts.cn/rp/623635.html" target="_blank" rel="noopener noreferrer"> APP原型可以在手機(jī)上完美體驗(yàn)，所以選擇的是375×647。

但是不管選哪種，你設(shè)計(jì)的其他元件如果需要包含頁(yè)面框架，都應(yīng)該遵循該標(biāo)準(zhǔn)。

視覺(jué)組件

Axure默認(rèn)元件庫(kù)中自帶了一些常見(jiàn)控件，這里不重復(fù)做。我只做常見(jiàn)的視覺(jué)組件，以及常見(jiàn)的小功能單元。

五、交互組件

將常見(jiàn)的交互組件提取出來(lái)，大概有以下三種。

常見(jiàn)提示

常見(jiàn)的toast提示、alert彈窗、小紅點(diǎn)。

鍵盤(pán)

常見(jiàn)的一些鍵盤(pán)，使用的是截圖。盡量少用，除非必要。

手勢(shì)

常用的大概有八種，iOS官方人機(jī)交互設(shè)計(jì)規(guī)范中定義了。而Android官方定義了28種，很多華而不實(shí)，不用也罷。

手勢(shì)元件可以在Axure無(wú)法做出你的交互，或者做起來(lái)很麻煩的時(shí)候，直接用它來(lái)快速表示。

七、邏輯要點(diǎn)

我把所有常見(jiàn)的控件的邏輯，都梳理了一遍。比如你要寫(xiě)密碼框、手機(jī)號(hào)輸入框等的邏輯，直接使用和修改值即可。

時(shí)間有限，我只做了2個(gè)。大家可以根據(jù)自己的需求，參考這篇文章來(lái)制作APP文本框通用的輸入規(guī)則。

八、畫(huà)圖建模

這個(gè)屬于進(jìn)階技能，有些復(fù)雜。但是一旦學(xué)會(huì)，你的畫(huà)原型體系應(yīng)該比較健全了。

功能流程

相關(guān)的介紹，可以查看我的文章《如何正確地畫(huà)出頁(yè)面流程圖》。

頁(yè)面流程

相關(guān)的介紹，可以查看我的文章《如何正確的畫(huà)出功能流程圖》。

實(shí)體關(guān)系模型

相關(guān)的介紹，可以查看我的文章《如何用ER圖繪制業(yè)務(wù)實(shí)體模型》。

狀態(tài)機(jī)

相關(guān)的介紹，可以查看我的文章《如何繪畫(huà)狀態(tài)機(jī)來(lái)描述業(yè)務(wù)的變化》。

用例圖

屬于UML的范疇，了解即可。

九、其他

當(dāng)然也可能還有其他的，根據(jù)自身需求而定。

不建議把獨(dú)立的圖標(biāo)導(dǎo)入到這個(gè)“組件庫(kù)”，請(qǐng)單獨(dú)使用FontAwesome或者SVG元件庫(kù)等。

頁(yè)面狀態(tài)

另外頁(yè)面狀態(tài)也可以加進(jìn)去，比較常用。

不過(guò)也可以作為全局規(guī)范寫(xiě)到單獨(dú)的頁(yè)面給到視覺(jué)設(shè)計(jì)師、前端工程師。

詳見(jiàn)我的文章《移動(dòng)端APP應(yīng)該如何定義頁(yè)面規(guī)范》和《全面通用的移動(dòng)端產(chǎn)品規(guī)范V2.0》。

十、總結(jié)

強(qiáng)烈推薦每個(gè)PM定制一份適合于自己的元件庫(kù)，絕對(duì)會(huì)讓你提升工作效率，而且可以梳理自己對(duì)組件、控件以及架構(gòu)的理解。

相關(guān)閱讀

如何正確地畫(huà)出頁(yè)面流程圖

如何正確的畫(huà)出功能流程圖

如何用ER圖繪制業(yè)務(wù)實(shí)體模型

如何繪畫(huà)狀態(tài)機(jī)來(lái)描述業(yè)務(wù)的變化

APP文本框通用的輸入規(guī)則

移動(dòng)端APP應(yīng)該如何定義頁(yè)面規(guī)范

全面通用的移動(dòng)端產(chǎn)品規(guī)范V2.0

#專(zhuān)欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。

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