體育健康類服務(wù)平臺(tái)交互系統(tǒng)構(gòu)建及視覺設(shè)計(jì)

孫立剛 沈陽體育學(xué)院

一、體育健康類服務(wù)平臺(tái)交互系統(tǒng)的構(gòu)建

體育類服務(wù)平臺(tái)大多以手機(jī)App 的形式呈現(xiàn)。App 是英文Application 的簡(jiǎn)稱，它主要是通過移動(dòng)設(shè)備作為載體開發(fā)出來的第三方軟件。它伴隨著手機(jī)、電腦的普及而被廣泛使用。App 的使用率在近幾年是成倍增長(zhǎng)的，它的興盛意味著人類邁著走向移動(dòng)終端化的步伐。一開始，App 只是第三方應(yīng)用的一種合作形式，但是隨著科技的不斷進(jìn)步，為了滿足逐漸增多的手機(jī)用戶的不同需求，同時(shí)隨著互聯(lián)網(wǎng)的不斷開放化，App 逐漸被更多的互聯(lián)網(wǎng)商業(yè)公司看作是一種盈利模式。在手機(jī)用戶不斷增多的背景下，手機(jī)App 的開發(fā)與應(yīng)用便成了手機(jī)互聯(lián)網(wǎng)盈利模式新的突破點(diǎn)與增長(zhǎng)點(diǎn)。

體育健康類手機(jī)App 有著巨大的用戶下載量，手機(jī)應(yīng)用商店中各種體育App 也種類繁多。除了大量開發(fā)的各類體育游戲娛樂App 外，體育新聞瀏覽、視頻播放類的手機(jī)App，包括新浪體育、騰訊體育、虎撲等各大門戶網(wǎng)站所開發(fā)的軟件，這類App 同時(shí)還帶有時(shí)事新聞信息推送的功能；大眾體育健身類手機(jī)App，包括咕咚、樂動(dòng)力、悅跑圈、Keep 等用戶量多的軟件，能夠準(zhǔn)確測(cè)算出用戶鍛煉的實(shí)時(shí)數(shù)據(jù)；體育場(chǎng)館與教練預(yù)約類的手機(jī)App 包括趣運(yùn)動(dòng)、中羽在線、愛羽客等將運(yùn)動(dòng)人群分類的軟件，這類App 同時(shí)還帶有通過體育交友、提供論壇交流平臺(tái)的功能。另外，不同體育項(xiàng)目門類下的各種體育App 也是琳瑯滿目，用戶可以通過自身對(duì)不同體育項(xiàng)目的喜好與需求，下載適合自己的App。

交互系統(tǒng)的構(gòu)建，實(shí)際上就是對(duì)交互系統(tǒng)中的各個(gè)元素進(jìn)行分析研究，并且按照一定的方式將其轉(zhuǎn)化成為具體的可使用的產(chǎn)品，在設(shè)計(jì)過程中需要將系統(tǒng)中的組成部分有機(jī)結(jié)合在一起，形成一個(gè)完整的整體。

（1）任務(wù)建模。在對(duì)用戶和數(shù)據(jù)有一定的了解之后，需要對(duì)可視化系統(tǒng)進(jìn)行設(shè)計(jì)開發(fā)，確定其基本的功能?？梢暬到y(tǒng)大致分為兩個(gè)部分：一是可視化視圖，是用戶根據(jù)數(shù)據(jù)的基本屬性所展示出來的對(duì)應(yīng)的圖像式的視覺呈現(xiàn)方式；二是用戶可以操控的，能夠?qū)梢暬晥D進(jìn)行改變的工具組件。

（2）基本交互任務(wù)。一方面，用戶在進(jìn)行數(shù)據(jù)可視化的過程中，雖然大部分?jǐn)?shù)據(jù)處理都是由計(jì)算機(jī)來完成，但是用戶是主要的決策者，在與數(shù)據(jù)可視化系統(tǒng)交互過程中，會(huì)對(duì)數(shù)據(jù)呈現(xiàn)的結(jié)果進(jìn)行瀏覽、分析、推理、探索等工作；另一方面，為了改變可視化系統(tǒng)中的視覺呈現(xiàn)方式以達(dá)到初步目標(biāo)，會(huì)進(jìn)行一定的交互操作，對(duì)可視化視圖進(jìn)行改變，以更好地進(jìn)行可視化分析。以上兩種不同的行為方式，根據(jù)任務(wù)目標(biāo)的不同分為高層級(jí)的交互目標(biāo)和低層級(jí)的交互任務(wù)。

