1如何打造高性能用户体验

1、注意满足用户需求

我们团队经历过的很多项目，在刚刚启动时都面临着一些相似的问题：功能需求列表过于冗长，焦点不明确，难以在项目截止时间之前搞定…客户或需求方通常会对产品功能进行天马行空般的想象，却往往忽视了用户的真正需求。良好的用户体验可以为购物过程带来 更多的乐趣，但绝不能破坏这件事的核心目标。用户希望通过购物类的应用来快速的找到某种商品，并顺利完成购买;他们甚至会忽视那些用于增强体验和乐趣的额 外功能。

2、化用户界面流程和元素

用户不喜欢等待。在Google的用户体验十大内在原则中，时间方面的因素紧随“用户需求”排在第二位。对应用的每一个界面流程及其构成元素的优化，都可以不同程度的降低加载及响应时间。

3、强感知性

在很多情况下，设计师和开发者确实无法控制产品性能：网速也许会很慢，系统后台也许正运行着多任务，某个功能也许需要大量系统资源来支持运算等等。 无论怎样，在延迟发生的时候，我们至少应该让用户感知到应用仍处于运行状态。即使在无法预料的坏状况中，合理的设计方案也可以起到良好沟通作用。

第一步是要识别出哪些功能流程有可能造成延迟，例如那些需要获取后台数据或是执行大量运算的运行过程。接下来，在这些关键流程中添加必要的状态反馈标识，例如loading动画效果，或是一些文案小提示。

4、保持界面元素清晰可见

应该使用颜色和对比度来帮助用户查看和解读你的内容。选择出能够支撑你的程序可用性的主色调、次要色和强调色，确保不同的界面元素间有足够的色彩对比度以使那些视力不佳的用户也能浏览使用你的程序。

5、ui工程技术

将优秀的设计方案通过相应的技术 方法实现出来，也不是一件易事。除了忠实的还原设计方案之外，要使代码同时可以带来高效的性能表现，通常需要专家级别的技 术能力，尤其对于移动应用产品来说，需要相关人员拥有丰富的前后台开发经验，同时对视觉及交互设计等方面具有深刻的理解。

布局、图像、动画的输出和实现方式都会牵扯到功效方面的问题;在选择实现方案时，从一些具体的方面进行考虑，例如：

1)智能化的内容加载：可以在合适的地方使用例如lazy loading这样的方式，首先加载当前可视部分的内容，并通过用户的浏览行为触发其他内容的加载。这种方式可以很有效的提升界面功效，使体验更加流畅。

2)背景图形的加载：背景的实现方式对界面性能的影响也是很关键的;通常情况下，背景图形可以通过整张大图、小图重复平铺或纯样式代码等方式实现。对于不同类型的界面，需要采用最合适的实现方式。

---

2如何打造完美web网站设计布局

1、注意划分布局，网站结构越简单，用户浏览时就越方便

网站各个部分都需要发挥各自的作用。对于用户而言，每个部分都有各自存在的理由，并能得到相应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上，一个页面并不需要太多调用按钮，因此每个内容都应推动到最终“我可以在此实现什么目的”。思考一下，你可以为一个简单的目标构想到的最简单的布局，并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。

2、选择主题颜色，使用有限的色阶和色调以免产生视觉疲劳

选完要使用的一系列字型后，你应开始研究 UI、背景和文本该用什么颜色。关于颜色，我建议在处理常规用户界面是用色及色调需简洁。根据元素功能在设计UI 时保持一致性非常重要。除UI外，插图或图形细节部分只要没有干扰组件功能的话，在用色方面也没什么限制。

3、注意细节，正在进行的游戏项目：细节视图

这条也算是老生常谈了，但并非始终在成品中得到应用。根据项目的概念，“关注点”也会有所不同。

4、提高设计作品清晰度，避免出现像素模糊的现象，尝试正确设置笔触效果和背景之间的对比度或背景颜色

除美学考量之外，有些共同的问题需要予以避免，从而创造出一个干净正确的作品。尝试提高设计清晰度时应注意以下几点：梯度条带、模糊的边缘、字体渲染选项(部分字体取决于字体大小，在特定的渲染模式下查看)以及与背景融合的笔触效果。

以上列出了一些基本注意事项，但实际上需要注意的问题还有很多。务必以整体视角检查设计，看看是不是都非常完美，然后再单独分析每个组件还有什么问题。

5、整理 PSD

如果你通过 Photoshop 进行设计，那么这点至关重要(结合网格使用)。无论项目有多大，有多少设计师参与其中，你都需要保证文件干净。这样就能保证不同部分都能轻松导出，从而提高设计流程的速度，并能处理与其他设计师共享的文件。

6、开发过程中跟进设计

如果您在广告公司中工作，你必须明白，虽然你刚刚完成的一个项目已经投入开发，你不得不参加另一个新项目的设计，这是家常便饭。大家普遍认为 PSD 和样式表提交后就万事大吉了，这是不对的，其实一切还刚刚开始

---

3HTML5移动页面优化技巧

一、技术优化，做好多终端兼容

技术优化主要分为代码优化、目录结构优化和针对搜索引擎的优化三个部分。这一部分的优化工作主要是由网站开发人员测试提出方案完成的，而且有一定的规则，所以相对要简单一些只是时间问题。同时网站的多终端兼容是一切的根基，要知道有人拿着苹果8，有人拿着苹果4，大则1920x1080，小则320×416，因此多终端兼容是十分必要的。

二、交互设计提示

交互设计的目的是使产品让用户能简单使用，在结构设计的基础上，参照目标群体的心理模型和任务达成进行视觉设计。包括色彩、字体、页面等。

三、注重移动页面细节，提高用户体验

网站的每一个方面的细节都需要仔细考虑。有一些元素，比如颜色、形状甚至梯度改变后，在整体上就有可能给浏览者很大的冲击。使用蓝色、绿色、青绿色和银白色，能给人一种平静的氛围。在HTML5移动页面的设计中，使用圆角比使用尖角更能给人一种柔和的、个性化的感受。通过适当的混合颜色、图形、图片，您可以创造出强烈的氛 围和感受，这将对浏览者产生深刻的映像。

四、页面SEO技巧

SEO的基本做法是把页面结构写好，这包括：

1、建立明晰的网站导航和sitemap。网站需要有一个良好的导航，控制根目录和各子目录的关键，建议使用面包屑式的导航，这更容易让用户理解当前所处的位置：网站首页 > 频道 > 当前浏览页面;导航中使用文字链接，不使用复杂的js或者flash。通过sitemap可以帮助网站主了解网站结构，也有利于搜索引擎收录整个站点。

2、优化目录结构和URL。URL尽量短，建议目录层级最多三层，简短易懂，而且每一层级都要有它对应的页面展示以及语义。

3、精确的网页标题(title)。你的标题应该有概括性，能明确告知搜索引擎和用户你的网站大概内容和目的，可以是当前页面标题-所属类型-产品名，例如“云端科技官网-江西领先的互联网+技术解决方案南昌网络公司,电子商务网站建设,网站制作,网站设计,移动APP开发”。

4、针对页面内容补充description和keywords的meta标签。你需要简短总结页面的主要目标，然后补充description，以及根据关键词补充keywords。

5、优化页面的超链接和图片属性。包括优化超链接显示的文本，要具有语义性也要跟超链接的网页具有相关性，注意要补充”title”和”alt”属性。

6、网站内容为王，从搜索引擎的角度分析，更喜欢原创度高的内容，因为千篇一律的人云亦云的资讯，对用户没有价值，因此不断提供的优质原创内容才能真正提高网站曝光权重。