重庆UI设计：手机网站导航页的设计

很多手机网站导航页设计十分的精美，让人情不自禁的继续浏览下去，它们在你未使用产品之前提前告知你产品的主要功能与特点，第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好，从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。

1、文案言简意赅，突出核心。

根据爱尔兰哲学家汉密尔顿观察发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。如果表达起来困难，可以辅助一小段文字进行解释或补充。因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。

精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。

产品设计 引导页设计 用户体验

2、富于情感化

(1)文案具象化

通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。以天猫为例，天猫是一款购物应用，在设计上通过商场、店铺的实际场景的具体描绘，渲染轻松、欢快的购物过程。

(2)页面动效、页面间交互方式的差异化

之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。

而页面间的切换方式除了传统的卡片左右滑动的方式外，可以结合线条、箭头等进行引导，通常会配合动效。例如网易新闻客户端、印象笔记·食记，它们在引导页的设计上采用了线条作为主线贯穿整个引导页面，小圆点显示当前的浏览进度，滑动的过程中有滚动视差的效果。

3、视觉聚焦

在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。视觉聚焦包括两部分，一 是文案的处理，要注意层次，主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散 的方式，聚焦点的视觉面积大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律，从上到 下，从左到右，从大到小。因此可以根据这个视线流的规律来进行引导页的设计。

4、与产品、公司基调相一致

引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致，这样在用户还未使用具体产品前就给产品定下一个对应的基调。产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等，通过对比就能发现他们在引导页设计上的差异。

这样一方面有利于产品一脉相承，与产品使用体验相一致;另一方面也会进一步强化公司形象。

以来往为例，来往是一款针对个人用户的及时通讯应用，主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能，也是想给用户创造不一样的沟通方式。因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品。

总之：想做好引导页的设计，在理解用户对引导页需求的基础上，怀揣热爱产品的情怀，依靠精致的布局，巧妙的构思，贴切的氛围渲染，再加一点点特色。当然光讲是枯燥的，还是需要设计师在具体的设计中不断实践，总结出新的观点与方法，探索出别具一格的引导页设计。

分享名称：重庆UI设计：手机网站导航页的设计
网站链接：https://www.cdcxhl.com/news/260670.html

成都网站建设公司_创新互联，为您提供网站策划、网站导航、小程序开发、软件开发、Google、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联