第一，選擇。在可視化系統(tǒng)中，會(huì)有眾多的視圖或者篩選條件供用戶去選擇。例如，在使用 Windows系統(tǒng)的時(shí)候，需要通過“選擇”的方式來確認(rèn)是否對(duì)被選擇的文件進(jìn)行諸如刪除或者復(fù)制的操作。在可視化系統(tǒng)中同樣需要“選擇”這種最基本的操作，從而完成接下來的其他行為。

第二，導(dǎo)航。對(duì)于數(shù)據(jù)可視化系統(tǒng)的使用，用戶通常都是通過對(duì)屏幕的觀察來了解畫面中的內(nèi)容，但是由于屏幕大小的局限性，可視化系統(tǒng)的全部?jī)?nèi)容并不可能同時(shí)顯示在屏幕中，即使能夠全部顯示出來，也會(huì)因?yàn)槟承?shù)據(jù)點(diǎn)相對(duì)于整體過于渺小而無法在畫面中顯示清楚，因此就需要“導(dǎo)航”的方法來控制畫面的變化。

第三，重構(gòu)。對(duì)可視化系統(tǒng)中的數(shù)據(jù)進(jìn)行重構(gòu)，其主要目的是幫助用戶從不同的角度來觀察數(shù)據(jù)，在圖表類型的可視化系統(tǒng)中最為常見。例如，有一個(gè)將車的各項(xiàng)屬性包括在內(nèi)的EXCEL 列表中，用戶為了了解這些車在某項(xiàng)屬性上的排列次序，會(huì)選中該數(shù)據(jù)并且排序，以此了解不同車之間該屬性的關(guān)系；同樣地，當(dāng)需要了解另外一個(gè)屬性的不同車之間的關(guān)系時(shí)，選擇另外一個(gè)屬性，系統(tǒng)將會(huì)根據(jù)用戶的需要重新排列順序，以幫助用戶更高效地進(jìn)行對(duì)比分析。

第四，編碼。此處的編碼主要討論的是視覺編碼，也就是視覺呈現(xiàn)中圖形的使用。視覺呈現(xiàn)是可視化系統(tǒng)中的主要要素，用戶借助可視化系統(tǒng)的基本功能，對(duì)畫面中的圖形進(jìn)行改變，如改變顏色、大小或者形狀等，通過不同的方式來改變視覺元素，可以幫助用戶從不同的角度認(rèn)知數(shù)據(jù)。

第五，過濾。根據(jù)用戶所選定的條件或者關(guān)鍵詞顯示相關(guān)的數(shù)據(jù)，這是日常生活中最常使用到的信息獲取方式。當(dāng)我們需要了解或者查詢相關(guān)資料時(shí)，搜索引擎通常是第一選擇。通過輸入關(guān)鍵字，搜索引擎會(huì)將互聯(lián)網(wǎng)上所有的信息根據(jù)關(guān)鍵字進(jìn)行篩選，并將與關(guān)鍵字相關(guān)的網(wǎng)站或者內(nèi)容，通過文字列表的方式顯示在瀏覽器中。這是最常見的信息過濾的案例。

第六，概況與細(xì)節(jié)。概況與細(xì)節(jié)的同時(shí)顯示實(shí)際上是對(duì)“導(dǎo)航”這一交互方法的拓展?！皩?dǎo)航”需要用戶通過一定的交互操作來完成對(duì)可視化系統(tǒng)中不同畫面之間的切換，而該概況與細(xì)節(jié)同時(shí)顯示，則能讓用戶觀察到可視化系統(tǒng)中數(shù)據(jù)的詳細(xì)內(nèi)容的同時(shí)，也能了解到該細(xì)節(jié)在全局中所處的位置。一方面能針對(duì)所關(guān)注的內(nèi)容進(jìn)行詳細(xì)的研究，另一方面可以幫助用戶對(duì)整個(gè)系統(tǒng)有一個(gè)大體的了解。

第七，關(guān)聯(lián)。關(guān)聯(lián)是將所需要關(guān)注的數(shù)據(jù)在畫面中高亮顯示，從而可以查看不同數(shù)據(jù)時(shí)間的關(guān)系和區(qū)別，或者讓同一個(gè)數(shù)據(jù)在不同的視圖中同時(shí)顯示，從而可以觀察數(shù)據(jù)的不同屬性。

二、體育健康類服務(wù)平臺(tái)的視覺設(shè)計(jì)

（一）體育健康類服務(wù)平臺(tái)的界面設(shè)計(jì)

