所有栏目 | 云社区 美国云服务器[国内云主机商]
你的位置:首页 > 云社区 » 正文

UI设计做小程序时,页面太生硬怎么优化?

发布时间:2020-04-12 09:14:28

资讯分类:做小  生硬  ui  页面  程序  导航  设计
UI设计做小程序时,页面太生硬怎么优化?

微信小程序设计简版指南

1. 友好礼貌

重点突出

避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

2. 清晰明确

导航区(iOS)

微信进入小程序的第一个页面,导航区通常只有一个操作——“返回”,即返回进入小程序前的微信页面。 进入小程序后的次级页面,导航区的操作为——“返回” 和“关闭”。 “返回”,即返回上一级小程序界面或微信界面。“关闭”,即在当前界面直接退出小程序,回到进入小程序前的微信页面。

导航区(Android) 导航区仅存在唯一操作——直接退出小程序,回到进入小程序前的微信或系统桌面,安卓手机自带的硬件返回键执行返回上一级页面的操作。

这里主要讲解 Android 和 iOS 的差异化,设计小程序时可以不用考虑。

导航区(颜色) 导航区颜色支持自定义,选择与提供的顶栏颜色相和谐搭配的背景色。

标签分页(Tab)导航

标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。

启动页加载

启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。

下拉刷新加载

在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发。

3. 清晰明确减少输入

由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时因尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

例如下图中,在添加银行卡时,采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ,充分利用这些接口将大大提高用户输入的效率和准确性,进而优化体验。

除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要是键盘输入。

4. 视觉规范字体规范

微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如下:

蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。

主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑。

设计流程

1.界面尺寸 iPhone6:750x1334px,这里主要是官方的控件是@2x,所以相对来说用750x1334尺寸会更加快捷。如果用@1x图设计也是可以的,只是相对麻烦很多。

2.字体iOS

一般设计稿就只需要做 iOS 版本即可,如果遇到安卓的弹窗设计可以采用安卓的字体来设计,当然并非绝对的,不过大部分设计师都只做 iOS 版本,Android 版本只需适配好即可。

iOS

中文字体:PingFang SC

英文字体:SF

Android 中文字体:Source HanSans CN 英文字体:Roboto

3.导航栏 调用 WeUI 基础控件库导航栏,如果想跟线上导航栏效果保持一致,可以通过截图或者自己重新优化微信导航栏。

4.键盘

官方并未给出键盘控件,可以通过查阅开发的组件来得知小程序键盘种类,可以在用到的时候通过截图放入视觉稿交付开发即可。

5.按钮

大家要注意小程序按钮有内描边,而且内描边是有不透明度的,如果你没仔细看小程序的官方按钮,自己重新做的话,很有可能忘记给透明度(前端开发很容易忽略这一点,导致最后的效果是给了双重描边。所以个人建议是能用小程序控件就用控件,防止到时候页面按钮不统一。开发一般就直接调用控件了,很容易忽略这些细节,而且你有时候走查的时候也不一定会注意到这些细节,与其浪费大量的时间走查,不如在开始做的时候就按照小程序的官方规范来做,只是在按钮的颜色上做修改,其他圆角,大小,描边都尽量保持不变)

6.小程序图标

如果你重新设计小程序,需要给图标,图标给方形:144x144px 。

经验总结

1. 小程序注重轻量与便捷,设计过程中鼓励使用原生控件,多关注微信发布的 API 和组件接口,在设计小程序相关场景时,避免过度设计,加快开发进度。

2. 如果要做一些特殊的控件,最好先询问开发是否可实现,防止浪费大量的设计精力。

3. 提供已经压缩的 PNG 图,提供一套切图即可。( @2x 或者 @3x )

4. 底部导航栏如果是开发自己写,在切换页面时,会出现闪动(不建议自己定义底部导航栏)

5. 设计按钮时,尽量统一按钮尺寸,按照常用按钮、线性按钮、小按钮三种规格来设计。

6. 注意分割线1px,开发很容易写成2px,记得走查时注意分割线粗细。

