2010年10月25日 星期一

移動網站開發-標記語言

移動互聯網被稱為「第五次科技革命」,而隨著iPhone和Android等智能手機的日漸流行和iPad等平板電腦的出現,移動互聯網的潛力和趨勢也愈發顯現,針對移動設備的網站開發越來越受到關注,國內很多公司也開始重視面向所有移動設備的網站開發。

一般來說,對於移動網站可以採取兩種方式:

專門開發一個獨立的移動版本
使用media type和media query控制網站在移動瀏覽器的表現
本文和下一篇文章將介紹第一種方案,後面的文章將結束第2種方案。

本文我們先瞭解一下移動網站的標記語言。

移動網站標記語言的演進

我們先看一下 @AdrianF2E 分享的一張《移動web相關標記語言的演進》的圖表,一目瞭然:


點擊放大

這張圖形象的展示了標記語言的發展歷程,包括移動網站標記語言。

移動網站開發要比普通的網站開發複雜的多,選擇一種用於移動網站的標記語言同樣相當糾結。

在最初,WAP論壇(後來和NTT合併,組成OMA,Open Mobile Alliance)創建了一種基於XML的語言,稱為WML,這是用於WAP網站的標記語言。它並不是理想的方案,因為它將網站分割為兩部分:普通頁面使用(X)HTML,而移動網站使用WML。網站開發者想要做一個移動網站也不得不學習一種新的語言而不是轉換技術,「一站式」的信條也被打破,用戶不能訪問他們喜歡的網站並且不得不發現這個網站的WAP版本——如果它們存在的話。另外日本的NTT創建了他們自己的語言cHTML(compact HTML),但是它並不能與XHTML和WML兼容。

由於這與理想中的方案相去甚遠,W3C創建了XHTML Basic 1.0。正如其名,這是一個XHTML 1.1的子集。由於XHTML 1.1將XHTML改善為小型的模塊,一個子集就可以只包含一些必須的或者可以在低端移動設備上控制的基本的模塊、元素和屬性。

基於XHTML

XHTML Basic為針對移動網站的標記語言提供基礎的模塊。與其基礎的XML一樣,它也被設計用於擴展。這正好結合了WAP和NTT的合併之後(也就是OMA)的做法,他們創建了cHTML和WML的繼承者XHTML Mobile Profile——它在XHTML Basic的基礎上添加了一些在它們之前的版本中有的特性。XHTML Basic和XHTML MP共存的狀況看起來有些混亂,但是之後不久W3C就發佈了XHTML 1.1版本,吸收了在XHTML MP中加入的一些特性。所以現在看來這兩個版本差不多是一樣的,至於使用哪個很多時候只是看個人喜好了。這裡我們選擇XHTML Basic,因為它是W3C推薦的….. :)

開始使用XHTML Basic

由於XHTML Basic是XHTML的一個子集,如果你已經瞭解XHTML的開發,那麼開始製作XHTML Basic的頁面就手到擒來了。

程序代碼 程序代碼
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=="en">
<head>
  <title>Hello Mobile</title>
</head>
<body>
</body>
</html>


是的,只是加了個XML的頭聲明,然後使用xhtml basic的DTD。

XHTML Basic 支持的模塊

模塊 元素/屬性
結構:html, head, title, body
文字:abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
鏈接:a
列表:dl, dt, dd, ol, ul, li
表單:button, fieldset, form, input, label, legend, select, optgroup, option, textarea
表格:aption, table, td, th, tr
圖片:img
對像:object, param
表現:b, big, hr, i, small, sub, sup, tt
元信息:meta
鏈接:link
base:base
事件:onblur, onfocus, onload, onunload, onreset, onsubmit, onchange
腳本:script, noscript
樣式:支持style元素
樣式屬性:支持style屬性
目標:支持target屬性

不支持的內容:

不支持外部CSS文件
不支持嵌套table;
不支持thead、tbody、tfood等;
不支持name屬性;
不支持框架;
不支持del、ins、basefont、center、dir、font、isindex、menu、sstricke、u等元素。

注意事項:

