网站设计与手机应用设计的区别

前言：想要写出一篇引人入胜的文章？我们特意为您整理了网站设计与手机应用设计的区别范文，希望能给你带来灵感和参考，敬请阅读。

与其他领域的设计师相比，网页设计师需要与掌握这些技术的人充分合作。手机应用设计作为第三方智能手机应用程序的图形用户界面设计和交互设计，以移动互联网为平台，逐渐把用户带入一个习惯使手机客户端上网的时期。在应用设计中美需要由功能来传递，每个界面元素都必须专注于当下用户所需。目前，各种手机应用层出不穷，其数目可称之为铺天盖地。在appstore或是其他平台上，手机应用被大致分为几大类：系统工具、影音娱乐、网页浏览、办公阅读、社交通信、生活百科、购物、游戏等。网站设计与手机应用设计的区别：

1.用户体验的不同

（1）媒介的特性区别

传统的网站都是通过计算机终端浏览，而手机应用则是通过智能手机终端平台使用和操作。操作的媒介具有不同的特性及用户使用状态。相比较而言，手机更灵活，可以随身携带，用户在行走中就可以完成操作，也就是说人们只用一只手操作应用，只用一部分注意力在你精雕细琢的界面上，也正因为如此，这与作为设计师的你看到的应用完全不同。

（2）鼠标点击与触摸屏幕

当用户使用计算机上网时，利用鼠标对界面进行操作：单击，双击，右键，滚轮。用户操作的热区（可点击）通常在网页的中上部。用鼠标操作的精确性强，很小的按钮也不会产生误点。用户在使用手机应用时，通常是用拇指操作，只有三分之一的屏幕是真正容易触及的，也就是拇指能够到达的区域（单手操作的前提下）。为了获得人机工程学上舒适的体验，设计师应将主点击目标放置在方便拇指点击的热区中。所以这就是为什么工具栏和标签栏一般都放在屏幕的底边，而在传统的计算机界面上，都习惯将菜单放在屏幕或窗口的顶部。但是由于我们有限的拇指热区，主点击目标落到了手机屏幕的底部。该如何组织好点击目标的视觉层次是设计师要考虑的因素。常用的按钮还有导航可以放在屏幕的左边，不常用的按钮还有会改变数据的点击目标可以安全地塞到右上方去。例如“删除”、排列列表项目的“编辑”按钮一般都是放在右上角，这样就能减少误点。

（3）物理隐喻

用户在使用智能手机的触屏时会发现其显而易见的物理隐喻：滑动屏幕、点击按钮、轻抚数字轮盘、拖曳地图、拇指食指随意放大缩小图片。用户可以轻松地操作这些交互，因为它们和真实世界中的物体运作一模一样。这得益于手机自带的传感设备：重力感应器、加速度传感器、方向感应器、方位传感器、三轴陀螺仪、距离传感器、光线传感器、气压和温度传感器、紫外线传感器等。设计师可以利用这些物理特性创造出更有趣的交互体验。而这些是传统计算机屏幕无法拥有的感应系统。

（4）手机应用的优势

网站的附属应用相较于传统网站有以下几个优势：①高效—移动场景中，最重要的用户需求之一是使用高效。优秀的网站会重新设计应用来提升站点相应部分的体验。淘宝综合类电商网站，设计出了具有特色的手机平台的应用，相较于使用Safari浏览器直接打开的淘宝网站，淘宝的应用界面更为简洁，用一个个图标代表淘宝网首页最主要的功能，将次要的功能信息隐藏或省略，便于手机用户查找使用。②更为生动优美的交互动态效果—基于智能手机平台的网站应用，可以利用手机提供的富有动感的控件更为生动地展示内容。虽通过Web技术可以模拟出接近的效果但无法模拟出手机逼真的物理动态效果。③暂存功能—部分的手机应用较于对应的站点的一个优势在于应用可以预存内容，以备离线阅读。例如，互动分享和个性化定制的阅读类的应用zaker就提供在线状态时下载所有最新的资讯、微博、博客、报纸、杂志、图片、rss、googlereader等众多内容并按照用户个人意愿选择版面区块的内容组成，离线后下载的文章可以在网络盲区中阅读。

2.界面设计的区别

（1）界面布局的不同

