《2020年网站设计与手机应用设计的区别论文》由会员分享，可在线阅读，更多相关《2020年网站设计与手机应用设计的区别论文（6页珍藏版）》请在金锄头文库上搜索。
1、网站设计与手机应用设计的区别论文 与其他领域的设计师相比网页设计师需要与掌握这些技术的人充分合作手机应用设计作为第三方智能手机应用程序的图形用户界面设计和交互设计以移动互联网为平台逐渐把用户带入一个习惯使手机客户端上网的时期在应用设计中美需要由功能来传递每个界面元素都必须专注于当下用户所需目前各种手机应用层出不穷其数目可称之为铺天盖地在appstore或是其他平台上手机应用被大致分为几大类：系统工具、影音娱乐、网页浏览、办公阅读、社交通信、生活百科、购物、游戏等网站设计与手机应用设计的区别： 1.用户体验的不同 （1）媒介的特性区别 传统的网站都是通过计算机终端浏览而手机应用则是通过智能手机终
2、端平台使用和操作操作的媒介具有不同的特性及用户使用状态相比较而言手机更灵活可以随身携带用户在行走中就可以完成操作也就是说人们只用一只手操作应用只用一部分注意力在你精雕细琢的界面上也正因为如此这与作为设计师的你看到的应用完全不同 （2）鼠标点击与触摸屏幕 当用户使用计算机上网时利用鼠标对界面进行操作：单击双击右键滚轮用户操作的热区（可点击）通常在网页的中上部用鼠标操作的精确性强很小的按钮也不会产生误点用户在使用手机应用时通常是用拇指操作只有三分之一的屏幕是真正容易触及的也就是拇指能够到达的区域（单手操作的前提下）为了获得人机工程学上舒适的体验设计师应将主点击目标放置在方便拇指点击的热区中所以这就
3、是为什么工具栏和标签栏一般都放在屏幕的底边而在传统的计算机界面上都习惯将菜单放在屏幕或窗口的顶部但是由于我们有限的拇指热区主点击目标落到了手机屏幕的底部该如何组织好点击目标的视觉层次是设计师要考虑的因素常用的按钮还有导航可以放在屏幕的左边不常用的按钮还有会改变数据的点击目标可以安全地塞到右上方去例如“删除”、排列列表项目的“编辑”按钮一般都是放在右上角这样就能减少误点 （3）物理隐喻 用户在使用智能手机的触屏时会发现其显而易见的物理隐喻：滑动屏幕、点击按钮、轻抚数字轮盘、拖曳地图、拇指食指随意放大缩小图片用户可以轻松地操作这些交互因为它们和世界中的物体运作一模一样这得益于手机自带的传感设备：重
4、力感应器、加速度传感器、方向感应器、方位传感器、三轴陀螺仪、距离传感器、光线传感器、气压和温度传感器、紫外线传感器等设计师可以利用这些物理特性创造出更有趣的交互体验而这些是传统计算机屏幕无法拥有的感应系统 （4）手机应用的优势 网站的附属应用相较于传统网站有以下几个优势： 高效移动场景中最重要的用户需求之一是使用高效优秀的网站会重新设计应用来提升站点相应部分的体验淘宝综合类电商网站设计出了具有特色的手机平台的应用相较于使用Safari浏览器直接打开的淘宝网站淘宝的应用界面更为简洁用一个个图标代表淘宝网首页最主要的功能将次要的功能信息隐藏或省略便于手机用户查找使用 更为生动优美的交互动态效果基于
5、智能手机平台的网站应用可以利用手机提供的富有动感的控件更为生动地展示内容虽通过Web技术可以模拟出接近的效果但无法模拟出手机逼真的物理动态效果 暂存功能部分的手机应用较于对应的站点的一个优势在于应用可以预存内容以备离线阅读例如互动分享和个性化定制的阅读类的应用zaker就提供在线状态时下载所有最新的资讯、微博、博客、报纸、杂志、图片、rss、googlereader等众多内容并按照用户个人意愿选择版面区块的内容组成离线后下载的文章可以在网络盲区中阅读 2.界面设计的区别 （1）界面布局的不同 传统的网络平台是以计算机为传播媒介网页的尺寸受屏幕显示的大小的制约常见的尺寸为1000像素（屏宽）76
6、8像素（屏长）网页的屏长根据内容及功能决定常见的有两屏三屏等手机应用设计的界面尺寸和手机显示屏的尺寸息息相关比如iphone3G尺寸为320480像素iphone4尺寸为960640像素从上述比较看出网页的尺寸要远大于手机应用的尺寸蜗居在巴掌大的屏幕里每一块地方都是“寸土寸金”网页设计的界面布局主要由广告区、导航区、页面内容区这几部分构成导航区通常分布于界面的顶部或左侧这样的安排是要保证在第一屏时能够完整地看到导航的每个分栏广告区通常位于导航区附近占领页面的核心阵地网页的界面布局总体上分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型等选择什么样的布局要根据页面需要包含的
7、内容和功能进行合理设计手机应用的界面布局和网站既有区别又有联系在界面布局上基于手机屏幕的特性要将重要的信息放在顶部将重要的操作放在底部常见的手机应用布局是标签栏布局分为上、中、下三部分通常将标签栏和工具栏放在屏幕底部导航栏置于屏幕顶端中间部分是内容区域手机应用在设计时应尽量让页面一屏显示完避免滚动条减少屏幕上的元素将高级工具和操作隐藏起来平铺页面：这种布局常用于页面为一个层级滑动屏幕可以切换页面页面底部的一排小点是页面的分页控件图标小点的数量代表了页面的数量高亮的小点代表了当前页面所处的位置可以根据需要随意翻动这种页面的布局方式一般所含页面数量小于10页树形结构/列表布局：这种布局常用于页面层
8、级较多点击单个列表栏可以展开页面或者进入下一级页面也可以很容易地回到上一级页面这些布局方式可根据信息的具体情况组合使用达到高效良好的用户体验 （2）文本信息的处理 Web上的文字段落又称“文本”文本是Web上最主要的信息传达形式但是文本太多大段的文本比如复杂无意义的说明性文字、冗长的链接只能减慢用户的浏览速度要避免大段的散文；对于段落形文字使用标题、短语和项目符号在Web布局中文本段落一般用于划分好的页面内容区域内 在其手机附属应用中有几种承载文本的区块：标签栏用于显示很短的文本；文本视图：用于显示文本字段；文字输入框：文本的可输入区域 （3）按钮及辅助图标 网页中在导航栏可输入表单搜索及其他
9、面板中都含有按钮按钮提示用户点击并完成某项功能按钮一般是由图形（背景色块）和文字组成通常有两种状态：下载预览状态（鼠标没有点击时）；鼠标经过或按下状态其手机应用的界面按钮是手机界面中最基本的样式圆角矩形按钮按钮包含文字或图形如图导航区左侧的按钮上添加了照相机的辅助图标简洁清晰蓝色的立体感按钮同导航栏既有对比又很统一右侧是删除按钮用红色做出功能的强调和暗示手机应用中按钮常见有以下几种状态：在预载状态下即没有触碰的原始状态按下时状态通常做高亮显示状态点击触摸后状态点击触摸后的反馈对手机应用设计至关重要它提示用户当前的操作状态我们可以通过改变背景颜色、更换图标图片或更改文字颜色来进行提示网站中也有功
10、能性的辅助图标例如播放器中的指示各种功能的播放图标具有翻页功能的向前向后的箭头等手机应用的图标系统更为丰富功能也更为强大手机应用的图标一类是给标签栏用的一类是给导航栏和工具栏用的 （4）导航的设计 在传统Web页面中导航是网站的“中枢”就像书籍中的目录页面一样通过导航能够了解整个网站的信息架构分类帮助用户明确定位导航设计建立在对于用户需求和技术可能性的基础上融交互、界面及图形设计于一体由于网站有内容的先导性使用户能够引导自己找到需要的信息高效的导航系统常常是首次访问网站的用户的第一需求网站的导航主要分为主导航、辅助导航、本地导航和上下文导航分级式结构是网络中对信息的典型组织方法一个多级的网站界
11、面将对用户能否顺利找到他们需要的信息产生重要的影响通过直接进入首页相比更多的人是通过搜索、Email或广告链接到达某个页面的这其中一个十分重要的因素是导航系统应当显示页面信息所处的范围和环境以帮助人们衡量和确定其关联性 3.设计思维的联系 对使用者的研究可以预计具体的使用过程了解用户的操作行为这里的用户群体受到年龄、性别、职业、上网方式及电脑和网络技术水平的限制研究实际使用用户群例如给老年人用户群服务的网站文字是否考虑要大些（网络常用正文为宋体5号字）距离是否需要调整是否需要增设只针对老年用户使用的功能等在手机应用的设计中也要对客户及用户进行细致的分析并且根据用户反馈情况定期修改应用中的不足结语在探讨了网页设计及其附属应用设计的区别和联系后我们在设计一款手机附属应用时要进行详细的用户及客户分析并深入地调查研究原网站的布局特点及功能和服务从中找到手机附属应用能够加以借鉴和发挥的地方在此基础上根据手机应用布局、导航、按钮、文本等元素的不同特点将信息进行合理的排序与可视化设计运用隐喻的设计思维使设计更贴近生活最大限度地减少使用障碍使用户得到良好的产品体验并在一次次的用户反馈中总结和修改应用逐渐完善设计
