ux和ui_编写样式以获得更好的UI和UX

最新推荐文章于 2024-10-03 09:00:56 发布

weixin_26737001

最新推荐文章于 2024-10-03 09:00:56 发布

阅读量111

点赞数

文章标签： python java vue ViewUI

原文链接：https://uxdesign.cc/writing-styles-for-a-better-ui-and-ux-cdc35b457444

版权

ux和ui

重点 (Top highlight)

Every product team should make an informed decision that makes sense for its own brand. Often there are many inconsistencies in a product/platform. Every product will benefit from a well thought through set of rules of writing styles.

每个产品团队都应该做出明智的决定，这对于自己的品牌来说是有意义的。产品/平台中经常存在许多不一致之处。通过一套完善的写作风格规则，每件产品都将从深思熟虑中受益。

大写 (Capitalization)

“Capitalization (North American English) or capitalisation (British English) is writing a word with its first letter as a capital letter (uppercase letter) and the remaining letters in lower case, in writing systems with a case distinction. The term also may refer to the choice of the casing applied to text. “ —https://en.wikipedia.org/wiki/Capitalization

“大写 ( 北美英语 )或大写 ( 英式英语 )在写系统时要区分大小写，该单词的首字母为大写字母(大写字母)，其余字母为小写字母。该术语还可以指对应用于文本的大小写的选择。 “ — https://en.wikipedia.org/wiki/大写

Capitalization affects readability, comprehension and usability. It impacts how people view a brand. There are 3 types of capitalization: “Title case”, “Sentence case” and “ALL CAPS”.

大写会影响可读性，理解力和可用性。它影响人们对品牌的看法。大写有3种类型：“标题大小写”，“句子大小写”和“全部大写”。

标题案例 (Title Case)

Capitalize every word
大写每个字
Gives a visual rhythm to your words
使您的文字具有视觉韵律
Professional, serious, established
专业，认真，建立
Gives words a feeling of formality and importance!
给人一种形式和重要性的感觉！
Stands out more
脱颖而出

句子大小写 (Sentence case)

Capitalize only the first word
仅首字母大写
Easier to read
更容易阅读
Casual and friendly
休闲友好
Easier to spot proper nouns (app names, product names…)
更容易发现专有名词(应用程序名称，产品名称...)

全部大写 (ALL CAPS)

Makes text more difficult to read and scan
使文本更难以阅读和扫描
Can be experienced as shouting to the user
可以向用户大喊大叫
Makes readability slower
使可读性变慢
Stands out more in a UI
在用户界面中脱颖而出
Can be a good option where reading is not involved in a sentence
在句子中不涉及阅读的情况下可能是一个不错的选择

拟议规则 (Proposed set of rules)

Use ALL CAPS only for buttons, tags and states
仅将大写字母用于按钮，标签和状态
Never use a sentence for a button (less then 4 words)
切勿为按钮使用句子(少于4个字)
Use TITLE CASE for navigation elements and location indications (page title …)
使用TITLE CASE导航元素和位置指示(页面标题…)
Use TITLE CASE for names, persons, nouns, places (streets, countries, cities …)
使用TITLE CASE表示名称，人物，名词，地点(街道，国家/地区，城市...)
Use SENTENCE CASE for all other elements to improve readability
将SENTENCE CASE用于所有其他元素以提高可读性

一些例子 (Some examples)

导航 (Navigation)

Example: Navigation — Example: Writing styles applied to navigation elements like menu items

表单元素 (Form Elements)

Example: Form Elements — Example: Writing styles applied to form elements like dropdowns

纽扣 (Buttons)

Example: Buttons — Example: Writing styles applied to the label of buttons

每种写作风格的设计元素 (Design elements per writing style)

Based on the set of rules (see paragraph above) this is a proposed ordering of design elements per writing style type.

基于规则集(请参见以上段落)，这是每种书写样式类型建议的设计元素顺序。

全部大写 (ALL CAPS)

Buttons
纽扣
Tags
标签
Status
状态

标题案例 (Title Case)

Account name
用户名
Event name
活动名称
Page Title
页面标题
Tabs main navigation
标签主导航
Tabs page navigation
标签页导航
Wizard step names
向导步骤名称
Table headers
表标题
Section headers
节标题
Dashboard widget titles
仪表板小部件标题

句子大小写 (Sentence case)

Page sub titles
页面子标题
Page intros
页面简介
Body text
主体
Hyperlinks
超连结
Form labels
表格标签
Form input field
表单输入栏
Form placeholders
表单占位符

All though a product team can follow a pre-chewed set of rules, the set of rules should still fit the brand of the product / company.

尽管产品团队可以遵循预先制定的规则集，但是规则集仍应适合产品/公司的品牌。

I want to thank Byju Sukumaran for bouncing ideas on this topic.

我要感谢Byju Sukumaran提出有关该主题的想法。

Let’s have an open debate on twitter on this topic! Please don’t forget to mention this article and my twitter account name @pieterheyman

让我们在Twitter上就此主题进行公开辩论！请不要忘记提及本文和我的Twitter帐户名@pieterheyman