关于手机版网站制作,看上去与一般意义上的网站制作并没有非常大的不同,只不过制作网站时,你所需要准备的设备由电脑换成了手机而已。但设备的更换所带来的影响往往没有我们想象的那么简单。如何保证我们手机版网站制作不翻车,接下来的五大注意事项便是最好的保护伞。
1、使用独立的域名
有很多人在设计网站的时候为了方便,很多时候手机的域名和PC端用的是同一个。这看上去不是一个大问题,但需要注意的是,在使用手机时,手机的搜索引擎对于来自于PC端的资源和信息是排斥的。如果你能够对于网站给出一个明确的指示命令,再什么样的情况下PC端优先,而在什么情况下让移动端先进行,那么问题就解决了。但大部分时候,大多数人并不明白如何进行适配设置,那么解决的最好方法就是在一开始进行手机版网页制作时就使用独立的域名,针对移动互联网站做适配的手机网站。
2、利用HTML5程序
对于一些PC端网站制作所常用的程序语言如JAVA、ASP等语言,实际上用在移动端的网站建设上就不大合适。具体的原因有很多,比如手机的内在设置甚至于说手机相对于电脑来说远远小于的屏幕尺寸,这些因素都会使得原先适用于PC端网站制作的程序语言不再适用于手机版的网页制作。而HTML5则在这一方面成为了移动端网站制作的最优选项。
3、注意网站浏览设备的变化
4、尽量不使用弹窗、flash等耗流量程序
说到手机流量,几乎没有人会觉得够用。因此,在设计手机版网站时,我们如果能注意到这一点,那么对于我们网站之后的运行会大有裨益。比如说,尽量少的使用弹窗和flash,加载这一类程序往往会比较耗时耗流量。并且,增加这一类程序往往吃力不讨好,所呈现的效果也不一定如意。
5、使用规范协议,最后做好调试工作
最后,在制作手机版网站时,我们应尽可能的使用规范的标准的协议格式。而在最后发布之前,也一定要做好各方面的调试工作。
现在的手机网站页面设计大都采用百分比显示,这样使得手机网站可以在所有的手机上都可以适配浏览
【Mcmore手机商城系统】主打主流趋势移动端市场,采用响应式网站设计,无论您在哪个型号手机访问,都可以流畅、清晰,拥有良好的手机浏览和使用体验
1、安全宽度与扩展区域让页面适应主流分辨率
与PC上网页的做法一样,确定一个安全宽度,把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度。目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做相应的首屏高度。
2、控制图片的大小
在做头部的延展区域(超出640px范围),推荐使用纯色,渐变,可以平铺的素材,以便于减少头图的大小,提高加载速度,并且延展区域可以无缝连接。模糊的背景可以最大限度的压缩图片质量。
3、字体
手机中的字号一般上电脑中的两倍,一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中,也要使用iOS和安卓默认渲染的字体,以便更真实的还原真实环境。在规范的专题中,主要字号控制在3个,大中小都有一个区间。避免随意用字体字号,并且字号必须上整数。
4、控件交互区域适合触控
手机专题的主按钮高度大于80px,并且根据活动的需求放在首屏内。文字链接上下的间距大于80px,手指在屏幕上热区最小感应是44px。
5、移动端网页少用跳转
手机用户的网络环境不如PC用户,页面的跳转会对用户产生更大的心理效力,如果在手机页面中能把信息合理的展示在一个页面中最佳。如果非要跳转,咱们可以用些假装不是跳转的方式,比如展开,浮出等。减少用户产生的不安全感。
手机网站的域名一定要简短易记。企业在建设手机网站的时候,在选择域名的时候要注意一下。建议选择那些简短的易记的域名,域名越简短,越容易被记住。很多站长可能会有疑问,为什么长域名就不能选择呢这个问题我们可以站在用户的角度去分析,相对于长域名,更乐意去记忆一个简短的域名。而且按照常理来说,越简单的域名越好记。一个简短的域名是手机网站成功建设的开始。
手机网站在组织内容的时候,建议分二级或者做好目录。手机网站在建设内容的时候,最好是进行二级域名或者目录设计。网站的内容一般都比较多,而且都会分类号,那么我们就可以通过二级域名和目录调用这些分类。手机网站在建设的时候,尽量使用规范的简单的URL,而且不要出现与页面无关的参数。
手机网站也要做好三大标签的优化。手机网站与电脑版的网站是不一样的,手机网站的关键字以及描述的标签对手机网站时有效果的。因此,要做好三大标签的优化。1、网站的标题要清晰,包括首页的标题和频道页的标题。2、关键字标签要清晰。网站的首页、频道页在编写代码的时候,要加入关键字的标签,并且在网站的内容中布局好关键字。3、在手机网站的首页以及频道页的代码中加入描述标签。
手机网站的结构要清晰,导航也要清晰。一般来说,网站的结构是采用树形的结构,这样有利于搜索引擎蜘蛛的爬行。清晰的导航是每一个网站都应该具备的,但是要注意不要在导航上有关键字堆砌的现象。面包屑导航也要做好,可以帮助用户更好地知道自己的浏览路径。凡科建站的手机网站模板符合设计要求,直接使用模板建站,快速可以搭建一个手机网站,而且缩短了建站流程,也避免了很多问题。
以上四个方面就是手机网站建设过程中,要注意的一些问题和优化细节。
UI设计的好坏的确影响了一款APP产品的成败,要成为一款有竞争力的软件,界面设计是第一位的,界面的体验和美观是用户对一个软件至关重要的第一印象。以下就是北大青鸟北京校区官网为您整理的手机ui设计有哪些规范?
最常用的Photoshop、Ai和一些3D软件是制作的常用工具,在最终输入时会需要一些模拟程序以及平台程序的支持,不过在GUI设计阶段可以暂不考虑
尺寸:建议选择240x320大小的屏幕尺寸进行设计,自由度和发挥空间会大一点
概念:设计的概念是设计中尤其重要的部分,敢于尝试新颖的交互模型和GUI视觉元素是设计的重要工作。
简单来说MobileGUI设计就是手持设备的图形用户界面设计,狭义上来看是手机和PPC,广义上可以推广至手机,移动电视,车载系统,手持游戏机,MP3,GPS等一切手持移动设备。
MobileGUI的设计基于对手持设备产品的使用特性的理解,对用户的研究和对界面使用情景的深入研究。GUI的设计分为平台内置和主题设计部分,前者需要专业的designhouse根据厂家的实际产品进行设计分析后进行整体设计,后者则可以经由任何用户进行自主设计,当然后者的设计限制和平台限制都比较大。索爱和三星以及Nokia的S60平台支持用户的Theme自定义设计。
设计研究的流程为:产品特性--用户心理--市场背景--图形设计策略--设计检验--实际设计投放
界面基本要素
手机界面层级:idle(待机界面)Mainmenu(主菜单)Submenu(二级菜单)Thirdlevelmenu(三级菜单)界面除了包括图标和文字外,比较重要的还有functionanimation(呼叫,发送信息等)以及functioninterface(计算器,日历界面等)
明确意义的图标,风格鲜明的版面设计是手机界面设计的重要工作,较为流行的是以Motorola,Nokia等为代表的欧洲简单风格,以及韩国的时尚绚丽的风格。
在更新颖的交互操作和与手机Id设计的整体结合上,韩系手机作的比较好,而在可用性和体验难度上,欧系手机则比较优秀。
手机UI设计规范:1、尺寸问题:480乘800,540乘960,720乘1280,1080乘1920象素尺寸是较常见的手机屏幕尺寸,在设计时可以根据实际产品要求进行设计,更大的屏幕可以有更多的交互表现和视觉元素的支持,较为自由;2、色彩问题:由于手机lcd本身的限制,在色彩的还原程度上没有pc如此完善,因此在选用色彩时要根据使用的屏幕进行调节;3、可实现性问题:受到硬件运算速度和内存的影响,以及不可预计的后台程序开发难度,过于复杂的效果将很难进行实现,与程序工程师和ui工程师,硬件工程师的沟通显得尤为重要。
移动APP里面的每一个UI界面都是这个App的门面,尤其是主界面,看上去干净整洁清爽宜人容易操作,那么你的App就成功了一半。这也反映出了你这个开发团队的基本审美素质和设计理念。
图片
我们都知道,设计一套完整的APPUI界面其实是比较复杂的,从需求分析到市场定位,从草稿到拟方案,从创意元素的组合到想法沉淀,从设计规范到突破传统,从纸上到电脑上,从个人到团队,或者从团队到个人,从素材收集到素材处理,从0思路到偶然等等,其实设计一个APP会碰到太多太多的问题,
所以要求我们移动APP设计者必须按照下面的三大准则和八项标准来设计。
【手机APPUI界面设计】三大准则:
(1)不乱用颜色。一个页面内不要超过3种颜色
(2)不乱用大图片当背景。你是想让用户看你的背景图片呢,还是看你的内容?
(3)不乱填充内容。页面元素如果太满,给读者压抑感,无所适从。
【手机APPUI界面设计】八项交互标准:
1.色彩舒适度
一个第一眼看上去就杂七杂八色彩,或者完全没有主次之分的简洁,或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩,我想它已经没法继续长久看下去了。因为人第一眼看到的,就是一个事物的颜色,才是形状。
2.文字的主次
任何设计作品都要传达信息传达思想,如果一套设计中字体乱啪啪,文字大小和文字粗细,间距行距都没有一个“主次逻辑”,我很难挖掘到自己想要的信息,不论设计是酷炫复杂的还是简洁清爽的,光能展现信息时远远不够的,信息文字的每一个细节,都决定了一个设计要传达的思想主次,记住,你是要引导别人去看,而不是别人引导你去设计。这世上没有一个真正定死的文字标准,但是最基本的,至少让别人看清你的文字是写的什么吧,所以,文字之间的不同色彩,也是能让文字主次突出的方面
3.信息可读性
有了文字基础,处理好每个模块的布局,色块,插图,背景等方面,会让你的信息有较强的可读性。别跟着你的爱好走:我喜欢酷炫,我喜欢简洁,我喜欢优雅,我喜欢二货。把设计作品中你最想传达的信息传达出去,就算某些信息被别人忽略了,你依然是成功的。如果用户连看都不想看,连最基本的信息都没法传达,那作品的任何风格,都只是口头吹嘘。你要定好你的目标用户,你想吃遍全中国乃至全世界,全行业?除非,没有除非了。
4.UI识别性
这一点在图标上味道非常浓,不论你这一点在图标上味道非常浓,不论你设计的是扁平化还是拟物化还是梵高风格,不一定要3秒看出图标的意思,也要让人欣赏这个图标美感的同时,大概“心里知道”,这个图标要传达个什么。一个网站banner的设计,一个页面的导航设计,都要考虑到识别性,你想传达这个图像的什么内涵?你这个图形的意图是什么?都是设计者需要考虑的。
5.交互性与易用性
上面的工作都做得差不多了,剩下的就是使用了。不论是手机主题还是网站设计还是APP还是游戏,要让别人快速上手,能玩,能用,甚至用的简单,玩的简单,就算你采用银河系都没有的酷炫交互,或者采用地球上已经濒临灭绝的土逼设计,达到方便使用的优良品质,你的作品再牛逼到没法看,也有牛逼的地方能看。
6.思想,生活的传达
作品是什么样,一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态,所以别小看一个作品的力量,它可能就是传达你自己真实内心的一个媒介,可能你并未发现,但是旁观者已经发现你了。
所以说,融入生活得设计是比较难的,同时,也是最容易的,你是否把你最粗心最让人厌倦的一面暴露到设计作品中?是否把你最细致入微最耐人寻味的一面传达到用户心里?一张图就可以看出(当然这不代表全部啊,某些设计师的作品看几天你也看不出他是什么人过着什么生活的)
7.微小的细节和微小的创意
细节中,你就能诞生一些微小的创意,小创意创造大创意,没有细节,何谈创意?那就只是纸上谈兵,口说无凭。
8.生活中表现手法的引用
一个简单的视差,一个简单的坠落,一个简单的玻璃破碎,一个简单的树叶飘落,一张纸简单的角度摆设,一盆植物简单的远近拍摄,这些东西,都能创造你无穷的表现手法,当然,这也是比较难的,能将生活融入设计,是需要积攒的,不是一两天能体会到的。
要领一:确定网站主题
做网站,首先必须要解决的就是网站内容问题,即确定网站的主题。美国《个人电脑》杂志(PCMagazine)评出了99年度排名前100位的全美知名网站的十类题材:
第1类:网上求职;
第2类:网上聊天/即时信息/ICQ;
第3类:网上社区/讨论/邮件列表;
第4类:计算机技术;
第5类:网页/网站开发;
第6类:娱乐网站;
第7类:旅行;
第8类:参考/资讯;
第9类:家庭/教育;
第10类:生活/时尚。
我们可以参看上面的分类,继续细分。如果自己在某些方面有兴趣,或掌握的资料较多,也可以做一个自己感兴趣的东西,一者,你可以有自己的见解,做出自己的特色;二者,在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力,没有创作热情,很难设计制作出优秀的作品。
对于内容主题的选择,要做到小而精,主题定位要小,内容要精。不要去试图制作一个包罗万象的站点,这往往会失去网站的特色,也会带来高强度的劳动,给网站的及时更新带来困难。
要领二:选择好域名
域名是网站在互联网上的名字。一个非产品推销的纯信息服务网站,其所有建设的价值,都凝结在其网站域名之上。失去这个域名,所有前期工作就将全部落空。
目前,做个人网站的很多都依赖免费个人空间,其域名也是依赖免费域名指向,如网易的虚拟域名服务,其实这对个人网站的推广与发展很为不利,不光是它“适时”开启的窗口妨碍了浏览者的视线和好感,让人一看就知道是个人网站,而且也妨碍了网页的传输速度。所以,就我个人观点来说,首先花点钱去注册一个域名,独立的域名就是个人网站的第一笔财富,要把域名起得形象、简单、易记。
要领三:掌握建网工具
网络技术的发展带动了软件业的发展,所以用于制作Web页面的工具软件也越来越丰富。从最基本的HTML器到现在非常流行的Flash互动网页制作工具,各种各样的Web页面制作工具,下面是几款具有代表性的网页制作器:
(2)所见即所得的网页器。其中以MicrosoftFrontpage为代表,它具有如Word一样的操作界面,熟知Word功能的操作者,只要稍加培训就能轻松编制网页。而且,Frontpage还能解析网页的HTML源代码,并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。
(3)现在非常流行的Macromedia公司出品的Flash互动网页制作工具。这是是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页,它不需要特别繁杂的操作,也比JAVA小巧精悍!但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等;并且由于Flash编制的网页文件比普通网页文件要小得多,所以大大加快了浏览速度。这是一款十分适合动态Web制作的工具。
另外,个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本知识。对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解,还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具,并能部分了解多种图形图像动画工具的基本用法,熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。
要领四:确定网站界面
界面就是网站给浏览者的第一印象,往往决定着网站的可看性,在确定网站的界面时要注意以下三点:
①栏目与板块编排
构建一个网站就好比写一篇论文,首先要列出题纲,才能主题明确、层次清晰。网站建设初学者,最容易犯的错误就是:确定题材后立刻开始制作,没有进行合理规划。从而导致网站结构不清晰,目录庞杂混乱,板块编排混乱等。结果不但浏览者看得糊里糊涂,制作者自己在扩充和维护网站也相当困难。所以,我们在动手制作网页前,一定要考虑好栏目和板块的编排问题。
网站的题材确定后,就要将收集到的资料内容作一个合理的编排。比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。在栏目编排时需要注意的是:
●尽可能删除那些与主题无关的栏目;
●尽可能将网站内最有价值的内容列在栏目上;
另外,板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些,每个板块都有自己的栏目。举个例子:ENET硅谷动力()的站点分新闻、产品、游戏、学院等板块,每个板块下面又各有自己的主栏目。一般来说,个人站点内容较少,只要分个栏目也就够了,不需要设置板块。如果有必要设置板块的,应该注意:
●各板块要有相对独立性;
●各板块要有相互关联;
●各板块的内容要围绕站点主题;
②目录结构与链接结构
网站的目录是指建立网站时创建的目录。例如:在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的维护,以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排,比如:
●在每个主目录下都建立独立的Images目录。一般来说,一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便,比如在栏目删除时,图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单,就是方便维护与管理。
其它需要注意的还有:目录的层次不要太深,不要超过3层;不要使用中文目录,使用中文目录可能对网址的正确显示造成困难;不要使用过长的目录,太长的目录名不便于记忆;尽量使用意义明确的目录,以便于记忆和管理。
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。一般的,建立网站的链接结构有两种基本方式:
●树状链接结构(一对一),这类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出,条理比较清晰,访问者明确知道自己在什么位置,不会“不知身在何处”,但是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须回到首页再进行。
●星状链接结构(一对多),类似网络服务器的链接,每个页面相互之间都建立有链接。这样浏览比较方便,随时可以到达自己喜欢的页面。但是由于链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。
因此,在实际的网站设计中,总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面,又可以清晰地知道自己的位置。所以,最好的办法是:首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。关于链接结构的设计,在实际的网页制作中是非常重要一环,采用什么样的链接结构直接影响到版面的布局。
③进行形象设计
网站的设计可以从以下几点出发:
●设计网站标志(LOGO)。LOGO是指网站的标志,标志可以是中文、英文字母,也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物,可以用它们作为设计的蓝本,加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志,采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。
●设计网站色彩。网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。
●设计网站字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵,选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的计算机里没有安装特别字体,那么辛苦设计制作便可能付之东流了。
●设计网站宣传语。也可以说是网站的精神、主题与中心,或者是网站的目标,用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站,进行对外宣传,可以收到比较好的结果。
要领五:确定网站风格
“风格”是抽象的,是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素,网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局,还是交互方式,只要你能由此让浏览者明确分辨出这是你网站独有的,这就形成了网站的“风格”。
风格是有人性的,通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放的,还是清新秀丽的;是温文儒雅的,还是执著热情的;是活泼易变的,还是墨守成规的。
总之,有风格的网站与普通网站的区别在于:在普通网站上你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,比如信息量多少,浏览速度快慢等;在有风格的网站上你可以获得除内容之外的更感性的认识,比如站点的品位,对浏览者的态度等。
在明确自己想给人以怎样的印象后,要找出网站中最有特色的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之,风格的形成不是一次定位的,你可以在实践中不断强化、调整、改进。
要领六:有创意的内容选择
好的内容选择需要有好的创意,作为网页设计制作者,最苦恼的就是没有好的内容创意。网络上的最多的创意即是来自于虚拟同现实的结合。创意的目的是为了更好的宣传与推广网站,如果创意很好,却对网站发展毫无意义,那么,网站设计制作者也应当放弃这个创意。另外,主页内容是网站的根本之所在,如果内容空洞,即使页面制作地再怎样精美,仍然不会有多少用户。从根本上说,网站内容仍然左右着网站流量,内容为王(ContentIsKing)依然是个人网站成功的关键。
要领七:推广自己的网站
网站的营销推广在个人网站的运行中也占着重要的地位,在推广个人网站之前,请确保已经做好了以下内容:网站信息内容丰富、准确、及时;网站技术具有一定专业水准,网站的交互性能良好。一般来说,网站的推广有以下几种方式:
注册著名的搜索引擎站点是在技术上推广网站的第一步。注册搜索引擎有一定的技巧,像AltaVista、搜索客这样的搜索引擎,它自动收录提交的网址。另外,注意Meta的使用,不要提交分栏Frame页面,大部分搜索引擎不识别Frame,所以一定要提交有内容的Main页面。
(3)目标电子邮件推广
使用电子邮件宣传网址时,主要有如下技巧:可以使用免费邮件列表来进行,只要你申请了免费邮件列表服务,你就可以利用邮件列表来推广你的网站;可以通过收集的特定邮件地址,来发送信息到特定的网络群体,在特定网络群体中推广自己的网站;发送HTML格式的邮件,即使其内容与接收者关系不大,也不会被被当作垃圾信件马上删掉,人们至少会留意一下发送者的地址。不过,在进行邮件推广的时候要注意网络道德。
要领八:支撑网站日常运行
当个人网站做到某一程度,就必须把赚钱提到议事日程上来,通常来说,个人网站获取资金通常有以下两个渠道:
①CPM(CostPerMillion/Thousand)
②点透(Click-through)
③提成(Commission)
(2)与大型网站合作
另外,通过与大型网站合作,获取经费,也可以维持个人网站的日常运行。不过,个人网站很容易会成为商业网站的附属品。
1.在不同设备上采用相似的设计
用户可以通过不同类型的设备访问你的网站,这些设备包括:电脑、平板、手机、音乐播放器、甚至是智能手表等。
无论用户使用什么设备访问你的网页,确保他们具有类似的体验,这是用户体验设计中的一条重要标准。
2.导航的设计要简单易用、清晰明了
导航设计是网页可用性的基石。
记住:如果用户在你的网站里找不到导航,那么无论你的网站有多流弊都没用。这也是导航设计要遵循以下原则的原因:
简单。每个网站都应该有尽可能简单的结构。
·
清晰。导航的每项对用户而言,都应该是清楚的。
一致。系统的导航页在每一页中都应该是相同的。
用户以最少的点击次数,最快地到达他们想要浏览的网页。这才是导航设计的目的。
3.改变访问过的链接的颜色
链接是导航的一个关键因素。假如用户点击过的链接没有改变颜色,很可能导致用户多次点击同一个链接。
如果用户知道自己过去访问的链接和现在还未访问过的链接,那么用户会更容易决定自己下一次要点击什么。
4.让页面浏览变得更容易
用户浏览我们的网页时,并不是通读所有的内容,而是快速地扫描整个网页。
因此,如果用户来到这个网站,是为了寻找特定的内容或者是完成某个任务,那么他们会先浏览整个网页,直到用户找到了自己想要去的地方。
因此,作为网页设计者的我们,应该通过设计网站可视化的层级架构帮助这些用户尽快达成自己的目的。
可视化的层级架构意味着网页上每个元素的摆放或呈现都具有权重(比如说,我们的设计决定了用户先看到哪个,再看到哪个,最后看到哪个)。
用户的视线是Z字形的。
5.仔细检查所有的链接
当用户点击网站上的一个链接,界面上却出现404的错误页面时,用户很容易变得沮丧。
当用户在网站上寻找内容时,他们希望自己点击过的每个链接都是自己正在寻找的那个,而不是出现404的错误页面、或者点进去后,却发现不是自己寻找的那个页面。
6.确保能点击的元素让用户看起来就能点击
一个物体的样子会告诉用户如何使用它。
看起来像按钮或链接的视觉元素却不能点击,很容易困扰用户;这些视觉元素包括:文字下划线并不代表链接、拥有动画效果的元素也不是超链接。
用户想要知道界面上哪些区域是纯静态内容,哪些区域是可以点击的。
让可以点击的元素明显一点。
二、设计网站时,不该做什么
1.不要让用户等
网站用户的耐心和注意力是非常小的。根据NNGroup的研究,10秒是用户集中注意力完成一个任务的极限。
当用户在等待内容加载时,他们很可能会变的沮丧。如果加载速度很慢,用户很可能会离开这个网站,即使是足够漂亮的加载动画设计也无法改变这个结果。
2.不要在新标签页打开链接
在新标签页打开链接的设计让用户无法使用“返回”按钮返回之前的页面。这是非常不好的设计。
4.不要滚动劫持(Hijackscrolling)
滚动劫持是指:网站的设计者或开发者控制滚动条,从而使得用户在滚动鼠标时,会在网站上看到不同的效果,包括动画效果、固定的滚动点、甚至是重新设计过的滚动条。
滚动劫持是用户最不喜欢的设计之一,因此,它夺取了用户控制滚动条的权利。
当你设计网站时或设计用户界面时,你应该让用户自己决定自己浏览的网页或APP的位置。
5.不要自动播放视频(有声音)
在后台自动播放视频、音乐或声音文件,都是用户难以接受的设计方式。
用户很少使用这些元素,除非是在适当的时候。
6.不要为了网站的美观牺牲网站的可用性
一个网站或用户界面的设计不应该因为内容影响用户的消费能力。最好不要在文字后使用繁重的背景、也不要使用让用户很难阅读或颜色对比不明显的配色方案。
闪烁的内容或闪烁会导致易感人群的癫痫病。这样的设计不仅能引发癫痫,而且还会因吸引用户的注意力而惹恼用户。