網(wǎng)頁設(shè)計中的彈窗與浮層的設(shè)計
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 19:57:41 作者:佚名
我要評論
在從傳統(tǒng)的Software逐漸轉(zhuǎn)換到Webware的大潮中,設(shè)計模式與技術(shù)實現(xiàn)雙重變革和推進下。我們提倡頁面中的任務(wù)對應(yīng)用戶群明確,任務(wù)少而精。回到我們傳統(tǒng)的后臺軟件系統(tǒng)中,對于面對系統(tǒng)與流程再造。我們順其自然得想到把在Web服務(wù)中的設(shè)計思想遷移到后臺軟件系統(tǒng)中。多數(shù)
在從傳統(tǒng)的Software逐漸轉(zhuǎn)換到Webware的大潮中,設(shè)計模式與技術(shù)實現(xiàn)雙重變革和推進下。我們提倡頁面中的任務(wù)對應(yīng)用戶群明確,任務(wù)少而精?;氐轿覀儌鹘y(tǒng)的后臺軟件系統(tǒng)中,對于面對系統(tǒng)與流程再造。我們順其自然得想到把在Web服務(wù)中的設(shè)計思想遷移到后臺軟件系統(tǒng)中。多數(shù)情況來說,這會使系統(tǒng)變得更加輕便,結(jié)構(gòu)清晰,對軟件的用戶群開始洞察和優(yōu)化。
但是,是不是有助于提升可用性的改進在軟件系統(tǒng)中都需要改進呢? 今天分享一個例子。
背景是:
1, 一個頁面中包含一個主要任務(wù)和若干分支任務(wù)及完成主要任務(wù)所需的頁面信息架構(gòu)。
2, 用戶角色繁多,信息量大,頁面區(qū)域有限,只能展示主要任務(wù)所需信息。
我們面臨其中這樣一個挑戰(zhàn):
1, 做出主要任務(wù)的決策時,若干條件下需要查看分支任務(wù)的詳細(xì)情況以支持決策。
2, 做出分支任務(wù)的決策時,若干條件下需要查看主要任務(wù)信息以支持決策。
在開始階段,我們很自然的對任務(wù)所需信息進行歸類和梳理,頁面更加結(jié)構(gòu)化。大量使用展示層腳本語言,希望讓頁面更加瘦小,讓操作更加流暢。從圖中可以看到,把之前的頁面跳轉(zhuǎn)改為當(dāng)前頁面彈出一個蒙板浮動層。此時,我們發(fā)現(xiàn)忽略了一個問題。頁面使用浮動層之后,主要任務(wù)和分支任務(wù)之間關(guān)系由并列變成了包含關(guān)系,分支任務(wù)又在系統(tǒng)其他環(huán)境中處于主要任務(wù)地位,任務(wù)之間并不存在包含關(guān)系。在長達3屏的頁面中,浮動層雖然可以做到之前并列關(guān)系結(jié)構(gòu)中的自由信息組合、信息對比和自由移動。但是信息量繁復(fù)的情況下,移動浮動層,拖拽滾動條,浮動層遮蓋部分信息等原因讓用戶在環(huán)境測試時皺緊了眉頭。因為之前主次任務(wù)之間并列結(jié)構(gòu)、自由打開和隱藏、不規(guī)則對比和拖動的習(xí)慣不能被延續(xù)了。此時,如果不考慮到系統(tǒng)結(jié)構(gòu)本身的問題,此處使用彈出層的使用可以讓用戶更加自由無束縛,也減小了業(yè)務(wù)擴展和張力所帶來系統(tǒng)調(diào)整成本,而時下常用的浮動層反而會限制使用過程。
衡量一個可以提升軟件系統(tǒng)可用性特性,它能否適合一套軟件系統(tǒng)。不只需要從可用性的角度來審視,還需要深入了解系統(tǒng)結(jié)構(gòu)、用戶習(xí)慣和技術(shù)成本等因素。如果是Web服務(wù)產(chǎn)品,需要更加周全地衡量。
相關(guān)文章

15 個為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章,我們將分享15個可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習(xí),希望對你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對單位,一般用于pc端網(wǎng)頁開發(fā),因為是絕對單位所以在移動端上的使用體驗并不是很好,rem它是描述相對于當(dāng)前根元素字體尺寸,是相對單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點,選擇適合的壓縮工具為將來做項目開發(fā)使用是一件很重要的事情?。≡谶@介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進程的,有瀏覽器主進程,網(wǎng)絡(luò)進程,渲染進程,插件進程等,在將html,css,javascript解析成一個頁面的時候,就需要多個進程的分工合作2023-05-01
- 本文為大家整理了常用的文件對應(yīng)的MIME類型,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語言、跨平臺進行文本轉(zhuǎn)換、處理的要求2021-11-27前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-12-02
這篇文章主要介紹了告別硬編碼讓你的前端表格自動計算,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-27