7.多跟同事(设计、前端)交流,互相分享你们的经验,这样才能进步的更快。

UI设计做小程序时,页面太生硬怎么优化?

非常感谢您的邀请!

小程序最早出现于微信APP端,由于它的无需下载性结构轻量化功能简洁化,现在已经有很多厂家在微信支付宝头条等APP应用进行上线小程序进行使用!

倘若小程序的UI界面设计很生硬,有哪些办法可以优化呢?其实小编认为小程序也是APP的一种,我们可以参考APP的设计风格和其它互联网公司的小程序风格,让自己的小程序更有活力!


1.页面要有好的图标!

页面中图标作为必不可少的元素,它直接影响着用户的第一感觉!“好的”图标需要保持粗细、大小、风格和修饰元素必须一致!

以微信的【美团外卖】小程序为例,我们在选择吃的类型和购买的方式时,这些选择的图标都统一形状为圆形,颜色方面每个选项都是单一的渐变色,而且最里面的一层有标志的icon都是灰白色主,总的来讲各个选项的图标风格是很统一整体的!


2.排版内容要规划好!

页面内容的排版通常以“切割”方式进行划分,在切割时为了给用户良好的视觉体验,设计师要根据内容的具体使用场景,选择正确的“线切割”、“面切割”和“留白切割”方式进行排版

进入美团外卖小程序的界面首页,我们发现它采用的是“留白切割”方式进行排版,通过这种切割方式,它在每段的内容都有所不同,比如上图中,第一段图片中“鲜汁道龙虾饭店”是其每日热门饭菜店面的推荐,然后第二段“神价格”是不同类型食谱非常优惠的饭菜信息,再看第三段“附近商家”这个功能为用户推送快速饮食的选择!每段的功能内容在图片的底部加了一层底灰色,实现立体效果!


综上,通过图标的统一风格样式处理和内容选项分段,让小程序页面不再看的生硬!当然如果想优化的更好,我们也需要配合项目相关的程序开发人员进行【动态效果】的处理,比如界面功能选择后,页面重新加载的很多内容时,通过缓冲的方式动画效果过度,增强用户操作体验!

UI设计做小程序时,页面太生硬怎么优化?

做小程序就是不随波逐流,不随波逐流,主要是抓住小程序的特点。小程序页面,主要结合产品功能,用户定位,提供信息匹配和简单交易功能,从而达到良好的推广引流。

1、页面设计要有层次感

2. 长形式处理

3.平的页面层次结构

4. 清晰的布局和简单的空白


UI设计做小程序时,页面太生硬怎么优化?

可以上设计中国去看相关专业的设计案例。不赞成抄袭,因为我也是设计从业者,但可以借鉴学习。

UI设计做小程序时,页面太生硬怎么优化?

非常感谢您的邀请!

小程序最早出现于微信APP端,由于它的无需下载性、结构轻量化、功能简洁化,现在已经有很多厂家在微信、支付宝和头条等APP应用进行上线小程序进行使用!

倘若小程序的UI界面设计很生硬,有哪些办法可以优化呢?其实小编认为小程序也是APP的一种,我们可以参考APP的设计风格和其它互联网公司的小程序风格,让自己的小程序更有活力!

1.页面要有好的图标!

页面中图标作为必不可少的元素,它直接影响着用户的第一感觉!“好的”图标需要保持粗细、大小、风格和修饰元素必须一致!以微信的【美团外卖】小程序为例,我们在选择吃的类型和购买的方式时,这些选择的图标都统一形状为圆形,颜色方面每个选项都是单一的渐变色,而且最里面的一层有标志的icon都是灰白色主,总的来讲各个选项的图标风格是很统一整体的!

2.排版内容要规划好!

页面内容的排版通常以“切割”方式进行划分,在切割时为了给用户良好的视觉体验,设计师要根据内容的具体使用场景,选择正确的“线切割”、“面切割”和“留白切割”方式进行排版!

