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

本文為我們介紹了中后臺界面設(shè)計的基本流程，以及其中的注意事項。

拿到PRD的瞬間，你在想什么？

設(shè)計一個產(chǎn)品的前提是要先了解這個產(chǎn)品想要解決的是用戶什么痛點，核心功能是什么，價值點在哪里等等。

整體需求概覽，產(chǎn)品畫布

先整體瀏覽下需求，對需求有個整體的認知，知道大概的框架、功能點是什么。

思維導(dǎo)圖，梳理需求

用白紙或XMIND將功能點梳理出來，最好是按照用一級菜單/二級菜單/三級菜單的模式，把整體的流程，頁面的邏輯都整理出來。

這是一個消化過程，從PRD一堆文字，消化成，自己可以理解圖畫。

這一步當(dāng)中要把邏輯理順，不懂的就問，千萬不要用猜的，猜一猜，無限可能啊。一不小心，就給自己挖坑了。

如果產(chǎn)品是涉及到流程的，那就要把整個流程畫出來。比如要設(shè)計審批系統(tǒng)的中后臺。

如果PM已經(jīng)事先畫好流程圖，可以自己先過一遍，然后用自己的理解再畫一遍，然后對照看理解上有沒有偏差，這樣可以對整個流程流轉(zhuǎn)有更深的理解。

草圖先行，原型跟上

前面兩步完成后，可以說對產(chǎn)品的理解已經(jīng)沒有問題了。現(xiàn)在要把頁面串起來，所以我建議先畫草稿，不用很細致，要大致規(guī)劃板塊。

注意一點，不是所有頁面都需要畫草圖，這樣時間上太長，把主要頁面和流程的草圖畫出來，把前兩步的理解用頁面表現(xiàn)出來，驗證流程上是不是有漏洞。很多時候可能整體流程看起來是閉環(huán)的，等到畫頁面的時候，會發(fā)現(xiàn)有漏洞的地方。

關(guān)于原型的問題，如果是比較大的項目，建議還是先畫原型，因為前期原型交互上修改的次數(shù)會比較多，那么設(shè)計師可以專注在整體頁面流程上的把控，而不把時間放在顏色、icon、插畫等視覺上的修飾。一個大項目前期的討論、評審，修改個5-10次都挺正常的。

每次修改最好都更新下版本號，并在原型里面加個【更新記錄】的頁面，記錄這次更新哪些內(nèi)容。如果是大的更新，或者是功能的改變，最好寫上原因，方便后期可查。因為時間久了，往后翻真的會忘記。比起相信自己的記憶，還是爛筆頭吧。我也碰到幾次這樣的坑，某次開會去掉了某個功能，當(dāng)時覺得不需要。后期又有人提這個需求，追溯到底是誰說不要的，結(jié)果怎么也想不起來。所以要做到記錄可查。

如果產(chǎn)品前期有做競品分析，建議把競品分析的內(nèi)容也寫在原型里面。同時也把產(chǎn)品目標(biāo)，用戶痛點這些都可以寫上去，這樣讓整個原型可以更加完整，也更有份量。后期如果遇到類似的產(chǎn)品要設(shè)計，就可以去回顧下之前做產(chǎn)品的記錄，考查的方向。

做原型時，可以對一些要點，進行補充，比如以下幾點：

1. 新建頁面后，說明是跳轉(zhuǎn)到哪個頁面，不然開發(fā)就只能靠猜

比如新建產(chǎn)品完成后，是到產(chǎn)品列表，還是到產(chǎn)品詳情頁，因為前期沒有說明，開發(fā)就讓頁面跳轉(zhuǎn)到產(chǎn)品列表，但是事實上，是要跳到產(chǎn)品詳情。因為到詳情頁面，可以引導(dǎo)用戶進行下一步操作。如果到列表頁面，其實操作就被中斷了，除非產(chǎn)品的需求是，不斷建產(chǎn)品，但這種情況比較少。

2. 有涉及到狀態(tài)的列表

要在原型旁邊補充說明并列出，所有狀態(tài)。如果狀態(tài)還會對應(yīng)不同的操作，則需要把對應(yīng)關(guān)系都列出來。同時界面中的列表，也需要把狀態(tài)和操作對應(yīng)，不要隨意填寫，以致于開發(fā)看漏或者看錯了，要保持一致，減少錯誤發(fā)生。

3. 列表的排列順序

按什么順序排序，這也是個關(guān)鍵問題，按創(chuàng)建時間、更新時間，產(chǎn)品序號，優(yōu)先級等等，不同的需求會不一樣，所以不要去假設(shè)開發(fā)都知道。

4. 表單校驗

前端校驗，還是后臺校驗？基本上現(xiàn)在都是前端校驗，馬上給用戶反饋，而不是在用戶填完一堆的表單后，告訴用戶哪里出錯了。后臺校驗屬于偏重的交互，容易給用戶產(chǎn)生心理負擔(dān)。

校驗問題，還會涉及到報錯文案。這個建議做個文檔給開發(fā)，特別是剛合作的開發(fā)，也不了解對方的習(xí)慣，這樣減少后期更改文案的時間。也可以做個報錯規(guī)范，這樣后期的報錯就根據(jù)規(guī)范來就可以，不需要每次都來提醒。

5. 輸入框提示文案

之前有人提到這個提示文案是非必要的，因為前面已經(jīng)有說明，當(dāng)前輸入框是要填什么內(nèi)容。

加入提示語后，會讓表單更豐富。而看右邊的表單，空得讓人有點慌……

特殊的字段，會需要特別的文案；比如版本號，業(yè)務(wù)方希望用戶可以遵循某種規(guī)則去新建，則可以提示：請輸入版本號，例：1.0.0。

視覺稿

原型評審沒有問題后，就可以進行視覺的設(shè)計了。

視覺稿上面，也同樣需要一些交互的說明，雖然前期原型上已經(jīng)有標(biāo)注。但是對于開發(fā)來說，他要看著設(shè)計稿，又打開原型對著看，其實也是件挺討厭的事。而且有些交互，是需要界面的，比如下拉菜單樣式、搜索框（涉及模糊查詢）、進度條（失敗和完成）等等。

作者：柒悅Jocelyn

來源：https://www.zcool.com.cn/article/ZOTk3MTMy.html

本文由 @柒悅Jocelyn 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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