用戶界面是用戶與可視化系統(tǒng)交流的接口，也是交互系統(tǒng)最終的呈現(xiàn)方式。借助可視化系統(tǒng)中的界面，用戶可以獲取信息，了解可視化視圖的變化，同時(shí)也可以通過一定的交互操作，來向可視化系統(tǒng)下達(dá)指令，改變可視化視圖所顯示的內(nèi)容，以幫助進(jìn)行數(shù)據(jù)分析工作。因?yàn)橛脩艚缑娴拇嬖?，使得用戶與可視化系統(tǒng)的交流得以實(shí)現(xiàn)。

在軟件深化開發(fā)的過程中，雖然用戶界面的設(shè)計(jì)開始受到重視，但仍然缺乏一套價(jià)值高的設(shè)計(jì)策略作為支撐。事實(shí)上，軟件的用戶界面設(shè)計(jì)，就如同工業(yè)產(chǎn)品中的外觀設(shè)計(jì)一樣，是吸引消費(fèi)者購買的關(guān)鍵因素。一個(gè)友好且美觀的界面能使人產(chǎn)生愉快的視覺感受，增加人與機(jī)器的親密度，形成商家的銷售優(yōu)勢(shì)。用戶界面的設(shè)計(jì)不僅僅是畫畫的藝術(shù)，更需要考慮到用戶的使用需求、使用環(huán)境以及使用方式，將最終用戶作為設(shè)計(jì)的中心，這是充滿科學(xué)精神的藝術(shù)設(shè)計(jì)。判斷一個(gè)界面是否優(yōu)秀的標(biāo)準(zhǔn)，不是取決于項(xiàng)目開發(fā)領(lǐng)導(dǎo)或團(tuán)隊(duì)成員的觀點(diǎn)，而應(yīng)以最終用戶的體驗(yàn)為準(zhǔn)則。因此，用戶界面的設(shè)計(jì)必須與用戶研究緊密結(jié)合，這是一個(gè)不斷設(shè)計(jì)出滿足最終用戶視覺體驗(yàn)需求的過程。

設(shè)計(jì)用戶界面是對(duì)用戶界面優(yōu)化的重要途徑之一，它包括全面考慮軟件或系統(tǒng)的人機(jī)交互、操作流程以及視覺效果。高品質(zhì)的UI 設(shè)計(jì)不僅能塑造軟件的特性和價(jià)值，也可以使用戶操作更輕松方便，從而提高軟件的實(shí)用性和易操作性。對(duì)用戶來說，出色的界面設(shè)計(jì)能提供愉快的視覺體驗(yàn)，縮短人與設(shè)備的距離，并為商家創(chuàng)造賣點(diǎn)。界面設(shè)計(jì)并不只是關(guān)于藝術(shù)繪畫，它還需要設(shè)計(jì)師對(duì)用戶需求、應(yīng)用環(huán)境及使用方式進(jìn)行深入考慮，最后形成同時(shí)注重科學(xué)和藝術(shù)的設(shè)計(jì)策略。界面設(shè)計(jì)涉及眾多的學(xué)科領(lǐng)域，界面中的認(rèn)知心理學(xué)、人機(jī)工程學(xué)、藝術(shù)設(shè)計(jì)、色彩設(shè)計(jì)、圖文設(shè)計(jì)等都需要我們進(jìn)行深入的研究。在系統(tǒng)和軟件的漫長(zhǎng)進(jìn)化過程中，界面設(shè)計(jì)一直沒有獲得足夠的重視。界面設(shè)計(jì)并不僅僅是眾人眼中的“美工”，而是類似于產(chǎn)品設(shè)計(jì)中的外觀設(shè)計(jì)，是提高產(chǎn)品銷售亮點(diǎn)的關(guān)鍵保證。美觀的界面設(shè)計(jì)可以為用戶帶來良好的視覺體驗(yàn)，使人與系統(tǒng)的距離變得更近，同時(shí)也可以為商家創(chuàng)造營(yíng)收。

