<![CDATA[AG8亚游设计_UI设计公司]]> http://www.b0yq.com/blog/ zh-cn www.emlog.net Axure原型设计:仿移动端HTML5滑动介绍页面 http://www.b0yq.com/blog/?post=4871 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

每次QQ有新的重要版本发布时,移动端的介绍使用了HTML5页面,通过7个独立的页面简洁地介绍了它的主要功能。在每个页面切换时伴随着背景图片的切换,让介绍页面生动有趣。

Axure原型设计:仿移动端HTML5滑动介绍页面

我们来看看如何实现这种APP介绍页面的效果,点击下方的链接查看完成后的效果,下面是完成后的效果图:

(内有源文件和相关资源素材)

Axure原型设计:仿移动端HTML5滑动介绍页面

一、实现思路

1、使用第一个动态面板显示7个介绍页面

2、使用第二个动态面板显示背景图片的切换

3、在向上和向下拖动介绍页面时,触发背景图片动态面板的状态切换

4、首页的向上箭头动画,通过元件的显示与隐藏实现循环动画效果

5、准备资源:资源包括介绍页面上的图片,通过查看源代码,样式表从中获取图片位置并下载,最终下载后的资源如下图所示(从演示页面下载源文件):

Axure原型设计:仿移动端HTML5滑动介绍页面

二、实现步骤

1、界面布局

(1)添加一个矩形框作为菜单栏,大小为480*67,背景为蓝色,文字为白色,字体大小为18,设置文字内容为“I’m QQ – 每一天 , 乐在沟通”。

Axure原型设计:仿移动端HTML5滑动介绍页面

(2)添加个动态面板

,大小为480*680,放在标题栏下方,命名为main,取消“自动调整为内容尺寸”勾选状态,双击进入第一个状态,添加第一个介绍页面。

导入背景图,设置大小480*680,添加QQ的logo和介绍文字图片,添加版本信息和发布日期,最后添加一个无边框矩形作为下载按钮,大小为250*60,蓝底白字,文字大小为28,圆角大小30:

Axure原型设计:仿移动端HTML5滑动介绍页面

(3)为动态面板main添加第二个状态,在中间位置添加一个文字,大小为28,文字颜色为白色(为了教程看得清楚,将文字设置成了黑色)。

Axure原型设计:仿移动端HTML5滑动介绍页面

(4)重复第(2)(3)两步,分别添加第3到第7个状态,设置里面的图片和文字内容。

(5)添加页脚

,作为菜单栏,双击修改文字内容为”点击下载源文字“,单击后下载本实例源文件(在浏览器中打开页面后下载)。

Axure原型设计:仿移动端HTML5滑动介绍页面

2、首页向上箭头动画

双击动态面板main打开第一个状态,我们来处理向上箭头动画。

添加箭头图片,命名为arrow,右键转换为动态面板,双击进入动态面板状态一,添加一个热区元件用来做事件控制,命名为control,这个热区通过显示和隐藏事件来处理箭头动画的循环向上滑动显示效果。

(1)选择control,添加显示时事件

Axure原型设计:仿移动端HTML5滑动介绍页面

a.移动箭头图片到(0,30)处

b.再移动到(0,0)位置,添加线性动画,时长1秒

c.隐藏箭头图片和控制元件control,箭头添加淡出动画效果,时长1秒,control的隐藏时会触发它的隐藏事件。

d.等待1秒钟

(2)选择control,添加隐藏时事件

显示当前control元件和箭头图片,显示control时会触发它的显示时事件,这样达到循环处理的目的。

(3)动态面板载入时事件

先设置control为隐藏状态,在动态面板载入时,显示control。

4、背景动态面板

添加一个新的动态面板,大小为480*680,命名为back_img,添加三个状态,用来放置背景的三张图片,将该动态面板放在动态面板main之后。

Axure原型设计:仿移动端HTML5滑动介绍页面

5、事件处理

(1)动态面板main的向上拖动结束事件

Axure原型设计:仿移动端HTML5滑动介绍页面

(2)动态面板main的向下拖动结束事件

