午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

漫談互聯(lián)網(wǎng)應(yīng)用表單設(shè)計

2011-10-29    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( www.gerard.com.cn )是一家專注而深入的設(shè)計機(jī)構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 cs界面設(shè)計 ipad界面設(shè)計 包裝設(shè)計 圖標(biāo)定制 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

 

http://article.yeeyan.org/view/136960/230592

跟你所知的相反,布滿漂亮的按鈕、顏色和字體,再加上一大把jQuery插件的表單并不一定好用。真的,這么做只能(零散地)體現(xiàn)表單可用性的1/3。
點擊查看原圖


 

In this article, we’ll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tracking, eye tracking, Web analytics and actual complaints made to customer support personnel by disgruntled users.

 

本文中,我們將為你提供簡單實用的指南。這些精心制作的指南,囊括了可用性測試、實地測試、網(wǎng)站跟蹤,眼球跟蹤、網(wǎng)絡(luò)分析,甚至還有用戶對客服人員的抱怨等諸多方面。

Why Web Form Usability Is Important

表單可用性緣何重要?
 

The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user’s goal and the organization’s goals is very often a form, because, despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. In fact, forms are often considered to be the last and most important stage of the journey to the completion of goals.

ISO 9241標(biāo)準(zhǔn)中對網(wǎng)站可用性的定義是:特定用戶在特定環(huán)境下,能夠快速、有效且滿意地完成特定的目標(biāo)。用戶使用網(wǎng)站都是有目標(biāo)的。 如果設(shè)計得好,網(wǎng)站不但會達(dá)到用戶的目標(biāo),還會將其與自身公司的目標(biāo)聯(lián)系起來。介乎用戶目標(biāo)和公司目標(biāo)之間的往往就是表單 ,因為,盡管人機(jī)交互發(fā)展迅速,表單仍然是用戶與網(wǎng)站交互的主要方式。實際上,表單經(jīng)常被認(rèn)作是完成目標(biāo)的最后也是最重要的一站。
 

Let’s clarify this last point by discussing the three main uses of forms. As Luke Wroblewski states in his book Web Form Design: Filling in the Blanks, every form exists for one of three main reasons: commerce, community or productivity. The following table translates each of these reasons into the user and business objectives that lie behind them:

讓我們通過討論表單的三個主要作用來闡述下最后這一點。就像Luke Wroblewski在他的《web表單設(shè)計:點石成金的藝術(shù) 》一書中說的一樣,每個表單的存在必有如下三個原因之一:商務(wù)、社區(qū)或效率。下面的表單把這三個原因轉(zhuǎn)化成了其背后的用戶目標(biāo)和公司目標(biāo):

點擊查看原圖
 

Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.

表單的作用,基于Luke Wroblewski的《 web表單設(shè)計:點石成金的藝術(shù) 》。
 

Thus, the relationship between forms and usability have two aspects:

如此可見,表單和可用性有如下兩方面的關(guān)系:

   1. Forms can make a website usable or unusable, because they stand in the way of the user achieving their goal;

1. 表單可以使網(wǎng)站好用 或不好用,因為它們擋在用戶達(dá)成目標(biāo)的路上。
 

   2. Forms need to be usable in order to help the user achieve that goal.

2. 為了幫助用戶達(dá)成目標(biāo),表單必須要好用
 

This post will focus on the second point, because a usable form will naturally contribute to the overall usability of the website, hence the first aspect.

本文將重點講述第二點,因為表單好用了,網(wǎng)站的整體可用性自然會提升,也就是上面的第一點。
 

The Six Components Of Web Forms

表單的六個組成部分
 

Web forms are a necessity and often a pain point for both designers and users. Over time, users have formed expectations of how a form should look and behave. They typically expect Web forms to have the following six components:

對于設(shè)計師和用戶來說,表單讓人愛恨交加。隨著時間的流逝,對于表單的表現(xiàn)形式和操作方式,用戶已有了自己的期望。基本上,他們期望表單包含如下六個部分:
 

   1. Labels These tell users what the corresponding input fields mean.

1.標(biāo)簽。 告訴用戶相應(yīng)的輸入域里應(yīng)該填什么。
 

   2. Input Fields Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.

2.輸入域。 供用戶提供反饋。包括文本輸入框、密碼輸入框、多選框、單選框和滑塊等。 
 

   3. Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the form.

3.操作。 包括鏈接和按鈕,用戶點擊后,會執(zhí)行一項操作,比如提交表單。
 

   4. Help This provides assistance on how to fill out the form.

4.幫助。 為填寫表單提供幫助。
 

   5. Messages Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).

5.信息。 用戶輸入內(nèi)容的反饋信息。可能是肯定的(比如提示表單提交成功),也可能是否定的(“該用戶名已被注冊”)。
 

   6. Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.

6.驗證。 確保用戶提交的數(shù)據(jù)符合參數(shù)規(guī)則。
 

點擊查看原圖
 

點擊查看原圖
 

Skype’s registration form contains all six components.

Skype的注冊表單包含了以上六個部分。
 

Tackling Usability Via Three Aspects Of Forms

通過三方面來解決表單的可用性問題
 

Despite differences in layout, functionality and purpose, all forms have three main aspects, as noted by Caroline Jarrett and Gerry Gaffney in their book Forms That Work: Designing Web Forms for Usability:

盡管在布局、功能和目的上各有不同,所有的表單都有三個主要的方向,就像在Caroline Jarrett與Gerry Gaffney合著的《Web表單設(shè)計:創(chuàng)建高可用性的網(wǎng)頁表單 》中寫的一樣:
 

   1. Relationship Forms establish a relationship between the user and the organization.

1.關(guān)系。 表單在用戶與公司之間建立關(guān)系。
 

   2. Conversation They establish a dialogue between the user and the organization.

2.對話。 表單在用戶與公司之間建立對話。
 

   3. Appearance By the way they look, they establish a relationship and a conversation.

3.界面。 通過其展現(xiàn)方式,表單建立了關(guān)系和對話。
 

For a form to be usable, all three aspects need to be tackled. Let’s look at each aspect in turn to figure out how to make a form truly usable, along with practical guidelines that you can easily follow.

