h5页面设计规范

Posted 2023-04-28

参考技术A h5页面设计规范

1、把重要内容布局在安全线之上。

目前包含android和ios最小分辨率均在640*960之上。计算Android和ios安全区域，以android的导航栏和标签栏最大值（48+100）为准:960-148=812，从状态栏开始812设计即是安全区域。

2、可点击部件尽量和屏幕四边保持20-30PX的距离。

3、设计的时候尽量以一个使用者的角度去设计，判断哪个页面需要状态栏，哪个页面只需要一个返回按钮。

4、iPhone输入法自带搜索按钮，没有必要再在页面上进行显示。

5、尽可能的对页面部件大小边距等元素进行大小的标注。

6、中文字体:黑体-简或者华文黑体。英文字体:helvetica neue lt。

7、字号选择:建议最小不超过18像素，其他字号双数，同种类别下用一样字号。

8、排版

集中:简单集中，中心元素不易过多，突出重点为最优。

9、给开发提供图片素材要控制在100k以内。这样不仅能提高加载速度，还能节省用户带宽。

10、在小小的手机屏幕里，碎片时间中，我们必须先抓人眼球，再抓住人心。

11、有时候构思的时间比做的时间还要长。

12、H5和app比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的成本上要小很多。特别在游戏上，未来H5会有更多的可能性。

13、从页面布局上减少跳转：使用交互技巧隐藏文字

2021年企业官网帮助中心页面设计规范，内附设计教程！

帮助中心（helpcenter）

帮助中心最早是由国外引入国内的一个概念，也称为FAQ页面。比较遗憾的是，目前仅在国内的大型企业中有着广泛的应用。帮助文档通常有两种表现方式，一种是插入企业产品中，另一种是嵌入到企业官网菜单导航。一个优质的帮助中心页面可以树立良好的企业形象，大幅减轻客服售前售后的压力。

Baklib

企业官网帮助中心页面设计规范的由来

长期以来，国内一直没有相关机构去出台关于帮助中心页面的设计规范和标准。考虑到原因，小鸟认为大多国内企业缺乏对帮助中心页面的正确认识，以致于帮助中心页面目前仍得不到企业的重视。Baklib可以帮助企业实现向内知识协同和对外产品宣传的网站内容管理。

企业官网帮助中心的7个组成部分

• 搜索功能（大方明显的搜索框可以帮助用户快速找到想要的说明文档）
• 常见问题（据权威机构统计，20%的常见问题可以解决80%的用户遇到的问题）
• 新手指南（新手使用教程）
• Q&A内容（主要通过一问一答的形式去展示内容，给用户一个极高的代入感）
• 统计功能（搜素框关键词）
• 反馈功能（阅读量、点赞量、点踩量）
• 人工客服（视企业需求，大多数情况不推荐使用）

企业官网帮助中心的适用人群

• 没有帮助中心页面的企业站点
• 帮助页面设计不规范，需要升级faq页面的企业站点
• saas软件供应商
• 企业产品服务功能复杂的网站

传统的帮助中心页面

设计企业官网帮助中心需要注意哪些问题

1. 设计一定要简洁高效，与官网调性统一协调；
2. 设置热门版块，二八定律，20%的问题能够解决访客80%的疑惑；
3. 做好栏目分类，推荐遵循5w1h的原理去设计；
4. 要借助文字、图像以及视频多种载体去更好的让用户理解你所想表达的内容。
5. 企业官方的帮助中心要坚持实时更新，因为随着产品的迭代更新，一个持续有效的内容才会给用户带来良好的体验。
6. 建立用户反馈机制，要清晰的知道用户搜索了哪些关键词以及哪些关键词没有搜索结果，要及时的进行一个补充和更新。
7. 最后仍然很重要的一点：为什么不推荐在帮助中心页面嵌入在线客服插件？帮助中心主要的目的是解决用户遇到的常见问题，提高用户体验。假设放了在线客服入口并有许多人点击咨询，那么说明需要优化的是网站而不是帮助中心页面；

2021年企业官网帮助中心页面的设计流程

推荐使用在线工具：Baklib 制作

Baklib产品在线体验

Baklib 优秀课代表（优质案例）

Baklib的优势

1、随时编辑，随时保存，操作类似word，轻松上手写作，支持团队协同搭建帮助中心，内容即写即存，支持多种格式的数据导出和备份；

2、运营维护，内容云端储存，并且可以自己登录后台对内容进行修改更新，节省了运维资金，并且实现了以前无法实现的数据保护和治理；

3、官方提供多种插件功能，包括：网页导航、搜索关键词统计、访客统计、独立域名等等，方便进行帮助中心的运维管理；

4、数据安全有保障，Baklib支持数据的备份和多种格式的导出，采用SSO单点登录与SSL加密技术，从内部编辑到外部分享全程保障客户数据的独立而安全，打造安全的对外帮助中心网站。

体验地址：

点击网站右上角快速注册，即可免费体验。