看創設在衝三小

2017年7月12日星期三

多語系網頁在設計上該考慮什麼，才能有好的使用者體驗？

多語系（國際化）網頁在設計時，往往因不理解該地區的文化或語言，而忽視了許多小細節，累積起來就會造成諸多問題，例如：降低轉換率、無法完全地傳遞產品價值理念、降低使用者的信賴 … 等。作者 John Saito 以他在 Dropbox 工作的經驗，提供許多設計的小技巧給讀者，希望能解決在設計多語系產品的相關問題，期待能讓產品的體驗更好。

試著想像你正在試用一款新 app，這 app 在 twitter 上受眾多人推薦、分享 … 說它很棒、生活因此改變了 … 等。這 app UI 如下圖，仔細看看是不是有些地方令你感到怪怪的？介面上方有段影片，但影片上的標題文字你卻看不懂；介面上的用字有些奇怪，按鈕上的文字也跑版、破格。如此的 UI 呈現品質，你還會信任這產品嗎？

當然，這可以被解釋為此 app 不是針對你所在的地區語言所設計（也許是精靈語 XD～），所以這些開發者、設計師並不曉得翻譯成各國家的語言後會變成怎樣。無論你信不信，這確實是非英文系國家使用者常會遇到的問題！因為許多 app 僅針對英文語系來設計，而忽略了一些翻譯後的設計細節。

。。。

為了避免類似上述的問題，底下提供了一些在設計多語系（或國際化）產品時該注意的設計技巧：

1. 預留切換多語系的文字空間

多語系產品最常遇到的問題就是在介面上沒有預留足夠的空間，來解決不同語言在翻譯時所造成的文字長度差異。例如 " New! " 這個字詞包含了四個字元，但翻譯成法語後，就會變成9個字元（Nouveau !），超過英文的兩倍。

因此若設計的介面上包含了文字的排版，請確認是否保留了足夠的空間。如果沒有，在轉換成它國語系時，就可能會發生文字重疊或切斷的跑版問題。

咦？是不是覺得空間有點窄？

我們不可能懂世界上所有的語言，但我們可以借助工具來預測各種語言的長度，如 Google 試算表搭配 GOOGLETRANSLATE 的功能，可同時轉譯多種語言。雖然不一定是正確的用法，但可快速概略地瞭解不同語言文字的長度。

這是我透過 google 試算表所做的 “預估” 文字長度之工具

IBM’s globalization 網站中有個非常有用的表格，上方告知若要將英文翻譯成其他語言，需要的空間大概是多少。

2. 避免將文字排列在狹小的直欄（columns）中

透過直欄（Column）編排內容是個不錯的方式，它讓內容具平衡、結構性與協調的特性，並且能與你精心配置的網格系統良好搭配。但當文案長度無法被預期時會發生什麼事？這是多語系產品在翻譯時經常會遇到的！原先一行的標題可能會變成二或三行，因而破壞了你精心設計的排版平衡。

當你把文字放於較窄的直欄（column）中，就有很高的機率讓翻譯後的文字超過預設欄寬範圍而形成多行。所以較安全的作法是以較寬的橫列（row）來取代較窄的直欄（column），這樣就能有更多的彈性空間，而不會破壞了原先的排版。

3. 別在圖片中放文字

如果圖片中包含文字，又必須要有多語系的版本，這對設計師來說簡直是個惡夢。雖然設計師可修改 Photoshop 或 Sketch 檔案中的文字圖層，但你必須每種語系都進行調整以適應各種長度的文字而造成排版上的混亂。
以下有兩個較好的解決方式：

使用線條取代文字：當不一定要使用文字才能傳遞資訊時，可以使用不同粗細、顏色的線條來呈現。

直接使用前端語言：如下圖，綠色圓形上的文字並不屬於圖片的一部分，而是用網頁前端語言刻出來的（因此切換語系時即能自動翻譯，而不需要為了多語系而製作很多張圖）。

4. 不要在句子中擺放 UI 元件

對設計師來說，不斷調整 UI 元件的排版來確認哪個是最好的方案，是件再正常不過的事情。但其中若包含了文字時，你就要特別的注意。例如：包含文字的按鈕、checkbox 或下拉選單安排於句子中，就可能會造成許多問題。

為什麼這樣做對多語系設計會造成困擾？

