比较的例子

The following examples show best practices for implementing 电子游戏软件 web design elements. The guide will ensure that web content is available to users on all devices and tools. Failing to adhere to this guide may prevent some content from being accessed from some devices.

Not adhering to the style guide can also cause user confusion because elements are designed for a specific use that is consistently applied across the entire 电子游戏软件 website. If a site editor makes a new style, there is a risk that this custom design has not been learned by the user and therefor the user can be confused. 

标题

The 电子游戏软件 headings have been designed to help organize web content through visual and semantic hierarchy.

默认的标题样式, which are available from the 为mat dropdown selector under the Text tab, 如下所示.

标题2标题

标题3标题

标题4标题

 

In addition to the above default style, headings also have additional styles available in the Custom tab.

标题2标题标注

标题2标题标注2

标题2标题上拉

不正确的

Heading styles should never be altered by making them bold, 斜体, or other alterations as shown below.

标题2

标题2标题斜体

标题2标题全大写

标题2标题颜色< / span >

标题2标题-连字符

排版

The typography has been carefully designed to be legible on all user devices with consistent presentation across all website channels. Styling options for paragraph copy are available in the WYSIWYG text editor toolbar.

If a site editor needs to give a stronger weight to a word or phrase, the bold tool is a good choice.

车间的标题: A description of the workshop

为 毕业典礼日, all graduates should be in the assembly areas by the assigned time.

 

Italics are commonly used for titles and often utilized in citations.

你读过吗? 杀死一只知更鸟?

特里•奥尼尔 实践教授

 

The underline style is reserved exclusively for web links only. Underlined 电子游戏软件 links in the paragraph copy are visible on the cursor hover state.

Further information can be found on the 电子游戏软件主页.

The bold style should not be overused, such as for an entire sentence.

We are looking forward to your attendance at this workshop. Please make a reservation by the deadline to ensure that you are guaranteed a spot before it fills up.

 

The 斜体 style can be challenging to read if it is used for more than a simple phrase or title.

Two referral letters are required with your application for consideration of admittance into this program. 学生 who fail to include two referral letters will be asked to resubmit their application by the required deadline. No extensions are available for missing application materials.

 

Underlined text in paragraph copy is not allowed due to functionality confusion.

If we underline text users are inclined to think that they can 点击文本 去一个链接. This is especially true if the 带下划线的文字为蓝色< / span >.

Changing the text color can make text fall outside the standards of legibility requirements.

If we make the paragraph copy a different color than the default color, the text can be challenging to read and fail to pass legibility requirements.< / span >

按钮

To move users to action, buttons can be an effective tool. A clear call to action by using a limited number of buttons will help direct users to relevant content.

使用一个, 或者最大值是2, buttons in a horizontal row of content is an effective way to make the call to action clear.

Our program gives students options for studying full time or in the evening

If more calls to action are needed, then make the two most important items buttons and the remaining items into links.

Our program gives students options for studying full time or in the evening

学生可以 电子游戏软件 如有直接问题，或 了解更多有关该计划的信息.

Using numerous buttons will overwhelm the user, dilute what the call to action is, 不推荐使用.

Our program gives students options for studying full time or in the evening

图片

The imagery used on 电子游戏软件 websites helps users make a human connection.

Imagery should appear spontaneous and capture a moment. Effective photos often show people making connections with each other.

students working together at laptop
户外学习的学生
students talking in Fulton Hall

图片 will typically be 100k to 200k in size, with hero images ranging in size from 200k to 400k. Files larger than this need to be reduced in size before uploading.

图片 should never have text except for logos. 图片 that have text fail accessibility standards and can not be read by screen readers.

不好的图像例子

Site editors that want to repurpose an existing marketing image or PDF file should use the BC Text component to insert all text and the BC Image Content component for any relevant graphics.

表

电子游戏软件 has designed table class styles that are available to editors with knowledge of HTML.

表类=“数据表”

数据表201520142013

班级总人数

247273253

受雇时间为10个月
(2013年9个月)

226 (91.5%)246222

全职

223 (90.3%)238196

Table class="datatable noborder"

数据表201520142013

班级总人数

247273253

受雇时间为10个月
(2013年9个月)

226 (91.5%)246222

全职

223 (90.3%)238196

Table class="datatable courses"

数据表的课程201520142013

班级总人数

247273253

受雇时间为10个月
(2013年9个月)

226 (91.5%)246222

全职

223 (90.3%)238196

Table class="datatable events"

2018年6月20日，星期三< / span >

程序< / span >

8:00-8:45.m.< / span >

登记

明茨赞助

8:45–9:15 a.m. 

开场白

大卫Quickley, 教务长电子游戏软件

8:00–8:45 a.m. 

主题演讲

克里斯托弗·一个. 雷, 导演,联邦调查局

Options to prevent time from wrapping:

 on any one of the first column td sets it for the entire column. You can increase the value as needed.

or
8:00–8:45 a.m. requires user to manually add the ...

Customized table styles may present legibility and consistency issues and are discouraged.

数据表201520142013

班级总人数

247273253

受雇时间为10个月
(2013年9个月)

226 (91.5%)246222

全职

223 (90.3%)238196
回到顶部