axure设计网站

对于很多资深的设计师来说,都想创建自己的个人网站,把自己工作的经验或者好的作用品分享给大家,供大家参考学习,作为一个可以互相交流的平台,按照自己的喜欢的风格设计,有没有一点小小的成就感。以下是用Axure设计网站的基础课程,文中首先提到的是在网站设计之前,先来了解针对的用户群体,是什么使用习惯、用哪种浏览器以及经常用到的操作系统,以此来确定大致的方向。

1.我们在做网站设计之前,要先了解我们的用户群,了解他们用的哪种操作系统,哪种浏览器,使用习惯等。



2.同样的我们也需要了解用的是使用设备,设备的屏幕分辨率。



3.了解一些网站的流量指标,打开页数停留时间等。



4.了解用户所使用移动设备品牌和系统能够更针对性的去设计用户喜欢的产品。



5.这里给大家实操一下,顶部的灰色矩形作为导航栏,蓝色参考线内的矩形作为内容区域【如图所示】。



6.然后在导航栏内拖入图标素材和文字信息【如图所示】。



7.这里给大家总结了一下单层导航和混合式导航高度的一个常用数值区间【如图所示】。



8.【如图所示】这个是网页功能栏高度的一个常用数值区间。



9.我们回到【Axure】对网页做一些修改【如图所示】。



1.【行宽】,就是每行文本的长度,这里给大家整理了一些常用的长度值【如图所示】。



2.【列表间距】,针对动态新闻类的列表展示,一般5到10条不宜过多【如图所示】。



3.【图标】在制作的时候要有统一的视角、倒角、尺寸、颜色等,会意要直观,要选择合适的尺寸【如图所示】。



4.【文字颜色】,颜色的搭配不要过多,一般采用三种就可以了,先从logo上确定颜色的主副,然后原则与之相近的颜色【如图所示】。



5.【布局】,版块的排版在视觉上尽量符合纵向分割,横向模块间距要统一,纵向可以根据需要有适当的区分【如图所示】。



6.【布局-文字】,首页上文字无需空格,正文内容应该有空格【如图所示】。



1.【圆角】我们在使用圆角的时候要注意边框内外边距和内容的距离。



2.【设计规范/标注】设计前需要对整个页面进行规划,主副色,字体,版块间距等【如图所示】。



3.【切图】我们在进行图片裁切和图片输出的时候要注意一些问题【如图所示】。



4.【布局】多数为纯色背景,针对圆角按钮要分为左中右三个部分,有图层样式的对象则需要切成图片【如图所示】。



5.【页面统一性】在色彩、间距、风格、目标对象上要有统一性。



6.【图层命名规则】我们在给图片进行命名的时候要注意很多规则【如图所示】。



7.【尾部】主要有内部导航、外部导航、各类许可证、授权声明等【如图所示】。



8.在最后给大家列举一些色彩的使用规范【如图所示】,本节课到此结束,谢谢观看。



1.选中导航栏目图层,修改背景和文字颜色【如图所示】。



2.【如图所示】在设计的时候根据参数来进行内容大小的排版。



3.【如图所示】对于字体我们要学会选用不同的大小和颜色来达到一个更好的效果,



4.随着显示屏幕越来越大呢,14px大小的字体比较常见,所以以后设计时尽量考虑14px字体的应用。



5.对于艺术字体呢,根据不同的情况选用不同的处理方式效果会更好【如图所示】。.



6.在排版上,这里给大家列举出了四个需要注意的地方【如图所示】。



7.这里给大家找了一些关于排版【对齐】部分的案例【如图所示】。



8.【对比】有很多需要注意的地方,比如大小啊、颜色啊、明暗等【如图所示】。



9.在文字【间距】上,这里给大家简单的举了一个比较常用的数值【如图所示】。



10.【图片间距】呢,先对网页进行栅格处理,计算每个版块的大小,然后在进行排版会更加的规范一些【如图所示】。



11.版块的【上下间距】控制在80px以内,并且需要保持整个站点间距的统一。



12.这里用一个简单的原型图给大家作为参考【如图所示】。



1.首先跟大家解释一下什么是【栅格系统】,【如图所示】。



2.这里简单的制作了一个页面的布局排版,大家能比较直观的看到栅格系统的作用【如图所示】。



3.【布局样式】列表中使用两种相同样式但是颜色不同的背景可以间隔显示的内容【如图所示】。



4.【导航数目】人在短期记忆数目5-9个,所以在数目上7±2为最佳。



5.【按钮】这里给大家列举出了按钮的五种状态【如图所示】。



6.【banner-元素】banner的组成有很多种元素,文案字体、产品、背景、辅助图形等【如图所示】。



7.【banner-高度】首页轮播图片要在600px以内,二级页面导航下在300px以内,配色要尽量接近主色色调【如图所示】。



8.【直线】大小为1px,边缘要清晰无虚边,这里给大家介绍两种画直线的方法【如图所示】。



9.【圆角】这里给大家列举出了圆角的使用场景和常用大小【如图所示】。



索引

Axure基础课程之网站设计1

如何用Axure进行网站设计3

Axure怎么进行网站设计5

怎样用Axure进行网站设计2

Axure如何进行网站设计4

相关百科

最新知识

相关教程

特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证