排列文法不同：不同語言因文法不同，排列也會有所差異。譬如將 “Buy 3 shirts” 翻譯成日文，“Buy” 會移到句子的最後。如果你所擺放的 UI 元件在句子中順序是無法被改變，那則無法順利地適應不同語系的句子。
複數：對英文來說，會有單數與複數的兩種名詞表達方式，如：1 picture” 與 “__ pictures” 。但在俄語中，有三種表達方式。所以如果使用者在句子中輸入數量，句子就需要跟著改變，否則文法就會有誤。
詞性：有些語言對名詞與形容詞有特別的用法。在法語中，“ large ” 會視所描述的東西尺寸，而使用 grand、 grande、grands 或 grandes 等不同字。如果你在句子中擺放一個下拉式按鈕，可能在翻譯後就會造成文法上的錯誤。

那該怎麼做呢？比較好的作法是讓這些元件獨立存在，譬如放在後面（下圖）。

5. 同一件事有不同的文化隱喻

在產品設計中，我們常使用真實世界的隱喻於 icon、按鈕與互動方式上。例如，Dropbox icon 即使用了置物箱的隱喻； " 點擊並拖拉 " 的互動方式取自手拿物體的隱喻。

但有些東西對不同文化的人會有相異的隱喻，例如在美國，貓頭鷹代表智慧，但在芬蘭或印度，牠代表了愚蠢。此外，某些物體對不同文化的認知也不盡相同。美國人對郵箱的印象如下圖，但其他國家的郵箱就不一定長成這樣，像是大多數國家並不會把旗幟插於郵箱上。此時，隱喻便不管用了。

在開始設計前，最好針對你所想使用的隱喻做些研究。在 Dropbox 裡，當我們對於將推出的多語系設計（icon 、插畫）有文化認知上的疑慮時，通常會詢問 “解決國際化問題" 的團隊（Internationalization team）是否能有效的認知這些設計背後的資訊。

6. 使用能描述功能的詞彙

就行銷的觀點，他們喜歡針對某些功能發明有趣的名稱，來吸引目光。但有趣的名字往往難以翻譯成不同語言，甚至在其他語言中不帶有意義。幾年前，Dropbox 推出了無限版本控管的功能，最初命名為 “Packrat” 。

也許 “Packrat” 對美國人來說挺有趣的，但對其他語言來說卻沒有任何意思，尤其左側的老鼠 icon（上圖），更讓人困惑。發現問題後，我們改為 “Extended version history” ，很直接也更好翻譯。

為了避免翻譯造成的問題，使用描述性的文字作為功能名稱的風險較小，雖然這樣可能較無聊，但更易於翻譯且使用性也較高。

7. 多準備一份翻譯版

一般來說，當你所撰寫的文案必須全部被翻譯成多語系時，用字風格最好是精準、原始不誇張且自然的。然而總會有些情境，你想特別突顯品牌特性而使用一些有趣、好玩的用字。此時，我們就會同時出兩種多語系版本：一個為在地化語系版；另一個則是翻譯版。

如果遇到較特殊且不易翻譯的字彙，你可增加註解，讓翻譯者參考。舉個例子，最近我們為 Dropbox 的貼圖建立文字標籤，我們打算給下圖的文字標籤為 “OMG cat”，同時在下方註解：也可用 “Surprised cat” 來翻譯。翻譯者就更有彈性且也能兼顧用字的特性。

本文章已獲得作者授權，翻譯自：Design for internationalizationa by John Saito，原文出處 medium

10組吸眼球配色，每個都讓人愛不釋手

10組吸眼球配色，每個都讓人愛不釋手

讓簡報設計看起來生動的一個重要關鍵，就是選擇正確的顏色搭配。

然而不論你希望藉由壯麗的風景、浪漫的落日或色彩鮮豔的活潑景象，引起觀眾的共鳴，都需要配合長時間的練習和經驗，才能找到最完美的色調搭配。

為了大量節省各位的時間和精力，我們製作一系列顏色搭配組合，讓所有人都能自由使用。這些顏色組合已經在 Visme 上開放。你可以輕易藉由以下動畫提供的方式，將這些顏色組合使用在自己的設計之中。

1. 藍色夕陽
生動的黃色和橘色，混合中性的深藍色和搶眼的橘色，適合展現活力和生命力。

2. 經典重現
從帶有一點灰的青綠色，到中性深紅色和深橘色，這個多數為深色的組合非常適合用來舒緩情緒。如果需要簡單一點的設計，你也可以只選擇前三個顏色。

3. 鮮亮藍綠色
強烈鮮豔的藍色、一抹柔和的黃色和去飽和度的深橘色，比起傳統的藍色配棕色，顯得更令人興奮和有活力。

