編者按：為另外一個(gè)國(guó)家的客戶以及用戶設(shè)計(jì)應(yīng)用的時(shí)候，文化的碰撞總是免不了的。當(dāng) Tubik Studio 面對(duì)中國(guó)甲方的時(shí)候，同樣經(jīng)歷了一番周折。下面來(lái)看看他們的項(xiàng)目實(shí)戰(zhàn)總結(jié)吧 ~

做 UX 和 UI設(shè)計(jì)的時(shí)候，常常需要解決非常規(guī)的問(wèn)題，這也使得我們需要非常規(guī)的解決方案和技能組合。這次的設(shè)計(jì)案例就是這樣，這是一款面向中國(guó)市場(chǎng)的股票移動(dòng)端應(yīng)用。

身為 UX設(shè)計(jì)師，在參與到設(shè)計(jì)項(xiàng)目當(dāng)中之前，是根本不知道到底需要哪些知識(shí)來(lái)作為支撐的。當(dāng)然，通常而言，你需要對(duì)各種移動(dòng)端平臺(tái)（iOS、Android 等）有所了解，熟練掌握設(shè)計(jì)的一般原則，布局的規(guī)范，具備搭建復(fù)雜用戶信息架構(gòu)的能力，等等。但是即便如此，依然會(huì)出現(xiàn)意料外的狀況。比如一個(gè)和你截然不同的文化和民族的日常使用習(xí)慣，離散數(shù)學(xué)，或者專業(yè)的電路知識(shí)，通常你是不會(huì)了解這些東西的。這就是我們?cè)谕七M(jìn)最新設(shè)計(jì)項(xiàng)目的時(shí)候，碰到的情況。

項(xiàng)目概述

Bitex 是一款完全面向中國(guó)市場(chǎng)的一款應(yīng)用程序，它本身具有聚合信息的特點(diǎn)，從世界各地搜集數(shù)據(jù)，處理之后圖形化地處理，以更加友好和易于理解的方式呈現(xiàn)出來(lái)。Bitex 主要的目標(biāo)是幫助投資者更好的交易。

客戶認(rèn)為目前產(chǎn)品的主要缺陷在于：

• 設(shè)計(jì)未遵守 iOS 的設(shè)計(jì)指南；
• UX階段的設(shè)計(jì)不夠好；
• 圖形化之后的信息表現(xiàn)得過(guò)于擁擠；
• 用戶的進(jìn)入門(mén)檻太高。

它目前看起來(lái)是這個(gè)樣子：

負(fù)責(zé)這個(gè)項(xiàng)目的設(shè)計(jì)師是 Sergey Kucherenko，通過(guò)這個(gè)設(shè)計(jì)項(xiàng)目，整個(gè)團(tuán)隊(duì)也獲得了不少經(jīng)驗(yàn)。

UX設(shè)計(jì)

堅(jiān)固的架構(gòu)，始終基于完善的了解和清晰的構(gòu)思基礎(chǔ)上。因此，我們決定重構(gòu)整個(gè)產(chǎn)品的 UX，最開(kāi)始是將整體的數(shù)據(jù)基于標(biāo)簽拆分為大的邏輯塊，最終輸出為界限清晰的小邏輯模塊。

在這個(gè)階段，我們不得不面對(duì)亞洲國(guó)家用戶對(duì)于視覺(jué)感知的特殊性。事實(shí)上，在亞洲國(guó)家，很多用戶依然認(rèn)為頁(yè)面上信息越多越好，這一點(diǎn)必須納入考慮。

一些專家認(rèn)為，這是一種基于感知的心理特征。這種認(rèn)知習(xí)慣可以追溯到早期網(wǎng)絡(luò)帶寬比較低的時(shí)代，隨著時(shí)代的發(fā)展雖然帶寬提上來(lái)了，但是這種習(xí)慣和認(rèn)知被保留了下來(lái)，并且許多用戶養(yǎng)成了先快速預(yù)覽之后，再仔細(xì)閱讀的習(xí)慣。

也有人將這種現(xiàn)象歸結(jié)為當(dāng)?shù)卣Z(yǔ)言和書(shū)寫(xiě)邏輯所造成的差異。

但是，不論原因是什么，我們始終還是要為更多的圖片和文本信息而不斷妥協(xié)，盡量貼合當(dāng)?shù)赜脩舻氖褂昧?xí)慣。在這個(gè)過(guò)程中，我們發(fā)現(xiàn)了一個(gè)有意思的現(xiàn)象，在西方金融體系當(dāng)中，綠色表示上漲，紅色表示下跌。但是在亞洲國(guó)家，這恰恰是相反的。由于產(chǎn)品的投資者有計(jì)劃進(jìn)入西方市場(chǎng)，這使得在后臺(tái)加入了一個(gè)「上漲色彩」的調(diào)整開(kāi)關(guān)，讓用戶可以手動(dòng)修正這一問(wèn)題。

