前端与视觉设计需要交流的几点问题

  在实际工作中,可能会由于设计师的经验不足,以及对前端技术的不了解,而产出一些对前端来说,无法实现,或者实现成本很高的视觉设计图。在这里罗列一下我所了解的各种视觉“不靠谱”的问题。

问题1:网页背景不能平铺,循环

问题描述:设计师设计了一个固定宽度的网页,比如960px,那么当显示器的显示区域大于960的时候,960之外的部分就需要有背景铺上去。如果设计的时候,内容部分的边界结束的太突然,比如下图,硬生生的裁掉,就会造成内容和背景无法很好的融合在一起,视觉上太过突兀,生硬。

可能造成的结果:视觉体验差,很有可能返工。

解决建议:在设计网页的时候,充分考虑到宽屏显示器下的显示效果,让内容部分和背景部分可以融为一体,背景可以是纯色,渐变色,也可以是一块可以循环平铺的图片。

图例:

问题2:按照平面设计的思路设计网页

问题描述:网页设计不同于平面设计,平面设计更多体现在视觉上,网页设计还需要考虑用户体验和交互,在设计上需要体现出哪些是内容,哪些仅仅是修饰。如果按照平面设计的思路去设计,设计出的页面制作成为HTML的时候,需要切成大张大张的图片,这样就直接造成了网页体积过大,加载时间变长,图片的大小,在前端的优化过程中是重中之重。比如图例中的这张设计图,实现方式就只能是切成一张或者两张图片。

可能造成的结果:制作,优化难度增加。

解决建议:有些的确需要设计感很强的页面不容易避免这个问题,只能说尽量避免,视觉设计的逻辑尽量符合前端开发的逻辑。

图例:

问题3:使用非系统字体

问题描述:系统字体,就是你的操作系统里自带的字体。非系统字体顾名思义,就是你另外下载安装的字体。这一类字体在网页上,用户是看不到的。如果想让用户看到效果,就必须额外的挂一个字体文件让用户去下载,增加了资源加载的时间。

可能造成的结果:中文字体文件体积较大,下载慢,用户体验差。

解决建议:设计师尽量不采用非系统字体,允许浏览器根据不同的操作系统选用不同字体。前端尽可能使用大多数操作系统都存在的字体(比如Arial)作为通用字体放在后面,将一些个别操作系统拥有的优雅字体(比如Helvetica )放在前面。

(顺带安利一下组内同学作品 : fontspider)

图例:

问题4:组件不可复用

问题描述:在网页设计中,会有一些组件素重复出现在不同的页面,或者同一页面不同的位置,比如一些按钮,弹窗,图标等等。拿图例里面的搜索框举例子,我首页写完一个搜索框,到子页面遇到另一个搜索框,他俩的样式结构完全不一样,那么我又要重新写一个,等遇到第三个搜索框,我又要重写一个,不能复用,很大程度的增加了开发时间和成本。

可能造成的结果:每处组件,模块,都要单独去写,前端增加无意义的工作量。

解决建议:建议整个项目的按钮,弹窗,弹框,图标,列表,导航,分页,表单等组件和模块统一风格,让用户体验更好,同时也便于前端进行开发,

图例:

问题5:容器大小不能自适应内容

问题描述:设计师设计一个按钮或者一个文字区域的时候,可能会考虑不到如果按钮里的文字变多了怎么办,文本区域里的文本变多了怎么办,设计出的元素不能扩展,延伸,大小是固定死的。当遇到内容超出容器的时候,就会很麻烦。

可能造成的结果:实际开发过程中实现困难或者无法实现,

解决建议:除了可以确认内容不会超出的元素外,不做图例中这种设计,保证元素可以根据内容的多少伸缩,而不影响视觉效果。

图例:

问题6:视觉设计图不给标注

问题描述:设计师做完设计图之后,最好可以在psd里顺手或者利用插件写上标注(例如Size Marks 是用在Photoshop的一个自动标注尺寸脚本),不然前端需要自行去量宽度距离,取色,很大程度的增加了工作量。而且得出的结果未必和视觉所想实现的一样

可能造成的结果:增加前端工作量,有返工的风险。