一個好用的表單,需要解決這三個方面的問題 。讓我們依次來看,要讓一個表單真正好用需要遵循哪些指導(dǎo)方針,這樣你也能輕易上手。
 

Aspect 1: The Relationship

第一方面:關(guān)系
 

“No man is an island,” the 17th-century English poet, satirist, lawyer and priest John Donne once said. Indeed, human beings thrive on relationships, be they amorous, friendly, professional or business. A form is a means to establish or enhance a relationship between the user and the organization. When done badly, it can pre-empt or terminate such a relationship.

17世紀(jì)的英國詩人、諷刺作家、律師和牧師約翰•多恩 曾說過:沒人是一座孤島。確實,人類在關(guān)系中成長,不管它是戀愛關(guān)系、友好關(guān)系、職業(yè)關(guān)系還是商務(wù)關(guān)系。表單是建立或增強(qiáng)用戶與公司關(guān)系的一種方式。如果做得不好,它就會終結(jié)此關(guān)系。
 

With this in mind, a number of principles emerge:

既然如此,以下規(guī)則就顯而易見了:
 

    * Relationships are based on trust, so establishing trust in your form is critical. This can be achieved through the logo, imagery, color, typography and wording. The user will feel at ease knowing that the form comes from a sincere organization.

● 關(guān)系要基于信任 ,因此在表單中建立信任至關(guān)重要。可以通過logo、圖像、配色、字體和措辭來表達(dá)誠意。當(dāng)用戶知道表單所屬公司是以誠相待時,他們就會放松警惕。
 

    * Every relationship has a goal, be it love and happiness in a romantic relationship or financial gain in a business relationship. Ask yourself, what is the goal of your form?

● 每一種關(guān)系都有目標(biāo) ,浪漫關(guān)系的目標(biāo)是愛和幸福,商業(yè)關(guān)系的目標(biāo)是財務(wù)增長。自問一下,你的表單目標(biāo)何在?
 

    * Base the name of the form on its purpose. That name will inform users what the form is about and why they should fill it in.

● 表單名字要能表達(dá)其意圖 。表單名要告知用戶表單是什么,他們?yōu)槭裁匆顚憽?br /> 

    * Just as in a relationship, getting to know the other person is essential. Get to know your users and always consider whether the questions you’re asking are appropriate and, if so, whether they are timely. This will instill a natural flow to your form.

● 一段關(guān)系中,了解對方 很重要。要了解你的用戶并且深入思考,表單上的問題在形式上是否合理,在位置上是否合適。經(jīng)過這樣思考的表單,流程自然很順暢。
 

    * Knowing your users will also help you choose appropriate language and remove superfluous text. And it will help you craft an interface that balances your needs and the user’s.

● 了解用戶,對于選擇合適的語言和剔除冗余的文字 同樣有幫助。這樣打造的界面,才能在用戶需求與你的需求之間找到平衡。
 

    * Do not ask questions beyond the scope of the form. In a relationship, you would become distrustful of someone who asked questions that were out of place. The same thing happens online. Consult with relevant stakeholders to see what information really is required.

● 不要問表單范圍以外的問題 。一段關(guān)系里,問話不合時宜的人會不被信任。網(wǎng)上亦然。跟相關(guān)股東們商量下究竟需要哪些信息吧。
 

    * Sudden changes in behavior or appearance will make users edgy. Likewise, never introduce sudden changes between forms or between steps in a form.

● 性能或界面的突變會讓用戶無所適從 。同樣的,各表單之間或者一個表單的幾個步驟之間,絕對不能有突變。
 

點擊查看原圖
 

Know your users. Make it easy for registered users to log in and for new users to register. Debenhams makes this distinction barely noticeable.

了解你的用戶。讓注冊用戶易登錄,讓新用戶易注冊。在 Debenhams 網(wǎng)站上,這兩種表單幾乎沒有區(qū)別。
 

點擊查看原圖

Amazon, on the other hand, simplifies the process for registered and new customers.

另一方面, 亞馬遜 的表單把注冊用戶和新用戶合二為一了。
 

Aspect 2: The Conversation

第二方面:對話
 

A form is a conversation. And like a conversation, it represents two-way communication between two parties, in this case, the user and the organization. In fact, the user has filled out the form in order to initiate communication with the organization.

表單即對話。對話代表兩方的相互交流,此例中的雙方即用戶與公司。實際上,用戶填寫表單就是為了與公司交流。
 

For instance, with a social network, a user would fill out a registration form to inform the organization that they would like to join. In inviting their request (whether automatically or manually), the organization would ask the user a number of questions (in the form of labels), such as their first name, last name, email address and so forth. Upon acceptance (or denial), the company would inform the user of the outcome, thus completing the communication process.

例如,社交網(wǎng)站中,用戶通過填寫注冊表單來告訴公司他們愿意加入。在接受用戶申請時(不管是自動還是手動的),公司會(以標(biāo)簽的形式)問用戶一系列問題,如姓氏、名字、電郵地址等。一旦用戶接受條款(或拒絕),公司就會反饋結(jié)果,完成對話全過程。
 

Viewing forms from this perspective yields some useful guidelines:

來看看從這方面得出的一些實用指南:
 

    * As mentioned, a form is a conversation, not an interrogation. Aggressive wording in labels will make users feel edgy, and (if they do not leave) they will most likely give you the answers that you want to hear, rather than the truth.

● 前面已經(jīng)提到,表單是對話,而不是問話 。強(qiáng)勢的用語會讓用戶難以接受,因此,(如果他們不就此離開的話)他們會給出一個你想要的答案,而不是他們的真實感受。
 

    * Order the labels logically, reflecting the natural flow of a conversation. For example, wouldn’t it be weird to ask someone their name only after having asked a number of other questions? More involved questions should come towards the end of the form.

● 標(biāo)簽的排序要有邏輯性 ,要能反映對話的流程。例如,先問別人一大堆的問題,然后再問姓名,不覺得這很奇怪嗎?相關(guān)度越高的問題越應(yīng)該要放到后面問。

    * Group related information, such as personal details. The flow from one set of questions to the next will better resemble a conversation.

● 歸類同種信息 ,比如個人介紹可歸為一類。好的對話是由一組問題接一組問題組成的。
 


點擊查看原圖

      Yahoo’s registration form effectively groups related content through purple headings and fine lines.