對事件的支持依賴具體的瀏覽器支持,有些瀏覽器不一定支持這些事件;
webkit支持更多的事件
opera mini由於是基於自己的代理服務器,有些事件是不支持的,詳見:JavaScript support in Opera Mini 4
XHTML MP

正如之前提到的,XHTML MP是對XHTML Basic的一個擴展,所以XHTML MP有更好的適用性。而XHTML MP對於Basic最大的優勢就是支持外部樣式文件——雖然這會導致多一個HTTP請求。

這裡是一份關於XHTML MP和XHTML basic的對比表

PS:事實上,WAP 2.0也就是XHTML MP,也就是說,WAP 2.0與WAP 1.0關係不大。

兼容性與現狀

根據W3C的統計,現在絕大部分手機都支持WAP 2.0了,使用WAP 1.0的設備已經非常的少了;
根據觀察,絕大多數網站的移動版本,都是採用XHTML MP規範;
大部分網站使用內聯樣式表,而不是外部樣式文件;
非常多的Mobile版本頁面採用table佈局;
Opera mini可以在所有支持java的手機上使用,而Opera mini支持全部的(X)HTML特性。
所以,如果你想要開發一個移動版的網站,可以放心的使用XHTML Basic 1.1 /MP。

HTML5

Mobile Webkit是目前對標準支持最好的移動瀏覽器,它支持所有的XHTML特性,同時對HTML5的支持也非常棒。如果你的項目只針對iPhone 和(或) Android,完全可以使用HTML 5來編碼。

事實上作為又一個很強勁的趨勢,HTML 5眾望所歸要成為下一代的網頁標準,Google、apple、opera和微軟等互聯網巨頭一直在努力推廣和推進HTML 5。opera認為HTML 5是統一移動互聯網的關鍵

總結與展望

正如之前所說的,XHTML basic支持了大部分在XHTML中定義的基礎特性,所以對於大部分前端開發人員來說,開發一個基於XHTML Basic 1.1或XHTML MP的網站並不困難。但是由於移動設備廠商和設備都非常的多,所以各個設備在對某個細節上可能會有差異。

W3C存在的最大價值,是為我們提供成熟而統一的解決方案,雖然XHTML MP成了事實上的Mobile 標準,但是顯然XHTML Basic功不可沒,如果說兩者並存尚容易讓我們混淆的話,希望在不久的將來,HTML 5能夠成為移動互聯網中事實上的標準,這無疑將大大減少我們的開發需求。

但是由於現實中很難將所有的設備統一,這就造成實現方式的必然存在差異。可以預見,XHTML Basic /MP和HTML 5將成為兩種並行的規範存在,我們不得不用XHTML Basic/MP為低端設備開發基礎頁面,同時使用HTML 5為iPhone和Android等系統實現富界面。

整理自:Mobile markup – XHTML Basic 1.1

參考:

XHTML MP (XHTML Mobile Profile) Introduction
http://www.w3.org/TR/xhtml-basic/

文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月19日 星期二

Adobe Creative Suite 5 Master Collection 非法下載



全新 Adobe CS5 系列

全新的 Adobe CS5 加入了最新的高清視頻渲染引擎Mercury。Mercury可以利用顯卡的圖形處理能力加速對高清格式視頻的編解碼和播放,當然不是所有的顯卡,由於和 NVIDIA 之前達成的協議,Mercury 只支持NVIDIA的顯卡。

而 Adobe CS5 的 Flash Catalyst 則是為了挑戰微軟的 Expression Studio,這款新的軟件將作為Flash的另一個選擇,是專門為設計師和美工量身定做。

Adobe Flash Catalyst CS5 功能介紹:

Adobe Flash Catalyst CS5
無需編寫代碼即可創建具有表現力的界面和交互式內容

Adobe Flash Catalyst CS5 軟件是一款觸手可得的全新交互式設計工具。無需編寫任何代碼,即可將 Adobe Photoshop、Illustrator 和 Fireworks 圖稿變換為具有表現力的交互式項目,並充分利用 Adobe Flash Platform 的範圍和一致性。

