整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
章作者分享了一種基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法，相信能夠?qū)δ愕脑驮O(shè)計(jì)工作帶來幫助，值得馬克。
在使用Axure設(shè)計(jì)移動(dòng)端原型的應(yīng)用方面，我總結(jié)出了兩種常用的方法。第一種是更適合在移動(dòng)端進(jìn)行演示的設(shè)計(jì)方法，大家可以參考我之前已經(jīng)分享過的一篇教程：使用Axure打造最佳的移動(dòng)端交互原型教程，使用這種方法輸出的原型在手機(jī)設(shè)備上進(jìn)行演示時(shí)可以達(dá)到跟真實(shí)APP幾乎一致的展示效果及交互體驗(yàn)。在今天我將分享另外一種基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法。
什么是基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法？簡(jiǎn)而言之就是在Axure的編輯界面中放置對(duì)應(yīng)的機(jī)型模板，使輸出的原型達(dá)到更規(guī)范和真實(shí)的演示效果。其實(shí)這是一種很常見的移動(dòng)端原型的設(shè)計(jì)方法，很多同行在設(shè)計(jì)原型的時(shí)候也都用過。這篇分享教程將對(duì)個(gè)設(shè)計(jì)方法進(jìn)行了總結(jié)和梳理，并基于這個(gè)方法制作了一套可快速復(fù)用的模板。這套模板具有幾個(gè)方面的特點(diǎn)：
● 結(jié)構(gòu)化，根據(jù)APP界面結(jié)構(gòu)進(jìn)行搭建；
● 標(biāo)準(zhǔn)化，非常方便進(jìn)行編輯和維護(hù)；
● 高保真，可高度還原移動(dòng)端交互效果；
在本篇分享的結(jié)尾我會(huì)提供模板的Axure源文件下載，其中包含了最新的IPhoneX和IPhone8等多套IOS設(shè)備機(jī)型，以及一些常見的界面元素和交互效果。在開始正式的介紹之前，大家可以查看使用這套模板還原IOS中兩款官方應(yīng)用的設(shè)計(jì)演示。
由于這套模板是基于IOS系統(tǒng)進(jìn)行設(shè)計(jì)的，所以相關(guān)界面元素和交互方式均以IOS為標(biāo)準(zhǔn)。目前主流的移動(dòng)端系統(tǒng)除了IOS還有Android，這兩種系統(tǒng)設(shè)計(jì)標(biāo)準(zhǔn)和交互方式其實(shí)是存在一些差異的，不過目前市面上大部分APP在設(shè)計(jì)時(shí)并沒有爭(zhēng)對(duì)兩種系統(tǒng)做單獨(dú)的處理。
所以如果沒有特珠需求的話，我們一般也只需要輸出一套原型方案就可以了，不過設(shè)計(jì)過程中需要盡量兼顧這兩個(gè)主流的系統(tǒng)。當(dāng)然，如果你的產(chǎn)品明確需要按照Android的系統(tǒng)規(guī)范來設(shè)計(jì)，你也可以參照本教程設(shè)計(jì)一套Android的原型模板，相關(guān)交互方式可以參照Android版的交互指南規(guī)范。
在開始介紹模板的搭建和使用方法之前，需要先對(duì)APP的界面結(jié)構(gòu)做一個(gè)簡(jiǎn)單的介紹，熟悉了界面結(jié)構(gòu)可以方便我們后續(xù)的設(shè)計(jì)。常見APP的界面主要由以下元素或組件組成：
狀態(tài)欄顯示設(shè)備的關(guān)鍵信息，包含設(shè)備模型或網(wǎng)絡(luò)提供商、網(wǎng)絡(luò)信號(hào)強(qiáng)度、電池使用量、時(shí)間等。在特殊界面中可以對(duì)狀態(tài)欄做隱藏處理，或根據(jù)需要自定義狀態(tài)欄背景。
導(dǎo)航欄位于app內(nèi)容區(qū)的上方，系統(tǒng)狀態(tài)欄的下方，并且提供在一系列頁面中的導(dǎo)航能力。可在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題，如果標(biāo)題非常冗長(zhǎng)且無法精簡(jiǎn)，可以空缺，避免用過多的元素填滿導(dǎo)航欄。導(dǎo)航欄中可以添加文字和圖標(biāo)控件，相關(guān)控件的可點(diǎn)擊區(qū)域需要大于控件的可視大小。
內(nèi)容區(qū)域根據(jù)需要進(jìn)行自定義設(shè)計(jì)，常見的設(shè)計(jì)形式有菜單列表、圖標(biāo)列表、卡片列表、圖文組合等。
標(biāo)簽欄位于APP底部，方便用戶在不同功能模塊之間進(jìn)行快速切換。標(biāo)簽欄一般用作APP的一級(jí)分類，數(shù)量控制在3-5個(gè)之間。建議使用Badge進(jìn)行提示，讓用戶知道有內(nèi)容更新。
工具欄一般會(huì)出現(xiàn)在視圖的的底部，提供給用戶相關(guān)可操作的功能按紐。如，郵件應(yīng)用程序里的收件箱欄中有刪除、分享、答復(fù)等等。
移動(dòng)端的彈出層根據(jù)彈出方式不同，共分為模態(tài)窗口、動(dòng)作面板、彈出面板等幾種不同的類型。在實(shí)際使用中，可根據(jù)界面的交互方式選擇對(duì)應(yīng)的類型。
一種輕量級(jí)反饋提示，可以用來顯示不會(huì)打斷用戶操作的內(nèi)容，適合用于頁面轉(zhuǎn)場(chǎng)、數(shù)據(jù)交互的等場(chǎng)景中。一次只顯示一個(gè)輕提示，有圖標(biāo)的提示字?jǐn)?shù)為4-6個(gè)，沒有圖標(biāo)的輕提示字?jǐn)?shù)不宜超過14個(gè)。
列表視圖是移動(dòng)端APP中一種通用的界面元素。很多應(yīng)用程序在一定程度上，都有使用表視圖來顯示數(shù)據(jù)列表。常見的例如IOS的聯(lián)系人應(yīng)用中聯(lián)系人信息列表，另外還有Mail中使用列表視圖顯示郵箱和郵件。列表視圖不僅可以用來顯示文本數(shù)據(jù)，也可以用來呈現(xiàn)圖像數(shù)據(jù)。
以上是豆瓣APP的一個(gè)界面截圖示例，界面的結(jié)構(gòu)用顏色進(jìn)行了區(qū)分，從上至下分別為：狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)、標(biāo)簽欄。
在介紹完APP的界面結(jié)構(gòu)之后，接下來說明一下模板的搭建方法。在本篇教程的結(jié)尾會(huì)提供了已經(jīng)制作好的模板的文件，大家可以下載并參考本部分介紹進(jìn)行使用，也可以參照介紹制作自己的原型模板。
在制作模板時(shí)需要用到對(duì)應(yīng)的機(jī)型設(shè)備的圖片素材，可以通過Dribbble等設(shè)計(jì)分享平臺(tái)找到對(duì)應(yīng)的素材文件，然后對(duì)素材做一些簡(jiǎn)單的處理。處理的過程首先是去掉多余的元素，只保留機(jī)型設(shè)備的框架圖片。另外還需要對(duì)圖片的尺寸進(jìn)行調(diào)整，例如在制作手機(jī)等移動(dòng)端模板時(shí)我們將內(nèi)容區(qū)域定為375px，需要根據(jù)所定的內(nèi)容區(qū)域?qū)D片的尺寸進(jìn)行相應(yīng)的調(diào)整。
為什么模板的內(nèi)容區(qū)域是375px？這個(gè)問題我在上篇教程中進(jìn)行過介紹，所以不再進(jìn)行展開說明。但是需要記住的這個(gè)尺寸是一個(gè)重要的標(biāo)準(zhǔn)，后續(xù)在設(shè)計(jì)過程中相關(guān)元件的寬度尺寸都需要參照這個(gè)標(biāo)準(zhǔn)。機(jī)型設(shè)備的圖片素材準(zhǔn)備好之后，我們?cè)贏xure中創(chuàng)建一個(gè)對(duì)應(yīng)的母版，然后將機(jī)型設(shè)備圖片拖入到母版中。母版的名稱可以按該機(jī)型設(shè)備的名稱命名，后面在使用時(shí)在新建的頁面中拖入該母版即可。
下一步需要?jiǎng)?chuàng)建前面介紹過的APP界面中常見元素或組件，首先大家可以看一下這張圖片中已經(jīng)創(chuàng)建好的模板，其中包含了機(jī)型母版、輕提示、彈層、導(dǎo)航欄、標(biāo)簽欄、內(nèi)容框架等元素。
在這個(gè)模板頁面的概要視圖中可以看到相關(guān)的對(duì)象，所有對(duì)象我都創(chuàng)建了一個(gè)對(duì)應(yīng)的動(dòng)態(tài)面板。這樣的處理主要出于兩個(gè)方面的考慮，一是方便對(duì)相關(guān)元素進(jìn)行編輯維護(hù)，二是相關(guān)對(duì)象的顯示是有順序的，這樣可以方便在概要視圖中進(jìn)行排序處理。
界面的主要內(nèi)容在內(nèi)容框架動(dòng)態(tài)面板中進(jìn)行編輯和維護(hù)，由于該動(dòng)態(tài)面板設(shè)置了自動(dòng)顯示滾動(dòng)條，如果你的界面內(nèi)容超出了一屏，在演示時(shí)可以通過在內(nèi)容框架區(qū)域滾動(dòng)鼠標(biāo)滾輪查看更多內(nèi)容。
模板中的界面元素的尺寸并沒有非常嚴(yán)格的標(biāo)準(zhǔn)，以下尺寸是我根據(jù)比例進(jìn)行設(shè)置的，僅供參考。IphoneX狀態(tài)欄：44px、IphoneX標(biāo)簽欄：80px、Iphone8狀態(tài)欄：28px、IphoneX標(biāo)簽欄：60px、導(dǎo)航欄：40px。另外，內(nèi)容區(qū)域的高度因?yàn)闄C(jī)型設(shè)備的素材圖片不統(tǒng)一可能略有差異，基本上可以忽略。
在設(shè)計(jì)原型時(shí)建議每一個(gè)界面創(chuàng)建一個(gè)對(duì)應(yīng)的頁面，通過添加頁面鏈接進(jìn)行界面跳轉(zhuǎn)，這樣方便對(duì)原型進(jìn)行編輯和維護(hù)。不建議將多個(gè)界面用動(dòng)態(tài)面板堆砌在一起頁面內(nèi)，這樣會(huì)使輸出的原型在演示時(shí)出現(xiàn)卡頓現(xiàn)象。
在概要視圖中可以看到相關(guān)元素對(duì)應(yīng)動(dòng)態(tài)面板的層級(jí)順序，在使用該模板的時(shí)候請(qǐng)盡量參照此順序，否則可能在演示時(shí)出現(xiàn)顯示錯(cuò)誤的情況。
為了方便維護(hù)可以將標(biāo)簽欄創(chuàng)建為母版，然后添加到需要顯示標(biāo)簽欄的頁面中。另外，在對(duì)應(yīng)的頁面中需要顯示對(duì)應(yīng)的標(biāo)簽選中效果，只需要在該頁面中的標(biāo)簽欄動(dòng)態(tài)面板中添加一個(gè)選中效果的標(biāo)簽元件。
如果頁面中添加了標(biāo)簽欄或工具欄，由于標(biāo)簽頁的動(dòng)態(tài)面板在內(nèi)容框架的動(dòng)態(tài)面板之上，在演示時(shí)會(huì)出現(xiàn)內(nèi)容有一部分被擋住的情況。可以創(chuàng)建一個(gè)高度為100px的熱區(qū)元件為母版，將母版拖入對(duì)應(yīng)的頁面底部，用來解決內(nèi)容區(qū)域被擋住的問題。
經(jīng)常有朋友向我咨詢?nèi)绾卧O(shè)計(jì)出更漂亮美觀的原型，雖然原則上原型能完整的體現(xiàn)出需求細(xì)節(jié)即可，好看并不是我們?cè)谠洼敵鰰r(shí)應(yīng)該關(guān)注的重點(diǎn)，但是如果能滿足說明需求的同時(shí)能把原型做得更漂亮一些更好，這也算是體現(xiàn)專業(yè)程度和工作態(tài)度的一個(gè)方面，而且很多人對(duì)自己的輸出物也是有強(qiáng)烈的美感追求的。
其實(shí)原型設(shè)計(jì)不需要了解太復(fù)雜的設(shè)計(jì)方法，只要掌握一點(diǎn)簡(jiǎn)單的技巧就能達(dá)到美觀的效果，同時(shí)能讓整體更統(tǒng)一和標(biāo)準(zhǔn)。在分享的這套模板中包含了一些基本的設(shè)計(jì)元素，我下面對(duì)其中的一些規(guī)范細(xì)節(jié)進(jìn)行說明，供大家進(jìn)行參考。
Axure中的配色板提供了一些常用的顏色色值，可用作一些常用元素的顏色配色。例如截圖中標(biāo)注1中的縱向的灰色色值可用于相關(guān)字體元素的顏色，標(biāo)注2中橫向的灰色色值可用于相關(guān)元素的背景和線條的顏色。另外，點(diǎn)擊標(biāo)注3中的更多按紐，可以將其它的常用色值加入到自定義顏色中，方便快速的使用。
在以前的教程中已經(jīng)介紹過輔助線的使用方法，合理的使用輔助線可以幫助我們提升設(shè)計(jì)效率，同時(shí)能讓輸出的原型效果更標(biāo)準(zhǔn)，所以強(qiáng)烈建議大家在設(shè)計(jì)過程中使用。以下是模板中內(nèi)容框架編輯區(qū)域的截圖，是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線，可以看到其中共有4條，分別介紹一下它們的作用和位置：
這些輔助線的用法只是作為參考，可以根據(jù)自己的需要新建對(duì)應(yīng)的輔助線。鼠標(biāo)光標(biāo)移動(dòng)到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域，按住鼠標(biāo)左鍵并往編輯區(qū)域拖動(dòng)時(shí)，就可以生成橫向x軸或縱向y軸的輔助線，然后將輔助線拖動(dòng)到對(duì)應(yīng)的位置即可。輔助線還有一個(gè)特性就是當(dāng)拖動(dòng)元件靠近它時(shí)，元件會(huì)自動(dòng)吸附到輔助線的邊緣達(dá)到快速對(duì)齊的效果。
移動(dòng)端原型中最常用的交互效果就是彈出層和輕提示兩種，模板中已經(jīng)包含了這種兩交互效果的相關(guān)元件和事件，這里再單獨(dú)簡(jiǎn)單的介紹一下。
在模板頁面的概要視圖中可以看到名為“提示”的動(dòng)態(tài)面板，需要顯示的提示信息在這個(gè)動(dòng)態(tài)面板中編輯就可以了。當(dāng)前的動(dòng)態(tài)面板中有一個(gè)“操作成功”的提示狀態(tài)，如果在一個(gè)頁面中顯示多個(gè)提示，可以新增對(duì)應(yīng)的狀態(tài)然后修改相關(guān)的提示內(nèi)容。
選中提示的動(dòng)態(tài)面板的狀態(tài)右擊選擇復(fù)制狀態(tài)可以快速創(chuàng)建新的提示。建議對(duì)每個(gè)對(duì)應(yīng)的提示狀態(tài)進(jìn)行命名，這樣方便后續(xù)進(jìn)行管理。關(guān)于輕提示的基本使用規(guī)范請(qǐng)參照前面的介紹內(nèi)容。
Toast提示的顯示方式設(shè)置很簡(jiǎn)單，只需要在對(duì)應(yīng)的元件事件上加入以上的交互動(dòng)作。首先設(shè)置提示動(dòng)態(tài)面板中對(duì)應(yīng)的狀態(tài)，然后設(shè)置顯示動(dòng)態(tài)面板，顯示時(shí)有一個(gè)逐漸的動(dòng)畫效果。
Toast提示顯示以后會(huì)在3秒后自動(dòng)逐漸隱藏，模板中的這個(gè)交互動(dòng)作已經(jīng)加在提示動(dòng)態(tài)面板的顯示時(shí)事件中了，不需要再單獨(dú)的進(jìn)行設(shè)置。
移動(dòng)端的彈層共分為模態(tài)窗口、動(dòng)作面板、彈出面板等幾種不同的類型。在模板頁面的概要視圖中可以看到名為“彈層”的動(dòng)態(tài)面板，可以根據(jù)需要?jiǎng)?chuàng)建更多其它的彈層狀態(tài)，還能在對(duì)應(yīng)的面板狀態(tài)屬性中設(shè)置透明背景的遮罩效果。
上面截圖中的為比較常見的模態(tài)窗口彈層效果，設(shè)置方式是在對(duì)應(yīng)的元件事件上加入以上的交互動(dòng)作。另外，根據(jù)模態(tài)窗口、動(dòng)作面板、彈出面板這幾種彈層類型的彈出方式不同，需要設(shè)置顯示時(shí)為向上滑動(dòng)和逐步等動(dòng)畫效果。
最后介紹一下如何實(shí)現(xiàn)內(nèi)容區(qū)域滾動(dòng)時(shí)，導(dǎo)航欄自動(dòng)切換的交互效果。首先需要在導(dǎo)航欄的動(dòng)態(tài)面板中創(chuàng)建對(duì)應(yīng)的狀態(tài)，然后選中內(nèi)容框架動(dòng)態(tài)面板，在它的滾動(dòng)時(shí)事件中按照上面的格式加入對(duì)應(yīng)的條件判斷即可。
在這個(gè)設(shè)置用到了條件判斷和函數(shù)，條件的詳細(xì)設(shè)置見上方的截圖。它的原理是當(dāng)內(nèi)容框架垂直滾動(dòng)高度大于70時(shí)設(shè)置導(dǎo)航欄動(dòng)態(tài)面板的顯示狀態(tài)為2，當(dāng)內(nèi)容框架垂直滾動(dòng)高度大小于70設(shè)置導(dǎo)航欄動(dòng)態(tài)面板的顯示狀態(tài)為1。其中用到的This.scrollY函數(shù)是獲取當(dāng)前元件的直滾動(dòng)高度，70的值可以根據(jù)需要自己設(shè)置。
好了，到此這篇基于設(shè)備模板的移動(dòng)端原型設(shè)計(jì)方法的分享基本介紹完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下載，大家可以結(jié)合本文中的相關(guān)介紹進(jìn)行使用。
最后再給大家分享一套本人整理設(shè)計(jì)的移動(dòng)端元件庫，這套元件庫中的相關(guān)元件是可以在這個(gè)模板中復(fù)用的，后續(xù)也會(huì)不斷的進(jìn)行優(yōu)化和完善，有需要的朋友可以關(guān)注一下。
文作者從設(shè)計(jì)原則、色彩、圖標(biāo)這3個(gè)角度對(duì)產(chǎn)品原型設(shè)計(jì)進(jìn)行了拆解。
關(guān)于B端Web產(chǎn)品前期從流程上進(jìn)行了復(fù)盤，這次從原型設(shè)計(jì)的角度來進(jìn)行梳理。
原型設(shè)計(jì)是產(chǎn)品經(jīng)理的硬技能，也是產(chǎn)品經(jīng)理與各相關(guān)方溝通的直觀橋梁。只有看到了原型demo，甲方爸爸們才會(huì)清楚的知道他們不要什么，可能還需要什么。
我的原型設(shè)計(jì)之路，從一開始的野路子，到目前的稍有章法，多虧了Ant design的組件庫、設(shè)計(jì)語言，以及參照《寫給大家看的設(shè)計(jì)書.第4版》一書中所進(jìn)行的刻意練習(xí)。
特此給大家做個(gè)小小的分享，給入門的產(chǎn)品小白以參照，如有設(shè)計(jì)師出身的產(chǎn)品大大們還請(qǐng)拍磚。
目錄：
參照基本的設(shè)計(jì)原則，可以幫助我們更高效、高質(zhì)量的完成原型設(shè)計(jì)。
四大設(shè)計(jì)原則，是在《寫給大家看的設(shè)計(jì)書.第4版》一書中由羅賓·威廉姆斯(RobinWilliams)提出的，包括親密性、對(duì)比、對(duì)齊、重復(fù)，適用于印刷品、出版物，也適用于Web的產(chǎn)品設(shè)計(jì)。
含義：將相關(guān)的項(xiàng)組織在一起。彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起；不相關(guān)的項(xiàng)，則遠(yuǎn)離。
作用：有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。
表現(xiàn)：在一個(gè)頁面上，物理位置的接近就意味著存在關(guān)聯(lián)（實(shí)際生活中也是如此）。
問題：哪副圖看起來這兩位像親密母子，哪幅像是路人？
圖源自《寫給大家看的設(shè)計(jì)書.第4版》
親密性在Web頁面的體現(xiàn)是橫向、縱向的間距。信息的關(guān)聯(lián)性越強(qiáng)，則間距越小，反之則間距越大。
間距規(guī)格分為小、中、大三種，對(duì)應(yīng)8px、16px、24px，再大些可用32px、48px。也可以參照公式來設(shè)定間距 y=8+8 * n（n>=0），y為縱向間距。這個(gè)公式不等于y=8*n（數(shù)學(xué)學(xué)渣已經(jīng)想了一遍） 來擴(kuò)展間距。
踩過的坑兒：
一期設(shè)計(jì)時(shí)，對(duì)間距的認(rèn)知是需要間距，標(biāo)準(zhǔn)自定義為10px的倍數(shù)，吭哧吭哧一頓調(diào)，還覺得頁面比上實(shí)戰(zhàn)課時(shí)畫的好，羞愧。直到原型已經(jīng)畫完了，和UI同學(xué)請(qǐng)教，才發(fā)現(xiàn)標(biāo)準(zhǔn)是8px的倍數(shù)，再后來看到了Ant design上的建議，先按照著規(guī)范來。
親密性bad case示例（圖源自某產(chǎn)品試用版）
含義：任何東西都不能在頁面上隨意安放。每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系。
作用：使頁面統(tǒng)一而且有條理。
表現(xiàn)：在頁面中無形的一條線，常見的有左對(duì)齊、右對(duì)齊、居中對(duì)齊。Ant design建議是文案左對(duì)齊，表單冒號(hào)對(duì)齊，數(shù)字取相同的有效位的右對(duì)齊，其中冒號(hào)對(duì)齊是一種特殊的右對(duì)齊。
踩過的坑兒：
對(duì)于表單的冒號(hào)對(duì)齊，官方解釋是，能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號(hào)的視覺流，就能找到所有填寫項(xiàng)。
目前我的理解是，表單內(nèi)存在輸入前、輸入中、輸入后三種狀態(tài)，輸入前和輸入中，需要了解填寫哪些內(nèi)容，固然是左側(cè)的項(xiàng)目信息重要。而在輸入后，左側(cè)信息變?yōu)榱溯o助，而右側(cè)輸入框中的內(nèi)容變?yōu)榱酥饕词箾]有左側(cè)的項(xiàng)目信息，你也依然能夠輕松理解、校驗(yàn)其內(nèi)容。
圖源自Ant Design Pro（也可對(duì)比上一張圖片，親密性上有很大差異）
含義：頁面上的不同元素之間要有對(duì)比效果，達(dá)到吸引讀者的對(duì)比效果。
作用：不僅可以用來吸引眼球，還可以用來組織信息、清晰層級(jí)、在頁面上指引讀者，制造焦點(diǎn)。
表現(xiàn)：Ant design提供了主次、總分、狀態(tài)這3種關(guān)系的對(duì)比示例。
踩過的坑兒：
主次關(guān)系對(duì)比，比如在頁面操作區(qū)一共有5個(gè)按鈕（可以用一個(gè)更多來隱藏3個(gè)按鈕）。那5個(gè)按鈕，誰是主，誰是次，需要產(chǎn)品經(jīng)理去判斷，去引導(dǎo)去告知用戶這個(gè)頁面的核心功能是什么。
主次關(guān)系不明確的bad case（優(yōu)化方案有多種）：
狀態(tài)對(duì)比，可通過改變顏色、增加輔助形狀等方法來實(shí)現(xiàn)。一開始認(rèn)為由文案來進(jìn)行狀態(tài)區(qū)分即可，顏色是非必需的。最近在學(xué)習(xí)了視覺認(rèn)知的內(nèi)容后，轉(zhuǎn)變觀念，確實(shí)可以運(yùn)用顏色來進(jìn)行輔助；例如貼近生活的紅綠燈、自然災(zāi)害的藍(lán)黃橙紅預(yù)警，都能夠讓用戶更好區(qū)分信息。
圖源自Ant Design Pro。
含義：設(shè)計(jì)的某些方面需要在整個(gè)作品中重復(fù)。重復(fù)元素可以是一種粗字體、一條粗線、某個(gè)項(xiàng)目符號(hào)、顏色、圖片、設(shè)計(jì)要素、某種格式、空間關(guān)系等。
作用：增加條理性，統(tǒng)一性，并增強(qiáng)視覺效果。
表現(xiàn)：大于1次、1個(gè)以上元素的多次出現(xiàn)；最常見、易被感知的是首頁的介紹區(qū)。
圖來自Ant Design Landing模板
踩過的坑兒：
初期在首頁中原本預(yù)留了功能介紹的區(qū)域（如上圖），因?yàn)橐黄谥挥幸粋€(gè)大功能，就被砍掉了。在合適的時(shí)間做合適的展示就好。
目前的設(shè)計(jì)中的重復(fù)元素是頁面的頂部格式，每個(gè)二級(jí)頁面統(tǒng)一使用了色塊和二級(jí)主菜單的文案為頂部?jī)?nèi)容區(qū)，打造了系統(tǒng)的統(tǒng)一性。
除了上文出現(xiàn)的4個(gè)基本原則，Ant design的設(shè)計(jì)語言中提到了6組進(jìn)階原則，分別是直截了當(dāng)、足不出戶、簡(jiǎn)化交互、提供邀請(qǐng)、巧用過渡、即時(shí)反應(yīng)。
結(jié)合目前的經(jīng)驗(yàn)，運(yùn)用較多的是這3組原則——直截了當(dāng)、提供邀請(qǐng)、即時(shí)反應(yīng)。
1）直截了當(dāng)
即簡(jiǎn)潔明了，不僅僅適用于原型設(shè)計(jì)，也是適用于文案的設(shè)計(jì)、異常信息的提示等。
B端距離用戶近，如果設(shè)計(jì)不貼合業(yè)務(wù)，文案又難以理解，那么等待你的很可能是用戶的狂轟亂炸，不斷有人詢問這操作是啥意思，這功能咋用。
最近在琢磨公司內(nèi)部用戶行為分析的平臺(tái)，作為一個(gè)產(chǎn)品看不懂另一個(gè)產(chǎn)品的用戶手冊(cè)o(╥﹏╥)o。
2）提供邀請(qǐng)
官方解釋是醬紫的，【邀請(qǐng)就是引導(dǎo)用戶進(jìn)入下一個(gè)交互層次的提醒和暗示，通常包括意符（eg：實(shí)時(shí)的提示信息）和可供性，以表明在下一個(gè)界面可以做什么】。
提供邀請(qǐng)，體現(xiàn)在交互之前給出反饋，解決易發(fā)現(xiàn)性問題。
圖源自中國(guó)大學(xué)MOOC網(wǎng)頁端
動(dòng)態(tài)邀請(qǐng)常見的是懸停（hover）邀請(qǐng)。如上圖，從左至右依次命名為A、B、C。
A是默認(rèn)展示效果，B是鼠標(biāo)hover效果；對(duì)比A，B有了陰影效果和右上角的更多按鈕。當(dāng)點(diǎn)擊B圖中更多按鈕后，出現(xiàn)的是C圖，告知我們可以在這里查看課程介紹和退出課程。當(dāng)你對(duì)老師的講課風(fēng)格不中意，學(xué)習(xí)精力分配不過來之時(shí)，就可以來嘗試著退出課程咯。
3）即時(shí)反應(yīng)
即在交互之后立即給出反饋。反饋過多對(duì)用戶是打擾，沒有反饋，則確定性較低，對(duì)用戶是困擾。
舉個(gè)例子：
友人發(fā)來一張有趣的圖片，你想要保存；點(diǎn)擊下載之后，系統(tǒng)剛好彈出一個(gè)toast提示【已保存到系統(tǒng)相冊(cè)】，2s后提示消失，即沒有過多打擾，也新增一枚斗圖表情包。假設(shè)沒有這個(gè)toast，強(qiáng)迫癥患者（我）要么是多次下載，要么是從APP跳出進(jìn)入相冊(cè)中進(jìn)行二次確認(rèn)。
即時(shí)無法處理完時(shí)，產(chǎn)品如何解決用戶焦慮？
一期遇到一個(gè)case，流程是用戶導(dǎo)入數(shù)據(jù)，后臺(tái)執(zhí)行校驗(yàn)后執(zhí)行增刪改查操作。
當(dāng)數(shù)據(jù)量級(jí)超過2萬條時(shí)，處理時(shí)長(zhǎng)達(dá)到2min，數(shù)據(jù)量級(jí)較低時(shí)2s可執(zhí)行完畢。盡管在設(shè)計(jì)之初有雙重的提示，操作完成后會(huì)進(jìn)行郵件通知，然而2min內(nèi)用戶如何自處，是刷新當(dāng)前頁面，還是靜靜等待。
Ant Design 將色彩體系解讀成兩個(gè)層面：系統(tǒng)級(jí)色彩體系和產(chǎn)品級(jí)色彩體系。系統(tǒng)級(jí)色彩體系主要包括了基礎(chǔ)色板、中性色板；而產(chǎn)品級(jí)色彩體系則是在具體設(shè)計(jì)過程中，基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色（進(jìn)階之選）。
對(duì)于產(chǎn)品小白，比如我，基礎(chǔ)色板中共有120個(gè)顏色，可以充分滿足日常所需喔，顏色是醬紫滴。
圖源自Ant design（C位是亮點(diǎn)）
產(chǎn)品級(jí)色彩體系第一次實(shí)踐，一開始選取的是沉穩(wěn)大氣的深藍(lán)色為主體色（高大上的說法是品牌色），而后在UI同學(xué)提供首頁的設(shè)計(jì)圖后，采用了與首頁設(shè)計(jì)圖中主色調(diào)一致的顏色作為產(chǎn)品主色，代表著明亮、活力、科技。
圖標(biāo)，官方解釋是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。
我的理解是調(diào)節(jié)枯燥的頁面，圖文結(jié)合。
目前遇到過的坑兒是，Axure中有好幾套的圖標(biāo)庫，每次都反復(fù)在幾個(gè)圖標(biāo)庫中尋找更合適的icon，時(shí)間上存在浪費(fèi)。圖標(biāo)存在的意義是在于對(duì)系統(tǒng)有效，提醒自己切勿舍本逐末。可以先研究透一套icon，再進(jìn)行拓展升級(jí)打怪。
我的進(jìn)化史是這樣的，一開始原型上除了圖，無任何說明，文字說明依靠PRD；而后發(fā)現(xiàn)評(píng)審時(shí)大家更（只）喜歡看大原型，第二階段原型上增加說明，并且是需說明之處的臨近位置（頁面顯示有點(diǎn)吃藕）；第三階段，在原型的底部固定區(qū)域，固定顏色標(biāo)注關(guān)鍵頁面說明。
第三階段目前已固定，既可以提示關(guān)鍵信息，也可以提前整理PRD思路。
一個(gè)組件，可套用模板組件，也可手工畫。個(gè)人建議，初期參照模板自己畫，可以更快熟悉標(biāo)準(zhǔn)、規(guī)范，鍛煉扎實(shí)的基本功；后期套用模板，高效、高質(zhì)量的完成原型設(shè)計(jì)。
畫圖是個(gè)很耗時(shí)的工作，誰畫誰知道，特別是有強(qiáng)迫癥的同學(xué)。
組件是產(chǎn)品傳達(dá)的基礎(chǔ)，組件承載的信息，才是核心。表格很容易畫出來，重要的是表格里展示哪些信息，又不展示哪些內(nèi)容。
在產(chǎn)品的培訓(xùn)課中，當(dāng)時(shí)屬于初學(xué)階段，畫出的是低保真，已是滿足；在工作中開始畫原型時(shí)，看著低保真就覺得有些簡(jiǎn)陋了。所以，現(xiàn)在產(chǎn)出的原型大多為中保真，并且在逐漸接近高保真，頁面的顏值有時(shí)候也是實(shí)力。
在沒有UI同學(xué)的參與時(shí)，個(gè)人建議是由產(chǎn)品經(jīng)理完成中保真頁面的原型產(chǎn)出，借由較好的原型demo，以無形的壓力督促前端同學(xué)，一起給產(chǎn)品打造個(gè)漂亮的面子。
有UI同學(xué)可合作時(shí)，產(chǎn)品經(jīng)理按照業(yè)務(wù)邏輯、設(shè)計(jì)基本原則、中性色板提供原型，由UI進(jìn)行逼格提升，各自安好~
產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)尚淺，還請(qǐng)各位看官不吝拍磚。
共勉。
參考：
1. Ant design設(shè)計(jì)語言 https://ant.design/docs/spec/introduce-cn
2.《寫給大家看的設(shè)計(jì)書.第4版》
本文由 @涼涼Lxy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
Pxmu.js是一個(gè)專門為移動(dòng)設(shè)備Web打造的消息提示框插件，無需任何依賴額外依賴,即可運(yùn)行。由于全局使用flex布局，因此具備良好的兼容性，PC端也可以無縫運(yùn)行。專注于打造提示組件，所以其能力要相對(duì)于其它的框架內(nèi)組件稍強(qiáng)一些，具備精美的樣式以及可以自定義動(dòng)畫、字體、顏色等！
https://github.com/shiyueGG/pxmu
Pxmu有常用的 toast、diaglog、success 、loading、copy 等。下面就簡(jiǎn)單說明下使用方式
<script type="text/javascript" src="pxmu.min.js"></script>
使用方法：
pxmu.toast({})
pxmu.toast('內(nèi)容')參數(shù)可選：
{
msg: '操作成功', //內(nèi)容 不能為空
time: 2500, //停留時(shí)間 默認(rèn)2500毫秒
bg: 'rgba(0, 0, 0, 0.86)', //背景顏色 默認(rèn)黑色
color: '#fff', //文字顏色 默認(rèn)白色
location: 'bottom',//居中center 頂部top 底部bottom默認(rèn)
}使用方法：
pxmu.diaglog({})//結(jié)果返回promise
pxmu.diaglog('內(nèi)容')由于參數(shù)過多這里不便于展示，如圖片不清晰可以查看官方文檔：
使用方法：
pxmu.loading({})
pxmu.loading('正在加載。。。')參數(shù)可選：
{
msg: '正在加載', //loading信息 為空時(shí)不顯示文本
time: 2500, //停留時(shí)間
bg: 'rgba(0, 0, 0, 0.65)', //背景色
color: '#fff', //文字顏色
animation: 'fade', //動(dòng)畫名 詳見動(dòng)畫文檔
close: true, // 自動(dòng)關(guān)閉 為false時(shí)可在業(yè)務(wù)完成后調(diào)用 pxmu.closeload();手動(dòng)關(guān)閉
inscroll: false, //模態(tài) 不可點(diǎn)擊和滾動(dòng)
inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定義遮罩層顏色 為空不顯示遮罩層
}可手動(dòng)關(guān)閉：
pxmu.closeload(100);//延時(shí)100毫秒關(guān)閉 默認(rèn)0使用方法：
pxmu.success({})
pxmu.success('加載完成')參數(shù)可選：
{
msg: '加載完成', //loading信息 為空時(shí)不顯示文本
time: 2500, //停留時(shí)間
bg: 'rgba(0, 0, 0, 0.65)', //背景色
color: '#fff', //文字顏色
animation: 'fade', //動(dòng)畫名 詳見動(dòng)畫文檔
close: true, // 自動(dòng)關(guān)閉 為false時(shí)可在業(yè)務(wù)完成后調(diào)用 pxmu.closeload();手動(dòng)關(guān)閉
inscroll: false, //模態(tài) 不可點(diǎn)擊和滾動(dòng)
inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定義遮罩層顏色 為空不顯示遮罩層
}也可手動(dòng)關(guān)閉：
pxmu.closeload(100);//延時(shí)100毫秒關(guān)閉 默認(rèn)0Fail對(duì)標(biāo)Success
pxmu.fail({});
pxmu.fail('加載超時(shí)');參數(shù)可選：
{
msg: '加載超時(shí)', //loading信息 為空時(shí)不顯示文本
time: 2500, //停留時(shí)間
bg: 'rgba(0, 0, 0, 0.65)', //背景色
color: '#fff', //文字顏色
animation: 'fade', //動(dòng)畫名 詳見動(dòng)畫文檔
close: true, // 自動(dòng)關(guān)閉 為false時(shí)可在業(yè)務(wù)完成后調(diào)用 pxmu.closeload();手動(dòng)關(guān)閉
inscroll: false, //模態(tài) 不可點(diǎn)擊和滾動(dòng)
inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定義遮罩層顏色 為空不顯示遮罩層
}手動(dòng)關(guān)閉：
pxmu.closeload(100);//延時(shí)100毫秒關(guān)閉 默認(rèn)0快速復(fù)制一段文本，或復(fù)制指定dom下的文本內(nèi)容
使用方法：
pxmu.copy({})<div data-pxmu-copy-text="復(fù)制的內(nèi)容">點(diǎn)我復(fù)制</div>pxmu.copy({
el: '#test' //復(fù)制id為test下的內(nèi)容，
});
//或者
pxmu.copy({
el: '.test' //復(fù)制class為test下的內(nèi)容，
});快速回到頁面頂部（帶動(dòng)畫）
使用方法：
pxmu.totop()// 全局重疊設(shè)置
pxmu.overlap({
loading : true,//是否不重疊彈出層 默認(rèn)true不重疊。為false時(shí)會(huì)重疊消息層
toast : true,//是否不重疊彈出層 默認(rèn)true不重疊。為false時(shí)會(huì)重疊消息層
});pxmu是開發(fā)中常用的一個(gè)小插件，在某些項(xiàng)目中非常實(shí)用，特別是針對(duì)一些小頁面小應(yīng)用的場(chǎng)景，當(dāng)然在大型應(yīng)用中也可以使用。總體來說使用感受不錯(cuò)，樣式也非常符合現(xiàn)代頁面的審美，兼容性強(qiáng)，自定義能力強(qiáng)，同時(shí)還具備動(dòng)畫設(shè)計(jì)，是非常不錯(cuò)的一個(gè)小插件，推薦給部分需要的人！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
