你可能不知道的8個UX專有英文字彙 - Medium

2. UI Components 介面元件. 介面設計是由許多元件所組成。

以下要來介紹特別、有趣的專有名詞：. 2.1 Carousel. Carousel的 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinUXeastmeetswest你可能不知道的8個UX專有英文字彙【本文適合想認識UX專有詞彙、增進英語能力的讀者】在美國職場上，除了專業技能之外，最重要、最具挑戰的就是溝通。

由於英文並非我們的母語，當對方講話過快、或是不理解單字，時常會發生以下困窘的情況：故事背景：我和其他兩位工程師負責開發一支APP，我們正討論著InteractionDesign工程師Andrew拿著手機跟我說“Whenyou聘娶this,itwillrotate…”“聘娶？”帶著疑惑的眼神，我問“Ya,聘娶,youknow”Andrew淡定的回答我仍然皺著眉頭、睜大眼睛、歪著頭於是他把手放在空中比劃，我才了解他的意思。

這種情形，在日常生活屢見不鮮，除了專有名詞外，還有許多生活用語。

因此，促成寫這篇文章的動機，讓想要認識更多UX專有詞彙，增強英文實力的你，可以避免姊走過的遠路。

同時，當外國人跟你溝通，運用這些詞彙，會讓對方覺得你更加專業。

圖0.在工作場合上，除了專業能力外，最具挑戰的即是溝通能力這篇文章我整理了八個常見的專有名詞，分成兩個部分：1.Gestures手勢1.1Pinch1.2Tap1.3Flick/Swipe1.4DragandDrop2.UIComponents介面元件2.1Carousel2.2Modal2.3TextField2.4Actionsheet(Bottomsheet)1.Gestures手勢平板、手機等觸控介面中，手勢的互動設計提供使用者與裝置間更多實際的回饋，讓使用者可以直覺的操控系統，提升使用者經驗。

1.1PinchPinch在英文對話中，有兩種意思：a.捏(v.)“shepinchedhischeek”她捏他的臉頰b.被抓到(n.)“Igotapinchoftobacco”我帶香菸被抓到了在互動設計中，Pinch就是zoomin&zoomout的手勢，當兩個手指頭向內推、或是往外延伸，這個動作就叫做Pinch。

圖1.1Pinch基本上是zoomin和zoomout的手勢，當兩隻手指頭往內推、往外延伸1.2Tap我們常聽到的是Tapwater是指自來水。

在互動設計中，Tap是指激發一個控制，或是選擇一個項目，是最常見的手勢之一。

而DoubleTap是快速的點擊兩下，讓物件放大，或是當物件已經是放大狀態時，DoubleTap讓物件恢復原狀。

圖1.2Tap點擊，為最常見的手勢之一1.3Flick/SwipeSwipe是用來瀏覽一系列的相片及頁面。

同時，我們也會使用Swipe來移除項目，或是顯示其項目的其餘功能。

Flick是指快速的滑動一系列項目，尤其當項目的寬度過長時。

在瀏覽相片時，你會Flick，看下一張照片或是之後的照片；而Swipeleft返回前一頁、Swiperight前往下一頁。

這兩個詞彙雖然都可以用來更替項目，不同的地方在於速度及方向。

舉例來說，Swip通常是指平行移動，想像用一枝鉛筆畫一條直線；而Flick就像是快速的劃線槓掉某項目，速度較快，方向也較不規則。

圖1.3Swipe，當返回前頁，或是前往下一頁時，會用Swipe來更替頁面1.4DraganddropDrag是拖動，Drop通常是用來指降落、下降。

當使用者要移動一個物件時，會鎖定一物件、拖曳到新的位置、釋放。

這一連串的動作就稱為Draganddrop。

當然，你也可以說movetheitem，但是Draganddrop更多動感的細節。

除了觸控螢幕外，一般螢幕也適用。

圖1.4DragandDrop2.UIComponents介面元件介面設計是由許多元件所組成。

以下要來介紹特別、有趣的專有名詞：2.1CarouselCarousel的本意是指運輸帶，或是旋轉木馬。

在介面設計中，Carousel的目的是用來呈現多個物件。

例如瀏覽圖片時，我們常常會看到底下有小圓點、顯圖或是箭頭，引導使用者點擊下一張圖片，而最顯著的那張圖片，我們稱為Heroimage。

Carousel有兩個優點，一是不佔據過多的版面，二是迫使用戶一次只能把注意力放在一個物件。

但也有人批評此設計無法讓使用者一次瀏覽全部的資訊，即有可能忽略其中的內容。