Axure原型设计:仿移动端HTML5滑动介绍页面

(3)添加控制事件

在向上拖动和向下拖动动态面板main时,需要分别切换一下背景动态面板状态,显示不同图片。

添加两个热区,用来控制向上和向下拖动结束事件,给热区添加单击事件,事件里分别添加两个事件分支,分别显示不同的背景图片。

Axure原型设计:仿移动端HTML5滑动介绍页面

Axure原型设计:仿移动端HTML5滑动介绍页面

给动态面板main的向上滑动结束和向下滑动结束事件添加触发事件,分别触发上面两个控制事件:

Axure原型设计:仿移动端HTML5滑动介绍页面

三、预览

一切准备就绪,按下F5键预览一下效果。

鼠标向上滑动查看,注意背景图片的切换变化。

以上帖子内容是些思路性的引导,请结合源文件查看以上步骤会更清晰。


AG8亚游设计www.b0yq.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

]]>
Thu, 12 Apr 2018 13:25:54 +0000 Johnson 1949 http://www.b0yq.com/blog/?post=4871
移动端下拉菜单交互 http://www.b0yq.com/blog/?post=4870 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

通常在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的?将最近项目里碰到的情况总结一下。

1. 层级设计,以iOS为代表移动端下拉菜单交互

iOS系统日历

  • 是目前最常见的一种做法,外露设置名称和默认设置项,将全部设置内容放在下一层。

  • 节约垂直空间,不干扰当前界面其他内容。可以很好兼容单选、多选等多种情况。作为一个完整的界面,可以容纳的内容比较多。

  • 但增加一个层级,就意味着有进入和返回两步操作。尤其是返回大多在界面左上角,随着手机屏幕越来越大,采用这种方式又没有手势右滑返回还是挺难用的。

我一直觉得,将层级设计用的风生水起的就是微信。基本上一级的四个tab都是层级的世界。

2. 弹窗设计,以Android为代表

移动端下拉菜单交互

Google日历

  • 选择项作为临时弹窗出现在界面中,单选的话,点一下弹框自动消失,多选的话点击完成消失。

  • 弹窗是一个在移动端上容易受鄙视的交互,但实际使用下来,google把它做得挺美挺实用的。 当只有较少如个位数的设置项时,实际操作体验比层级式的好很多,会很同意“一个弹框能搞定的事实在不需要再新起一个层级”。但这个交互目前看很少人采用,Android的设计语言规范比起iOS还是弱势了许多。

  • 但当内容一旦多起来,这个小弹框就会有点不堪重负,还会出现弹窗上需要再弹窗的尴尬局面。

3. 下拉菜单

移动端下拉菜单交互

Google日历叠叠乐

  • 就是类似PC的下拉菜单,这样少见的设计,被发现于刚刚说google那个弹框上又有弹框的情况下。但再一次实际使用效果没想象中差,如果忽略它叠叠乐的感觉,和在移动端点击菜单的弹出菜单差不多。

  • 但总的来说,还是一个奇怪的操作。

4. 嵌入式自动伸缩(这个名字不好起)

移动端下拉菜单交互

这个设计叫滚筒

  • 选项在当前层级界面展现,把其他内容往下挤,完成选择后自动收起。

  • 也是一个避免了进入新层级的交互。iOS里的时间选择器经常会用这种方法出现。

  • 坏处是对当前界面影响较大,进出场界面大幅变动。同时嵌入式给人不稳定不安全的感觉,好像一不小心碰了别处这些选项就消失了。尤其是选项较多还需要上下滑动的情况。我觉得这种方式使用于选择项很少,且当前层级内容本身也简洁的情况。

5. 选择内容平铺出来

  • 好处当然是所需操作最少,只需要勾选一个操作,坏处也很明显,太占地儿。一般情况下很少见,除非本身这些选项就是核心内容的情况,比如调研问卷。最常见于选择性别时的男女选项。

  • 没有截图

文/初三_RR(简书作者)原文链接:http://www.jianshu.com/p/50438669330b#

以上是原作者在实际案例中碰到的移动端下拉菜单交互方式,欢迎大家在文章、woshiue微信、@imaue微博中讨论~