界面視覺設(shè)計(jì)是界面設(shè)計(jì)與視覺設(shè)計(jì)的融合，在視覺設(shè)計(jì)中，我們通過文字、色彩、符號(hào)等進(jìn)行視覺輸出傳遞信息，以強(qiáng)化體育健康的呈現(xiàn)。界面作為人與系統(tǒng)進(jìn)行信息傳遞與交換的媒介，對(duì)提升視覺設(shè)計(jì)的重要性顯得尤為重要。隨著市場(chǎng)經(jīng)濟(jì)的競(jìng)爭(zhēng)不斷加大，產(chǎn)品的功能性逐漸滿足了人們的需求，我們需要對(duì)產(chǎn)品的視覺性進(jìn)行提升與差異化設(shè)計(jì)，從而提升產(chǎn)品的核心競(jìng)爭(zhēng)力。在界面視覺設(shè)計(jì)中，我們通過對(duì)界面的基本元素進(jìn)行細(xì)致分析，與影響視覺的因素進(jìn)行結(jié)合，運(yùn)用視覺設(shè)計(jì)的基本要素，為體育健康服務(wù)類界面營(yíng)造出品牌性、獨(dú)特性、統(tǒng)一性的視覺體驗(yàn)。在進(jìn)行界面視覺設(shè)計(jì)的同時(shí)，我們需要考慮產(chǎn)品的交互性。界面是用戶與系統(tǒng)交互的窗口，在設(shè)計(jì)之初，我們應(yīng)注重用戶交互體驗(yàn)，并對(duì)需要設(shè)計(jì)的產(chǎn)品進(jìn)行交互規(guī)范。通過交互規(guī)范進(jìn)行視覺設(shè)計(jì)，從而保證用戶使用的邏輯性準(zhǔn)確，達(dá)到良好的用戶體驗(yàn)。影響界面的三個(gè)因素，即研究界面視覺（文字、圖形、色彩等基礎(chǔ)要素）、研究人與界面之間使用的關(guān)系、研究用戶。在設(shè)計(jì)中，這三個(gè)因素缺一不可。我們要研究基于用戶體驗(yàn)的界面視覺設(shè)計(jì)，就需要從多方面進(jìn)行考慮和研究，將視覺設(shè)計(jì)原理應(yīng)用于界面設(shè)計(jì)中，更好地提升用戶體驗(yàn)。

界面視覺設(shè)計(jì)原則包括以下幾個(gè)。首先，操作的一致性，在用戶使用過程中，對(duì)于界面的操作已經(jīng)形成思維定式，不能改變用戶長(zhǎng)久以來的使用習(xí)慣，是提升用戶使用體驗(yàn)的必然要求。其次，對(duì)于界面的一致性，可體現(xiàn)在視覺元素中色彩、文字等視覺元素的運(yùn)用上，可以保持界面視覺效果的一致性。層級(jí)性即為具有清晰明確的界面關(guān)系，對(duì)于體育健康類App，在設(shè)計(jì)之初，我們需要對(duì)App 結(jié)構(gòu)進(jìn)行構(gòu)建，充分站在用戶角度進(jìn)行思考與設(shè)計(jì)，減少思維邏輯性錯(cuò)誤的出現(xiàn)，讓用戶明確所處的界面位置。個(gè)性化是用戶在使用過程中，對(duì)于產(chǎn)品外觀與行為的印象。在設(shè)計(jì)之初目標(biāo)用戶進(jìn)行細(xì)致調(diào)研，明確用戶需求、行為、預(yù)期，根據(jù)不同的目標(biāo)用戶進(jìn)行產(chǎn)品的個(gè)性化定位。

（二）體育健康類服務(wù)平臺(tái)的色彩設(shè)計(jì)

在App 界面設(shè)計(jì)中，色彩的運(yùn)用十分關(guān)鍵。用戶的視覺感官對(duì)色彩的反應(yīng)最為迅速，然后是形狀，最后才是界面的細(xì)微之處。杰出的界面色彩設(shè)計(jì)以及恰當(dāng)?shù)纳式M合，能夠增強(qiáng)產(chǎn)品的易用度和審美度，提高用戶使用和點(diǎn)擊的頻率，從而增加產(chǎn)品的價(jià)值效用。因此，對(duì)色彩在App 界面設(shè)計(jì)中的運(yùn)用策略進(jìn)行研究至關(guān)重要。

選擇的顏色應(yīng)該匹配App 的特性，如商務(wù)、金融、智力游戲和閱讀類的產(chǎn)品需要利用各式各樣的顏色來展示。例如，體育類的App 用清純的色彩營(yíng)造出快速、愉快的界面，能吸引用戶；反之，閱讀類的App 應(yīng)避免使用過度醒目的顏色，否則可能使用戶產(chǎn)生視覺疲勞。同時(shí)，色彩的風(fēng)格選擇也需要經(jīng)過市場(chǎng)調(diào)研，如活躍、亮麗、優(yōu)雅、科技、穩(wěn)健、安全等，需要充分理解客戶對(duì)產(chǎn)品的期望，以使現(xiàn)象和實(shí)際內(nèi)容保持一致。

