兰州：软件开发前端提高用户体验的 *** 有哪些？

本质上来说，用户体验并不能被设计，能被设计的只能是功能、流程与用户界面。在用户使用的过程中，感受到了主观的使用体验，可以看成是用户体验的表现层面。但是在实践中，很多人往往把用户体验狭隘地理解成了UI，即界面的设计，这样的看法有失偏颇。用户体验应该是一种整体的感受，界面设计虽然是用户能最直接感知到的部分，但毕竟不是全部，这样的理解缩小了用户主观感受的范围。本次我会从用户分析，设计风格，网页布局，交互体验，SEO等5个方面讲解前端应该如何提升用户体验。

一、用户分析

要实现用户体验的优化，前提之一是必须对自己的客户群体了如指掌。我们可以从客户的组织归属（企业用户、个人用户、 *** 用户等）和内在属性（性别、年龄、行业、地区、收入等）入手，分析用户群体的属性，分析他们的需求和行为特征，这样才能有效的实现网站用户体验优化的目的。

二、设计风格

符合目标客户的审美习惯，并具有一定的引导性。以行业定位，应该从立体感、金属感、层次感出发，使网站能够突出钢铁行业的特色。

1、网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。

2、页面色彩：与品牌整体形象相统一，主色调+辅助色不能多种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。

3、页面大小：自适应可以根据浏览器显示情况自动调整页面宽度，但是因为用户水平方向的聚焦范围有限，所以当页面过宽时，用户的浏览和操作成本会增加;而当页面过窄时(如用户同时开启两个浏览器对比查看商品搜索结果)，自适应则会导致布局变形

4、视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。

三、网页布局

1、布局思路：层次清楚，突出主题。理清网页内容及栏目结构的脉络，使链接结构、导航线路层次清晰；内容与布局要突出主题。布局应当让页面各元素之间的关系和重要性一目了然。给用户不乱的感官体验。

2、页面适配：兼容不同尺寸的设备

3、页面工整：使页面工整，信息呈现有序，便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。

4、文本超长：文本超长时做可以根据情况选择省略号处理或添加收起和展开功能

5、文章的段落结构：这个我们也要重视，清晰的段落结构可以帮助用户更好、更方便、更舒适的阅读，并把重要的内容换成不同的颜色加以突出。

6、文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。

7、保持视觉简洁：不要让布局本身成为突出的UI元素，减少内容和展现上的嵌套层级，减少控件不同尺寸的数量。

8、合理利用页面空间：保持页面的视觉平衡。避免拥挤和对空间的浪费。

9、空数据：数据为空时，添加缺省页或提示

11、辅助导航（面包屑）：提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。例如“首页>普钢频道>螺纹钢>全国价格汇总”

12、登录登出：登录入口和退出登录出口要在全网站的每一个网页都可以找到，让用户进入任一网页都可以登录和退出。

13、图片加载失败：图片添加alt属性

14、有效的投诉途径：为客户提供投诉和反馈途径，接受批评并改正才能让网站长远发展。

15、新闻资讯：交易资讯感官设计的时候通常要求要站在用户的角度来思考客户最喜欢什么、最关注什么。这就涉及网站产品的展示方式。首先不同客户他的需求点是不相同的，比如采购用户关注的价格行情、库存等：但是部分比较急需的用户先关注地区，再关注价格和库存，再关注里面的规格、材质、重量、厂家等。而有些用户会更先关注的是品种、图片、厂家。希望这些参数的展示能突出点。

四、交互体验

1、图片显示：比例协调、不变形，图片清晰。（添加图片裁剪，图片添加object-fit:cover;属性）

2、图标使用：简洁、明了、易懂、准确，与页面整体风格统一。

3、表单填写：尽量采用下拉选择，需填写部分注明要填写内容，必填字段添加*号提示，并对特殊字段做出限制，（如手机号、邮箱等，避免无效信息）。

4、表单提交：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。提交成功后，应显示感谢提示。

5、按钮设置：对于交互性的按钮必须清新突出，以确保用户可以清楚的点击。

6、点击区域：所有可点击的按钮或图标都需要扩大点击区域

7、手机号或银行卡号分段显示

8、网站logo添加跳转首页功能

9、页面变化添加合理的过渡和动画

10、预留线索：比如页面底部图片只显示一半，暗示用户可以上拉加载更多

11、新窗口打开：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。

12、显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。第四章、浏览体验给用户浏览上的体验，强调吸引性。

13、导航的链接：必须全是有效链接，无论是一般导航还是有下拉菜单的导航，里面的所有文字都应该是有效的链接。