网页临摹

时间:2024-03-15 20:11:25
    2019年3月30       星期六              邱锡纶

我们学习UI设计前的作业是对规范的网页进行了一段时后的临摹,以下便是我从临摹网页后,网上查找信息,老师讲解等方面对UI设计一些认知。

  1. 设计网页首先需要了解网页设计的基本规范,建议多去看看设计类的网站,比如UI中国、站酷等等一系列的网站,里面会有一些技术贴,或者百度搜索之类的,先去了解规范。
    ui设计是适用于WEB产品线的人机交互界面的设计,贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范,以达到提升用户体验,控制产品设计质量,提高设计效率的目的。
  2. 视觉规范的对象是谁;
    适合界面设计师,用户体验设计师,前台设计工程师,发布支持人员,运营编辑人员等。
  3. 规范能使页面相同属性单元识别统一,防止混乱,甚至出现严重错误,避免用户在浏览时理解困难;节约资源。
  4. 除活动推广等个性页面外,设计其它页面使用规范标准能极大的减少设计时间,达到节约资源的目的。
  5. 重复利用:
  6. 相同属性单元,页面新建时可以执行此标准重复使用,减少无关信息,就是减少对主体信息传达干扰,利于阅读与信息传递。
  7. 其实临摹的时候要想出感觉还得类似风格的图片
    下面来看看我临摹的网页吧!
  8. 首先把要临摹的网页素材图片导进ps,解锁图层后点击图像中的图像大小,网页临摹网页临摹记住网页的大小后创建一个同样大小的图层,按照网页的背景颜色添色,然后拉好蚂蚁线测量网页中的个块区的大小后再去做出来,注意间距问题,尽量放大去测量他的像素, 以免做好之后网页出现跳动。网页临摹
  9. 找出网页中的字体,中文网站一般默认就是宋体跟微软雅黑,因为你的电脑上面的字体别的电脑上面不一定有,而宋体、微软雅黑基本上是 Windows 自带字体,如果考虑到用户体验,所以尽量避免用一些系统本身没有的字体。
    英文网站一律是 Verdana。
    • 中易宋体-又叫简体中文:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
    • 微软雅黑:
    微软雅黑是美国微软公司委托中国北大方正电子有限公司设计的一款全面支持ClearType技术的字体。Monotype公司负责字体Hinting工作。它属于OpenType类型,文件名是MSYH.TTF,字体设计上属于无衬线字体和黑体。这种字体每个字的造价成本在100美元左右。该字体家族还包括“微软雅黑Bold”(粗体),文件名为MSYHBD.TTF。这个粗体不是单纯的将普通字符加粗,而是在具体笔画上分别进行处理,因此是独立的一个字体。微软雅黑随简体中文版Windows Vista一起发布,是Windows Vista默认字体。另外,Microsoft Office 2007简体中文版也附带这个字体。当使用于不能显示中文字型名称的系统时,会显示为Microsoft YaHei
    • 华文细黑:是一款非功能强大的电脑黑汉字输入工具。华文细黑字体整个字形比起其他字体线条更加纤细,也非常大方,是用户在广告设计、报刊美工制作时使用
    以上便是网页中最常见的字体的详细介绍了。
  10. 尽量去找网页中运用的图片等等,是在找不到的那就从网页素材上抠吧,(我平时是这样),抠图也要仔细的抠,以免后期出现跳动的情况。网页临摹
  11. 将抠好的图片对着原网页位置一一摆放好之后,在选取字体对应地打上去,排好,如若不出现跳动就大功告成啦(或者微微的有一些跳动也正常)网页临摹
  12. 最后讲一下,临摹网页不单单是表面上的临摹,更要向他学习,比如这个图片为什么要放这里、为什么要这样放、这样放的好处、这个为什么要用这个字体等等,而不是一昧的临摹而不思考,择其善者而从之,其不善者而改之。日积月累,就能展现出自己的才华