在進(jìn)行 UX設(shè)計(jì)的過(guò)程中，最有趣的任務(wù)是要給用戶實(shí)現(xiàn)一個(gè)非常獨(dú)特的過(guò)濾器，用戶可以通過(guò)調(diào)節(jié)這個(gè)過(guò)濾器來(lái)找到特定的目標(biāo)。這個(gè)過(guò)濾器包含幾個(gè)簡(jiǎn)單的特征和四個(gè)特定的篩選條件組成，其中每一個(gè)篩選條件的范圍都彼此不相交（比如從A到B，從C到D），有的篩選條件的范圍是無(wú)限的（A到無(wú)限大）。對(duì)于這些篩選條件，我們使用了按鈕和滑塊控件來(lái)實(shí)現(xiàn)控制。

這個(gè)過(guò)濾器的主要特征是用戶能夠通過(guò)過(guò)濾器來(lái)實(shí)現(xiàn)布爾運(yùn)算，也就是邏輯上的「與」和「或」，布爾運(yùn)算在電路和計(jì)算機(jī)領(lǐng)域有著非常廣泛的應(yīng)用。布爾運(yùn)算中通常只存在兩個(gè)概念，「是」和「否」，當(dāng)兩個(gè)篩選條件之間的關(guān)系是「與」的時(shí)候，只有當(dāng)兩個(gè)條件都滿足（也就是兩者都是「是」的時(shí)候），輸出的結(jié)果才是「是」，否則輸出的結(jié)果就是「否」。如果兩個(gè)篩選條件關(guān)系是「或」的時(shí)候，兩個(gè)條件當(dāng)中，只要一個(gè)是「是」，那么輸出結(jié)果就是「是」。

總而言之，不同的篩選方式幫助用戶更好地篩選結(jié)果，合理地搭配「與」和「或」的邏輯，能夠幫助用戶應(yīng)對(duì)不同的篩選需求，更好地找到結(jié)果。

當(dāng)然，這只是整個(gè)產(chǎn)品中所涉及到的部分?jǐn)?shù)學(xué)上的問(wèn)題。整個(gè)產(chǎn)品涉及到數(shù)學(xué)的解決方案，由 Dr. Khan 來(lái)實(shí)現(xiàn)（正是他提出創(chuàng)建這個(gè)產(chǎn)品）。為了說(shuō)明他的想法，他還給我們提供了相關(guān)工作原型的截圖。

我們的任務(wù)，是使用標(biāo)準(zhǔn)的 iOS 控件和普通用戶可理解的模式設(shè)計(jì)和實(shí)現(xiàn)整個(gè)用戶界面。

在使用的過(guò)程中，解決方案的大方向是盡量使用「與」邏輯來(lái)盡量縮小范圍，如果無(wú)法篩出可用的結(jié)果，那么再借助「或」邏輯來(lái)擴(kuò)大范圍。

UI設(shè)計(jì)

應(yīng)客戶的需求，整個(gè)應(yīng)用在視覺(jué)上采用淺藍(lán)色色調(diào)，我們?cè)谶@個(gè)基礎(chǔ)上盡量給用戶提供干凈清爽的外觀。設(shè)計(jì)上，盡可能少使用額外的色彩和圖像。

我們的團(tuán)隊(duì)經(jīng)過(guò)思考權(quán)衡之后，決定采用深淺兩種不同的顏色主題，供用戶選擇。客戶對(duì)于兩者都很喜歡，于是深色的主題被保留，在夜間使用。整個(gè) UI設(shè)計(jì)了120屏，兩種配色各60屏。

△ 淺色背景的UI設(shè)計(jì)

△ 深色背景的UI設(shè)計(jì)

明亮的色彩可以帶來(lái)明顯的視覺(jué)層次，吸引用戶關(guān)注屏幕上最重要的交互元素。此外，用戶界面中的字體也重新進(jìn)行選擇，由于界面中所承載的信息量較大，內(nèi)容豐富，因此需要確保良好的可讀性。

所有的細(xì)節(jié)都經(jīng)過(guò)確認(rèn)之后，最終進(jìn)行了測(cè)試。這款應(yīng)用還適用于 iPad 和 Android 的系統(tǒng)。

文章作者：Tubik Studio
優(yōu)設(shè)譯者：@陳子木