• 掌握单页站点设计的5大技巧


    
    在设计师们的不懈探究之下,单页设计已经摘掉了混乱单调的帽子,构建起了一套相对照较完好的设计体系,保持简洁而美丽的设计,重视内容,强调清晰明了的表达。从用户体验的角度上来看,单页设计确实有其优势也有缺陷,可是值得注意的是,用户的确是喜欢单页站点的浏览方式,这也是单页设计流行开来的基石。

      ·单页站点导航方式简单,用户不易迷路,仅仅需上下滚动。
      ·单页站点内容更专注,信息传递更清晰,更有针对性。
      ·单页站点差点儿能够在全平台设备上流畅浏览,滚动和滑动浏览替代了点击

      而设计单页站点最大的挑战在于让用户保持滚动页面来浏览内容。大胆的色彩使用和美丽的排版并不能一直吸引用户的注意力。这个时候,假设能做好用户数据分析和A/B測试,能帮你距离用户的心理需求更近,设计出更贴合需求的网页。看过无数的案例和教程,还是做不出好的单页设计?你须要的,或许就是把握好以下5条设计建议,它们就是设计好单页站点的精髓。

     

    1、将内容切割成块

      当你打算通过一个单页来讲述一个故事的时候,千万要注意一点:不要让故事太拖沓,不要让信息过载。所以,合理分割内容非常重要,不要让过多内容挤压在一个区块。从头到尾都须要尽量保持媒体内容的清晰利落,在设计内容结构的时候,须要保持逻辑通顺和顺序清晰(what->why->how->where->when)。

      第二种保持吸引用户吸引力的方法,就是使用图文搭配的方式来讲故事。故事会将核心内容以跟易于接受的方式表达出来,它的自然逻辑会吸引用户读下去,严格来说,它在内容营销的范畴以内。这并非意味着你须要聘请一个写手来帮你来写故事,你须要做的是专注内容和它感性的一面,并尝试让你的网页更加人性化。

    2、设计高速訪问导航栏

      单页站点一般是用滚动的方式来浏览很多其它内容的,非常多站点干脆是从头滚到尾。用户打开网页,仿佛潜入内容的海洋,压根不知道网页的尽头在哪里,这样的设计的潜在危急在于,它可能会减少用户心理上的安全感。于是,一种比較合理的解决方式就出现了:将传统的导航栏设计融入单页设计。导航栏在网页的顶部或者两側常驻停留,随着滚动而改变,同一时候提醒用户TA在什么位置,同一时候保证了易用性和内心的潜在诉求。

      当网页足够长的时候,加上导航、回到顶部button甚至滚动栏都能够强化用户体验。

     

    3、号召用户行动

      当你问数字媒体营销者影响转化率最重要的因素是什么的时候,答案一般是“号召行动起来”(CTA)。当然,这样的精心策划的CTA行为只不过站点设计的一部分。为了特定的目标,号召用户行动的CTA行为事实上无处不在,吸引用户下载APP,引导用户体验DEMO,勾引用户注冊、填写表格,等等等等。

      好在单页网页中信息和内容更加集中清晰,所以CTA的使用效果也更加明显。一方面是页面通常更加简约,各个部分分工明细,还有一方面,当你使用故事来引导用户浏览的时候,你能够微妙地影响用户的心态,在高潮——或者最合理的而地方,来引导用户进行操作。

      当然,还须要补充一句:做好用户数据分析和A/B測试,确定站点适合使用哪种CTA,由于有的时候,即使是字体和色彩的变化,都可能明显影响转化率。

    4、保持简约,避免枯燥

      传统网页设计中,非常重要一个组成部分是设计站点主题,而且为内页准备若干模板,应对不同的需求。设计单页站点的时候,你须要面临很多其它的挑战,可是这也意味着你有着更大的创作空间。随着近年来CSS3,HTML5和JavaScript的高速发展,单页设计能够在保持简约的同一时候,还能引人入胜。那些灵动而美丽的的转场动画效果都是细节,可是哪个体验优异的站点不是这些精致的细节组成的呢?文章资料:www.yxkfw.com游戏开发网最好的游戏编程开发技术站点。

      当然,千万不要滥用,过犹不及,得不偿失。

    5、保持轻量级

      一个缓慢而载入时间漫长的单页站点是失败的。因为单页站点上的内容都集中在一个页面上,所以通常单页站点会比其它的站点来的更重,跟将就内容载入的技巧。如此一来,你又须要精打细算了。一些不必要的动画效果和无关紧要的设计元素,你须要酌情移除,这样能够显著缩减载入时间,提高浏览体验。节省用户的网页载入时间是你的首要任务,载入慢不仅会影响站点的搜索引擎优化,还会让你持续流失目标用户。所以,保持用户轻量级是非常有必要的。

    结语

      总而言之,单页设计是吸引用户的重要方式,要让它价值最大化,你不仅须要做好设计,还须要把握上述5个重要技巧。当然,站点的设计在非常大程度上取决于站点所服务的企业和机构的特征,这5大技巧的使用也与此息息相关。结合经验,灵活运用,相信你能设计出令人印象深刻的优秀网页。

  • 相关阅读:
    [轉]javascript 的 location 各種用法
    [轉]PHP命名空间规则解析及高级功能
    [轉]虚拟机随谈(一):解释器,树遍历解释器,基于栈与基于寄存器
    [轉]深入理解SQL Server 2005 中的 COLUMNS_UPDATED函数
    [連接]JavaScript中链式调用之研习
    [轉]安装SQL SERVER 2008时,提示:服务SQLBrowser启动请求失败
    AS支除兩邊的空格
    [轉]详解UML六大关系(依赖、类属(继承)、关联、实现、聚合和组合)
    [轉]jQuery UI 关闭父窗口打开的Dialog
    [轉]让PHP支持像jQuery那样的链式操作
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4301254.html
Copyright © 2020-2023  润新知