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

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

问题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 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

浅谈反馈式按钮的设计与实现

原创声明 ? 前言 前一段时间在网上闲逛看一些交互案例,偶然的看到几篇关于反馈式交互设计的文章,其中强调了反馈式设计的分类、重要性和机制,让我觉得在目前所负责的...

1867
来自专栏腾讯大数据的专栏

腾讯大数据之计算新贵Spark

前言 Spark作为Apache顶级的开源项目,项目主页见http://spark.apache.org。在迭代计算,交互式查询计算以及批量流计算方面都...

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

谈设计与技术,以WEB布局为例

本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

2837
来自专栏Java技术栈

Java 面试就业指导,100 % 提高面试成功率!

想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些东西呢?

1273
来自专栏码洞

深度解析某头条的一道面试题

请问,如果实时展现热门文章,比如近8小时点击量最大的文章前100名。 如果是你来开发这个功能,你怎么做?

662
来自专栏腾讯大讲堂的专栏

【大系统小做】——实战篇

昨天我们分享了【海量服务之道】中【大系统小做】的基本理论,今天我们将结合QQ相册系统设计实战,让大家由浅入深的感受这一理论如何指导互联网后台系统的建设。 QQ相...

22510
来自专栏Java技术分享

谈谈MVC模式

1. 如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论。 MVC模式就是架构模式的一...

1887
来自专栏大数据文摘

LinkedIn前数据专家解读日志与实时流处理

1073
来自专栏Java学习网

优秀程序员的 18 大法则

优秀程序员的 18 大法则 经过多年的积累,我发现,下面这些基本的指导法则,可以帮助我成为一个更加高效的程序员。 程序设计法则,与设计和工程的原理密切相关。下面...

2225
来自专栏轮子工厂

Java必看图书籍一网打尽

对于程序员来说,个人感觉最佳学习方式是看书,视频花费时间太长,而博客则不够系统。初学相关领域最好的方式就是找到一本经典的好书,然后啃完它。 本贴子收集了几本Ja...

857

扫码关注云+社区