雅虎 的注冊表單通過紫色標(biāo)題和細(xì)線把相關(guān)信息進(jìn)行了有效的歸類。點擊查看原圖
 

點擊查看原圖
 

      While Constant Contact groups related content, it separates the groups too much, which could confuse the user.

Constant Contact 的類別太多了,這樣會讓用戶困惑的。
 

    * As in a real conversation, each label should address one topic at a time, helping the user to respond in the corresponding input field.

● 跟真實對話一樣,每個標(biāo)簽每次只應(yīng)突出一個主題 ,這樣才能幫助用戶在相應(yīng)的輸入域中作出應(yīng)答。
 

    * The natural pauses in a conversation will indicate where to introduce white space, how to group labels and whether to break the form up over multiple pages.

● 對話中會有自然的停頓 ,表單中則表現(xiàn)為應(yīng)該在哪里留白,如何歸類標(biāo)簽,以及是否分頁。
 

    * In any conversation, people get distracted by background noise. So, remove clutter such as banners and unnecessary navigation that might distract users from filling out the form.

● 任何對話,人們都會因背景噪音而分心。因此,去除 諸如banner和不必要的導(dǎo)航之類的雜亂信息 ,避免讓用戶分心。
 

點擊查看原圖
 

      Dropbox provides a fine example of what a registration form should look like. The white space is effective, and the page uncluttered. 

Dropbox 的注冊表單堪稱模范。留白適宜,頁面簡潔。
 

Aspect 3: The Appearance

第三方面:界面
 

The appearance or user interface (UI) is central to the usability of a Web form, and there are several guidelines for this. To simplify the discussion, let’s group them into the six components presented earlier.

界面或者UI對于web表單的可用性極為重要,為此列出如下指南。簡便起見,我們將其按照前面說的六個部分進(jìn)行了歸類。
 

1. Labels

1.標(biāo)簽
 

    * Individual words vs. sentences If the purpose of a label is simple to understand, such as to ask for a name or telephone number, then a word or two should suffice. But a phrase or sentence might be necessary to eliminate ambiguity.

● 單詞或句子 。如果標(biāo)簽容易理解,比如詢問姓名或電話號碼,一到兩個單詞就足矣。但是詞語或句子更能準(zhǔn)確表述。
 

點擊查看原圖
 

      Amazon’s registration form contains full sentences, whereas individual words would have sufficed.

亞馬遜 的注冊表單用的全是句子,盡管有些地方單個詞語就能搞定。
 

    * Sentence case vs. title case Should it be “Name and Surname” or “Name and surname”? Sentence case is slightly easier?—?and thus faster?—?to follow grammatically than title case. One thing is for sure: never use all caps, or else the form would look unprofessional and be difficult to scan.

● 句子形式或標(biāo)題形式 。是像“Name and S urname” 還是像 “Name and s urname”?句子形式從語法角度比標(biāo)題更容易(也就更快)理解。還有一點要明確:一定不要用大寫,不然表單會看起來不專業(yè)且難以閱讀。
點擊查看原圖

 

      See how difficult it is to quickly scan the labels in Barnes & Noble’s registration form?

要快速瀏覽 Barnes & Noble 的注冊表單得有多難啊?
 

    * Colons at the end of labels UI guidelines for some desktop applications and operating systems such as Windows recommend adding colons at the end of form labels. Some designers of online forms adhere to this, primarily because old screen readers mostly rely on the colon symbol to indicate a label. Modern screen readers rely on mark-up (specifically, the label tag). Otherwise, the colon is a matter of preference and neither enhances nor detracts from the form’s usability, as long as the style is consistent.

● 標(biāo)簽后面加冒號 。一些桌面程序和諸如Windows之類的操作系統(tǒng)建議在表單標(biāo)簽后面加冒號。一些web表單的設(shè)計師也信奉此準(zhǔn)則,主要是因為老的屏幕閱讀器(供盲人使用的一種工具)是依據(jù)冒號來鑒別標(biāo)簽。而新的屏幕閱讀器則依據(jù)標(biāo)示(尤其是標(biāo)簽tag)。也就是說,冒號的存在,既不會增強(qiáng)也不會減弱表單的可用性,只要形式統(tǒng)一就行了。
 

    * Alignment of labels: top vs. left vs. right Contrary to common advice, above the input field is not always the most usable location for a label. It’s ideal if you want users to fill in the form as fast as possible. But there are times when you’ll want to deliberately slow them down, so that they notice and read the labels attentively. Also, keeping a long form to a single column and making users scroll down the page is better than breaking it up into columns in an attempt to keep everything “above the fold.” Each style of alignment has its advantages and disadvantages:

● 標(biāo)簽的對齊:上對齊、左對齊還是右對齊 。跟一般的建議相反,輸入域上方并不總是放置標(biāo)簽的最佳位置。如果想讓用戶盡快填完表單,這樣做是最最好的。但有時為了讓用戶閱讀標(biāo)簽,你會故意想讓他們慢下來。還有,把長表單用一頁顯示,讓用戶滾動頁面,要比分成幾頁,每頁只有一屏的效果好。每一種的對齊方式都有其利弊。


點擊查看原圖

      *Times retrieved from “Label Placement in Forms” by Matteo Penzo.

從Matteo Penzo的《 表單標(biāo)簽的放置 》獲取的數(shù)據(jù)。
 

點擊查看原圖
 

      Forms should never consist of more than one column. Notice how easy it is to ignore the column on the right here on Makeup Geek (not to mention the note about “Required fields” at the bottom). 

表單絕對不能分多列顯示。看看 Makeup Geek 這個表單的右列,很容易被忽略掉(更別說底部的“必填項”聲明了)。
 

2. Input Fields

2.輸入域

    * Type of input field Provide the appropriate type of input field based on what is being requested. Each type of input field has its own characteristics, which users are accustomed to. For instance, use radio buttons if only one option of several is permitted, and check boxes if multiple choices are allowed.

● 輸入域類型 。要根據(jù)需要選擇合適的輸入域類型。每種輸入域都有一些用戶習(xí)以為常的特性。例如,如果只能選中一個,就用單選按鈕,如果可以多選則用復(fù)選框。
 

    * Customizing input fields Do not invent new types of input fields. This was common in the early days of Flash websites, and it seems to be making a comeback; I have seen some odd input fields implemented with jQuery. Simple is often the most useful. Keep input fields as close to their unaltered HTML rendering as possible.

