华丽棋牌客户端|小程序教程 |如何做 出狂拽酷炫的小程序_点点客
点点客

小程序教程 |如何做 出狂拽酷炫的小程序

点点客 2017-10-17

  现在市 面上主流的第三方小程序开发平台基本都是模板流,即用户自主选择模板,替换模板里的内容,用比较 简单的操作制作出一个专属小程序。

  用着同样的一个模板,有些人 可以做出狂拽酷炫的小程序,有些人 做的就土到掉渣。前者就被称为“别人家的小程序”。同样是模板选手,为什么 有买家秀和卖家秀之间的鸿沟差距?那是因 为你没掌握使用模板的技巧。

  小程序教程

  这期教程简称“不管你 家美工是和小姨子跑了还是回家生孩子了你都可以自食其力做出美到爆炸的小程序教程”

  我们以 点点客小程序的微官网功能中的模板为案例,实际来捣鼓一下吧。

  1、模板的选择

  由于图片是可替换的,所以模 板其实就是个骨架。选择模 板时不要被好看的图片所迷惑,因为最 终你还是要替换这张图片的。

  把自己当做X光扫描 仪来看模板最好,剥掉皮肉,只看骨架,骨架是 不可更改的部分。骨架适合内容的,才是合适的模板。

  左图是表面,右图是本质



  勾勒出骨架后,再根据小程序的内容、结构、栏目数量、标题长度,选择合适的模板。其中,最需要 注意的是栏目数量。栏目相 当于小程序内容的一级标题,相对是比较固定的,很难随意删减增加,而首页 模板的主要限制就在于栏目数量,所以栏 目数量是选择首页模板的最优先衡量依据。

  点点客 小程序的首页模板中的栏目模块,会根据 你实际输入的栏目自动调整,并非强 制要求与模板中的数量一致。但是从 视觉协调上考虑,不同的 模板的栏目数量修改性差异很大。

  栏目数量修改性强

  栏目导 航纵向排列的模板修改性最强,无论是 增加还是减少栏目数量,对画面 的平衡感影响都很低。如果需 要的栏目数量并非主流的3-6个时,建议使用此类模板。


  


  栏目数量修改性中等

  对于栏目3×2排列的模板而言,除了默认的6个栏目数量,单行3个栏目同样美观,此类模 板有一定的修改性。



  但是如果是4个或者5个栏目,在这类模板上,依然显得画面不平衡。所以此 类模板建议栏目数量恰好为一行或者二行的小程序选用。



  栏目数量修改性弱

  栏目呈 现环形排列的模板的栏目数量修改性较弱。下图的 两个模板如果将栏目减少到5个,环形就 会出现明显的缺口,可以说只适合有6个栏目需求的小程序。


  总结

  选择首页模板时,如果有 和需要的栏目数量完全一致的模板,就优先 选择数量匹配的;如果没 有数量完全一致的模板,就选择可修改性强的。

  2、背景图的选择

  背景图 并不是喜欢什么图就可以用什么图,也不是 好看的图片用上去就绝对好看。需要结 合对模板版式的观察和模板已有颜色的搭配综合起来选择背景图。

  颜色

  首先需 要决定的是背景图选择深色还是浅色系。比如下图,模板的 栏目导航使用了有透明度的白色色块,栏目文 字和图标都是白色。这样的 模板必须选择深色的背景,一旦用了浅色背景,栏目导 航根本看不清楚。




  如果栏 目导航的色块是彩色的,那么背 景图最好与色块有相互的呼应,接近色块颜色,否则色 块与背景两者间的脱节感就会非常强,各自为营。

  比如下 图的模板使用了黄橙暖色系的栏目色块,如果使用暖色系背景,画面整体色彩协调,观感舒畅;而使用冷色背景,画面色彩突兀,颜色杂乱,视觉效果就很差。



  图片布局

  不同的 模板对背景图的布局要求也截然不同。

  有些首 页模板强调栏目导航部分,栏目部 分所占面积较大,那么背 景不易喧宾夺主,有一定模糊处理的,或者简洁、纯色的 图片较适合成为背景。

  有些模 板明显为图片的焦点位置预留了空间,那么背 景图片最好是有突出的中心点的特写图片,不适宜使用全景图片、过分铺满的图片,需要有适当留白。在寻找、处理背景图片时,需要注意空间位置感,避免栏 目和背景图案的重叠遮盖。



  3、图片&色彩工具

  gif 图

  点点客 小程序可以放入gif动图,比如测试田666 的首页 二屏就是一张小狐狸的动图,在一片 静态的小程序中就像一个彩蛋一样让人惊喜。

  安利一个gif图库

  http://www.rafael-varona.com/

  这个gif图库里 面的动图有趣又有逼格,适当插 入动图让小程序“活”起来。

  颜色搭配

  由于小 程序是多页面的,色彩的 协调和统一就非常重要。

  首先根 据产品或者品牌形象确定你想要的调性,比如卖 糖果的商家追求甜美可爱风,那么可以以粉色为主,围绕粉 色进行色彩搭配。

  一般选用1-2种主色调,配上1-2种辅助色,避免太 多颜色混杂使小程序的页面看起来脏乱。

  颜色搭 配的选择可以参考大品牌海报、网站的色彩搭配,也可以使用配色网站。




  LOL Colors

  https://www.webdesignrankings.com/resources/lolcolors/

  这是个 很有意思的配色网站,当你把 鼠标移到水滴上时就会出现颜色代码,复制代 码粘贴到小程序的后台就可以啦。

  看了这 期教程是不是已经控制不住麒麟臂想要做个小程序试试了?

  赶快注 册点点客小程序去创造个美丽新世界吧。

还想了解小程序?戳下面 链接一探究竟吧:

小程序 教程丨全宇宙 最全最细的小程序操作手册——注册篇

小程序 教程丨全宇宙 最全最细的小程序操作手册——授权篇

小程序教程 | 全宇宙 最全最细的小程序操作手册——关联篇

小程序 教程丨全宇宙 最全最细的小程序操作手册——附近的小程序篇

小程序 教程丨怎么删 除已经添加的小程序

小程序教程丨个人用 户如何注册小程序

小程序 教程丨我读书少,你可别骗我,做小程 序到底要多少钱


免责声明

此版块 内容仅用于学习、研究或欣赏。我们不 保证内容的正确性。通过使 用本站内容随之而来的风险与本站无关访问者可将本网站提供的内容或服务用于学习、研究或欣赏,以及其 他非商业性或非盈利性用途,但同时 应遵守著作权法及其他相关法律的规定,不得侵 犯本网站及相关权利人的合法权利。

友情链接:          鍚嶉棬妫嬬墝缃戠珯