解决建议:视觉设计图上标示出宽高,间距,颜色值,透明度,圆角弧度等等所有细节。方便前端理解视觉想要实现的效果。比如图例中那样。

图例:

问题7:psd图层结构不清晰

问题描述:设计师在工作的时候没有整理图层的习惯,给出的PSD图层混乱。

可能造成的结果:增加开发成本,不必要的浪费开发时间。

解决建议:图层清晰分类,分文件夹。前端还原页面的时候要频繁的去隐藏不同的图层来观察效果或切割图片,所以一个好的图层结构会为开发节省很多的时间.

图例:(这是两种图层结构的对比)

问题8:交互不完整,视觉设计遗漏

问题描述:设计师没有充分考虑到所有的交互效果。

可能造成的结果:开发完成之后追加交互,不必要的延长开发周期,有几率造成不能按时上线。

解决建议:交互设计要考虑到每个按钮,链接的各种状态,每个组件的各种表现,考虑到页面没有数据的时候如何表现,数据过多的时候又如何表现等等。

无图例

以上问题都是平时在与视觉设计的合作中可能会遇到的,除此之外,还有一些细节,比如要杜绝口头修改某处的现象,必须给出过审的效果图。还有像webfont必须给出svg格式的icon,方便我们去转换字体格式.

尽量说服设计师和产品接受优雅降级,接受低版本的浏览器不支持圆角,不支持渐变等等css3属性。移动端方面也尽量不要设计过多的复杂交互,比如完全照抄原生效果,移动端的拖动排列等,实现起来成本过高,用户体验也差。这些通常在提需求的时候去说服产品和设计师,所以在有条件的情况下,前端成员一定要参与需求和设计稿的确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信终端开发团队的专栏

Android微信上的SVG

资源矢量化 “清晰”和“体积”的矛盾与麻烦 面对android的各种dpi某事,想要所有设备上的图片都能有最清晰的效果,就意味着每种dpi模式都必须提供一份对应...

2715
来自专栏HT

HT全矢量化的图形组件设计

HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: 矢量可无级缩放,界面不失真不模糊 描述矢量的文本内容远比图片小得多 目...

1859
来自专栏IT技术精选文摘

微信读书排版引擎自动化测试

在微信读书 App [1] 中,排版引擎负责把书源文件解析、渲染至屏幕,是最常用、最复杂的组件之一。而开发同学对排版引擎的日常修改,可能影响了海量书籍的排版结果...

1002
来自专栏程序员互动联盟

【专业技术】chromium GPU 硬件加速合成

前言: 在传统浏览器网页渲染实现方案中,网页完全依赖CPU的能力去渲染网页(软件渲染简介:网页生成一张bitmap丢给CPU去绘制),然而一台机器的CPU不仅...

2226
来自专栏腾讯移动品质中心TMQ的专栏

小说书架内容质量自动化测试

一.项目背景 小说书架的产品思路是:在手机QQ浏览器这个平台上,给用户提供一个小说书架这样的小说阅读入口。通过这个入口阅读到的小说,是后台将从其它网页中抽取到...

1875
来自专栏hightopo

矢量化的HTML5拓扑图形组件设计

852
来自专栏Crossin的编程教室

一道大数据习题

现在到处都说“大数据”,我也跟着标题党一下。今天要说的这个,还算不上大数据,只能说跟以前的习题相比,数据量略大了一点。 前阵子我们做了个抓取热映电影的程序。有个...

2686
来自专栏刘笑江的专栏

微信读书排版引擎自动化测试

本文介绍了为解决测试的难题,如何逐步将人工测试步骤自动化,最终构建了一套微信读书排版引擎自动化测试流程。

2157
来自专栏MixLab科技+设计实验室

UI2Code 之 利用 antd.sketchapp 生成训练数据

封面由ARKie智能设计助手生成 Ant Design 最近发布了 antd.sketchapp : 使用 skpm 构建工具,基于 React Sketch....

3087
来自专栏UML

什么是实体关系图(ERD)?

实体 - 关系(ER)图(也称为ERD或ER模型)是Peter最初在1976年提出的经典且流行的概念数据模型。它是系统内不同实体的视觉表示以及它们如何相互关联。...

1445

扫码关注云+社区