我在公司郵箱里共享給雅楠吞加、立基一個文件《西柚設(shè)計規(guī)范Sketch》，里面是sketch文件撕捍。我大概講一講迈嘹，以后我們線框圖設(shè)計與ui設(shè)計需要遵循的點削彬。
微信公眾號
一般的功能類的app，按照設(shè)計規(guī)范中的來秀仲。特別是cell融痛、popover等常用組件的設(shè)計。
PM與UI先概覽一遍vux
APP設(shè)計
設(shè)計規(guī)范中包括iOS神僵、Android雁刷。目前的情況，我們只按照iOS來設(shè)計一套保礼。實際上沛励，安卓和iOS在設(shè)計上，是存在設(shè)計規(guī)范上的差異的炮障，特別是APP的header部分目派，返回鍵、title的位置等胁赢。我們以怎樣的方式企蹭，可以花盡量少的時間，在做出的效果圖上表現(xiàn)出差異智末，讓開發(fā)理解谅摄？希望各位想一下這個問題，微信私我系馆。
后臺管理系統(tǒng)設(shè)計
后臺管理系統(tǒng)設(shè)計前送漠，PM必須與客戶確定好使用框架，一般的客戶也不會有意見由蘑。
我們一般使用的是vue的element-ui框架螺男。
pm在設(shè)計線框圖時棒厘，必須參考element-ui；
其他可供參考的框架
ant-design
semantic-ui
pc網(wǎng)站設(shè)計
企業(yè)官網(wǎng)設(shè)計下隧，建議pm設(shè)計線框圖前，先去找參考網(wǎng)站（直接百度“網(wǎng)站模版
”谓媒、“企業(yè)官網(wǎng)模板”）淆院，讓客戶看看喜歡哪種。
pc網(wǎng)站設(shè)計句惯，同樣可以遵循element-ui土辩、ant-design、semantic-ui
線框圖設(shè)計經(jīng)驗之談：
-
盡可能輕量級操作
較輕的設(shè)計
-
少用彈窗（modal）
elementui中叫message box和dialog抢野，semantic-ui和ant-design中叫modal了
少用彈窗 避免自己設(shè)計組件
一些組件拷淘，如tab、table指孤、menu等启涯，在ui上不需要重新設(shè)計，節(jié)省時間恃轩。
另一些組件结洼，如transfer，這樣的組件pm一定要知道叉跛。推薦各位pm好好研究下element-ui和ant-design松忍，里面都是前人的結(jié)晶，學(xué)會學(xué)習(xí)筷厘、消化鸣峭，只有學(xué)會了別人的，我們才能創(chuàng)新酥艳。
我們?nèi)狈Φ?/h4>
- 組件狀態(tài)摊溶。當(dāng)表單不可提交時（如登錄界面未填寫手機號），按鈕應(yīng)為灰色玖雁。而現(xiàn)在大部分的效果圖并沒有體現(xiàn)更扁。
- 最最基本的交互。如發(fā)送驗證碼按鈕赫冬，線框圖不會做點擊后的倒計時浓镜，以至于UI也沒有倒計時。這說明我們PM與UI經(jīng)驗缺失劲厌，也沒有把角色徹底代入膛薛。
- 不會去模仿，不會精益求精补鼻。類似的界面哄啄，不參考大公司的設(shè)計雅任，而是自己想當(dāng)然做一個交差。如律超人的一個身份證認(rèn)證頁面咨跌。和大家強調(diào)一點沪么，別人已經(jīng)做了的東西，我們再做锌半，如果做的比別人差禽车，那不能說明我們智力不夠，只能說明我們真的不用心刊殉！如果你不去模仿殉摔、不去思考，那么你做的東西永遠(yuǎn)都不會進(jìn)步记焊。
- UI與PM的關(guān)系
- 我們目前的情況類似于PM給線框圖逸月，UI出了效果圖，PM隨便看一看遍膜，就丟給開發(fā)碗硬。最后開發(fā)出的東西問題一堆。
- 共同為產(chǎn)品的最終效果負(fù)責(zé)捌归。UI發(fā)現(xiàn)線框圖問題肛响，要與PM進(jìn)行溝通，想一想這個圖合不合理惜索。PM發(fā)現(xiàn)效果圖做的粗糙簡單特笋，也要和UI進(jìn)行溝通，反思是不是自己的線框圖沒有表達(dá)清楚巾兆。溝通一定是雙向的猎物，這個過程是互相提高、互相學(xué)習(xí)的過程角塑。
- 一個人的力量是單薄的蔫磨。所以，線框圖出好后圃伶，全體項目組開會堤如。UI圖出好后，PM要自己先審查窒朋，再開會搀罢。
一些學(xué)習(xí)課程
- 我們目前的情況類似于PM給線框圖逸月，UI出了效果圖，PM隨便看一看遍膜，就丟給開發(fā)碗硬。最后開發(fā)出的東西問題一堆。
- 共同為產(chǎn)品的最終效果負(fù)責(zé)捌归。UI發(fā)現(xiàn)線框圖問題肛响，要與PM進(jìn)行溝通，想一想這個圖合不合理惜索。PM發(fā)現(xiàn)效果圖做的粗糙簡單特笋，也要和UI進(jìn)行溝通，反思是不是自己的線框圖沒有表達(dá)清楚巾兆。溝通一定是雙向的猎物，這個過程是互相提高、互相學(xué)習(xí)的過程角塑。
- 一個人的力量是單薄的蔫磨。所以，線框圖出好后圃伶，全體項目組開會堤如。UI圖出好后，PM要自己先審查窒朋，再開會搀罢。
安排在周六下午進(jìn)行播放