下面讓我們來看看 Adobe CS5 到底新增了哪些功能吧,主要介紹大家相對熟知的 PhotoShop 和 Dreamweaver 兩套軟件。

Adobe PhotoShop CS5 新增功能

PhotoShop 新增多大12項的功能,主要是增強了摳圖及網頁製作上的功能。Dreamweaver 則增加了 CSS 檢測及結合發佈平台的應用。

01 負責選擇如此簡單

輕擊鼠標就可以選擇一個圖像中的特定區域。輕鬆選擇毛髮等細微的圖像元素;消除選區邊緣周圍的背景色;使用新的細化工具自動改變選區邊緣並改進蒙版。

02 內容感知型填充

刪除任何圖像細節或對象,並靜靜觀賞內容感知型填充神奇地完成剩下的填充工作。這一突破性的技術與光照、色調及噪聲相結合,刪除的內容看上去似乎本來就不存在。

03 出眾的繪圖效果

借助混色器畫筆(提供畫布混色)和毛刷筆尖(可以創建逼真、帶紋理的筆觸),將照片輕鬆轉變為繪圖或創建獨特的藝術效果。

04 自動鏡頭校正

鏡頭扭曲、色差和暈影自動校正可以幫助您節省時間。Photoshop CS5 使用圖像文件的 EXIF 數據,根據您使用的相機和鏡頭類型做出精確調整。

05 簡化的創作審閱

使用 Adobe CS Review(新的 Adobe CS Live 在線服務**的一部分)發起更安全的審閱,並且不必離開 Photoshop。審閱者可以從他們的瀏覽器將註釋添加到您的圖像,您的屏幕上會自動顯示這些註釋。CS Live 服務的免費使用期有限。

06 更加簡單的用戶界面管理

使用可折迭的工作區切換器,在喜歡的用戶界面配置之間實現快速導航和選擇。實時工作區會自動記錄用戶界面更改,當您切換到其他程序再切換回來時面板將保持在原位。

07 操控變形

對任何圖像元素進行精確的重新定位,創建出視覺上更具吸引力的照片。例如,輕鬆伸直一個彎曲角度不舒服的手臂。

08 新增的 GPU 加速功能

充分利用針對日常工具、支持 GPU 的增強。使用三分法則網格進行裁剪;使用單擊擦洗功能縮放;對可視化更出色的顏色以及屏幕拾色器進行採樣。

09 出眾的繪圖效果

借助混色器畫筆(提供畫布混色)和毛刷筆尖(可以創建逼真、帶紋理的筆觸),實現自然、逼真的繪圖效果。

10 借助 Adobe Repousse 實現 3D 突出

借助 Adobe Repousse 技術,您可以更靈活地進行設計。從任何文本圖層、選區、路徑或圖層蒙版創建 3D 徽標、Web 按鈕和圖稿,然後扭轉、旋轉、凸出、傾斜和膨脹這些設計。

11 增強的 3D 現實主義和豐富的素材

借助簡單的陰影創建、基於圖像的光照以及玻璃和鉻黃等素材增強 3D 對像和設計。通過調整景深範圍,嘗試 3D 場景中的不同焦點。

Adobe Dreamweaver CS5 新增功能

01 集成 CMS 支持

盡享對 WordPress、Joomla! 和 Drupal 等內容管理系統框架的創作和測試支持。

02 CSS 檢查

以可視方式顯示詳細的 CSS 框模型,輕鬆切換 CSS 屬性並且無需讀取代碼或使用其他實用程序。

03 與 Adobe BrowserLab** 集成

使用多個查看、診斷和比較工具預覽動態網頁和本地內容。

04 PHP 自定義類代碼提示

為自定義 PHP 函數顯示適當的語法,幫助您更準確地編寫代碼

05 站點特定的代碼提示

從 Dreamweaver 中的非標準文件和目錄代碼提示中受益。


Adobe CS5 家族的其他成員介紹可以前往官網網站查看介紹,這裡就不一一累述了!


免責聲明

