移动商务视觉设计2 微网站视觉设计 微网站视觉设计-页面.pptVIP

移动商务视觉设计 江苏经贸职业技术学院 1 微网站页面设计 2 微网站海报设计 目录 CONTENTS 3 微网站主图及主图视频 项目六 综合设计 任务二 微网站视觉设计 微网站页面设计 微网站标准如下：　 （1）布局采用DIV+CSS技术，简洁大方，具有良好可拓展性。 （2）应用HTML5技术提升浏览体验与交互性能。图片可以点击放大查看、滑动浏览、长按保存。 （3）内容力求短小精悍，有吸引力。 （4）手机端网站，移动互联网发展趋势，更方便用户浏览。 微网站页面设计 移动端的用户往往拥有着更加明确的目的性，通常他们希望能够明确、轻松地从移动端页面获得他们想要的信息和内容。无论是浏览新闻，网上购物，还是订阅信息，移动端网页应当为他们提供尽可能无缝的用户体验。 微网站页面设计 只需要点击一两次就可以获得更多信息 有小屏幕设置 有PC端的选项设置 容易找到和使用搜索栏 页面简洁、清晰、高效 点击呼叫业务 滚动的只在一个方向（上下或左右） 拥有少字段的滚动表单 大手指的友好设置 便于保存信息 微网站页面设计 桌面端网页在移动端设备上首要的障碍就是导航的使用。看看下面Domino批萨的案例，它的桌面端和移动端网页的对比就相当明显，移动端页面经过优化之后的体验就完全不同。简单说来，优化后的移动端页面更加干净，有着更容易导航的CTA按钮（行为引导按钮） CTA即Call to Action，又叫行为引导按钮，是一个网站的核心组成元素之一。大部分站长做网站不仅仅是为了给访客提供一个学习、交流、互动的平台，更重要的是将访客转化为用户，达成某项他们想要的行为，比如注册、登录、订阅、预约、购买等。好的行为引导按钮在这一点上很有帮助，它有助于提高用户的转化率，增加产品的销量。然而，现实生活中不少网站上的行为引导按钮在设计上都有一定的问题，如CTA位置放置错误或色彩对比不够突出等，无法发挥它应有的作用，减慢访客的操作速度甚至会带来最糟糕的结果：用户根本不会点击。总之，行为引导按钮在网站上扮演着十分重要的作用，一个好的行为引导按钮可以给网站带来不少益处。 1、针对移动端进行全面优化 微网站页面设计 仅使用垂直滚动。不要使用水平滚动，让用户只需单方向滚动就能浏览主要的内容。尽量通过CSS来控制页面宽度、位置和图片的缩放。 将你的内容置于首位，避免其他的元素让用户分心。 控制分栏的数目，尽量使用一栏单列式的布局。 不要将移动端页面和桌面端页面混用。 优化移动端页面的几个实用技巧： 微网站页面设计 用户经常会忽略移动端页面上的一些元素，所以尽量使用CTA按钮，确保用户不会错过它们。和桌面端的情况不同，你需要将CTA按钮置于主要、显眼的位置，确保他们容易发现，容易点击触发。 CTA按钮应该易于点击，并且不会同页面中其他的元素形成干扰或者干涉。 2、让行为召唤按钮在移动端上友好易用 微网站页面设计 详细而全面的菜单设计在桌面端上能够良好运行，但是当它出现在移动端上的时候，菜单就显得过长了，要在其中找到想要的内容就相当难了。所以，你需要考虑使用精简的菜单，仅保留最重要的、必须的条目。根据以往的经验，尽量不要让菜单超过7个条目。 同时你还要保持你的菜单目录足够的易用： 它应当基于根据重要性和价值来进行排序它不应当包含用户不理解的术语，菜单要使用通俗易懂的表述方式。 3、让菜单简短且易用 微网站页面设计 如果在你的网站中，搜索是主要的功能，那么你在做移动端页面优化的时候应该突出这一功能，因为它是高转化率的功能，确保它足够显眼是很有必要的。当用户想要获取特定功能的时候，倾向于使用搜索功能来实现，所以，搜索应当是用户一打开页面就能看到的控件。通常应当让搜索框置于页面顶部，以文本输入框的形式存在。 4、让搜索框显眼 微网站页面设计 桌面端网页出现在移动端设备上，最令人沮丧的地方就是它需要缩放。不放大页面，不仅难于阅读，而且用户容易错过重要的细节，而放大来浏览，需要来回拖放。而针对移动端优化后的页面则不存在这个问题。图片、字体和页面宽度都正好合适，用户能够完整地获取信息，确保了最基本的可用性和易用性。 5、让网站正好合适，无需缩放 微网站页面设计 你的网站中所有的图片、视频和UI元素都是你的产品的一部分，当你针对移动端优化页面的时候，它们都是重要的组成部分，它们素质的优劣直接影响到用户的观感。 6、使用高素质的素材 微网站页面设计 7、设计便于触摸交互的页面 如果你的页面是针对移动端设计的，那么网页中按钮的尺寸应当和手指的大小相匹配。MIT的Touch Lab 通过研究发现，指面的触摸尺寸平均大小为 10-14mm，而指尖的平均尺寸是8-10mm，也就是说10mmx10mm的控件尺寸设计是比较合理的大小。 另外一个需要考虑的是就是可触摸控件指尖的距离。如果两个按钮比较