● 定制輸入域 。不要發(fā)明新的輸入域類型。在早期的flash網(wǎng)站上這很常見,現(xiàn)在似乎又有回歸的跡象:我看到了一些超爛的使用jQuery的輸入域。簡單最實用。盡量讓輸入域看起來跟HTML中展現(xiàn)的一個樣。

點擊查看原圖
 

      Altering the interface of input fields will confuse users.

改變輸入域的界面會讓用戶困惑。
 

    * Restricting the format of input fields If you need to restrict the format of data inputted by users, then at least do so in a way that won’t irritate users. For example, instead of displaying MM/DD/YYYY next to a text field for a date, consider using three drop-down fields or, better yet, a calendar control.

● 限制輸入域的格式 。如果不得不限制用戶輸入數(shù)據(jù)的格式,那么一定要用一種不觸怒用戶的方法。例如,與其用文本框+“MM/DD/YYYY”標(biāo)簽來表示日期,不如用三個下拉框或者更合適的日歷控件來代替。
 

    * Mandatory vs. optional fields Clearly distinguish which input fields cannot be left blank by the user. The convention is to use an asterisk (*). Any symbol will do, as long as a legend is visible to indicate what it means (even if it’s an asterisk).

● 必填和選填 。要讓用戶清楚地知道哪些輸入域不能留空。一般都用*號表示必填。其他符號也可以用,只要能看到其文字說明就好(即使是*號要有說明)。
 

3. Actions

3.操作
 

    * Primary vs. secondary actions Primary actions are links and buttons in a form that perform essential “final” functionality, such as “Save” and “Submit.” Secondary actions, such as “Back” and “Cancel,” enable users to retract data that they have entered. If clicked by mistake, secondary actions typically have undesired consequences, so use only primary actions where possible. If you must include secondary actions, give them less visual weight than primary actions.

● 主要操作和次要操作 。主要操作就是執(zhí)行最后功能的鏈接和按鈕,例如“保存”和“提交”。次要操作,諸如“后退”和“取消”,可以讓用戶撤消已經(jīng)輸入的數(shù)據(jù)。如果被誤點了,次要操作一般會產(chǎn)生不愉快的結(jié)果,所以盡量只用主要操作。如果必須要有次要操作,那么也要讓它們看起來沒主要操作那么顯眼。

點擊查看原圖
 

      Not clearly distinguishing between primary and secondary actions can easily lead to failure. The above action buttons are found at the end of a lengthy form for enrolling in St. Louis Community College. Just imagine pressing the “Reset Form” button by accident.

不明確區(qū)分主次操作會很容易出事。上面的操作按鈕,是在 圣路易斯社區(qū)大學(xué) 長長的報名單的最后面,想想看誤按了“重設(shè)表單(reset form)”的后果吧。
 

    * Naming conventions Avoid generic words such as “Submit” for actions, because they give the impression that the form itself is generic. Descriptive words and phrases, such as “Join LinkedIn,” are preferred.

● 命名規(guī)則 。避免使用“注冊”之類的常規(guī)詞語,這樣會讓用戶覺得整個表單都沒意思。用“加入LinkedIn”之類的描述性單詞或短語會更好一些。

點擊查看原圖
 

      Although Coca-Cola correctly gives more importance to the primary action button, it settles for the generic word “Submit.” “Register with us” would have been more helpful. 

盡管 可口可樂 在主次操作的處理上做得很好,但是卻用了一個很平常的“注冊(submit)”,換成“加入我們(register with us)”或許會更有效。
 

4. Help

4.幫助

    * Text to accompany forms Your should never have to explain to users how to fill out a form. If it does not look like a form or it’s too complicated to fill out, then redesigning it is your only option. Accompanying text should be used only where needed, such as to explain why credit card data is being requested or how a birth date will be used or to link to the “Terms and conditions.” Such text tends to be ignored, so make it succinct and easy to read. As a rule of thumb, do not exceed 100 words of explanation (combined).

● 表單說明文字 。好的表單不需要解釋。如果那看起來不像表單或者很難填寫,那么只有重新設(shè)計了。幫助文字只應(yīng)出現(xiàn)在需要的地方,比如解釋為什么需要信用卡信息,或者解釋出生日期的用途,或者鏈接到“條款和條件”。這些文字很容易被忽視,所以要做得簡潔易讀。第一準(zhǔn)則就是,解釋文字(總共)不要超過100字。
 

    * User-triggered and dynamic help Rather than include help text next to each input field, show it only where required. You could show an icon next to an input field that the user can click on when they need help for that field. Even better, show help dynamically when the user clicks into an input field to enter data. Such implementation is becoming more common and is relatively easy to implement with JavaScript libraries such as jQuery.

● 用戶觸發(fā)和動態(tài)幫助 。與其在每個輸入域后都加上幫助文字,不如讓其只在需要時才出現(xiàn)。可以在輸入域旁邊放個小圖標(biāo),讓用戶在需要時自行點擊。或者用這個更好的,當(dāng)用戶在輸入域里輸入數(shù)據(jù)時,動態(tài)顯示幫助信息。這種應(yīng)用越來越普遍,使用JavaScript的庫,諸如jQuery之類的,很容易實現(xiàn)這種效果。
 

點擊查看原圖
 

      Skype’s registration form contains both user-triggered help (the blue box that is triggered by clicking the question mark) and dynamic help (the suggested user names). 

Skype 的注冊表單既包含了用戶觸發(fā)幫助(藍(lán)色的文本框是通過點擊問號圖標(biāo)觸發(fā)的),也包含了動態(tài)幫助(建議用戶名)。
 

5. Messages

5.信息

    * Error message This notifies the user that an error has occurred, and it usually prevents them from proceeding further in the form. Emphasize error messages through color (typically red), familiar iconography (such as a warning sign), prominence (typically at the top of the form or beside where the error occurred), large font, or a combination of these.

 錯誤信息 。告知用戶有錯誤,通常會阻止用戶繼續(xù)填寫表單。可以通過如下方法來強(qiáng)調(diào)錯誤信息:顏色(一般是紅色),熟知圖形(如警告標(biāo)志),突出顯示(通常在表單上方或是發(fā)生錯誤的側(cè)邊),大字體,或者以上綜合。
 

    * Success message Use this to notify users that they have reached a meaningful milestone in the form. If the form is lengthy, a success message encourages the user to continue filling it out. Like error messages, success messages should be prominent. But they should not hinder the user from continuing.