在微信Aioued或者WoShiUE的聊天界面回复数字9可以获得可以用的axure8.0 激活码一枚。


AG8亚游设计www.b0yq.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

]]>
Wed, 11 Apr 2018 00:45:52 +0000 Johnson 1949 http://www.b0yq.com/blog/?post=4870
移动端用户体验:底部导航 http://www.b0yq.com/blog/?post=4869 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

设计师都知道,设计不只是为了好看。设计也决定用户如何融入一个产品,无论是网站还是app。这是一种交谈。导航就是一种交谈。因为如果用户不明白使用方式,你的网站或app再漂亮都没用。

移动端用户体验:底部导航

为什么底部导航如此重要?

Steven Hoober在他的关于移动设备使用状况的研究中发现,49%的人依靠一根手指完成手机上的操作。在下图中,手机屏幕上的画面表示大致的触摸范围,不同颜色表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及;黄色表示需要伸长手指;红色表示需要用户改变持握方式。

移动端用户体验:底部导航

图片来源:uxmatters

图片表示单手操作智能手机的舒适程度。

把最重要最常用的操作放在屏幕底部非常重要,因为它们能用一只手指轻松触及。

标签栏

许多应用遵循这一规律,将底部导航(又称作标签栏)作为最重要的app功能。Facebook的核心功能一触即达,能够在不同功能中迅速切换。

移动端用户体验:底部导航

Facebook的iOS底部标签栏。

底部导航设计的3个关键

导航通常是搭载用户的交通工具。底部导航应该承载重要性等同的顶级目的地。这些目的地需要在app的任何地方留有直接的入口。

优秀的底部导航设计遵循以下3条定律:

1. 只显示最重要的目的地

在底部导航中使用3到5个顶级目的地。如果少于3个,请考虑使用标签代替。

移动端用户体验:底部导航

底部导航避免使用5个以上,因为点击目标相互会过于接近。在标签栏放置过多的项目,让人们难以点中他们的目标。每多展示一个标签,app的复杂性就增加一分。

移动端用户体验:底部导航

如果顶级目的地确实有5个以上,不要用底部导航来承载这些入口,请考虑放在其他位置。

避免内容滚动

小屏幕上显而易见的解决方式,就是部分隐藏式的导航——不必担心屏幕空间的局限,把标签项放入滚动的标签栏即可。但是滚动的内容效率低下,因为你得滑动一下才能看到想要的选项。

移动端用户体验:底部导航

iOS版Rookie Camapp中就存在“看不见就想不到”的问题。

2. 表达出当前位置

没有表达当前位置,可能是app菜单中最普遍的错误。“我在哪里”是用户需要回答的基本问题之一,这是顺利操作的前提。

用户应该在没有任何外部引导的情况下,一眼就看出如何从A前往B。应该提供适当的视觉线索(图标、标签和颜色),操作就不需要任何说明了。

(1)图标

正因为底部导航操作以图标方式展现,它们所表达的内容应该要适合通过图标来表达。有些用户熟知的通用图标,通常这些都表示搜索、邮件、打印等功能。不幸的是,“通用”图标很少。app的设计师常常用图标来代表一些非常难以分辨的功能。

老版本的Bloom.fm应用Android版。真是相当难理解用户当前所处位置。

(2)颜色

避免在底部标签栏使用不同颜色的图标和文字标签。应当使用app的主色来表示视觉焦点。

移动端用户体验:底部导航

左图:不同颜色的图标让app看起来像是圣诞树;右图:应该只用主色。

遵循一条简单的法则——用app的主色来提亮当前的底部导航项(包括图标和文字标签)。

iOS版Twitter的底部菜单栏。Messages是当前选中项。

如果底部导航栏有背景色,就要用黑白的图标和文字标签。

移动端用户体验:底部导航

左图:避免使用彩色图标和彩色背景的组合;右图:使用黑白图形。

(3)文字标签

文字标签要为导航图标提供简短有意义的描述。不要用太长的标签,因为它们不能截断或换行。

移动端用户体验:底部导航

