飞龙博客

feilong.org

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 于广州

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

所在分类: 前端开发

新作:

旧文:

AI音乐 blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 人工智能 前端开发 博客 名企名网 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认