UI设计 课件 项目6-网店 UI 设计.pptx

项目6-网店UI设计《UI界面》

在此处输入所学内容思维导图

学科育人互联网设计趋势和用户需求的变化非常迅速,早期这些设计风格可能会持续几年,但现在几乎每年都被替换或升级。字体混搭设计是流行趋势,即使对于最简单的版式布局,使用两种不同的字体设计也可以更好地建立层次结构并创造视觉趣味。字体混搭设计不仅是字重和色彩的搭配,还包含了衬线体和非衬线体、斜体、艺术字体等不同字体的组合。可以在一个句子中甚至只是一个标题中混合使用不同的字体,从而让内容获得更多的关注。与时俱进是UI设计的主要特征,善于透过现象抓住主要矛盾去分析问题、解决问题,才能立足当前,洞察未来。

学习目标知识目标了解网店UI设计的基本内容。掌握网店UI设计应遵循的原则。熟悉海报的摆放位置及海报设计的层次。理解海报设计中文字的作用。技能目标能够搜集并参考其他海报独立制作店铺专题海报。能够熟练运用各种功能,对海报中的字体进行变换设计。素养目标培养自学能力,具备与时俱进的创新能力。

学习任务学习情景6.2店铺专题海报设计学习情景6.1网店UI设计基本元素

6.1.1关于网店设计网店的设计可以让店铺具有信任感,消费者只能通过网店中的文字和图片了解店铺和产品,设计出色的网店能够提升买家的信任度。网店设计有以下5个要点。1.准确定位定位店铺的消费人群、消费市场是网店设计的大前提。只有对网店进行准确定位后才能有的放矢,设计出合适的店铺效果。2.选择合适的风格在对网店进行设计之前,需要确定网店的设计和表现风格,通过网店的设计风格烘托店铺的特色,突出店铺的活动、商品信息。3.店铺风格统一网店设计中风格不搭是大忌,除了需要考虑整体的色调及各版块之间的协调外,还要注意突出主次关系,为了提升店铺销量而对网店进行设计,所以突出商品的表现才是重点。学习情景6.1网店UI设计基本元素

4.合理使用图片在网店设计过程中,要充分考虑到消费者的网速,尽量不要使用过多的图片,过多、过大的图片往往会使访问速度变慢,影响消费者的购物体验,从而降低用户体验。5.对商品进行合理的分类对商品进行分类是为了方便消费者快速找到其所需要的商品,过多的商品分类无法做到让消费者一目了然,而且会影响浏览速度。

6.1.2网店设计遵循的原则1.功能性原则网店的设计首先应该满足客户的实际需求,即传递商品信息,用户能够通过网店快捷地获取想要的商品信息。如果不能做到这一点,网店的建立是没有意义的,也无法生存下去。因此,在进行网店设计时,形式应该服务于功能,做到形式与内容相统一。2.可视性原则可视性是信息本身的重要特征,也是提高网店易用性的因素之一。(1)整洁简单的形式。(2)可以阅读的文字。(3)合理的色彩搭配。(4)清楚的视觉流程。理论上讲,视觉的感知过程包括三个连续的阶段。①第一阶段为视觉第一印象,依靠视觉冲击力较强的元素获得。②第二阶段为对视觉信息进行全面的理解和接受。③第三阶段为留下印象和记忆。

3.一致性原则网店视觉风格一致性原则包含三层意义:第一层是内容与形式的统一;第二层是整体形象的统一;第三层是各层级页面的统一。(1)内容与形式的统一。(2)整体形象的统一。(3)各层级页面的统一。

课堂案例6-1制作水果网店广告【案例要求】本案例制作的水果网店广告效果如图6-1所示。【案例分析】网店设计中的海报信息要与网店的风格一致,海报信息要符合网店定位,图片尽可能与网店的产品一致。通过设计符合店铺形象的海报提升网店的品牌形象。本案例的制作应遵循功能性原则、可视性原则、一致性原则。

【实施步骤】步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图6-2所示。选择“渐变工具”选项,设置“渐变颜色”从RGB(231,120,5)到RGB(255,199,102)。单击“线性渐变”按钮,在画布中拖动鼠标填充渐变颜色,效果如图6-3所示。

步骤2添加素材“01”。将素材“01”拖入画布,单击“添加图层蒙版”按钮,为该图层添加图层蒙版。使用不同透明度的“画笔工具”在画布中进行涂抹,用画笔涂抹后的效果如图6-4所示。

步骤3添加文字。选择“横排文字工具”选项,在画布中输入文字,“字符”面板的参数设置如图6-5所示,添加文字后的效果如图6-6所示。

步骤4添加矩形背景。选择“矩形工具”选项,绘制矩形并进行颜色填充,效果如图6-7所示。

步骤5添加文字。选择“横排文字工具”选项,在矩形中输入文字,“字符”面板的参数设置如图6-8所示,添加文字后的效果如图6-9所示。

步骤6添加素材“02”。将素材“02”拖入画布,效果如图6-10所