避免换行、截断和缩小文字标签。

菜单元素要易于浏览。用户要能理解他点击某个元素时会发生什么。

(4)点击尺寸

目标区域足够大,才易于点击。将界面宽度按操作项的数量等分,计算每个底部导航操作项的宽度。或者,把所有底部导航项的宽度设为最宽。

Android规范建议按照下图的尺寸设计移动端的底部导航栏。

移动端用户体验:底部导航


AG8亚游设计www.b0yq.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

]]>
Tue, 10 Apr 2018 01:01:48 +0000 Johnson 1949 http://www.b0yq.com/blog/?post=4869
简述:腾讯移动端页面设计规范 对你有启发吗? http://www.b0yq.com/blog/?post=4868 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

小编今天分享一下腾讯移动端页面设计规范,看看会对你有什么启发?

简述:腾讯移动端页面设计规范 对你有启发吗?

直接进入主题

首屏范围:750X1218像素

移动端的首屏尤为重要,很多时候用户只关注到首屏的内容。并且很多移动端页面采用分屏浏览的的形式,这种形式让用户更集中注意力在一个画面中。首屏范围的设定选取的主流机型IPHONE6的分辨率大小,安全宽高为向下兼容到iphone5s的尺寸。

首屏范围的由来

市面上的机型超过65%的长宽比为178:100,如果按照设计app的思路,只需要选取一个中间设备ip6尺寸来适配即可,但我们发现微信/手Q的浏览器头部并不是按照等比来缩放的,所以如果设计稿按照iP6尺寸来等比例放大到iP6 plus上,会出现留有一条黑边。

简述:腾讯移动端页面设计规范 对你有启发吗?

iphone5/6的头部为128高度; 而iphone6 plus的高度为192导致浏览框的比例不完全统一

适配剩下35%尺寸

让设计稿在178:100的比例中显示最佳状态,在其他尺寸尽量信息完整

页面排版

简述:腾讯移动端页面设计规范 对你有启发吗?

标题文字

1、主标题建议在7个字内,一行最多不超过7字,标题一般是经过设计的字体

2、副标题文字需要能够说明详细活动信息,字体建议在24-40号之间

3、标题文字超过7个字的情况下,文字折行处理,并且加强重要词语

正文标题与内容

标题:字号48,使用粗体

正文:字号30点,使用常规体

引文和次要信息:字号24

段首无需空格,左对齐即可

简述:腾讯移动端页面设计规范 对你有启发吗?

简述:腾讯移动端页面设计规范 对你有启发吗?

文章列表的字号与间距

文章的标题不宜过长,建议控制在18字内

文章列表的间距需不得小于90px

字号建议用26~30号

页面组件

按钮

1、页面只有一个按钮时候,按钮居中对齐,按钮高度需要大于80px

2、如果按钮的重要级相当,建议用左右布局;不一致则建议用上下布局

简述:腾讯移动端页面设计规范 对你有启发吗?

页签与导航

简述:腾讯移动端页面设计规范 对你有启发吗?

1、移动端页面页签最多5个,页签字数一般2个,支持左右滑动切换页签

2、页签整体宽度与对应的内容宽度对齐,高度大于90px;字体大于30号,使用粗体

简述:腾讯移动端页面设计规范 对你有启发吗?

头部条的高度建议120px,icon的大小为100x100px

首页导航条:标签最多不超过三个

图标

热区大小 最小面积:44x44像素

图形大小 最小面积:30x30像素

游戏下载

建议将LOGO放置于页面的右上角,按钮大小:170x64像素左右

简述:腾讯移动端页面设计规范 对你有启发吗?

看完这些,是否对你有所启发呢?

AG8亚游设计www.b0yq.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

]]>
Mon, 09 Apr 2018 01:07:41 +0000 Johnson 1949 http://www.b0yq.com/blog/?post=4868
网站内部结构优化_如何优化网站的内部结构 http://www.b0yq.com/blog/?post=4867 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