● 成功信息 。用以告知用戶其已經(jīng)完成了表單的一個重要部分。如果表單很長,成功信息可以鼓勵用戶繼續(xù)填寫。跟錯誤信息一樣,成功信息也應(yīng)突出顯示。但是不能阻止用戶繼續(xù)填寫表單。
 

6. Validation

6.驗證
 

    * Only where needed Excessive validation is as bad as its complete absence, because it will frustrate users. Restrict validation to confirming key points (such as the availability of a user name), ensuring realistic answers (such as not allowing ages above 130) and suggesting responses where the range of possible data is finite but too long to include in a drop-down menu (such as a country-code prefix).

 只在需要時驗證 。過多的驗證跟完全沒有的效果一樣差,都會讓用戶受挫。驗證僅限用于確認(rèn)重點信息(比如驗證一個用戶名是否可用),確保答案真實(不允許填寫130歲以上的年齡),當(dāng)數(shù)據(jù)的范圍有限但是太長,用一個下拉菜單顯示不全時,給出反饋建議(例如一個國家的代碼前綴)。
 

    * Smart defaults Use smart defaults to make the user’s completion of the form faster and more accurate. For example, pre-select the user’s country based on their IP address. But use these with caution, because users tend to leave pre-selected fields as they are.

 智能缺省 。使用智能缺省是為了讓用戶更快更準(zhǔn)確地完成填表。例如,根據(jù)用戶的IP地址事先選定其國家。但是使用這些時要格外小心,因為用戶一般不會去改這些事先選定項。
 

點擊查看原圖
 

      Twitter’s registration form uses both dynamic validation (for the name, email address, password and user name) and smart defaults (“Keep me logged in”). 

Twitter 的注冊表單使用了動態(tài)驗證(在姓名、郵箱、密碼和用戶名上)和智能缺省(“保持登錄狀態(tài)”)。
 

Conclusion The Beginning

結(jié)束語  開端
 

The word “conclusion” is not right here. Let this be your starting point to take what I have written about and apply it to your own forms. The good news is that there is much more to say about all this; you can find an abundance of resources on each point made here. For starters, three books are listed below that inspired me when writing this post. As I stated at the beginning, taking shortcuts by only tweaking the UI will not make your forms more usable. What more can I say? The theory is now with you. Go get your hands dirty.

結(jié)束這個詞用在這里不準(zhǔn)確。就讓這里成為你學(xué)以致用的起點吧。所有這些還有很多可以研究,這里的每一點都可以找到豐富的資源。就像我在文章開始時說的,通過修改UI走捷徑的方法,不會讓你的表單更好用。你問我還要說點什么?現(xiàn)在你已經(jīng)掌握這些理論了,放手干吧。

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.gerard.com.cn

存檔

