大家好，我是黑马老师今天呢，我们继续来学习网页UI设计，从入门到实战的第三章的最后一个实例网站页面UI的设计，那么在PPT当中，我们展示的这个页面呢，就是我们娇诗黛碧络奇这款电商啊，化妆品电商网站的首页的设计啊，我们今天的主要就是用photoshop来实现，这个页面是从无到有啊，怎样实现的以及这个页面的设计思路，好了，我们再正式设计之前呢，我们先来看一下我们学员的设计作品，通过分析学员的设计作品，我们的举一反三，查缺补漏，然后呢，会让同学们对整个网页页面的布局排版有一个比较清晰的明确的分析啊，或者说是一个提升，我们先来看下我们学员的设计作品，我们全屏看一下，右键百分之百，那么当前页面呢，就是我们学员的设计作品啊，这个作品给我的第一感觉，我们首先从形，色质三方面进行了分析啊，挑出它的不足，然后呢，我们对其进行改版，优化设计，那么这个页面实际上啊网站技巧，最显眼，最突出，最醒目的，莫过于这个人物的模特，他是整个页面当中位于黄金比例分割线的，模特啊，
但是呢，这个人物的比例在整个网页的，版面当中显得过于突兀过的突出网站技巧，因为什么他给人一种顶天立地的感觉感觉呢，这个页面或者说是这个版面没有框住这个人物仿佛呢，他要顶出我们的屏幕啊，也就说他的视觉比例过大，所以说呢，给人的感觉就是一种胀版的感觉，这个呢，后期我们将进行优化，那么第二个问题呢，我们再来看就是整个页面缺乏颜色，这个页面，它实际上的还是以这种黑白为主，大面积的留白虽然说呢，让页面看起来很通透，很透彻对吧，很透气，但是呢，你看化妆品这款网站啊，并且呢，他给人的感觉呢，是时尚的，清新的，热情的，奔放的，阳光的，那么你运用了这些动感的渐变的颜色，彩条为什么不将它凸显的稍微明显一些啊，给人的视觉感受呢，是要让这个网站啊，有一种运动的阳光的，一些律动的，有韵律的这些气息，对吧，你看这个啊，这个渐变的彩条就像是空气啊，悦动的空气一样，从整个版面啊，左右贯穿啊，但是呢位置稍微偏下了一些，这也是一个问题，第三个问题呢，就是我们这个网站，他没有遵循我们网页设计的基本排版规则，就是没有网格系统，对其进行支撑页面的位置过于随意，
第四个问题呢，就是logo和我们的一级导航位置过近，给人的感觉呢，就是显得整个版面左上角这个区域啊，尤其是logo和一级导航之间，他的这个位置呢，显得过于局促，给人的空间感呢，特别的狭隘啊，这是他的第四个问题，我们再来找他的第五个问题，再往下呢，我们看完上部，我们再来看下步网页的下部呢，实际上，这个实付包邮送双重保障，联系我们，这属于他的网站footer的这个部分啊，这个底部的文字垫色不是特别的明显，实付包邮实际上是选中的状态但是呢，给人的感觉呢，不够突出啊，这是一个小的细节的问题，我们再来找找第六个问题啊，第六个问题呢，我们再回头看下版面当中大面积留白的这个部分的logo，这个logo大家看一下它，没有实现文字或者说是图形之间的对齐关系，你看这个这行文字啊，这行文字和顶部的LOGO整体，是左对齐对吧，现在是左对齐但是呢，这个新品上市的button和这个文字和LOGO呢，又不是居中对齐，那这个部分局部这个区块里的内容的对齐关系就是不明确的啊，这也是一个细节上的一个瑕疵，那么他的第七个问题呢，就是整个画面元素布局呢，较为分散视觉重点不是特别明显啊，且被弱化了，对吧，好我们根据分析同学页面当中存在的这些问题呢，
我们进行改版优化设计，那么下节课我们正式进行，版面的，解构和重构的这样的一个过程，那么第一小节啊就是本小节，我们就是对这个同学的设计作品做一个全面的优缺点分析啊，他的优点就在于什么，整个页面的设计风格是没有问题的啊，这种大面积的留白能够凸显出这个化妆品品牌的高端的高雅这样一个气质和定位，这个是没问题的，只不过呢，通过分析，我们得出了整个页面当中一些细节和视觉规律和形式美法则以及版面布局上的一些问题啊，下节课，我们进行改版优化设计，本节课就分析到这里，谢谢大家
- 最新
- 最热
只看作者