如何优化网站的内部结构?网站内部结构优化是网站SEO过程中不可缺少的环节,在网站建设的初期就要做好设置工作。网站内部结构的优化主要包括:网站结构、页面元素、后期优化等,下面就从这几个方面为大家讲解,希望能给一些不了解的朋友提供实质性的指导作用。

      1、结构目录

目录的设计是网站建设中很关键的环节,是一个网站的骨架,所以网站目录直接关系到用户的体验。建议:目录的组织结构从首页到内容页点击不超过三次,也就是三级:首页-栏目页-内容页。目录名可采用网站的一些核心产品词。

2、链接

我们说一个网站的优化最重要的两点是什么?对,是链接和关键词。如果说目录是一个网站的骨架,那么链接就是网站的血液。建议:网站链接的设置以英文形式展现,简短易懂,使用静态化URL,迎合搜索引擎的喜好,更好的服务于网站优化。

3、robots协议

robots.txt相当于网站的一张脸,一张接客的脸,接的搜索引擎的蜘蛛(或机器人、爬虫)。它是一种抓取协议文件,用于告诉搜索引擎spider,此网站中的哪些内容是不应被搜索引擎的索引,哪些是可以被索引的。

现在很多地方都有自动生成工具,百度站长工具,或者一些插件等,根据自己的喜好选择使用。这里有一个小技巧,将网站的地图链接放置在robots内,对网站的收录绝对是不小的帮助。具体方法:在最后一行增加 Sitemap:http://www.example.com/sitemap.xml。

4、Sitemaps

Sitemaps就是一个管家,总结统计网站的数据链接,将汇总的结果更好的展现给网站的客人-搜索引擎spider。

Sitemaps一般有html与XML两种格式。目前百度、Google、雅虎、微软等搜索引擎都支持Sitemaps,Sitemaps的提交可以通过各个搜索引擎的站长平台提交,也可以将其地址放在robots.txt文件里,上面已经说过了。

5、404页面

  404页面是客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应,且不知道原因所返回的页面。据说在第三次科技革命之前,互联网的形态就是一个大型的中央数据库,这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的,如果在数据库中没有找到请求者所需要的文件,或者由于请求者写错了文件编号,用户就会得到一个返回信息:room 404 : file not found。404错误信息通常是在目标页面被更改或移除,或客户端输入页面地址错误后显示的页面,人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的room 404是不存在的,在http请求3位的返回码中,4开头的代表客户错误,5开头代表服务器端错误。

6、nofollow标签

nofollow标签是尽量减少垃圾链接对搜索引擎的影响,当超链接中出现nofollow标签后,搜索引擎会不考虑这些链接的权重,也不用使用这些链接用于排名。

nofollow标签通常有两种使用方法:一种方法是将"nofollow"写在网页上的meta标签上,例如:。另一种方法是将"nofollow"放在超链接中,例如: 。

需要注意的是,如果一个网站链向了某些被搜索引擎认为是垃圾网站的地址,那么这个网站的权重也会受到影响。因此对于一个网站来说,nofollow标签的使用十分必要。

7、统计代码

网站统计分析工具应该是每一位站长都了解的,现在常用的就是百度统计、cnzz、谷歌分析、51等,具体的就不做介绍了。网站统计代码添加时,为了不 影响网站的加载速度,最好放在网站底部。

      相关拓展:关键词的爬行和抓取

       搜索引擎派出一个能够在网上发现新网页并抓文件的程序,这个程序通常称之为蜘蛛。搜索引擎从已知的数据库出发,就像正常用户的浏览器一样访问这些网页并抓取文件。搜索引擎会跟踪网页中的链接,访问更多的网页,这个过程就叫爬行。这些新的网址会被存入数据库等待抓取。所以跟踪网页链接是搜索引擎蜘蛛发现新网址的最基本的方法,所以反向链接成为搜索引擎优化的最基本因素之一。没有反向链接,搜索引擎连页面都发现不了,就更谈不上排名了。

       搜索引擎抓取的页面文件与用户浏览器得到的完全一样,抓取的文件存入数据库。

AG8亚游设计www.b0yq.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

]]>
Sun, 08 Apr 2018 09:31:00 +0000 释然 http://www.b0yq.com/blog/?post=4867