传统的网络平台是以计算机为传播媒介，网页的尺寸受屏幕显示的大小的制约，常见的尺寸为1000像素（屏宽）×768像素（屏长），网页的屏长根据内容及功能决定，常见的有两屏三屏等。手机应用设计的界面尺寸和手机显示屏的尺寸息息相关，比如iphone3G尺寸为320×480像素，iphone4尺寸为960×640像素。从上述比较看出，网页的尺寸要远大于手机应用的尺寸，蜗居在巴掌大的屏幕里，每一块地方都是“寸土寸金”。网页设计的界面布局主要由广告区、导航区、页面内容区这几部分构成。导航区通常分布于界面的顶部或左侧，这样的安排是要保证在第一屏时能够完整地看到导航的每个分栏。广告区通常位于导航区附近，占领页面的核心阵地。网页的界面布局总体上分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型等。选择什么样的布局要根据页面需要包含的内容和功能进行合理设计。手机应用的界面布局和网站既有区别又有联系。在界面布局上基于手机屏幕的特性要将重要的信息放在顶部，将重要的操作放在底部。常见的手机应用布局是标签栏布局，分为上、中、下三部分，通常将标签栏和工具栏放在屏幕底部，导航栏置于屏幕顶端，中间部分是内容区域。手机应用在设计时应尽量让页面一屏显示完，避免滚动条。减少屏幕上的元素，将高级工具和操作隐藏起来。平铺页面：这种布局常用于页面为一个层级，滑动屏幕可以切换页面。页面底部的一排小点是页面的分页控件图标，小点的数量代表了页面的数量，高亮的小点代表了当前页面所处的位置，可以根据需要随意翻动。这种页面的布局方式一般所含页面数量小于10页。树形结构/列表布局：这种布局常用于页面层级较多，点击单个列表栏可以展开页面或者进入下一级页面。也可以很容易地回到上一级页面。这些布局方式可根据信息的具体情况组合使用，达到高效良好的用户体验。

（2）文本信息的处理

Web上的文字段落又称“文本”。文本是Web上最主要的信息传达形式，但是文本太多，大段的文本比如复杂无意义的说明性文字、冗长的链接只能减慢用户的浏览速度。①要避免大段的散文；②对于段落形文字使用标题、短语和项目符号。在Web布局中，文本段落一般用于划分好的页面内容区域内。在其手机附属应用中有几种承载文本的区块：①标签栏用于显示很短的文本；②文本视图：用于显示文本字段；③文字输入框：文本的可输入区域。

（3）按钮及辅助图标

网页中，在导航栏，可输入表单，搜索及其他面板中都含有按钮。按钮提示用户点击并完成某项功能。按钮一般是由图形（背景色块）和文字组成，通常有两种状态：下载预览状态（鼠标没有点击时）；鼠标经过或按下状态。其手机应用的界面按钮是手机界面中最基本的样式—圆角矩形按钮，按钮包含文字或图形。如图导航区左侧的按钮上添加了照相机的辅助图标，简洁清晰，蓝色的立体感按钮同导航栏既有对比又很统一。右侧是删除按钮，用红色做出功能的强调和暗示。手机应用中按钮常见有以下几种状态：①在预载状态下，即没有触碰的原始状态。②按下时状态，通常做高亮显示状态。③点击触摸后状态，点击触摸后的反馈对手机应用设计至关重要，它提示用户当前的操作状态。我们可以通过改变背景颜色、更换图标图片或更改文字颜色来进行提示。网站中也有功能性的辅助图标，例如播放器中的指示各种功能的播放图标，具有翻页功能的向前向后的箭头等。手机应用的图标系统更为丰富，功能也更为强大。手机应用的图标一类是给标签栏用的，一类是给导航栏和工具栏用的。

（4）导航的设计

在传统Web页面中，导航是网站的“中枢”，就像书籍中的目录页面一样，通过导航能够了解整个网站的信息架构分类，帮助用户明确定位。导航设计建立在对于用户需求和技术可能性的基础上，融交互、界面及图形设计于一体。由于网站有内容的先导性，使用户能够引导自己找到需要的信息，高效的导航系统常常是首次访问网站的用户的第一需求。网站的导航主要分为主导航、辅助导航、本地导航和上下文导航。分级式结构是网络中对信息的典型组织方法。一个多级的网站界面将对用户能否顺利找到他们需要的信息产生重要的影响。通过直接进入首页相比，更多的人是通过搜索、E-mail或广告链接到达某个页面的。这其中一个十分重要的因素是，导航系统应当显示页面信息所处的范围和环境，以帮助人们衡量和确定其关联性。

3.设计思维的联系

对使用者的研究可以预计具体的使用过程，了解用户的操作行为，这里的用户群体受到年龄、性别、职业、上网方式及电脑和网络技术水平的限制—研究实际使用用户群。例如，给老年人用户群服务的网站文字是否考虑要大些（网络常用正文为宋体5号字）距离是否需要调整，是否需要增设只针对老年用户使用的功能等。在手机应用的设计中也要对客户及用户进行细致的分析，并且根据用户反馈情况定期修改应用中的不足。结语在探讨了网页设计及其附属应用设计的区别和联系后，我们在设计一款手机附属应用时要进行详细的用户及客户分析，并深入地调查研究原网站的布局特点及功能和服务，从中找到手机附属应用能够加以借鉴和发挥的地方。在此基础上，根据手机应用布局、导航、按钮、文本等元素的不同特点，将信息进行合理的排序与可视化设计。运用隐喻的设计思维使设计更贴近生活，最大限度地减少使用障碍，使用户得到良好的产品体验。并在一次次的用户反馈中总结和修改应用，逐渐完善设计。（本文作者：张璇 单位：鲁迅美术学院）