體育健康類服務(wù)平臺(tái)也需要精確地選擇色彩，以匹配目標(biāo)用戶群的各種特性，如用戶的性別、年齡和生活環(huán)境等因素，這些都會(huì)對(duì)他們對(duì)色彩的理解和認(rèn)知產(chǎn)生影響，他們需要的App 界面設(shè)計(jì)也會(huì)有極大的差異。因此，我們必須要深入研究用戶，盡可能地讓大多數(shù)用戶在視覺上感到舒適。我們可以使用智能技術(shù)，讓用戶選擇自己喜歡的色彩組合，逐漸發(fā)展成個(gè)性化的定制模式，滿足所有用戶的需求。

在傳統(tǒng)色譜中，有著相同色系、近似色、反色及補(bǔ)色四大主流類別。在頁面設(shè)計(jì)中，很少只用一種顏色，精巧的色彩組合能強(qiáng)化頁面的視覺吸引力，給設(shè)計(jì)帶來高光。因此，在進(jìn)行App 頁面的視覺色彩設(shè)計(jì)時(shí)，應(yīng)堅(jiān)持相同色系和近似色的搭配原則，以確保頁面元素設(shè)計(jì)的協(xié)調(diào)性和一致性，進(jìn)而提升設(shè)計(jì)的融合度和美觀性；也可以以補(bǔ)色為搭配原則，在背景色、文字、按鈕、需要突出的元素等色彩配搭中，讓頁面的對(duì)比度更加清晰，視覺效果更豐富，更能抓住用戶的眼球。如果視覺沖擊太強(qiáng)，可能使用戶產(chǎn)生視覺疲勞，在有需要時(shí)可以降低色彩的亮度或飽和度，使視覺感知更為舒適。頁面的主色調(diào)、輔色、點(diǎn)綴色的搭配應(yīng)有節(jié)奏感，遵循6 ∶3 ∶1 的比例。除了使用主、輔、點(diǎn)綴色的對(duì)比和協(xié)調(diào)，使App 頁面呈現(xiàn)出完全一致的風(fēng)格之外，還可以通過順序重復(fù)、逐漸漸消、鮮明對(duì)比等色彩設(shè)計(jì)方式，來突出、強(qiáng)調(diào)功能的主次和內(nèi)容，提升產(chǎn)品的易用性，增強(qiáng)用戶體驗(yàn)。

三、結(jié)論

體育類服務(wù)平臺(tái)的發(fā)展應(yīng)注重對(duì)大數(shù)據(jù)的挖掘，并引入新技術(shù)。隨著科技、互聯(lián)網(wǎng)及體育產(chǎn)業(yè)的發(fā)展，體育類服務(wù)平臺(tái)將會(huì)引發(fā)體育各門類載體的革命，成為一股新興的重要力量，加快體育自媒體時(shí)代的到來。我們必須持續(xù)深化有關(guān)色彩基礎(chǔ)知識(shí)和界面應(yīng)用的學(xué)習(xí)，深思App 產(chǎn)品的特性、目標(biāo)用戶群體和功能，選擇和配色要適當(dāng)，利用色彩的獨(dú)特優(yōu)勢(shì)進(jìn)行設(shè)計(jì)，從而打造具備更優(yōu)的視覺體驗(yàn)的產(chǎn)品。數(shù)據(jù)可視化系統(tǒng)和其他互聯(lián)網(wǎng)產(chǎn)品一樣，在使用的過程中需要用戶與產(chǎn)品進(jìn)行一定的交互才能完成既定的交互任務(wù)，而交互過程中的體驗(yàn)會(huì)大大影響用戶進(jìn)行數(shù)據(jù)分析的效率，因此需要從交互設(shè)計(jì)的層面對(duì)數(shù)據(jù)可視化進(jìn)行研究，從而進(jìn)一步提高數(shù)據(jù)可視化系統(tǒng)分析數(shù)據(jù)的效率。本文的研究是基于目前數(shù)據(jù)可視化與交互設(shè)計(jì)的相關(guān)文獻(xiàn)進(jìn)行的，從App 類服務(wù)平臺(tái)交互系統(tǒng)構(gòu)建及視覺設(shè)計(jì)進(jìn)行的研究分析，得出了交互系統(tǒng)的構(gòu)建方法。希望本文能為以后關(guān)于App 類服務(wù)平臺(tái)交互系統(tǒng)構(gòu)建及視覺設(shè)計(jì)的研究提供一定的幫助，讓數(shù)據(jù)可視化的相關(guān)研究更有深度。