前台設計的反思

2022-01-31 10:24:25 字數 1283 閱讀 7438

最近在做乙個支援多種外觀的**,主要使用不同的css定義改變外觀。

由於現在可以換膚的**並不稀奇,而且asp.net 2.0也內建了對主題的支援,因此從技術上實現並不困難。然而在實際專案進行中,出現了不少前台ui的問題。

這個專案是乙個改造專案,對已有的**新增功能,並修改ui樣式。新的樣式由其他的公司設計,我們拿到psd圖後由ui工程師轉換成html+css表示,然後程式設計人員將html,css倒入到專案中,新增**。

問題1:

專案開始不久,我們就發現很多設計出來的html,css並不好用。 由於asp.net控制項生成的**與ui工程師的html**不同,因此很多設計需要修改後才能使用,增加了很多的工作量。

解決辦法:

程式設計人員將**寫好後,ui工程師在根據設計加入樣式。但是這需要ui工程師多少學習一些控制控制項樣式的方法,並能夠使用vs進行編輯和除錯。

問題2:

由於要支援多種主題,因此我們拿到了2種設計,這2種設計頁面布局差不多,風格迥異,看起來應該比較好實現。 但是實際做的時候卻發現有很多細小的差別,甚至同乙個設計中也存在前後不一致的情況。經常在乙個設計中看起來一樣的地方在另乙個設計中卻不一樣。而且設計中只包含了**部分頁面的設計,大多數的頁面則沒有設計。

這個問題的起因主要是由於設計人員並不了解**的功能,因此頁面設計沒有邏輯性,看起來很好看可是其中沒有什麼規則可循。

解決辦法:

對設計進行分析,找出其中不合理的地方,並且根據**的功能設計出一套規則來指導設計。psd比較直觀對客戶的用處比較大,但是對開發人員來講只能提供乙個總體的印象。psd後面的設計規則更重要一些,根據這些規則可以構建新的頁面而不影響總體的協調性。如果設計本身沒有提供規則,則需要自己總結一些規則,用於指導後面的開發。

問題3:

由於我對css並不精通,因此全權交給專職人員負責。有一天我檢視css和**的時候發現,大多數的css類我都無法從名稱上推斷出用途。這些類名通常混雜著不通用的縮寫,以及顏色,大小,方向等資訊或者名稱與用途根本就對不上。另外明明在邏輯意義上相同的部分卻分別寫了兩個類。

解決辦法:

使用有邏輯意義的名稱命名css class。不要乙個頁面乙個頁面的建立html和css,應該先進行分析,提煉出規則,再用規則指導設計。

總結:做.net專案和ui設計的結合是一件很頭疼的事,如果可能最好由開發人員設計html和css,然後由ui工程師編寫css的定義。

psd->html+css->code => website 的方式存在很大的問題。 psd的設計人不了解**功能,ui工程師也不了解,最後設計和現實的差距就變得很大了。

在設計本身質量不高的情況下,分析和再設計很重要。

反思設計 從大師身上反思

從大師身上反思 本文節選自 未來產品設計 一書序言 don norman先生早期的論著所反映的思想已經影響並促進了我,我身邊重要的幾個設計朋友以及我的公司正在逐漸形成設計哲學觀及人生觀。在我的公司,我們常常在一起 全球已經出現或者正在為人類所感受的設計作品哪些是本能性的設計,哪些是行為層的設計,哪些...

OAUI前台設計(二)

今天看了菜鳥教材的頁面,他的頁面類似於oa辦公系統ui,突然有所想法。1.我以前糾結的是選單欄要做到無重新整理,這樣的話,只能使用iframe等技術,這要是不利於搜尋引擎搜尋的。2.今天看來菜鳥教材的ui,突發想法,在重新整理的狀況下,視覺上做到乙個無重新整理的效果,雖然會增加工作量,但是會優化搜尋...

設計模式學習反思

設計模式學習資料 1 1 策略模式 1.1 what?策略模式是行為模式,意味著是對物件間互動行為的抽象。其將對某一問題的多種演算法封裝到各自的類,統一以相同的介面對外提供服務。1.2 why?清晰 架構,解耦演算法使用與演算法實現,方便演算法的增刪及修改。1.3 how?策略模式實現方式 1 定義...