请留下您的手机号
我们即刻安排课程老师为您回电!
您好
请留下您的联系方式,我们将主动给您回电!
第一时间为您安排就近试听!
培训首页 > 网页设计师培训头条 > 提高用户体验的七个设计技巧
网页设计培训综合班美工

提高用户体验的七个设计技巧

南京天琥教育 / 发表时间:2017-08-25 595人浏览 平面设计师培训   南京平面设计师培训

  好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者 大化的搭配,往往是需要进行调整和优化才行。

  当你的内容需要迁移到移动端上的时候,要怎么让内容和用户体验无缝地配合起来呢?设计师要基于小屏幕的交互来思考整个设计和优化的策略,而今天的文章,就为你分享7个设计技巧。

  1、每屏完成一项任务

  


  虽然手机的屏幕越来越大,但是当你的内容在移动端设备上呈现的时候,依然要保 证每屏只执行一个特定的任务,不要堆积太多的、跨流程的内容。

  虽然在移动端设备上,用户已经习惯了执行多任务,看着球赛聊着天,这样的案例不胜枚举。用户的习惯和多样的应用场景使得移动端界面必须保持内容和界面与内容的简单直观,这样用户在繁复的操作中,不至于迷失或者感到混乱。

  那么,怎样保 证这种清晰的体验呢?所有的文本、插画、视频、ui元素都集中帮助用户执行特定的任务,搭配在一起让用户作出抉择:你想执行这个操作吗?

  2、精简并优化导航体系

  


  当用户打开你的网站或者app的时候,他们通常倾向于执行特定的操作,访问特定的页面,或者你希望他们点击特定的按钮,所有的这些操作能否实现,大多是要基于导航模式的设计。

  虽然在桌面端网页上,一个可用性较强的导航能够承载多个层级、十几个甚至20多个不同的导航条目,但是在移动端上,屏幕限制和时间限制往往让用户来不及也不愿意去浏览那么多类目。

  导航需要精简优化。如果你不确定从什么地方开始,那么你应该针对你的移动端版本进行用户分析。用户访问得多的四个类目是什么?这些页面是否符合主要用户群体的期望?你希望用户更多点击哪些内容?当你搞清楚整个导航的关键元素之后,就可以有针对性地做优化和调整了。

  3、基于搜索引擎的设计模式

  


  “不要总是玩弄算法,创造用户想看的内容才是正途。”

  无论你的网站的pv是100还是10万,你都得尽量让你的移动端上的内容更易于被搜索到。无论是关键词、图片还是内容都应该能够被优化到易于被搜索引擎抓取到。但是关键的地方并不在算法,而是要创建用户想要获取的优质内容。

  从桌面端迁移到移动端,内容的形态也需要跟随着平台的变化而进行适当的优化和修改。比如大量的大尺寸的图片需要跟着移动端的需求而进行优化,比如选择尺寸更合理的图片,放弃不匹配移动端需求的js动效等。

  4、更大的字体

  


  在小屏幕上显示的内容,应该适当地增加大小,让用户能够更轻松地阅读和消化。通常,在移动端上,每行容纳的英文字符的尺寸在30~40个为合理,而这个数量基本上是桌面端的一半左右。

  在移动端上排版设计要注意的东西还有很多,但是总体上,让字体适当的增大一些,能让整体的阅读体验有所提升。

  5、意义清晰的微文案

  


  微文案在界面中几乎无处不在,比如按钮中的文本,它们对于整体的体验有着不小的影响。设计的微文案能够让整个界面的个性、设计感有明显提升,它们是信息呈现的重要途径,将设计转化微可供理解的内容。

  在移动端设计上,微文案的显示要足够清晰,并且始终是围绕着帮助用户要做什么,来打磨其中的表述方式。

  在移动端上支付是非常常见的使用场景,而支付时常受到各种问题的影响,比如横跨多屏的表单,这个时候,引导性较强的微文案能够更好的帮助用户一次填写好正确的内容。

  6、移除不必要的特 效

  


  在桌面端网页上,旋转动效和视差滚动常常会让网页看起来非常不错,但是在移动端上,情况则完全不同。内容在迁移到移动端的网页和app上的时候,效率和可用性始终是第 一需求。无缝的加载和即点即用的交互是用户的首要需求,剥离花哨和无用的动效,会让用户感觉更好。

  另外,悬停动效也要去掉。移动端上手指触摸是主要的交互手段,悬停动效是毫无意义的存在。作为设计师,你需要围绕着点击和滑动这两种交互来构建移动端体验,因为只有它们才能给用户正确的反馈。

  7、尺寸适配

  


  在移动端设备上打开一个网页,结果加载的是桌面端的版本,仅仅只是尺寸缩小了,没有什么比这个更令人尴尬的了。移动端的网页和app应该让用户更易于访问,对于整体尺寸和排版布局的设计,应该更有针对性。

  有的时候,这种内容的适配只需要针对部分内容,重新排布。

  在桌面端横向排布的控件,可以垂直排列在移动端页面上;

  考虑到移动端设备上用户的浏览方式,图片 好被切割为方形,或者和手机屏幕比例相近的形状;

  文本和微文案应该设计的更加简明直观;

  导航可以不用沿用桌面端的导航模式,可以采用侧边栏或者底部导航等更适合移动端的方式;

  行为召唤元素可以做的更大,甚至扩展到整屏;

  所有的按钮或者可点击的元素都按照用户的手持方式,放到手指易于触发的位置。

  你准备好重新思考你的网站上内容的正确呈现方式了吗?当你的内容从桌面端迁移到移动端的时候,响应式的设计也许无法真正与之匹配,你需要对内容细节、交互模式进行深入的调整,作出和用户需求真正匹配的设计。

  设计过程中重要的部分其实是你对于信息和数据的分析,你的用户到底需要什么,他们想要的东西往往能够从数据中洞悉到。