4. 沼澤上的夕陽
去飽和度的深藍色，搭配溫柔的黃色、亮橘色和亮紅色，這個多彩的組合適合輕鬆、充滿青春氣息的主題。

5. 地中海藍
這個加了灰藍色、去飽和深藍色和一抹棕色的完美組合，讓人聯想到魔幻的地中海場景，非常適合用在旅行與跟自然有關的主題。

6. 異國蘭花
一系列的藍色和青綠色，配上活潑的橘色，絕對是色彩鮮豔、充滿生氣的設計。你也可以選擇最適合你的顏色搭配，像是最上面的深藍色配上底端的橘色，會隱隱帶出異國風情。

7. 精緻而冷靜
這套組合很實用。它可以同時帶有精緻、高端文化氣息，又有種冷靜和舒服的感覺。

8. 洋紅色配黃色
一抹洋紅色結合靈動的黃色和橄欖色，讓組合充滿新鮮感且不落俗套。

9. 藍色山尖和雲朵
這一系列的藍色加上深黃色和偏亮的灰粉紅色，使這套配色可被多方應用在顯現專業和謹慎的態度。

10. 橘色落日
深粉紅色、去飽和度的深紫色結合溫柔的紅色和橘色，創造出有生命力和多彩的畫布。你可以自由運用於傳遞活力及溫暖的場合。

Why The Color Red Revs Your Desire (But Lowers Your IQ)

The oldest cave paintings in the world are about 40,000 years old.

Images of dots in Spain, Buffalo in France, and stenciled hands in Indonesia. These were painted by tribes thousands of miles and hundreds of years apart, but they all have one thing in common.

They are all red.

So starts our species fascination with the color. Red has a hold over us like no other pigment, signifying attraction, danger, boldness, and sex. In today’s world, it can symbolize love or hatred, courage or mistake depending on context, and we understand this context and meaning immediately, ready for flight or flight, or fun.

This in-built significance and symbolism to humans is a major boon to the designers of the world. No other color can convey so much meaning about a product or a brand. Many brands and designs use red to evoke certain emotions: excitement, passion, freshness, boldness.

Take Coca-Cola. This is perhaps the most famous design and brand that associates with red.

The iconic design of a red can or bottle and the white ‘Coca-Cola’ script is known throughout the world.

Coca-Cola uses this red to convey the excitement and freshness you are supposed to associate with drink and ice cold Coke. If the color of Coca-Cola was blue (a la Pepsi), or green, yellow, or brown, would your thirst be quench so vigorously?

Because of this symbolism and the fact red intuitively means so much to us, a lot of study has gone into own fascination with the color red, how it came to be so, how it plays with our emotions and desires, and what happens to us physiologically and psychologically when we see the color.

Use Red To Instill Desire

Red is inextricably linked with desire. Think about ruby red lipstick, a dozen red roses, or the woman in the red dress from The Matrix.

You might think that this is a cultural thing, that with colors having different meanings the world over, it is just western cultures that have come up with the idea that red means sex. But it seems this isn’t the case. Men feel the ‘red effect’ the world over.

A joint US/Canadian study studied a small, isolated community in Burkina Faso. What was particularly interesting about this tribe was that red usually had negative connotations in this group. For these Burkinabe, red meant bad luck and illness. But the young men of this community still found that red stoked their desire. When images of the same women were shown on a red background or a neutral background, the men always plumped for the red women. These findings replicate those from Europe and elsewhere in the world. Men just can’t get enough of red it seems.

Why probably goes back millions and millions of years, to before humans roamed the earth. Many of our ape cousins – Gorillas, Chimpanzees, Bonobos, and Orangutans – have two things in common: bare-skin and trichromatic vision.

I have covered trichromatic vision before. We, along with some other higher primates can see in three colors – blue, green, and importantly red – whereas most animals only see blues and greens. Scientists think that once our ape-ancestors started to lose their hair, the possibility to see blood coursing through veins became an option. When females of many primate species are in peak fertility their skin reddens. Any male monkey with the ability to see this red, with his awesome tricolore eyes, was at an obvious advantage. Red became a signal for sexual peak, and our eyes evolved to pick these signals up.

It might have skipped your attention, but human females don’t go bright red when they are ovulating. So why is this still a thing? Well, it seems our brains just can’t let go of any idea that is so deeply ingrained. Another Canadian group looked at how women single their peak fertility time. Lo and behold, red flashed its lovely head once more.

