軟體工程--界面UI 的原型設計

-Advertisement-

經過今天的討論，我們組初步給出了設計方案。安裝了一晚上的 mockupBuilder 終於繪製了幾份界面的原型圖，這裡需要吐槽下 mockupBuilder，這個軟體很好用，不過網頁版和單機版提供的功能不太一樣，感覺單機版更全一些，但是缺點是無法保存。。。首頁：(初步設想是類似網易雲 ...

經過今天的討論，我們組初步給出了設計方案。

安裝了一晚上的 mockupBuilder 終於繪製了幾份界面的原型圖，這裡需要吐槽下 mockupBuilder，這個軟體很好用，不過網頁版和單機版提供的功能不太一樣，感覺單機版更全一些，但是缺點是無法保存。。。

首頁：(初步設想是類似網易雲課堂的首頁風格)

移動滑鼠到相應標簽上，會出現相應的次級標題，點擊次級標題可以進入學習界面(ps: 學習和登陸註冊頁面由同組另一個同學負責，這裡就不寫了)

登陸之後，這裡主要的變化在於右上角的選項發生了變化，點擊主頁可以進入用戶個人頁面，退出可以退回到首頁

個人頁面，記錄了用戶的觀看記錄和相應收藏的課程，點擊課程名，可以進入學習界面

參考資料：

1. 網易雲課堂

2. 【軟劍攻城隊】用戶界面設計原型文檔發佈！

3. mockupBuilder 官網

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

iOS開發的22個奇譎巧技

結合自身的實踐開發經驗總結出了22個iOS開發的小技巧，以非常歡樂的語調輕鬆解決開發過程中所遇到的各種苦逼難題，光讀著便已忍俊不禁。 1. TableView不顯示沒內容的Cell怎麼辦？類似於圖1，我不想讓下麵的那些空顯示。很簡單，添加“self.tableView.tableFooterVie ...
android OTA升級包製作

0.簽名 java -Xmx2048m -jar out/host/linux-x86/framework/signapk.jar -w build/target/product/security/testkey.x509.pem build/target/product/security/test ...
仿百度換膚

效果：(換膚出來一個div，選擇你想要的圖片，作為網頁背景，保存) 要點：cookie保存狀態 html代碼: css代碼: js代碼：效果圖： ...
photoshop學習目錄

前面的話前端工程師最基本的工作是切圖。photoshop用的6不6，對於工作效率有很大的影響。小火柴將前端工程師需要掌握的photoshop的知識和技能進行了梳理和歸納，總結成以下目錄目錄前端工程師技能之photoshop巧用系列第一篇——準備篇前端工程師技能之photoshop巧用系列第二 ...
前端工程師技能之photoshop巧用系列擴展篇——自動切圖

× 目錄 [1]初始設置 [2]自動切圖前面的話隨著photoshop版本的不斷升級，軟體本身增加了很多新的功能，也為切圖工作增加了很多的便利。photoshop最新的版本新增了自動切圖功能，本文將詳細介紹photoshop的這個新功能初始設置當然首先還是要進行一些首選項設置【1】在編輯 ...
checkbox全選-取消-再全選沒有顯示問題

源碼： <input type="checkbox" id="cleckAll" />全選 <div class="list"> <input type="checkbox" />覆選一 <input type="checkbox" />覆選二 <input type="checkbox" />覆選 ...
你不知道的this—JS非同步編程中的this

Javascript小學生都知道了javascript中的函數調用時會隱性的接收兩個附加的參數：this和arguments。參數this在javascript編程中占據中非常重要的地位，它的值取決於調用的模式。總的來說Javascript中函數一共有4中調用模式：方法調用模式、普通函數調用模式、 ...
Vue.js——vue-resource全攻略

概述上一篇我們介紹瞭如何將$.ajax和Vue.js結合在一起使用，並實現了一個簡單的跨域CURD示例。Vue.js是數據驅動的，這使得我們並不需要直接操作DOM，如果我們不需要使用jQuery的DOM選擇器，就沒有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通過... ...