網(wǎng)站設(shè)計(jì)

Website development

一個語言開關(guān)設(shè)計(jì)：實(shí)例和最佳做法

發(fā)布時間：2017-01-05 14:19:14

TAGS：網(wǎng)站設(shè)計(jì)

建立一個全球的SaaS產(chǎn)品并不容易。你必須定位你的產(chǎn)品，把你的網(wǎng)站，并確保一切都還在運(yùn)行。

有可能是一個主要的接口問題，它看起來像一個小東西起初，但實(shí)際上是想久一點(diǎn)。我說的是選擇語言的可視化。你怎么能想象選擇更改語言，全球觀眾可以選擇他們想使用的是什么語言？

在這篇文章中，你會找到所有你需要知道的時候?yàn)槟膽?yīng)用程序或網(wǎng)站的語言開關(guān)的設(shè)計(jì)，包括一些實(shí)例和做法。

語言的圖標(biāo)

一個多語種的軟件或Web服務(wù)時，你終會在一些點(diǎn)語言圖標(biāo)的思考。

一種語言的圖標(biāo)是一個視覺幫助，說明了應(yīng)用現(xiàn)有的語言。但問題是，有，還沒有標(biāo)準(zhǔn)的定義，對語言或語言切換器圖標(biāo)看起來應(yīng)該像這樣。

language icon google search

主動語言圖標(biāo)

正如我之前提到的似乎沒有標(biāo)準(zhǔn)的定義，對語言圖標(biāo)看上去像。我可能是錯的。有一種語言圖標(biāo)啟動2008旨在規(guī)范語言選擇圖標(biāo)。

標(biāo)準(zhǔn)的語言選擇圖標(biāo)看起來像這樣：

來源languageicon.org

但你有沒有看到一個你喜歡的網(wǎng)站或應(yīng)用程序圖標(biāo)？我沒有和我們的用戶測試表明，人不認(rèn)識這個圖標(biāo)，選擇語言選項(xiàng)。

看來，標(biāo)準(zhǔn)化的語言圖標(biāo)沒有被廣泛使用。盡管許多其他網(wǎng)站–字體真棒–名單之前的圖標(biāo)的標(biāo)準(zhǔn)圖標(biāo)。

其他語言圖標(biāo)的想法

所以，我們不是100%滿意的語言圖標(biāo)主動提供的語言圖標(biāo)。我們繼續(xù)我們的研究，我們發(fā)現(xiàn)地球的圖標(biāo)是一個流行的圖標(biāo)用于語言切換。

與地球的問題？不同的人有不同的聯(lián)想與地球圖標(biāo)。如果你是一個沉重的臉譜網(wǎng)用戶，你會發(fā)現(xiàn)這個圖標(biāo)為您的通知中心。

facebook notifications globe

所以，我們絕對沒有地球圖標(biāo)。

國旗，國家的問題

Intuitively, we tend to think about countries when we talk about languages. Chinese = China, Japanese = Japan, and so on. However, there are some major limitations when you start using country flags for your language switcher.

那么，為什么你不應(yīng)該使用國旗：

如果你使用20種以上的語言為你的應(yīng)用程序有設(shè)計(jì)缺陷。顯示20國旗可以相當(dāng)混亂。
國家不代表語言，或其他方式輪。

language switch icon

國旗象征國家，沒有語言。就這么簡單。

country switch icon

我建議只使用國家的國旗，如果你的產(chǎn)品是不同的從國家而不是從語言到語言。

語言轉(zhuǎn)換的實(shí)踐

所以，你可能想知道。我該如何想象一個語言切換？

如果你喜歡鄉(xiāng)村的旗幟，真的要堅(jiān)持國家的旗幟，我推薦一個解決方案如下：

language selection

語言按鈕

美國政府發(fā)布了一個綜合指導(dǎo)網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)前一段時間，所以我很好奇他們是怎么解決問題的語言切換。

正如你可以看到下面的截圖，美國使用的語言按鈕，其造型顯然是由它的網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)定義。

usagov language switch

提供語言切換選項(xiàng)的文本鏈接廣泛用。這可以稱為一個很好的例子在這里。

google language switcher

語言切換為主要導(dǎo)航部分

文本鏈接到其他語言提供您的網(wǎng)站或應(yīng)用程序的一個好方法。在你的主導(dǎo)航嵌入語言切換，用戶會很快發(fā)現(xiàn)選擇改變語言。

Trello，例如，嵌入在應(yīng)用程序設(shè)置語言切換。

trello animated GIF

語言切換為頁腳導(dǎo)航部分

其他網(wǎng)站和應(yīng)用程序使他們的用戶在他們的網(wǎng)站頁腳部分改變語言。

臉譜網(wǎng)似乎是這樣做的一個突出的例子：

language switcher footer facebook

基于文本的語言，而不是圖標(biāo)切換器
經(jīng)過多次討論，用戶測試，和會議我們決定不使用任何圖標(biāo)。
為什么？因?yàn)樗坪鯖]有可以創(chuàng)造一個相互理解的語言圖標(biāo)。
我們已經(jīng)在我們的網(wǎng)站上，一個基于文本的語言選擇，我們決定要一致。

language animated GIF

當(dāng)你提供一個多語種的網(wǎng)站或產(chǎn)品，關(guān)于語言的切換思維不可能是當(dāng)務(wù)之急。

利用各種語言圖標(biāo)、國旗、或其他圖形可以導(dǎo)致混亂和不創(chuàng)造一個相互理解的特點(diǎn)。因此，我們在usersnap決定用一個簡單的基于文本的切換器。

一個設(shè)計(jì)良好的語言選擇是一個關(guān)鍵的東西，提高可用性，可以為您的網(wǎng)站訪問者和客戶的一個簡單的用戶體驗(yàn)。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7028,0.html

上一篇：驚人的和專業(yè)的WordPress網(wǎng)頁的主題

下一篇：一個頁面的組合：趨勢和展示

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項(xiàng)目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍γ總€項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理