恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP中文本设计详细指南,微文案的魅力所在
0.0°
2020-03-10 自译外文 教程 原作者: Gil Bouhnick 举报 1292 5 6 0


之前我在 2020 年 APP 设计流行趋势中,提到过现在的主流设计趋势是隐藏品牌元素(没看过的,请点击这里:),转而强调内容。内容也是长篇大论的那种,而是microcopy 微文案 ,作为 UI 设计的核心部分。

 

今天,我就将与大家分享我收集到的40条关于微文案的UI设计技巧,以此来帮助交互设计师、产品经理在产品里编写、设计出更好的文本。

 

当然,也不用把本文当成一种规范,只是单纯的分享,重要的还是与产品设计的结合。

 

下面正文开始~



让我们从一些高级技巧开始: 


1.尽早处理文案,因为文案问题通常会揭示设计问题。

 

2.简明扼要。


写作很容易。你需要做的就是删除错误文字。

 


 

3. 简洁,但更重要的是:要有意义。 

 

4.不要太严肃或太技术性。

 

5.与你的用户交流。



一致性: 


6.最奇怪的事情是,只有在缺少一致性的时候,才会注意到需要一致性


当UI缺乏一致性时,才会注意到需要UI一致性。 

 

7. 忠于你的品牌。

 

8. 使用一致的术语:确保文案在产品每个部分术语一致。 

 

9. 写作语气要一致

 

10. 不要在同一短语中同时用第二人称和第一人称来指代用户。

 

11. 定义策略:注意标题和句子一致,都要区分字母大小写。

  


微文案技巧:


12.文字表述明确是关键。


13.用简短的句子。


14.提到数字的时候,一定要用阿拉伯数字~


 

 

15. 尽可能使用“今天”,“昨天”或“明天”这些词语来代替日期。


 


16. 按钮文字应该选用更精准的词语。一般用户都不会阅读问腿,因此按钮的文本应该包含操作的含义。


 

17. 缩短 CTA 按钮文本并将其与标题组合,以提高清晰度


 

18. 错误提示需要包括三个内容:1.这是什么问题?2.为什么会发生。3.如何解决。



文本的设计和布局:


19. 从一开始考虑排版位置。

 

例如,德语单词可以比英语单词长200%——则需要尽可能多留一些空间,以确保你的设计可以容纳更长的单词。

 


 

20. 避免大段文字:记住用户不想阅读,他们只是在扫描。

 

21. 保持字间距!不要让文本太接近标准边距(左/右)或顶部/底部。如果你希望用户阅读舒服,那间距是你头号朋友。


 

22. 不要总想用一屏就去呈现所有的内容,采取滚动设计就好了呀。


 

23. 注意对齐方式:居中对齐适用于短句,左对齐更适合长句子。



 

24. 尽量避免一个字单独占行。

 


25. 如果标题太长,可以考虑使用页眉。


 

26. 仔细选择字体(大小,粗细,颜色对比)

 

27.注意层次结构(大小,元素之间的距离等)

 

 

28.衡量你的段落空间。我的建议是,根据字体大小,将副标题与正文的行间距比正文的行间距大2-5磅。


 

29. 长线或短线可能会令人疲劳和分散注意力。优化每行的宽度,目标是40-80个字符。

 

30. 在整个app设计中,所有文本块都是相同的边距。


使用字体: 


31.避免一次使用多种字体。

 


32.粗体字又流行了,但要精准地使用它(例如用于标题)。

 

33.黑色会增加眼睛疲劳。所以避免使用黑色,而应使用深灰色。

 

 

34. 不要使用太多颜色,保持文本干净整洁的视觉效果。

 

35.不要使用粗体来突出句子,可以加大字号或使用缩进。

 

检查你的微文案: 

 

36.给交互设计师和开发人员们一个忠告:永远不要相信仿真器!(尤其是在涉及文本时)

 

37.你的客户永远不会在仿真器上运行你的移动app。

 

38.必须使用原型来检查和测试交互,并且次数越多越好。(p.s大家可以采用墨刀设计高保真原型,模拟使用场景)

 

39.始终有一个备份计划:从服务器加载你的字符串,这样在出现错误或需要更改的情况下,无须重新发版,直接修改副本。

 

40.坚持使用正确的专业术语。

 

本文作者是Gil Bouhnick,全文由墨刀整理翻译。

 

看完了,你有没有学到一点呢?如果关于文本设计,你也有一些心得体会,请留言与我们交流吧~

Powered by Froala Editor

更新:2020-03-10

收藏

5人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2020-03-10 自译外文 教程 原作者: Gil Bouhnick 举报 1292 5 6 0

      APP中文本设计详细指南,微文案的魅力所在

      0.0°

      你确定要举报APP中文本设计详细指南,微文案的魅力所在

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年03月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录