使用PhotoShop或Firework设计页面,然后用ImageReady或Firework切割页面的图片后直接生成HTML网页,再把相应的内容填入网页中,最后加上各种JavaScript和表单效果完成网页的制作。而这一系列的工作全部由“网页美工”一人完成。这种做法从1997年网页制作热潮延续至今,面对日新月异的网络,各种网络技术的突起,陈旧的做法已不能适应当前的形势,网站建设发展至今已经不再是一人包揽的局面,网站建设正朝着项目化、流程化的方向科学发展。在一个完整的网站建设团队中,每角色都有明确的分工。从网站项目成立,到网站结构策划,网站结构设计,网站页面布局,页面脚本处理等一系列与美术设计无关的任务全部从“网页美工”身上解放开,在这个流程中原来 “网页美工”的角色被更专业化的定义,赋予一个更贴切的名称——网页美术设计师。从而,网页美术设计师能充分地发挥特长,在平面美术设计的基础上进行专业的网页美术设计。很多人常常把平面美术设计与网页美术设计混淆,以为平面美术设计师一定会做网页美术设计,实际上,网页与印刷品有很多差别,因为它提供了更多功能,这一点与软件比较类似。网页设计近似于软件设计,网页美术设计则相当于软件UI设计,更准确的说,网页美术设计是图形化人机介面(Graphics User Interface,或简称GUI)的一种。因此,网页美术设计师也可称为——网页UI设计师。

部分网页设计原则 
规划目录结构时应当遵循的几个原则: 
1.不要将所有文件都存放在根目录下; 
2.按栏目内容分别建立子目录; 
3.在每个主目录下都建立独立的images目录; 
4.目录的层次不要太深; 
5.切忌使用中文目录; 
6.不要使用过长的目录; 
7.尽量使用意义明确的目录。

除创意之外,在网站设计时还需要考虑以下基本原则: 
1.网页内容要便于阅读; 
2.站点内容要精、专和及时更新; 
3.注重色彩搭配; 
4.考虑带宽; 
5.要适当考虑不同游览器、不同分辨率的情况; 
6.提供交互性; 
7.简单即为美。

网页设计的通用规则: 
1.网站的设计目的决定设计方案; 
2.浏览者的需求第一位; 
3.页面的有效性; 
4.页面布局的保持统一性; 
5.使用无语意标签DIV和适当的结构来设计网页; 
6.谨慎使用图片; 
7.减少Java Applet和其他多媒体的使用

在页面进入草图设计后,需要确认很多细节,我在检查页面设计稿是否可以进入切页面和制作时候,遵循以下原则
1 界面统一性。一样的功能在一样的地方。一个页面无非由一些基本模块组成,每一种基本模块在UI设计上,不同的应用实例是否元素一致,包括字型、字号、颜色、按钮颜色、按钮形状、按钮功能、提示文字、行距等。说来容易,执行的时候很多设计师会有一些随意的想法,可能某些想法是挺好的,但是我们必须执行统一的界面标准。设想windows里面,如果不同的窗口关闭按钮在不同的地方,并且颜色还不一样,这会是什么样混乱的状况。

2 留住用户而不是骚扰用户。引导,不是强制。国内的网站对于骗取点击量是很有心得,记得有一段时间sina的新闻标题都是危言耸听,结果点进去一看不是那么回事情,这样的用户体验就不好了。除了进行角色用户模型分析用户关心的内容以外,我这次也采用了比较极端的做法来避免用户对于点击的处理。弹出新页面恐怕也是中国互联网特有的现象,向前向后这些按钮在中国用处不大。好在我们有各类多选项卡的浏览器,不怕,但是,良好的连续性体验被破坏了。你愿意看一本每页印两个字的书吗?用户感兴趣才看某个网页,我们要做得是引导用户看到他想看的内容,既不能硬塞,也不能骗取。

3 安静的浏览器。曾几何时,我在看网站的时候,是选择不显示所有图片的,这样的干净在某些领头羊的带领下,已经不复存在了。诸多的flash闪烁,一碰就显示的层,甚至还有不请自来的视频,这些都不是NI自然界面理论能允许的,我们要的是一个给用户安安静静阅读内容参加互动的网页。根据NI第二原则:网站设计要满足人们的需要,包括个人化的和社会化的。用户到网站上来有个人的需求,尽可能简洁的版式,容易阅读的内容,方便的导航,这些对于用户来说都是容易接受的,从web2.0风潮开始,有一点至少是好的,就是国内网站也开始注意这些方面,而不是将内容一股脑的堆砌在那里。如果还是没有很明白的话,大家可以发现绝大多数国外网站在点击一个链接的时候,是在本页打开,而国内的网站基本上都是新开页面。

以上这些归纳为设计时候要注意的要点如下: 
1 每一个模块的边框,标题,按钮(如果有的话),“更多”“详细”功能,这些元素的颜色、大小尺寸、位置、对齐方式、字体、字号、行距等都要一致。 
2 整个页面的基调颜色要一致,不同的模块除非有很大意义的差别,颜色应该一致。 
3 可以点击的文字、按钮、图片,鼠标应该呈现出统一的可点击样式,区别于不可点击区域。 
4 呈现的日期格式的统一,比如都用长日期格式“2007-2-1”或者都用短日期格式“07-3-1”,样式不同的日期呈现方式还不如不呈现。 
5 可以点击的图片最好用不同的样式显示,比如鼠标滑过时候的辉亮效果。因为网页会大量的使用图片做修饰效果,区分可以点击和不可以点击的图片是值得去做的。 
6 有没有不必要的弹出窗口。(从netscape开始这个设计真的很糟糕,ie也完全继承了,解决的办法是用js方式来呈现弹出窗口。) 
7 文字描述。很多时候会忽略这个问题,在我们做demo的这个项目中有很多的文字描述,各有其用,统一描述的方式,统一人称,统一语气,都是给用户带来良好体验的途径。 
8 图片风格。我不是这方面的专家,从欣赏的角度,图片应该是尽可能的统一风格,素描样式和点阵样式共存总不是太好的事情。 
9 图标。很多时候会用图标来描述功能,漂亮的带点阴影和倒影的图标是非常抢眼的,使用图标的话要注意风格、透视角度、分辨率、辨识度的一致性。