The researchers found that women at a high conception risk were three times more likely to were red than women at a low conception risk, and 77 per cent of women wearing red were found to be at peak fertility. There seems to be some unconscious signal that makes us pick out red to use as a visual cue whenever we are… in need.

Designers can, and do, take advantage of this. In fact,

almost any advertisement, brand, or product that is meant to appeal to our baser instincts will come with a flash of red.

A great example of this is the red sole of the Louboutin shoe. Louboutin chose red because of its association with desire and passion. The bright, monochromatic red contrasts with the rest of the shoe, standing out and showing that the shoes are original Louboutins – other brands have tried to copy the design, but Louboutin trademarked the red sole in 2012.

Red Can Help You Win

Along with desire, we also associate red with dominance. Whereas a reddened face of our female primate ancestors signified attraction, a red-faced male meant aggression.

This is something that we definitely still see today. Whenever we get flustered, worked-up, and angry we go red, just like in the cartoons (sans steam out of the ears). Just seeing red can increase your heart rate, blood pressure and make you more excited.

Designers can take advantage of this excitement to bring people along on the emotional journey of their brand or product. An iconic use of red for excitement purposes is Ferrari. The association between excitement and red is no doubt why Enzo Ferrari chose the color for his classic race cars.

A 2011 study by Andrew Elliot and Hent Aarts examined how looking at certain colors affected people’s grip strength – basically how tight they made a fist. When the subjects looked at red relative to all the other colors, they always made a tighter fist, and more quickly. They were preparing themselves for what red signifies: a fight. The color red has the ability to override your motor control and get you ready for something bad to happen.

Because it gets our adrenaline pumping and is perceived as a sign of dominance, it might be no surprise that wearing red during sports can help you win.

After the 2004 Olympics, Russell Hill and Robert Barton, from the Evolutionary Anthropology Research Group at the University of Durham in the UK, looked at who won and who lost in the combat events, and what color they were wearing. Red or blue attire is assigned to each fighter, so Hill and Barton could see who won out of the red and blue teams.

Designers therefore need to take care when using the color red. It can have an immediate and unconscious effect on our bodily functions: raising heart rates and blood pressure, making us tense, and getting us ready to fight off all comers. Maybe not what you want on a website dedicated to relaxation, or a baby product then.

SEE MORE

Banner四種文字排版技巧

內文詳細解說在Banner中運用文字的技巧，
排版以及閱讀、表達效果，運用文字創造空間及合理性，
很適合我們每一天在做的工作內容所要吸收的知識。

一、文字的排列要遵循規律
我們在閱讀文字時的基本規則是從上到下、從左到右的。文案的排版應儘量遵從這一規則，除特殊版式之外，儘可能減少參差不齊或右對齊排列，大部分情況下，使用左對齊或居中對齊是最為合適的選擇。

△ 左對齊、居中對齊、右對齊、參差不齊（從左到右）

不管是應用了文字的特效、文字的前後層次還是文字的傾斜，都是遵循左對齊原則。
而當沿著某一板塊或素材的左側排列文字的時候，我們使用右對齊會比左對齊和居中對齊，要有更好的表達效果，但一定要記住這是特例 ↓

下面我再通過一個小例子來更加明確關於左對齊的操作。

△ 參差不齊，視覺點混亂

△ 右對齊，左側的不規則空白閱讀起來不舒服

△ 左對齊，產品跟文字之間的縫隙是很難受的地方

△ 改變文字跟主體的位置，可以去掉參差不齊的縫隙，所以左對齊要靈活運用

△ 使用居中對齊讓版面整體有自由感

這裡有人會問，這兩個圖足有都是以不規則的，為什麼第一個就不舒服第二個就沒事，這裡考慮的就是我前面提到的視覺點，從正常從左到右的閱讀順序，第1張氏視覺的{入口處}就是開始不齊，是一開始就有的生硬的視覺干擾，而第二張是視覺{出口處}末端不齊，出口部分是緩和的部分，是可以減少視覺硬性干擾的。我們拋去美觀、版式等問題不看，單從閱讀的流暢性和合理性來說，也是左對齊比右對齊要好的很多。

二、明確主、副標題及描述
文字排版應用的核心是對比，而對誰做對比，怎麼對比，為什麼要對比是很多設計師都做不好的點。

主標題大、粗、醒目。副標題與主標題用同一字體，略大，略粗，較為規整。描述——常伴有形搭配來劃出分隔。利於閱讀，較細、較小（有些文案沒有描述或副標題時，可彼此借鑑綜合使用）