文中图片素材来源网络,如有侵权请联系删除
相关课程
网页设计培训综合班美工

网页设计培训综合班美工

南京网页设计培训,课程由专门课程研发团队自主研发,将前沿的设计融入课程中。
课程级别初级 培训周期3个月
培训时间全日制
咨询电话 400-656-3385
课程说明
课程级别 初级
培训周期 3个月
上课时间 全日制
上课地址 秦淮区新街口国际贸易中心10楼C5(地铁新街口站24号出口)
课程简介

  

南京网页设计培训

  南京网页设计培训,随着电子商务大潮的风生水起,网页的美工人员也随之成为紧俏和热门职业。网页的美工和平面设计美工不同,除 了要有的平面设计能力和美术功底外,还需要熟悉和网页的技术特点,还需要使用网页设计的各种工具和手段将平面静态的设计稿变成的网络页面。网页美 工是门面设计师,需要的素质和技术往往比平面设计更加复合。

  ☆★南京网页设计培训

  1.N多互联网热门职位等你来选:平面设计师、包装设计师、VI设计师、广告设计师、视觉设计师、网页设计师、美工……

  2.毕业薪水:城市月薪轻易过4500元,5年后,大部分设计师能达到8000元,二、三线城市薪资达到5000元。

  ☆★掌握网页设计三大核心

  1.熟练运用PS、AI、CDR、ID四大平面软件

  2.掌握常规设计技能,打下扎实基础

  3.能够制作动态flash、制作各类高端页面

南京网页设计培训

色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。

  •       蓝色是网站的基本款
    • 蓝色在网页设计中属于不会出错的颜色,当你举棋不定时,可以尝试一下蓝色,也许能顺利化解你的问题。搜狐快站也正是以蓝色为色彩基调。
    了解详情
  • 单色系网页



    • 单色系页面似乎不存在配色的问题。然而要打造一个层次多样、色彩统一的网页,设计师可以以一个基本色调来扩张色相、饱和度和亮度等条件。



    了解详情

☆★南京网页设计培训目标

  系统学习使用网页设计三剑客 Dreamweaver、Flash、Fireworks三大软件以及平面软件Photoshop的基本操作。针对网页设计的从业人员,培训网页设计 中实战的软件和技术以及相关知识、流程,掌握专业设计师的常用工具软件.学习完毕后,能胜任基本网页美工的工作要求。能独立建设中小企业(套用修改模板)

  ☆★南京网页设计培训课程大纲

  1、互联网基本应用知识、网页概念

  2、网页美工版面设计和图片加工:Photoshop

  3、网页排版制作多媒体三剑客:Dreamweaver、Flash、Fireworks

  4、 HTML网页排版语言,Css 样式表的格式排版

  5、的综合规划制作、上传发布、维护更新

  6、织梦CMS建站(基础操作),实战中小企业静态构建

南京网页设计培训

  练习要求教学内容

  Photoshop基础工具:色彩模式、照片校色选框工具与套索工;明暗调整、色彩调整;画笔工具、路径工具;蒙板、通道;文字编辑工具、文字

  Photoshop网页应用: 图层混合模式; 图层样式;滤镜;3D模型的贴图功能; 二维动画;网页版面设计和切片输出

  Dreamweaver建立站点:认识Html等网页属性名称;掌握站点制作和操作要领;了解网页制作的流程; 熟悉表格布局;站点的建立;文字图片加入的操作; 表格及其用表格进行布局;制作超级链接;了解的链接属性;多媒体在网页中应用; 掌握通过CSS去控制整个网页的布局和样式

Flash网页动画设计:熟悉和了解Flash制作动画的原理;制作和绘制图形;了解元件动画制作; 补间动画制作,导入图片;flas:逐帧动画,形状补间动画;制作网页banner;熟悉Flash三种动画效果制作;掌握和区别元件动画中图形和影片剪辑的动画效果;熟悉按钮的制作和动画效果;导入声音、图片等多媒体发布

  Fireworks网页应用: Fireworks针对网页中位图和矢量图处理;了解PS与Fireworks操作上的差别;综合练习,充分利用已掌握的前台设计技术和后台语法; fireworks的基本操作; 位图和矢量图的处理; 添加滤镜和效果;制作动画; SE0基础及其推广基础,网页综合练习

  Web基础:web标准; 表现层技术;结构标准语言;XHTML的设置和规则; 正确嵌套所有元素; 表现标准语言; css语法

  Div+Css的应用:选择符、伪类及伪对象、选择符优先级设置及区别;css的属性值、默认值和继承值、css控制元素大小;盒模型的概念、元素背景的设置;div+css页面的制作;效果图的规划和切分;规划并建立站点

  SE0引擎优化:初探SE0、引擎工作原理、关键字策略;URL优化、代码优化、图片优化;网页结构、结构、链接策略;服务器的选择、引擎优化误区;引擎优化工具


以上就是网页设计培训课程的全部内容介绍,如需了解更多的网页设计培训班、课程、价格、试听等信息,也可以点击进入 网页设计 相关频道,定制专属课程,开始您的学习之旅。

课程内容以实际授课为准
  • 平面设计师
  • UI设计师
  • 室内设计师
  • 动漫设计师
  • 服装设计师
  • 规划设计师
  • 零基础
  • 有PS基础
  • 有AI基础
  • 有CAD基础
  • 有PR/AE基础
  • 其他软件基础
  • 周末班
  • 全日制白班
  • 随到随学