本文来自公众号:优逸客UI设计实训
大连中钰睿泓与你分享精品文章

平面设计和网页设计是一个工种吗相关推荐

  1. 平面设计和网页设计的规则_从平面设计到用户界面:这是您应该知道的最重要的规则

    平面设计和网页设计的规则 Maybe you're here because you think UI Design is the future of Graphic Design. Maybe wh ...

  2. 平面设计和网页设计的区别

    平面设计和网页设计的区别 学习平面设计培训和网页设计培训的学员都比较多,大家都是看好了这两个专业的就业前景和薪资待遇.不过,依然有很多学员在面对这两个专业的时候不知道如何选择,如何区别,下面我们就来具 ...

  3. freeCodeCamp-响应式网页设计-制作一个致敬页

    制作一个致敬页 目标: 在 CodePen.io 上创建一个与这个功能类似的 app:https://codepen.io/freeCodeCamp/full/zNqgVx. 在满足以下 需求 并能通 ...

  4. 计算机在网站设计中的应用,网页设计中平面设计的应用及其作用

    摘要:目前中国经济不断发展, 计算机如今也发展成为了人们生活水平所离不开的一项应用.在这种情况下平面设计出现在了人们的视野中.网页设计在现代生活水平的影响下产生.它既是现代生活中平面设计的延伸和发展, ...

  5. 网页设计和平面设计的区别在哪里

      传统的平面设计侧重于页面构图.布局布局.空间表现等,而网页设计也适用于这些元素.网页设计与传统的平面设计在视觉传达上很相似,但在技术上有很大的不同.网页设计的一个重要特点是静态与动态的结合,在平面 ...

  6. 网页设计如何更具有亮点?千万别忽略平面设计

    经常有朋友认为我们这种又做平面设计,又做网页设计的团队真是太难得了.但今合优网络想说:其实在我们眼里,网页设计.平面设计其实都是一 样的,只是用处不同而已.一个再好的网页设计也是从一个平面设计出手的, ...

  7. 网页设计和平面设计的区别在哪儿?

    为什么都是设计,但是为什么它们确实不同的叫法呢?那它们的技术有什么不同吗? 这些问题都是行外以及没有基础的学员的迷惑的地方.那么在没有进一步学习这些之前,小编先给大家普及一下网页和平面的相关知识. 首 ...

  8. html网页加入一个按钮,在html网页设计中,一个“登录”按钮怎么编写代码?

    html网页设计:一个简单的登录界面代码! 在html网页设计中,一个"登录"按钮怎么编写代码? 列如所给图片的"登录"按钮怎么用html代码显示出来,要求能够 ...

  9. PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...

最新文章

  1. Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源 方法
  2. 技术19期:1分钟入门数据治理!必看!【技术篇】
  3. 实战:基于 CNN 的验证码破解项目(附代码)
  4. liferay requestrequest和actionRequest用法
  5. Kubernetes 诞生七年,凭什么成为主流?
  6. CodeForces - 801C Voltage Keepsake 二分
  7. Maven 项目添加jetty 插件
  8. mysql 为什么mysql设置了密码之后,本地还可以直接访问,不需要输入密码就可以登录数据库了?
  9. VScode配置go空格缩进替代tab
  10. Java邮件发送(使用javaMail包)
  11. Word打开目录导航、多页视图显示文章的方法
  12. 整型数字的英文表达和中文表达
  13. 柱状图怎么设置xy轴_经验-Origin做柱状图常遇问题-柱状图X坐标轴如何设置—小技巧...
  14. 一般银行数据结构讲解
  15. CC2640R2F学习笔记(2)——OLED屏使用
  16. 离职前需要注意的事情?
  17. unshift() :将一个或多个元素添加到数组的开头
  18. Java入门基础知识点一
  19. python爬网页、爬到前几个就不动了_python scrapy 爬取起点小说,爬虫停止在第四页不动了...
  20. 5-35V输入升压8-100V各种升压解决方案 大功率300W

热门文章

  1. 2021年中国生鲜电商行业发展回顾及未来行业发展策略分析:要增强生鲜农产品的稳定性、降低运营成本[图]
  2. 12. Vuepress2.x 隐藏指定页的 sidebar
  3. C++ 代码模拟登录淘宝、天猫、支付宝等电商网站的实现
  4. 买了个新键盘,雷柏V56,也没有个说明书,只好自己写个了。
  5. 2022 软件测试选择题【太原理工大学】
  6. python使用GDAL/OGR/OSR时设置GDAL_DATA环境变量
  7. 鼠标键盘失灵对策(Windows8.1)
  8. DTU应用场景,你了解多少?
  9. 关于Wechat 的充值
  10. 鸿蒙系统与nblot,华为鸿蒙操作系统,和想象中的不一样