★本帖介紹的內容轉自網絡,凡摘自網絡相關圖文介紹內容的本帖不另行標注出處,版權所有者如有異議請告知以便刪除。
★關於軟件破解及註冊機可能被殺毒軟件報病毒或間諜木馬(若已檢測到的則將在帖中特別標注),請自行甄別和取捨,不另行加以解釋。
★資源下載後請對文件做必要的安全檢測,該下載內容僅限於個人測試學習之用,不得用於商業用途,並且請在下載後24小時內刪除。
★各計算機系統環境各不相同,因此不保證該軟件完全兼容於你的計算機系統,最終解決軟件安裝運行問題請聯絡官方站點尋求相關技術支持。
★資源版權歸其所有者所有,如果你喜歡,請購買正版。

有要試用 CS5嗎?可以到這裡參考看看!

文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月18日 星期一

如何獲取當前 select 元素的值

  • 如果 select 元素下的所有 option 元素均沒有指定 selected 屬性,會默認選中第一個。

  • 可以通過 select.selectedIndex 獲取到選中的 option 元素的索引。

  • 可以通過 select.options

  • [select.selectedIndex] 獲取到選中的 option 元素。
  • option 元素 text3,可以通過 option.value 獲得 option 元素的 value 屬性值,即 value3;可以通過 option.text 獲得 option 元素內的文本,即 text3。

  • 如果 option 元素沒有定義 value 屬性,則 IE 中 option.value 無法獲得,但 Safari、Opera、FireFox 依舊可以通過 option.value 獲得,值同於 option.text 。

  • 可以通過 option.attributes.value && option.attributes.value.specified 來判斷 option 元素是否定義了 value 屬性。


  • 故,獲得當前 select 元素值的腳本如下:

    程序代碼 程序代碼
    var getSelectValue = funtion(select) {
        var idx = select.selectedIndex,
            option,
            value;
        if (idx > -1) {
            option = select.options[idx];
            value = option.attributes.value;
            return (value && value.specified) ? option.value : option.text);
       }
        return null;
    }

    原文:需要點這裡...

    文章提供: BAYSTARS DESIGN網頁設計公司

    2010年10月17日 星期日

    50多個強大的jQuery插件應用實例

    jQuery是近段時間裡比較流行的一個JavaScript框架,不斷有使用者開發出新的 jQuery插件。
    下面收集了50個開發者最喜歡使用的jQuery插件。Sliding Panels -滑動門控制
    1) Sliding Panels For jQuery -元素可以展開或關閉,創建出手風琴的滑動效果。
    j373
    (2) jQuery Collapse -這個jQuery插件同樣點擊後滑動展開或關閉DIV層。
    Menu - 菜單
    3) LavaLamp
    lavalamp
    (4) A Navigation Menu- 錨鏈接的無序列表嵌套, 可以添加2級菜單
    j20
    (5) SuckerFish Style
    j21
    Tabs - 選項卡
    6) jQuery UI Tabs / Tabs 3 - 基於 jQuery 的一個Tab選項卡導航
    j22
    (7) TabContainer Theme - 當用戶在選項卡之間進行切換時,產生JQuery風格的淡出動效果。
    1
    Accordion- 手風琴效果
    8 ) jQuery Accordion
    Demo
    2
    (9) Simple JQuery Accordion menu
    3
    SlideShows - 幻燈片
    10) jQZoom-讓你在你的網頁上很簡單的實現圖片的縮放功能。
    4
    (11) Image/Photo Gallery Viewer- 一個圖像/相片的畫廊展示插件。可以讓你對圖片進行分組、並產生像Flash一樣的多種瀏覽特效。
    5
    Transition Effects - 過渡特效
    12) InnerFade - 可以讓網頁中的任何元素產生淡化效果
    6
    (13) Easing Plugin-另外一個簡單的過渡效果插件
    (14) Highlight Fade
    (15) jQuery Cycle Plugin- 擁有多種過渡效果的一個Gallery插件。
    7
    奇幻的jQuery

    16) Riding carousels with jQuery - 這個jQuery插件可以生成一個水平或垂直的列表,並且允許你控制DIV層的滑動顯示。
    Demo :8
    Color Picker -拾色器
    17) Farbtastic -這個 jQuery 插件可以讓你通過Javascript添加一個或多個拾色器widgets到一個頁面中。
    Demo :
    9
    (18) jQuery Color Picker
    LightBox -燈箱效果
    19) jQuery ThickBox - is a webpage user interface dialog widget written in JavaScript.
    Demo :
    10

    (20) SimpleModal Demos - its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.
    Demo :
    11
    (21) jQuery lightBox Plugin - simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.
    Demo :
    12
    iframe
    ( 22) JQuery iFrame Plugin
    13
    Form Validation -表單驗證器
    23) Validation - 有一套完整相當的形式驗證規則。該插件還動態地創建ID和聯繫信息。
    Demo :
    14
    (24) Ajax Form Validation - 在客戶端使用jquery驗證的一種形式,它可以驗證用戶名是否有效等。
    Demo :
    15
    (25) jQuery AlphaNumeric -歡迎對對表單域中的某些字符進行限制
    16
    Form Elements - 表單事件
    17
    (26) jquery.Combobox - 從現在的選擇元素中創建一個個性的HTML組合 Demo is here.
    (27) jQuery Checkbox -樣式化選擇框,從而提高交互能力。
    (28) File Style Plugin for jQuery -File Style插件讓你可以使用圖像做為文件瀏覽按鈕,你還可以樣式化文件名稱區域。
    Star Rating - 星形評級系統
    18
    (29) Simple Star Rating System
    30)Half-Star Rating Plugin
    ToolTips -提示工具
    31) Tooltip Plugin Examples - 一個花俏的提示應用。 可以對提示信息進行自定義位置, 設置陰影效果和添加更多內容等.你可以點擊demo 演示.
    (32) The jQuery Tooltip
    19
    Tables Plugins -表格插件
    33) Zebra Tables Demo -使用jQuery來創建出斑馬線風格的數據表格,鼠標懸浮時能改變背景色。
    Demo :
    20
    (34) Table Sorter Plugin - 把一個標準的HTML表格分解成Thead和Tbody標籤構成的分類表格,不需要刷新。它能夠成功地解析和整理多種類型的數據,包括聯繫資料。
    21
    (35) AutoScroll for jQuery -可以生成網頁表格的熱點自動滾動效果
    22

    (36) Scrollable HTML table plugin- 用來轉換表格為普通的滾動HTML。不需要額外的編碼。
    Demo :
    231
    Draggable Droppables And Selectables 拖拽

    (37) Sortables - 一個簡單強大的拖拽插件。
    24
    (38) Draggables and droppables- 這是一個很好的演示。用來實現拖拽樹形菜單項目的操作
    25
    Style Switcher - 切換風絡

    (39) Switch stylesheets with jQuery允許訪客選擇他們喜歡的網站樣式,使用了Cookie記錄,也就是同一個用戶下次再訪問時,除非他不切換,否則會保留他選擇的樣式。
    Demo演示.
    Rounded Corners 圓角效果

    (40) jQuery Corner Demo
    26
    (41) JQuery Curvy Corners- 這個插件可以讓你生成光滑、無鋸齒的圓角效果。
    27
    Must See jQuery Examples 應該瞭解的一些jQuery應用實例
    42) jQuery Air - 一個非常非常特別的客戶管理界面應用插件,太特別了,太太太特別了。
    Demo :
    28
    (43) HeatColor
    Demo :
    29
    (44) Simple jQuery Examples
    (45) Date Picker -一個靈活個性的jQuery日曆組件。
    Demo :
    30
    (46) ScrollTo -這個jQuery插件可以讓你實現當點擊鏈接時中滾動到頁面中的某一對像
    (47) 3-Column Splitter Layout 一個3欄佈局分配插件。
    31
    (48) Pager jQuery -一個小巧的 jQuery插件,用來增加分頁的頁碼效果
    32
    (49) Select box manipulation
    (50) Cookie Plugin for jQuery
    51) JQuery BlockUI Plugin
    33
    文章提供: BAYSTARS DESIGN網頁設計公司

    2010年10月14日 星期四

    在網頁中嵌入任意字體的解決方案

    字體使用是網頁設計中不可或缺的一部分。經常地,我們希望在網頁中使用某一特定字體,但是該字體並非主流操作系統的內置字體,這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片,這樣做有幾個明顯缺陷:1. 不可能大範圍的使用該字體;2. 圖片內容相對使用文字不易修改;3. 不利於網站SEO(主流搜索引擎不會將圖片alt內容作為判斷網頁內容相關性的有效因素)。網絡上有一些使用sIFR技術、或javascript/flash hack的方法,但實現起來或繁瑣,或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字體。

    第一步

    獲取要使用字體的三種文件格式,確保能在主流瀏覽器中都能正常顯示該字體。

    1、TTF或.OTF,適用於Firefox 3.5、Safari、Opera
    2、EOT,適用於Internet Explorer 4.0+
    3、SVG,適用於Chrome、IPhone

    下面要解決的是如何獲取到某種字體的這三種格式文件。一般地,我們在手頭上(或在設計資源站點已經找到)有該字體的某種格式文件,最常見的是.TTF文件,我們需要通過這種文件格式轉換為其餘兩種文件格式。字體文件格式的轉換可以通過網站FontsQuirrel或onlinefontconverter提供的在線字體轉換服務獲取。這裡推薦第一個站點,它允許我們選擇需要的字符生成字體文件(在服務的最後一個選項),這樣就大大縮減了字體文件的大小,使得本方案更具實用性。

    第二步

    獲取到三種格式的字體文件後,下一步要在樣式表中聲明該字體,並在需要的地方使用該字體。

    字體聲明如下:
    程序代碼 程序代碼
    @font-face {
    font-family: 'fontNameRegular';
    src: url('fontName.eot');
    src: local('fontName Regular'),
                  local('fontName'),
                  url('fontName.woff') format('woff'),
                  url('fontName.ttf') format('truetype'),
                  url('fontName.svg#fontName') format('svg');

    /*其中fontName替換為你的字體名稱*/

    在頁面中需要的地方使用該字體:
    程序代碼 程序代碼
    p { font: 13px fontNameRegular, Arial, sans-serif; }
    h1{font-family: fontNameRegular}

    或者
    程序代碼 程序代碼
    掬水月在手,落花香滿衣
    下面是我通過上面兩步做的示例:
    HTML代碼


    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


    上面文中的字體用的是某博客之前發佈的一款鋼筆行書字體,喜歡的可以去下載。

    下載該示例的源代碼:]下載文件 網頁嵌入字體示例

    原文:http://css9.net/css-font-face-solution/
    文章提供: BAYSTARS DESIGN網頁設計公司

    2010年10月12日 星期二

    極簡主義網站設計:寓豐富於簡單

    譯自:Minimalist Web Design: When Less is More
    原作者:Kayla Knight

    作為設計師,我們都知道,一個極簡的設計可以實現漂亮的效果。

    然而,很多設計師在實現上有些麻煩:要麼是沒有時間讓使用如此少的元素製作的頁面看起來漂亮,要麼就是最終的結果只是看起來「不完美」。

    網上有很多關於極簡主義設計的文章,而本文的目的是幫你實現一個漂亮而不空洞的極簡網站設計

    最重要的是,我們將展示一個小的極簡網站設計畫廊,這樣你就可以分析為什麼一些設計可以而其它的則不可以。

    什麼是極簡主義設計

    極簡主義設計已經被描述為最基本的設計,剔除了多餘的元素、色彩、形狀和紋理。

    它的目的是使內容被突出出來並成為焦點。從一個視覺的角度來說,極簡主義設計意味著平靜和將思想帶回本真

    這個設計運動始於瑞士,然後被用於多種媒體:圖形設計、建築、音樂、文學、繪畫以及最近的網頁設計。(拓展閱讀維基百科:極簡主義)

    儘管極簡主義已經有幾十年了,早期的互聯網並沒有能夠展示它。即便除了旋轉的logo、滾動和鮮艷的色彩之外,網站設計依然常常是雜亂和咄咄逼人的。

    我們將在本文中討論極簡網站設計的基本原理。但是即便你選擇不去追求極簡主義的審美,本文也能幫你簡化你的設計,無論你是哪種風格。

    越簡單越豐富

    正如提到的,極簡主義將最重要的內容帶到最前面並為用戶避免分散注意力。如果一個頁面有太多的元素,瀏覽者將迷惑於去看哪裡或誤解每個元素的優先級。一個極簡主義設計將焦點正好放到正確的內容上。

    比如,在一個黑白設計上的任何色斑,都會引起用戶的注意力。色彩本身也將成為焦點。讓我們來看一個具體的例子:



    之前你或許已經見到此類設計:純白背景,一個內容塊和一個圖形元素。

    圖形元素使用色彩、紋理和形狀。很明顯這是頁面中最重要的元素,而且它代表了設計師的品牌和個性。

    因為這個特殊的圖形元素的複雜性,該頁面中的更多內容會讓它不太醒目,顯得不太重要。保持內容到最小,設計師就實現了完美的平衡。

    如何簡化內容

    實現極簡設計或者簡化設計的第一步,不是簡單的去掉大部分圖片,而是要重新考慮內容並將其簡化到無遮蓋的需求。只有那樣才能讓頁面中最重要的元素實現其預期的效果。

    就像你策劃任何其它網站一樣,寫下你需要的內容:logo、介紹、導航等等。去掉其它一切不需要的東東。盡可能的丟掉它們。

    下面是一些你可能不需要的元素。請注意這僅僅是一個指導。你的確切的需求將依賴於你的具體設計。下面的一些元素對你的網站來說可能不是必須的。
    • 社區媒體的圖標或圖形,或者社區媒體部分
    • 宣傳員和補充說明或介紹
    • 「推薦,」 「流行」和「最新」列表(包括Twitter和RSS訂閱列表)
    • 多於3個主要部分的頁面(比如「介紹」 「關於」和「服務」)
    • 次級導航頁面

    這裡的關鍵並非讓網站有較少的功能,而是去掉不是必要的元素(從而強調必須的元素)或將多個部分整合到一個更簡單的佈局(比如,通過合併你的社區媒體鏈接到「關於」或介紹性部分)。

    你也可以分割內容到獨立的頁面,給予內容的每個部分更多關注。


    如何簡化設計

    現在輪到盡可能的簡化設計了。

    簡約設計應該有較少的紋理、色彩、形狀、線條、內容或排版。然而,如果太直白,設計將會空洞。與其丟掉所有東西,不如通過給焦點添加一個重要的特徵來給設計一些感染力。

    選擇焦點可能的樣式,並在你的設計過程中注意一下下面提到的技巧。

    使用一個很棒的線框

    通過理論下面的展示,我們看到一些設計師通過微妙的色彩填充、獨特佈局或有趣的圖形添加一些視覺趣味。然而,或許他們所依賴的最重要的元素,就是一個獨特的線框

    為這樣的網頁創建一個線框需要一些額外的注意事項。通過正確的線框,你可以實現正確的層級和組織以及創建正確的視覺趣味。



    要啟動一個線框,請按照以下步驟:
    • 確定你絕對需要的內容
    • 在一個列表裡面,區分內容的優先級
    • 給予你的列表繪製線框的草圖以實驗最佳的視覺層級

    當作出了線框之後,考慮一下佈置以及視覺上的處理方法。譬如,你的logo使用了一種在其它地方不再重用的顏色,你必須說明原因。

    擴展閱讀:從線框圖到最終設計

    空白

    空白實際上同義與極簡主義。

    無論你的設計多麼有創意,一個缺少大量空白的極簡主義設計不是一個真正的極簡主義設計。這樣,一定要在元素周圍比你平時添加更多的空白。

    空白對平衡即將出現在頁面中的少量元素是必要的。

    平衡、對齊、對比

    雖然大部分的佈局可以通過空白和良好的線框實現,還是要特別注意一下設計的基本原則。與極簡設計相關的三個最重要的因素是平衡、對齊和對比

    要確保您的設計遵循這些原則,但並不需要一個補充的視覺輔助以看起來「完成」了。



    請同時注意其它基本設計原理。回檢它們並實驗不同的選擇來實現最佳的效果。查看 「設計的原理」以獲取更多參考。

    當過度設計成為一個習慣

    過度設計有時會成為一種習慣。無論你多麼艱難的嘗試將一個設計保持簡單,它最終變得凌亂和複雜。要修正這一點,我們必須養成新的習慣。

    試著在每個項目之前回顧上面的技巧並讓它們貫穿整個設計流程。每次集中精力開發一個習慣。比如,努力在將內容放到空白上之前減少和簡化它們。

    如果您發現自己左右為難,「有什麼遺漏了」,可以先試著把東西拿出來,而不是加入一些新的東西。

    極簡主義的每一個方面,需要不同的天賦。你將這些原理實踐的越多,你的設計就將變得越簡單。

    另外,一旦你使用了這裡討論到的技術,看一下最終的產品並查看一下你是否能找到更進一步簡化這個結果的方法。

    你可以專注於在設計過程中你不能確定的區域,而且你也可以向其他設計師詢問以指出你可能遺漏的元素。


    極簡網站設計欣賞

    下面是一個極簡主義網站設計的簡要展示。看一下我們討論的原理是如何實現的。同樣也可以看一下哪個打破了我們的指南,並思考它們為什麼還可行。

    1. James Day Photo



    2. Killswitch Collective



    3. Lonely



    4. DBushell



    5. XPD.no



    6. Toy NY



    7. Joshua Serbus



    8. Ah-Studio



    9. Symour Powell



    10. Icon Werk



    11. Neil Wilson Architects



    12. Non-Format



    13. Zaum



    14. Checkland Kindlysides



    15. Blumenthal



    16. Tink London



    17. Proud Creative



    18. Kimag



    19. Bernat Fortet



    20. All Day




    一些趨勢

    正如你能看到的,極簡主義網站設計也有一些清晰的趨勢。瞭解這些趨勢有助於在多個方面增強我們的設計。

    我們應不僅僅能從其它設計師創造的佈局中獲得靈感,還要能有意識地打破這些趨勢以形成我們自己的創造性的方法。

    接下來讓我們討論一下一些趨勢。

    黑白設計

    最值得注意的趨勢之一就是黑白色彩的廣泛應用。這是很明顯的:除紋理、形狀和內容以外,色彩也是應該被簡化的。但最近它可以做過頭,就顯得有點沉悶。

    看一下上面展示的一些確定色彩的網站,看一下它們是如何從其它極簡網站中被突出出來的。同樣,思考一下即便是在如此強烈的色彩使用下它們是如何能夠保持極簡的。這裡是一個例子:



    有趣的排版

    基於排版網站設計和極簡主義緊密的聯繫到一起。

    當設計師乏於用別的方法激發用戶,他們往往會利用有趣的排版。用排版作為唯一的視覺元素你甚至可以走得更遠。

    這是一個大膽的技術,但本身仍然是一個趨勢。尋找保持獨特的同時讓排版增強設計的方法。



    Flash

    一個驚人數量的極簡主義網站設計是基於Flash的。通過這麼少的視覺刺激,一個設計可以從微妙的動畫獲益而不用被壓倒。

    同時,Flash移除了設計流程中的某些限制。非傳統的線框、排版和其它元素可以比傳統方法更容易的實現。



    結束

    極簡主義網站設計出現多種形式,可是我們常常看到相同的形式重複了。趨勢可以變得咄咄逼人,而我們在理解一個趨勢可行的同時必須與模仿的衝動做鬥爭

    無論如何,極簡主義可以是很漂亮的而且將會在未來幾年內出現,所以學習它的一些技術會不能相信的有益,無論對你的客戶或你自己的項目。

    但是如果你對極簡主義風格不感興趣,這個教程和難懂的原理可以幫你簡化你的設計,總之這是件好事情。
    文章提供: BAYSTARS DESIGN網頁設計公司