另外在字體的選擇上儘量不要使用識別度較低，特性異性的字體。

舉個例子：

上圖有一下幾點問題，這也是很多文字排版有問題的朋友常犯的一些問題。

1、「高清無暇，美若天生」的文字辨識度較低，不易閱覽。很多情況下，觀看者在畫面的停留時間僅僅數秒的，如果在這有限的時間裡還辨識不出你寫的是什麼，就會失去對你作品的興趣，也可以說你的作品本身就是失敗的。

2、主標題的定義一般為產品的名稱、活動名稱、要表達的重要信息等，畫面中應該是絲滑無暇BB霜為主標題。高清無暇，美若天生只是副標題。做圖的時候一定要好好去判斷。

3、形狀款的應用，在針對描述去使用的形狀裝飾里，我們經理使用填充為主，少用只有描邊形式的裝飾，這種文本過於單薄，如果控制不當就會覺得整個描述非常擁擠難受。

4、如果投放價格，就儘量醒目不要太過袖珍。立即搶購等按鈕形式，儘量不要與價格或文本水平排列，會顯的版面非常彆扭，文字水平跟按鈕排列是一種很不好駕馭的排版形式，儘量讓按鈕出現在文案的最下方。

綜上所述，我們的文案可以稍作改進，更符合明確的展示：

另外，在同一個小範圍應用顏色儘量不要太多，像下圖裝飾形狀內的文字顏色最好是應用跟背景色相近的顏色，不然會覺得非常的跳脫，不舒服。

主、副標題儘量的區分開來，不要給人模稜兩可或含糊不清的感覺：

關於主、副標題的排版形式，之前也有明確的實例，可以作為借鑑參考。

三、主標題的應用
一般情況下，我們都是以主題的長度為一個文字排版的左右寬幅，而如果主標題過長會導致我們的視覺點被拉長，文字如果都以主標題為基準去排列會顯的臃腫，不按主標題去排列，主標題和其它文字之間會有很明顯的斷檔，所以一般情況下，檔主標題超過8個字的時候我們可以選擇性地分段。

很多朋友願意文字排版的開頭使用你整體文案中最大或最粗的文字，其實有時候這種版式會讓畫面頭重腳輕，有很強的壓迫感，文字排版的摸索階段，還是多以副標題或縮小的主標題作為開頭比較合理。

主標題字數略少時候可以單獨以主標題的每一個字作為一個圖層樣式，通過大小變化、粗細變化、旋轉、疊加、排列等方式靈活運用主標題，必要時可附帶特效。

四、行距與間距
行距與間距的把握是文字排版中最為點睛的一環，如果控制得好，整個文案都會很和諧，如果控制不好即便上邊提到的幾個技巧都做的完善也會感覺整體非常不舒服。距離的把空中我們一定要慎重考慮承重是否合理，直白的說你就是下方的文案能否撐得住上方的文案，而這個撐的含義就是通過行距與間距去展現的。

上圖為例，我們說說行距，上圖的文字整體行距是比較保守的同距型，這種方式比較隨意的擺放合理一些，但是整個文案部分看起來較為死板呆滯。

我們可以拉開文案間距的行距，較為合理的承重行距的上窄下寬，寬度可以幫助你去支持畫面，但是注意，這個時候我們要把同一範圍的文案看做一個整體，當做一個分塊，但不要讓這種整體在一個畫面里出來太多，板塊分的太多文案就會散亂，視覺也不易局集中，一般情況下兩塊即可。不過這個整體中的文案之間可以做一些小浮動性的行距的處理。

紅框部分為一個整體，注意上面提到過，就算是整體，其中的行距也可以租歐一些小的浮動變化，尤其是文案較多的時候不要讓你的文字看著死板。然後整個文案和明確的分為兩部分，紅色一部分，點擊領取一部分，通過兩個部分的行距拉大來增加承重，但這種行距的拉大不要做的太過，儘量讓他們集中在一個視野的範圍。

間距一般來說使用默認距離是不會出現太大的問題的，足夠應付很多場合，但是有的時候我們需要通過間距拉伸來達到某些目的，比如下圖中「精品台釣竿」與整體文案相比較文字部分相對薄弱，我們就可以使用文字間距拉伸的方式讓它又更好的表現效果，不過我們要注意文字間距的人為拉伸儘量不要讓拉開的距離超過當前一個字體大小的一半，那樣文字就會散亂。