飞龙博客

深入经藏 智慧如海

UE策划 UI设计 FE前端开发 BE后端开发 合作流程工艺标准草案

feilong.org 修订于2017-06-07 10:38:51 860

飞龙写了这个 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接口。

更新网址:http://feilong.org/ue-ui-fe-be-craft-process-draft
最初发布:20170125 09:09:47 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 前端开发

新作:

旧文:

飞龙前端QQ群