微信小程序开发页面怎样设计布局才好看?
微信小程序设计文档将所有的设计范例分为了四个部分,分别是:友好礼貌-清晰明确-便捷优雅-统一稳定
首先,每一个页面都应该聚焦于某个重点功能,不能与该功能无关,其次,页面的导航应该按照用户的预期进行。用户在操作小程序时,小程序应该为用户明示当前状态,同时应尽力减少用户在操作上的限制和等待时间。
在设计时,应该确保用户的误操作概率更低。文案及 icon 不让用户困惑也是减少误操作的重要方式之一,小程序在整体上应该要为用户提供整齐划一的功能,避免同一种视觉元素中在不同页面中有不同的样式。在开发过程中,可以将相同的组件的样式规定于一个全局 WXSS 文件中,以便开发时快速复用并保证视觉统一总的来讲就是小程序比普通的APP更讲究扁平化的设计,把它当作非常重要的准则。
产品设计在视觉上要表现的轻盈、干净、效率高;功能层级上要结构单纯、跳转少、层级简单;其次要高效率地展现内容,设计风格统一和谐。一. 轻视觉视觉上的轻盈是首当其冲的,给用户的直观感受会影响用户首次的体验。弱化次要功能在产品不断迭代的过程中,有些功能会逐渐边缘化,这在视觉处理上要有明确的表示。去除冗余减少线条其实这属于扁平化视觉的处理,去除边界和明显的区隔,更多是让内容本身来展现和区隔。视觉统一轻松操作个人认为,界面中视觉效果高度统一会让页面清晰协调,用户在操作过程中认知成本低,使用起来简单轻松。从搜索到添加,以及详情页的上滑标题位置,界面高度统一所以视觉上就保持了标题样式的高度统一,创建清单控件和搜索框也在高度上保持了统一,给用户在略复杂的搜索添加流程上有个较好的体验。
二. 轻交互优化标签编辑逻辑
复用位置灵活变化减轻页面在一些内容较多的页面,编辑或者滑动时,能灵活把控一些控件的变换可以有效利用有限的空间而不影响操作体验,但前提是控件变化后不影响操作使用。不能跳出产品给的框架做突破性的、根本性的总结好坏标签是本产品的灵魂、基础,区别于其他评价类产品的本质。
作为视觉想急于表现喜爱的形式感而忽略内容展示作为视觉设计,可能都有一种终于有机会发表自己喜爱的形式的感受,但在具体的产品设计中不一定合适,在形式感和内容显示上做了错误的取舍。当然,经过更久推敲或许也会有更优的解决方案。
速成应用要提醒设计师,在设计小程序界面的时候需要注意这些差异:
多花点功夫在排版上。在移动设备上使用程序,不像是在电脑上使用那么轻松自在。为小程序的元素和文字进行排版时,这些元素和文字应适当放大,同时加大间距。避免花哨元素。过于花哨的元素在小屏幕上容易「吸」走用户的注意力,不符合设计文档中的规范,同时会增加用户的网络流量和载入时间。注意导航系统设计。小程序没有「面包屑」(导航指示器),在设计的时候需要确保用户不会在页面中迷失,同时需要保证用户的下一步符合其预期。对微信小程序设计的一些粗浅见解就到这里为止了。希望能帮助开发者轻松开发出具有优良体验的小程序。