进入美团外卖小程序的界面首页,我们发现它采用的是“留白切割”方式进行排版,通过这种切割方式,它在每段的内容都有所不同,比如上图中,第一段图片中“鲜汁道龙虾饭店”是其每日热门饭菜店面的推荐,然后第二段“神价格”是不同类型食谱非常优惠的饭菜信息,再看第三段“附近商家”这个功能为用户推送快速饮食的选择!每段的功能内容在图片的底部加了一层底灰色,实现立体效果!

综上,通过图标的统一风格样式处理和内容选项分段,让小程序页面不再看的生硬!当然如果想优化的更好,我们也需要配合项目相关的程序开发人员进行【动态效果】的处理,比如界面功能选择后,页面重新加载的很多内容时,通过缓冲的方式动画效果过度,增强用户操作体验!



UI设计做小程序时,页面太生硬怎么优化?

做小程序就是不随波逐流,不随波逐流,主要是抓住小程序的特点。小程序页面,主要结合产品功能,用户定位,提供信息匹配和简单交易功能,从而达到良好的推广引流。

1、页面设计要有层次感

小程序提供的核心价值,或能吸引用户兴趣的地方,需要让用户一眼就看到,深思熟虑并突出。其他辅助值闭环功能帮助用户以最自然的姿态完成剩余的操作。清晰的优先级。

与其他招聘产品相比,本产品的特点是识别潜在的中小企业,并基于LBS定位推荐周边企业。在1的设计中,知名团队、知名风投、近期融资等标签都有一定的隐蔽性,需要用户去探索去注意。因此,在修订版2中,用户感兴趣的标签作为一个层次的入口,强调。

2. 长形式处理

表单内容过多过长会使用户产生心理排斥,增加放弃的可能性。因此,在设计长表单时,可以改变设计风格(不要太多)来减少无聊感,可以清楚地划分块,减少跳跃性,可以用动作代替输入。

3.平的页面层次结构

不能跳跃来减少跳跃,跳跃新页面会增加用户适应新页面元素的成本,同时小程序页面层次太多,会让用户感到繁琐焦虑。

可减少输入无输入,以点击、拖动等手势操作代替文本输入。将流行的、常用的、历史的信息放在前面,减少用户的重复性工作。

4. 清晰的布局和简单的空白

先进的小程序首页,会给用户白色的、简洁精致的页面,符合现代人的审美。例如“在线”小程序模板。

另外,小程序是轻量级的应用程序,所以不要使它们的页面太复杂。保持简单明了。确保他们告诉用户他们在哪里,他们可以去哪里。同时,应该有清晰的底部导航,这样用户才能快速找到他们需要的信息。导航标签应该不少于2,不多于5。

5. 统一的风格

小程序的整体色彩风格应该与你的品牌主题相一致,让客户能够记住。比如美妆类的小程序,最好使用一些暖色,粉色会更合适;客房服务类的小程序,最好使用干净新鲜的颜色,如绿色、蓝色;数码电子产品,不太适合花哨,最好使用黑色或白色。

以上是小程序页面设计时要注意的内容。小程序在设计过程中一定要注意用户的实际体验,所以一定要简洁明了,不要太繁琐,让用户使用起来舒适,给他们一个良好的使用体验。

UI设计做小程序时,页面太生硬怎么优化?

您好

这个需要前端的一些逻辑代码来处理和优化。比如加载动画,需要提前画好一些设计稿。利用js代码来进行优化。css目前还不太好处理页面的优化。在网页前端中可以用css3做一些动画都是可以的。但是小程序的框架受制于腾讯框架,技术规范都是在微信框架里运行。用js比较好。

UI设计做小程序时,页面太生硬怎么优化?

突破自己的设计思维的固有的局限,打破旧思维,勇于改变!

UI设计做小程序时,页面太生硬怎么优化?

应多注意交互性

UI设计做小程序时,页面太生硬怎么优化?

可以先从颜色上考虑

UI设计做小程序时,页面太生硬怎么优化?

更改下,或者重新做

UI设计做小程序时,页面太生硬怎么优化?

真实

留言与评论(共有 0 条评论)
   
验证码:
Top