圖2.1Carousel讓使用者將注意力一次只能放在一張圖片，並不佔據過多的版面2.2Modal/Dialog“Model?”當初第一次聽到主管講Modal時，我內心充滿困惑，因為Modal跟Model的音十分相近，但意義卻完全不同。

Modal的原意是語氣，Modal存在的意義在於通知使用者重要資訊，或是引導使用者決策下一個動作。

最常見的使用情形為警告及確認，例如：當使用者要刪除一項目，會有一個突然跳出的視窗，再次詢問”Areyousuretodeletetheitem?”；或是打開Googlemap時，會提醒使用者“Googlemapwouldliketouseyourcurrentlocation”。

因此，當Modal跳出時，通常會有一層帶有透明感的黑色屏幕，分隔著主要視窗與modal，阻斷使用者初始動作，迫使用戶將注意力集中在Modal上，再繼續進行原本的任務。

圖2.2Modal的目的是通知使用者重要資訊，或是引導使用者決策下一個動作2.3TextFieldField在英文中，是指田園，或是領域，一塊可以耕種的空地。

我們經常使用文字輸入格，就稱作TextField。

當解釋過後，你可能覺得沒什麼大不了，不過回想當初作者本身跟工程師溝通時，卻不知道怎麼稱呼輸格，只好一直說box，也是另一件窘事了。

輸入格有需注意的設計細節，例如清晰的說明文字(textlabel)、適當的長度、當使用者輸入時的焦點視覺設計、防呆的錯誤狀態等等。

有興趣的朋友，可以閱讀此文章：DesigningPerfectTextField:Clarity,AccessibilityandUserEffort。

圖2.3TextField我們經常使用文字輸入格，就稱作TextField2.4ActionSheet/BottomSheetActionsheet是一組動作的按鈕，快速地提供使用者不同的選擇。

例如：當使用者點擊(tap)分享按鈕時，Actionsheet會出現一串選擇的清單，如Email、Facebook、Message不同的分享方式等。

在iOS系統稱為ActionSheet，不過在Android上叫做BottomSheet，主要是用於手機裝置。

在設計時，Actionsheet是一組快速又簡潔的方法，無須設計額外的畫面，同時提供使用者選擇的空間。

圖2.4Actionsheet是一組動作的按鈕，快速地提供使用者不同的選擇在美國職場上，常常會遇到溝通的問題，不僅是在生活用語，或是專業術語。

因此作者整理了以上八個名詞，是我在工作場合時常運用到，但當初卻想破頭也說不出的英文字彙（心酸）。

希望能提供大家一個有趣、簡潔的方式，認識這些專有字彙（讓外國人對你嘆為觀止）。

如果大家對這系列文章有興趣的話，很願意再提供更多的資訊，那我們下週見！References***iOSHumanInterfaceGuidelines—Gesturehttps://developer.apple.com/ios/human-interface-guidelines/interaction/gestures/**TheiOSDesignGuidelineshttp://ivomynttinen.com/blog/ios-design-guidelineshttps://designcode.io/iosdesign-guidelines***MaterialDesignhttps://material.io/guidelines/material-design/introduction.html#TouchScreenGestureshttp://www.embeddedinteractions.com/touch%20screen%20gestures.htmlSwipevs.flickhttps://brianthurston.com/swipe-vs-flick-on-ios-6ff6a516b6aahttps://www.quora.com/Whats-the-difference-between-swipe-and-flick-actions-on-iOSDesigningPerfectTextField:Clarity,AccessibilityandUserEfforthttps://uxplanet.org/designing-perfect-text-field-clarity-accessibility-and-user-effort-d03c1e26004bMorefromUXeastmeetswestWearefourpassionateUXersfromTaiwan,workingacrossAsiaandtheU.S.Weshareourinsightsandworkexperiencestothecommunity.UX四神湯是四位臺灣清華畢業的UX海外工作者所建立的內容平台，每週定期發布文章。

內容涵蓋中美的工作環境與生活體驗、互聯網巨頭與新創公司的工作內容、設計趨勢、UX實務技能分享等ReadmorefromUXeastmeetswestAboutHelpTermsPrivacyGettheMediumappGetstarteduxeastmeetswest5.1KFollowersWeare4passionateUXdesigners,workinginbothChinaandtheUS.Weshareourworkexperiences,culturaldifferencesandpersonalUXperspectives.FollowMorefromMediumPoornimaBadhanSubramanianinBootcampAdesigner’sperspectiveonDigitalAccessibilityFedericoSchlagheckCulture&HeritageKajaParchanskaE-commercesolutionforBakeryManonGustaveIronhack’sUX/UIPre-work|ManonGustaveChallenge1:DesignThinking|CitymapperHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable