www.Alisoft.com，最新版的首頁與4月2日終于上線了。

雖然是一個過渡時期的版本，可是跟以往的版本已經有了很大的提升，從一個簡單粗糙的頁面過渡成一個漸漸符合規(guī)范和可擴展性頁面。

這個版本需要滿足各方面的需求，交互設計師在這里做了很多的橋梁工作，和以往的項目一樣：
前期的用戶調研與DBA的數據分析很早就做了一些，與PO同學探討商業(yè)需求與戰(zhàn)略目標、與PD共同分析需求并對其項目分解，展開交互設計后，后期的視覺督導和前端工作的結合都是UED的重要組成部分、前端開發(fā)工程師與QA的bugfix工作和頁面上線是細節(jié)的工作。

不同的是這次項目由UED部門去主導，也是用戶體驗地位的一項重要提升，在公司商業(yè)目標逐漸清晰的時候UED部門的同學開始逐漸發(fā)力。

那么我想從這次改版的頁面中提出幾個關鍵點進行分析。

(一) 商業(yè)需求：

一個項目的發(fā)布都需要有明確的項目需求，思路清晰了就好進行系統(tǒng)設計。一套項目流程走下來，從kickoff到高保真DEMO評審，UC明確后基本上就不允許有大的改動了。

header改版中的商業(yè)需求：

在第一版的時候我們在logo的旁邊加上了“測試版”的字樣，是因為當前版本是一個滿足商業(yè)需求的版本，幾乎沒有規(guī)范可言。一切都是為了將網站做成一個符合我們目前業(yè)務的網站。

作為交互設計師，一定要明白目前的需求點在哪里，雖然我們一直在致力于各種關系的平衡，但是適合時宜的結合當前的情況去設計無疑是最好的選擇。羅馬不是一天可以建成的，一定是一項一項的展開工作，昨天的漏洞今天就需要去彌補，用一個開發(fā)工程師的話來說：“我每天的工作都是在踩各種各樣的狗屎?！迸龅搅艘驗閭}促上線而遺留的問題。

四種不同應用狀態(tài)下的header

1. 第一個是首頁，它包含了所有的業(yè)務和搜索功能；
2. 第二個是擁有3級分類的2級導航，剛性的功能頁面；
3. 第三個簡單的2級分類導航，它在乎的是子頁面所包含的內容；
4. Detail頁面，拋開了羅嗦的子分類，可是右上角的文字和鏈接過于干擾，在后續(xù)的版本中就會改進。
      

這個是目前的navigation bar，也許大家奇怪，為什么右邊的自主軟件變成這樣了，答案只有一個，商業(yè)目的和戰(zhàn)略需要所致。

阿里旺旺的地位被逐漸提高到至高的角度，甚至整個alisoft mall平臺都會依附阿里旺旺的品牌進行擴展，這也是一般用戶對旺旺的認知度比阿里軟件還要高的原因之一。

來看看更早期的navigation bar吧。
2007年公司剛成立時，也許今天很難想象當時朦朧的雛形和800分辨率的網站尺寸，這在當時確是主流，沒有幾個大型網站將頁面換成1024px，當時的網站連內容都還不具備，所以連最基礎的login也不包含了。

(二) 交互設計：

其實交互設計本身就涵蓋在整個網站的設計工作中，在此之前我們做過一些預研的工作，比如頁面底部toolbar的交互實現和商業(yè)結合；場景化的分類和根據any user精準化營銷體系都是創(chuàng)新點。目前導航的實現更是進行了特殊化的處理。

完善交互規(guī)則：

一個基礎的交互設計有助于指導開發(fā)和設計。在網站前期制作的時候就應該有個基礎的交互規(guī)則，做一些認知的統(tǒng)一，其實也是一項管理工作。隨著網站日益的完善，交互就可以和網站互相彌補不足，在實際應用中互相指引。

logo在網頁中的應用：

我們看到有創(chuàng)意的網站logo都做的非常棒，大大的提升了其訪問性。在節(jié)日的時候變換相應的logo這已經成為很多網站的一項工程。給logo加上alt來增強SEO關鍵字，給其加上link，讓它方便的返回到網站首頁都是很好的應用方法。

logo的應用場景：

1. 獨立的logo應用，適用于主要網站業(yè)務；
2. logo+文字，適合與附屬于其網站業(yè)務下的子類；
3. logo+logo，和網站有并列關系或裙帶關系的應用范圍；

(三) 視覺識別：

阿里軟件是阿里巴巴集團的第5家分公司，Branding 的指定要和集團的色彩體系有所融入，那么阿里橙就是首選了， 將前一版本的綠色改掉成橙色系的icon就是一項小小的改進。

(四) 技術實現：

在這個首頁的制作當中，前端開發(fā)工程師做了大量的工作，從框架的規(guī)劃到可根據頁面內調整進行整體框架的機動變更都是之前的鋪墊，良好的規(guī)劃是多人協(xié)調的一個重要部分。

用CSS Sprite優(yōu)化頁面響應速度；
減少圖片文件大小，將多張圖片集合可以將圖片的總大小縮小；
減少數據請求，原來每加載一張小圖，就會有一次數據請求，拼合好的圖片只需要一次請求就夠了；
減少CSS代碼量，樣式更容易管理；這些都都是細小的改進點。

(五) SEO：

網站SEO至今仍是一個薄弱的環(huán)節(jié)，記得集團SEO部門的一個人說過，SEO做到極致就是沒有SEO，當大家都在關注的時候，必定會做出符合各種有利于SEO的產品。那么在當前的情況下我們仍希望對此進行加強。

CMS發(fā)布系統(tǒng)的靜態(tài)化；
因為大型的網站都會牽扯很復雜的邏輯端、跨域問題，之前引用了很多的iframe，動靜相混的頁面結構爬蟲無法識別，在UED的一片要求之下終于將首頁遷出，可謂是由此前進了一大步。
flash banner也因為富媒體的原因無法被搜索引擎所抓取，那么在這個上面，JS代替了flash的表現，功能大于形式。

(六) 總結：

前幾天和PO在爭議一個功能點的問題，為了滿足商業(yè)需求做了很大的讓步，用戶體驗往往會和技術、商業(yè)需求產生矛盾。平衡關系、不拘泥于教條和創(chuàng)新才是我們的價值所在。

其實本來想說說首頁的，一個頁面的包含的內容太多，拿出幾個細節(jié)與大家分享，之前有句老話：“細節(jié)決定成敗”，其實應該改下了：“關鍵細節(jié)決定成敗”。

原文：http://www.alisoftued.com/?p=165