UE策划 UI设计 FE前端开发 BE后端开发 合作流程工艺标准草案
feilong.org 修订于2017-01-25 09:09:47 461 次浏览飞龙写了这个 UE策划 UI设计 FE前端开发 PE后端开发 合作流程工艺标准草案，很简单的条条框框，可操作，工艺化，以提高项目组合作效率，减少各种意见摩擦，供给有缘的同业人参考使用。
一、UE策划：侧重点在项目的内容组织的系统化和明晰化。 User Experience / User experience design. UEd UXd
1、注意先考虑具体项目的工作流程清晰化和傻瓜化，然后才考虑美观和个性以及各种酷炫的功能，策划设计稿中，尽量少用图标。
2、必须关注技术实现的时间成本和实现的可能性，对于个性以及各种酷炫部分，必须与 UI 和UX 乃至后端程序员一切协商讨论。
3、尽量把项目的基本流程展示出来，模板功能页基本规划好。
二、UI设计：侧重点在界面的美观和色调的统一和协调。 User Interface Design UId
1 单色（字体颜色 背景色 边框色）的颜色值不要超过5 种，相近颜色尽量统一为相同。
尽量用标准色，不用#fd5f85这种难以记忆和不能简写的色值，更不要对文本设透明度！
尽量用简写色值，比如 把 #ff6699 简写为 #f69。
2 需要的图标自己不要设计和修改形状。直接在这个网上找 www.iconfont.cn
下载需要的尺寸。18px 24px 30px 36px 42px
用这个新浪微博账号登录。 用户名: mm:
3 设计手机端页面效果图时，宽为720 px，高度随意。
4 常用封面图片尺寸比例：
纯广告图2:1，日志图4:3。封面图4:3。文章内插图4:3。用户头像1:1。
具体尺寸参考：
2:1。480:240 640:320 720:360 ....
4:3。120*80 160*120 200*150 240*180 280*210 360*270...
1:1。48:48 60:60 80*80 100:100 120*120 .....
5 视频尺寸16:9，视频封面图也用16:9
常用视频封面图，具体尺寸参考 80*45 160*90 320*180
6 常用字符图标尺寸：
高度px 18+6*(n-1) = 18 24 30 36 42 48
按钮配色尽量扁平化，不要轻易使用渐变色和透明色。
7 常用按钮尺寸：
高度px 20+6*(n-1) = 20 26 32 38 44 50
8 常用输入框、弹出菜单、尺寸：
高度px 20+6*(n-1) = 20 26 32 38 44 50
9 做完压缩到320px宽，另存为web所用格式，导出为jpg高质量。320px宽下的效果图，上面的中文文字不能小于12px，
英文文字不能小于11px。字体尺寸越少越好，常用12 14 16 18。
10 在720px宽度下，裁剪好这些图片：广告图，封面图，文章内的插图，其它装饰图。
透明的用png 格式。 颜色单调的gif。色彩丰富的用 jpg 格式。
11 把psd格式分层的源文件，以及上面的320px宽的jpg效果图，以及切好的各种图，一起移交给前端同事。
三、FE前端开发：侧重点在页面htmlcssjs架构。 front end developer FEd
1、尽量高保真编写代码。对UI设计有意见的地方，先与UI协商讨论。
2、代码尽量简洁，明了，凡是涉及列表项的循环，注意不要有杂乱的代码，以方便后端程序员处理对应的动态数据。
3、所有主要的模板页链接必须打通，除了外部链接和部分功能性质的链接，以达到演示级静态架构。
4、文件夹系统
js/
skin/a_pro.css
skin/iconfont.avg
skin/face.png
server/api.php
ziliao/UE UI资料
index.html
cat.html
detail.html
page.html
5、纯前端的js互动，尽量先为后端程序员写好。
6、设备、系统、浏览器的兼容处理和技术攻关。
7、参与后端BE的技术支撑。
四、BE后端开发：侧重点在动态数据、业务逻辑，服务端api接口，和其它功能。 Backend developer BEd
1、注意页面head区莫留空行空格，以及输出的html源代码是否语法规范。
2、css在前。js放后面。一般采用外联方式调用资源。不要轻易写内嵌style。
3、css文件和图片字符字库，需放一个文件夹下。
4、不到万不得已不擅自修改css。若有修改意见，请与FE协商。
5、动态数据、业务逻辑，服务端api接口。
更新网址：https://feilong.org/ue-ui-fe-be-craft-process-draft
最初发布：20170125 09:09:47 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 前端开发