主站蜘蛛池模板: 出轨人妻毛片一级 | 在线视频夫妻内射 | 少妇太爽了在线观看免费 | 区二区欧美性插b在线视频网站 | 91色伦| 午夜精品视频 | 国产精品夜间视频香蕉 | 久久久亚洲欧洲日产国码二区 | 中文无码成人免费视频在线观看 | 亚洲第一福利网站 | 性色av一二三天美传媒 | 国产日产欧美a级毛片 | 久久精品国产色蜜蜜麻豆 | 久久久久国色av免费观看性色 | 久久久久久国产精品高清 | 国产sm调教视频在线观看 | 欧美性jizz18性欧美 | 双性美人强迫叫床喷水h | 亚洲精品免费在线 | 久久婷婷国产91天堂综合精品 | 久久国产精品亚洲 | 久一视频在线观看 | 成熟女人毛片www免费版在线 | 国产人伦精品一区二区三区 | 奇米影视777久色在线 | 亚洲 欧美 综合 另类 中字 | 国产黄av| 99精品久久久久久久婷婷 | 精久国产一区二区三区四区 | 成人国产精品免费观看视频 | 午夜毛片视频 | 精品少妇一区二区三区免费观 | 波多野结衣在线网址 | 日韩在线视频第一页 | 日韩精品蜜桃 | 欧产日产国产精品视频 | 无码精品久久久久久人妻中字 | 美国少妇性做爰 | 国产三级精品三级男人的天堂 | 国产精品太长太粗太大视频 | 中文字幕精品久久久久人妻红杏1 | 日韩在线免费观看视频 | 日韩欧美操 | 激情欧美综合 | 日本在线观看www | 人av在线 | 一级女人18片毛片蜜桃av | 久久视频在线播放 | 日本高清在线观看视频 | 国产三级福利 | 手机在线观看av片 | 精品三级av无码一区 | 涩涩屋视频在线观看 | 九九九在线视频 | 久久美女免费视频 | 天堂中文在线8最新版精品版软件 | a级片网址 | 99精品国产99久久久久久97 | 久久av影院 | 中文字幕av一区二区三区谷原希美 | www.国产在线 | 伊人激情av一区二区三区 | 亚洲综合精品成人 | 国产精品久久国产精麻豆99网站 | 中国一级免费毛片 | 精品无码国产av一区二区三区 | 在线亚洲人成电影网站色www | 国产做爰视频免费播放 | 国产真实交换夫妇视频 | 精品在线观看免费 | 国产精品久久久久久妇女6080 | 亚欧美在线观看 | 婷婷国产在线 | 国产欧美精品一区二区三区 | 日韩精品免费一区二区三区四区 | 性感美女一区二区三区 | 正在播放adn156松下纱荣子 | 五月天精品视频在线观看 | 亚洲欧美一区二区三区视频 | 香蕉久久夜色精品国产更新时间 | 大地资源中文第三页 | 一区二区三区无码高清视频 | 成人性生交xxxxx网站 | 国产九九热 | 九九热久久久99国产盗摄蜜臀 | 国产精品九 | 欧美日韩制服 | 国产一级淫片a直接免费看 国产一级淫片免费放大片 国产一级影院 | 久久久精品久久日韩一区 | 国产jizz18高清视频 | 国产免费丝袜调教视频 | 校园春色 亚洲色图 | 亚洲 欧美 日韩在线 | 免费观看添你到高潮视频 | 欧美日韩四区 | a√视频在线| 亚洲中文字幕va福利 | 有码在线播放 | 亚洲欧洲无码一区二区三区 | 人妻人人澡人人添人人爽人人玩 | 99re久久精品国产 | 日韩一级影片 | 国产专业剧情av在线 | jizz中国少妇高潮出水 | 午夜午夜精品一区二区三区文 | 乱女午夜精品一区二区三区 | 成人在线精品视频 | 亚洲高清毛片一区二区 | 国产乱人乱精一区二视频国产精品 | 久久久国产亚洲精品 | 中文字幕亚洲精品一区 | 日批免费在线观看 | 曰批全过程免费视频在线观看无码 | 国产乱色国产精品播放视频 | 日韩免费黄色 | 久草网视频在线观看 | 色综合视频一区二区三区 | 久久久久久婷 | 黄视频网站在线看 | 九色在线 | 伊人伊色 | 国产视频黄色 | 久久亚洲在线 | 夜色一区 | 日韩乱码人妻无码中文字幕 | 一级片在线放映 | 欧洲成人一区二区三区 | 在线看片网址 | 超碰狠狠操 | 国产jjizz女人多水喷水 | 亚洲精品色情app在线下载观看 | .精品久久久麻豆国产精品 国产精品久久毛片 | 强制憋尿play黄文尿奴 | 一区二区三区在线免费观看视频 | 日韩av综合网 | av一二区 | xxxxx毛片| 国产午夜精品久久 | 久久99热只有频精品8 | 国产xxxx裸体xxx免费 | 丰满人妻精品国产99aⅴ | 噜噜噜天天躁狠狠躁夜夜精品 | 欧亚成人av | 国产无遮挡又黄又爽在线视频 | 91精品国产92久久久久 | 激情久久综合 | 国产精品538一区二区在线 | 色综合久久天天 | a色视频| 精品国产乱码久久久久久郑州公司 | 国产老妇伦国产熟女老妇高清 | 国产一区二区不卡老阿姨 | 光棍影院av | 男女做aj视频免费的网站 | 直接观看黄网站免费视频 | 亚洲精品自产拍在线观看亚瑟 | 日本丰满熟妇videossex | 亚洲国产欧美另类 | 亚洲人成在线影院 | 日本黄a | 我们高清中文字幕mv的更新时间 | 国产亚洲精品久久777777 | 日韩精品在线一区 | 狠狠伊人 | 亚洲国产精品ⅴa在线观看 天堂中文在线资源 | 天堂аⅴ在线地址8 | 国产精品18久久久久白浆 | 中文字幕亚洲精品久久女人 | 黄色激情小说视频 | 国产人妻一区二区三区四区五区六 | 日韩av片在线播放 | 一级国产20岁美女毛片 | 欧美日韩一区二区区别是什么 | 捆绑凌虐一区二区三区 | 西野翔夫の目の前で犯在线 | 亚洲黄色图片网站 | 久草中文在线观看 | 视频一区二区国产 | 一级片黄色毛片 | 四虎精品成人免费网站 | 免费在线日本 | 亚洲国产精品成人综合在线 | 国产精品成人网站 | 久久免费播放 | 国产欧美一区二区精品性色 | 韩国一区二区三区在线观看 | 黄色成人在线网站 | 精品国产依人香蕉在线精品 | 久久久综合精品 | 另类av在线 | 免费a级片在线观看 | 探花视频在线免费观看 | av成人免费在线观看 | 欧美精品福利视频 | 丁香六月色婷婷 | 男女裸体做爰爽爽全过程软件 | 非洲黑人三级全黄 | 77777五月色婷婷丁香视频 | 午夜激情视频免费观看 | 在线色网址 | 欧洲美一区二区三区亚洲 | 亚洲黄色影片 | 黄色成人毛片 | 精品国产免费人成网站 | 一区二区三区福利 | 欧美内射rape视频 | 国产xxx| 亚洲香蕉中文网 | 久久久久久穴 | 又黄又爽又色的视频 | 中文字幕一区在线观看 | 在线播放污 | 久久久久国产一区二区 | 日本少妇bbwbbw精品 | 在线免费视频一区 | 日本免费毛片 | 四虎视频在线精品免费网址 | 亚洲区另类春色综合小说 | 亚洲成人精品av | 日韩人妻无码精品久久 | 草草影院ccyy国产日本第一页 | 亚洲综合五月天婷婷丁香 | 麻豆视频网址 | 国产伦理一区二区 | 色亚洲视频 | 极品蜜桃臀肥臀-x88av | 国产激情对白 | 日韩精品一二三 | 精品欧美黑人一区二区三区 | 国产精品视频一区二区三区不卡 | 久久高清免费 | 精品乱码一区二区三四区视频 | 欧美性猛交xxxx乱大交俱乐部 | 亚洲精品久久久久久久小说 | 欧美日韩一区在线观看 | 羞羞视频在线观看免费观看 | 91亚洲一线产区二线产区 | 欧美性猛交xxxⅹ丝袜 | 色噜噜国产精品视频一区二区 | tushy欧美激情在线看 | 亚洲裸男自慰gv网站 | 午夜久久一区 | 欧美三级少妇高潮 | 亚洲av禁18成人毛片一级在线 | www.在线视频| 成午夜精品一区二区三区软件 | 日韩一二区 | 天天干视频在线 | 成人av片无码免费网站 | 伊人久久五月天 | 与黑人高h系列辣文 | 中文字幕无码日韩专区免费 | 欧美精品一级二级三级 | 中文字幕人成无码人妻综合社区 | 97无人区码一码二码三码 | 精品一区二区三区三区 | 日日日操操操 | 色黄大色黄女片免费中国 | 搡老女人一区二区三区视频tv | 懂色中文一区二区三区在线视频 | 狠狠干av | 亚洲成网站 | av毛片网 | 中国浓毛少妇毛茸茸 | 成人免费公开视频 | 亚洲成色www8888 | 欧美15一16性娇小高清 | 国产高清视频在线免费观看 | 天天射综合 | 吃奶揉捏奶头高潮视频在线观看 | 国产精品三级三级三级 | 国产又粗又猛又爽69xx | 国产尤物精品视频 | 亚洲天堂福利 | 1024香蕉视频| 视频毛片 | 久久久久久久极品内射 | 亚洲综合一区二区 | 亚洲免费国产视频 | 日本在线播放 | 国产无套内射久久久国产 | 少妇一级淫片免费放 | 欧美三级a | 91露脸的极品国产系列 | 亚洲专区av | 亚色中文| 欧美一级看片 | 人妻中出无码一区二区三区 | 日本大片免a费观看视频三区 | 女人的精水喷出来视频 | 久艹av| 日韩视频精品一区 | 一对一色视频聊天a | 亚洲精品亚洲人成人网 | 极品尤物一区二区 | 九一自拍中文字幕 | 亚洲啪啪| 极品无码av国模在线观看 | 手机av不卡 | 天天操2018 | 成人免费黄网站 | 国产91精品一区二区麻豆网站 | 97在线看免费观看视频在线观看 | chinese麻豆新拍video | 精品国产一二三产品价格 | 国产乱码卡一卡2卡三卡四 国产精品国产三级国产专区53 | 一区二区三区日韩欧美 | 国产99久久久久久免费看 | 久久久久久91香蕉国产 | 日本一区二区三区日本免费 | 波多野结衣一区二区三区在线观看 | 久久综合久久综合久久 | 日韩福利一区二区 | 欧美精品一区二区三 | 国产网站免费 | 亚洲国产精品久久久久秋霞不卡 | 国产免费又色又爽粗视频 | 日韩美在线 | 天天爽夜夜爽国产精品视频 | 亚洲色图偷窥自拍 | 福利一区二区在线 | 妇女伦子伦视频国产 | 91麻豆国产 | 人妖一区二区三区 | 操一操 | 国内福利视频 | 欧美在线影院 | 久久99国产亚洲高清观看首页 | 久久亚洲国产成人精品性色 | 92看片淫黄大片一级 | 夜夜骑天天干 | 91丝袜呻吟高潮美腿白嫩在线观看 | 国产亚洲精品美女久久久久 | 国产免费女女脚奴视频网 | 天堂网ww | 国产美女无遮挡永久免费 | 中国黄色录像一级片 | 久久久精品国产一区二区三区 | 一区二区三区网 | 老头老太吃奶xb视频 | 色播网址 | 亚洲五月综合 | 日本一区二区三区免费视频 | 少妇中文字幕乱码亚洲影视 | 九色视频网址 | 曰批免费视频播放免费 | 日日日人人人 | 色偷偷亚洲男人的天堂 | 日本另类视频 | 99免费在线观看视频 | 国产精品涩涩涩视频网站 | 国产a18片免费观看 国产aⅴxxx片 | 日本久久久久久久久久久 | 神马午夜av | 精品国产一区二区三区久久久狼 | www.五月天婷婷 | 小视频国产 | 天天躁夜夜躁狠狠眼泪 | 欧美 日韩 人妻 高清 中文 | 色婷婷av久久久久久久 | 蜜桃av噜噜一区二区三区策驰 | 国产精品日韩欧美一区二区三区 | 激情综合色综合啪啪开心 | 中文字幕日韩人妻在线视频 | 欧美经典片免费观看大全 | 国产精品成人99一区无码 | 国产精品亚洲精品一区二区三区 | 国产亚洲精品久久久久久大师 | 日韩在线免费播放 | xfplay2023成人资源站 | 国产视频九色蝌蚪 | 亚洲精品成人久久久 | 日批视频免费在线观看 | 久久国产一 | 波多野结衣av一区二区全免费观看 | 日本少妇寂寞少妇aaa | 国产精品一品二区三区的使用体验 | 婷婷丁香激情五月 | 日韩成人专区 | 奇米色欧美一区二区三区 | 国偷自产一区二区免费视频 | 精品一卡2卡三卡4卡免费网站 | 91九色网址 | 国产又粗又硬又大爽黄老大爷视 | 成人做爰69片免网站 | 噜噜高清欧美内射短视频 | 爱草视频 | 精品美女一区二区三区 | 欧美国产激情18 | 欧美在线一区二区三区四区 | 国产对白videos麻豆高潮 | 女人毛片a毛片久久人人 | www.youjizz日本| 久久久久成人免费看a含羞草久色 | 色综合久久久久久久 | 欧美一级黄色网 | 97国产精东麻豆人妻电影 | 国产免费视频在线 | 国产欧美一区二区精品婷婷 | 双性美人强迫叫床喷水h | 国产va亚洲va在线va | 日本边添边摸边做边爱喷水 | 美女黄站 | 欧美操老女人 | 成年女人a毛片免费视频 | 开心色99 | 国产91精品久久久久久久 | 乱码av午夜噜噜噜噜动漫 | 国产精品国产三级在线专区 | 18禁无遮挡羞羞污污污污免费 | 97精品久久久午夜一区二区三区 | 992tv人人草 992tv又爽又黄的免费视频 | 久久夜视频 | 免费看欧美黄色片 | 91麻豆精品一二三区在线 | 国内精品视频在线播放 | 色综合久久久久综合体桃花网 | 在线区 | 欧美精选一区 | 精品国产一区二区三区免费 | 久久久亚洲欧洲日产国码αv | 成人精品视频在线 | 小莹浴室激情2 | 日韩性xxx| av片免费观看| 久久网站av | 巨胸喷奶水视频www 午夜无码国产理论在线 | 成年片黄色日本大片网站视频 | 久久一本人碰碰人碰 | 久久久久亚洲精品男人的天堂 | 91国内在线视频 | 免费国产自产一区二区三区四区 | 青草视频免费观看 | 日本爱爱网址 | 亚洲国产精品ⅴa在线观看 天堂中文在线资源 | 巨大巨粗巨长 黑人长吊 | 色欲精品国产一区二区三区av | 精品国精品无码自拍自在线 | 夫の部长が调教中文字幕 | 婷婷丁香五月中文字幕 | 毛片无码国产 | 成人毛片网 | 隔壁老王国产在线精品 | 国产精品久久久久久久妇女 | 粉嫩av亚洲一区二区图片 | 97久久精品无码一区二区 | 天堂精品一区 | 在线色综合 | 熟妇人妻久久中文字幕 | 十二月综合缴缴情小说 | 久久免费看a级毛毛片 | 欧美激情五月 | 欧美精品久久久久久久久久白贞 | 杏导航aⅴ福利网站 | 亚洲高清色综合 | 黄片毛片在线看 | 日本大片免a费观看视频三区 | 国产国语老龄妇女a片 | 国产激情精品一区二区三区 | 亚洲 在线 | 国产精品一区二 | 69国产| 日韩a一级 | 九九99九九精彩6 | 91尤物国产福利在线观看 | 夜色伊人 | 国内大量揄拍人妻精品視頻 | 韩国中文三级hd字幕 | 日本激情一区二区三区 | 强乱中文字幕亚洲精品 | 黑人巨大精品欧美一区二区三区 | 亚洲精品一区二区三区婷婷月 | 国产欧美日韩高清 | 五十路毛片 | 亚洲精品一区二区三区98年 | 亚洲一卡一卡二新区无人区 | 怡红院成人网 | 婷婷色九月 | 欧美午夜视频 | 97香蕉久久超级碰碰高清版 | 国产不卡一区二区视频 | 日韩免费精品 | caoporon成人超碰公开网站 | 色噜噜av男人的天堂 | 五月婷婷色丁香 | 亚洲欧美一区二区三区在线 | 凹凸日日摸日日碰夜夜爽孕妇 | 牛牛精品一区二区 | 无人码一区二区三区视频 | 91国内| 国产女人久久精品视 | 亚洲欧美日韩色图 | eeuss鲁片一区二区三区小说 | 国产精品好爽好紧好大 | 小蜜蜂www视频在线观看高清 | 波多野结衣美乳人妻hd电影欧美 | 少妇性l交大片久久免费 | 久久国产秒| 精品乱人码一区二区二区 | 欧美成人免费一级人片100 | 浴室激情hd免费看 | 国产成人亚洲精品狼色在线 | 夜色88v精品国产亚洲 | 免费人成在线观看网站 | 亚洲一卡二卡 | 日韩精品一区二区三区中文无码 | 91精品国产aⅴ一区 91精品国产爱久久丝袜脚 | 亚洲一区二区三区视频 | 国产农村老太xxxxhdxx | 无码精品人妻一区二区三区漫画 | 亚洲综合无码一区二区三区 | 色哟哟av | 亚洲国产成人a精品不卡在线 | 日本一卡2卡3卡4卡无卡免费网站 | 国偷自产av一区二区三区小尤奈 | 91香蕉视频官网 | 99久久99久久免费精品蜜臀 | 黑人巨大精品欧美黑白配亚洲 | 在线久操 | 久久天堂精品 | 色啪视频 | 黑人大长吊大战中国人妻 | 超色视频 | 青草青草久热精品视频国产4 | 青草青草视频 | 成人一级毛片 | 国产精品久久久久久亚洲影视 | 夜夜看| 公妇乱h日出水了 | 小黄鸭精品密入口导航 | 1000部精品久久久久久久久 | 狠狠色丁香婷婷综合 | 亚洲精品一区二区三 | 一级中文片 | 黄色av网站免费看 | 哪里可以看毛片 | swag国产精品一区二区 | 成人性免费视频 | 一本色道久久综合亚洲精品不 | 69影院少妇在线观看 | 日韩短视频 | 欧美涩涩视频 | 欧美三级免费看 | 1000部啪啪未满十八勿入下载 | 日韩av图片 | 欧美性受xxxx黑人xyx性爽 | 欧美激情国产日韩精品一区18 | 国产精品久久久久久久久免费丝袜 | 天天插综合网 | 伊人久久久久久久久久 | 色先锋av资源中文字幕 | 乌克兰少妇性做爰 | 色依依av在线 | 欧美黑人xxxx高潮猛交 | 精品成人69xxxyz| 激情综合激情五月俺也去 | 碰碰色| 久久免费播放视频 | 一级黄色大片网站 | 少妇太紧太爽又黄又硬又爽小说 | 狠狠色视频 | 大吊一区二区三区 | 18videosex性欧美麻豆 | 日本一级大片 | 亚洲精品9999久久久久无码 | 午夜福利三级理论电影 | 国产精品18久久久 | 亚洲国产精品成人女人久久 | 亚洲加勒比久久88色综合 | 在线亚洲网站 | zzjizzji亚洲日本少妇 | 成人国产福利a无限看 | 免费人成激情视频在线观看 | 中文无套内谢少妇视频 | 奇米777四色在线精品 | 成人天堂 | 成人精品视频一区二区三区尤物 | 成人免费网视频 | 国产国语老龄妇女a片 | 69婷婷国产精品入口 | 一区二区三区中文字幕在线观看 | 国产精品久久久久久久久久久免费看 | 欧美巨大巨粗黑人性aaaaaa | 亚洲综合免费 | 人人爱国产| 强乱中文字幕 | 99久久一区| 91综合精品 | 护士的小嫩嫩好紧好爽 | 强辱丰满人妻hd中文字幕 | 亚洲国产成人一区二区精品区 | 天堂av一区二区三区 | 人妻无码中文久久久久专区 | 精品久久人人妻人人做精品 | 国产又粗又猛又爽又黄的视频在线观看动漫 | 一区二区三区四区免费 | 国产99视频在线观看 | 日本欧美一区二区三区 | 国产激情久久久久 | 国产又黄又猛又粗又爽的a片动漫 | 久久亚洲精品国产精品紫薇 | 老熟女毛茸茸浓毛 | 成人孕妇专区做爰高潮 | 精品无码一区二区三区av | 玩弄人妻少妇500系列 | 色哟哟网站在线观看 | 色妞色| 小镇姑娘国语版在线观看免费 | 亚洲一区二区三区在线观看网站 | 都市激情久久 | 日本 欧美 制服 中文 国产 | 精品国产人成亚洲区 | 天天色天天艹 | 国产伦精品一区二区三区视频我 | 少妇性俱乐部纵欲狂欢电影 |