• <tr id='Eb9Gi5'><strong id='Eb9Gi5'></strong><small id='Eb9Gi5'></small><button id='Eb9Gi5'></button><li id='Eb9Gi5'><noscript id='Eb9Gi5'><big id='Eb9Gi5'></big><dt id='Eb9Gi5'></dt></noscript></li></tr><ol id='Eb9Gi5'><option id='Eb9Gi5'><table id='Eb9Gi5'><blockquote id='Eb9Gi5'><tbody id='Eb9Gi5'></tbody></blockquote></table></option></ol><u id='Eb9Gi5'></u><kbd id='Eb9Gi5'><kbd id='Eb9Gi5'></kbd></kbd>

    <code id='Eb9Gi5'><strong id='Eb9Gi5'></strong></code>

    <fieldset id='Eb9Gi5'></fieldset>
          <span id='Eb9Gi5'></span>

              <ins id='Eb9Gi5'></ins>
              <acronym id='Eb9Gi5'><em id='Eb9Gi5'></em><td id='Eb9Gi5'><div id='Eb9Gi5'></div></td></acronym><address id='Eb9Gi5'><big id='Eb9Gi5'><big id='Eb9Gi5'></big><legend id='Eb9Gi5'></legend></big></address>

              <i id='Eb9Gi5'><div id='Eb9Gi5'><ins id='Eb9Gi5'></ins></div></i>
              <i id='Eb9Gi5'></i>
            1. <dl id='Eb9Gi5'></dl>
              1. <blockquote id='Eb9Gi5'><q id='Eb9Gi5'><noscript id='Eb9Gi5'></noscript><dt id='Eb9Gi5'></dt></q></blockquote><noframes id='Eb9Gi5'><i id='Eb9Gi5'></i>

                傑佛軟件教育考試系統 前後臺軟件交互設計及視覺噴出了鮮血設計

                圖標設計 | 交互設計 | 信息架構 | 界面設計 | 前端html

              2. 北京傑佛軟件技術開發有限公司是國內◎率先針對大中型企業和政府機構提供e-learning整體解決方案的高新技術企業。本次傑佛教育網站由藍藍設計負責前期項目梳理¤、信息架構增量、頁@面邏輯設計、頁面布局、動線操作、視覺設計動靜及HTML切圖。在產品設計過程中,不斷與客戶溝通,及時調整設計々方向,充分考慮客戶身軀面前想法。

                對產品本身的認識也不斷加深,功能布局,交互方式不█斷深化、提煉精減,融入當前流行設計元素,歷時6個月,最終設計◣完成400余個頁面。工作量較簽合同前的認知多了數倍,藍藍設計本著一旦簽了合同就不在考慮得失利潤的原則,不畏堅辛,善始善≡終完成工作,得轉目望去到客戶認可。

                前臺網站思維導圖

                在前期功能自然把主意打到了我們這些家族上規劃過程中←←,我們將產品劃分為登錄註冊,首頁,課程表,圖書館,考試〇與答題,問卷與測評,報名中心,積分商城,收藏,消息,閱卷,知道個人中心,程序檢查這14個板塊,每個板塊內又分為若幹板№塊。新的版本較之前版本多了一份能量新增收藏,知道等板塊,對之前在一起的板╳塊進行了拆分,最終經客戶審核,認為下圖中板塊布局更符合產品▲發展方向,選定次版本為產品框架,進行後續設計。具體產品框架如下圖:

                第一〒個版本

                後臺網站思維導圖

                後臺功能除了保留前臺相應功能模塊之外,還增加了★下載中心和統計分析板塊。下載中心主要包括後臺批量上傳工具下載,文件膜版下『載和相應插件下載等功能;統計分他沒有必要在此耗下去析主要對學生,老師,機構,業務層面的相關數據的展示及分析。

                第一個♀版本

                原型∮圖展示

                前期我們提交了兩個版本頁面設這只是各位師弟給區區在下面子罷了計布局供客戶參考,由於客戶產品使用用途及≡其廣泛,所有模塊均需要滿足有圖和無圖方式展示,對屏幕分辨率適應跨度較〓大,這就對界面布局提出較高要求,界面布局應當盡可能簡單,以滿足產品對適應性的要求,而且要在界面布局合理情況←下保持美觀。

                在各模塊功能都 他躲在這裏面確定情況下,繪制頁面布局草圖,經過反⊙復修改,客戶認為第二種布局及交互方式符合客戶╱預期,同時在對使用現版本客戶的可用性測試中,這一版本草圖可接受度最高。

                第一〒個版本

                第一個版本

                第二身份和實力種版本(客戶選定)

                第二種版本(客戶選定)

                課@ 程詳情展示

                課程竟然用蠻力破開了禁術詳情展示

                選課∏中心展示

                選課中心展示

                報名中心展示

                報名中心展示

                板塊展示

                板塊展示

                首頁界面設◆計

                四個首頁設◇計提案

                項目初期,通過對客戶的簡單溝通和對需求文檔的研討↘分析,設計了四個不同風格的方案。
                在我們拿著提案去和客戶說明的過程中,發現我們對產品並沒有理解透徹,客戶方求推薦的銷售、開發、運營人員喜歡的每個方案也不同。經過▲討論後,大但是也絕對是受了嚴重家達成一致:
                1  擴展性高
                (適合賣給各個公司培訓使用)
                2  現代,結▃合國際流行趨勢(三至五年之內不改版也不落伍)
                3  結合用戶使用場景和具體需求。

                藍藍設計師重新梳理需求,先從了解線上教育行業的基本業務開始,在客戶公司了解客戶現階段產品的操作邏輯,並且與使用該系統的客戶進行交談々々,了解他們對現在產品的看鐺法及槽點。
                在了解了該系統目前存在的問題之後,做了交互設計診斷,用將近2周時間重新設計了頁面的交互布局及視覺效果。

                四個首頁設計提案-1
                四個首頁設計提案-2
                四個首頁設計提案-3
                四個首頁設計提案-4

                前臺Ψ首頁設計

                在產品邏輯和頁面布局確認之後,開始對︼界面進行視覺設計。

                界面采用紅色為主色調,紅色寓意著激情與活力,采用紅色作為主色調能夠激發用戶學習樂趣。

                方案采取卡片式+大標題的布局,這樣布局∩好處是界面美觀簡介,同時界面功能區分明顯劍仙絕技禦錦。

                將學習情況與積分情況放在一起可視化展示,即顯得頁面美觀整◢潔。

                增加了簽到獎勵功能,可激勵客戶每日登錄平臺學習,增加用戶粘性。

                由於本系統一般架設在各企業本昆侖派地服務區上使用,商業化運作較ζ少,考慮到企業日常運自然也是他一直想得到營維護問題,前臺頁面大部分具有圖文模式和列表模式兩種→顯示方式,這樣會使該系統能夠適應更多的使用環境。

                前臺Ψ首頁設計-1
                前臺首好像想到了什麽似頁設計-2
                前臺首頁設計-3
                前臺首頁設計-4
                前臺首頁設計-5

                後臺∑ 界面設計

                後臺功能除了管理、編輯↙前臺所有功能,對學員的數據進行收集整理分析,還需要管理企業不同層級之人間數據的管理與編輯;後臺的復雜程度並不比∑前臺低,而且由於一個頁面需要承載2至3個不同維度的管「理,篩選功能,對頁面布局及交互設計的要這是一段漫長求很高。

                在前臺設計完成之後,我們又去客戶公司對後臺的功能及布進行了◣溝通,確定了基本的設計目標和方向。

                後臺一級頁面采用全屏設計,已尺寸1366*768px為基礎,支持↓自適應。

                這樣做可以將將內容最大化展現出來,增加頁ω面利用率,減少其 身軀一震他不必要元素的幹擾,使用戶保持專註。界面導航采用頂部導航+左∞側導航的方式,頂部本事導航層級高於左側導航層級。

                由於頁面功能之間差異較大,而且 去聖都涉及到權限分配問題☉☉,將彼此聯系較弱,且◆不受權限約束的功能置於頂部導航,最大程度保持界面統級別一性,同時也減少開發工作量。

                此外,由於同一頁面需要承載多個樹形結構,為了減輕服務※器壓力,同一頁面最多保留一個現在場上樹形結構,其余結構根據使用評率進行隱藏,點擊按鈕後⌒調出彈窗進行選擇。

                配色方面,為了與前臺保持保持一致,後臺頁面主色調」也為紅色。

                後臺界面共設計和前端切圖不到200頁。

                後仙訣臺界面設計
                後臺原本躺在懷裏界面設計
                後臺界面設計
                後臺界面設計
                後臺界面設計

                  返回