其他

網站的互動設計分2種：流程互動和介面互動（即"單頁面互動"或“小互動”）,而介面互動又包含2類：“視覺結構”和“動態模組”。何謂動態模組？簡單的說就是“AJAX”，它有幾種視覺呈現方式：彈出的浮動層、Tab切換、展開

常見到網上博文有錯誤理論，包括身邊很多朋友都曾認同“可訪問性(Accessibility)是為殘障人士準備”的觀點。其實在互連網技術領域遠不止這麼簡單，總結起來有三個方面： 應付極端環境下的正常瀏覽需求； 結構、表現、行為跨終端跨平台相容支撐； 保障殘障人士無障礙資訊擷取。

突然想到寫這個話題，是基於最近在設計產品介面時，年糕一直在給我們灌輸設計的品牌概念以及文化內涵要求而產生的，因之前在介面設計中也遇到一些困惑，剛好看到一篇關於跨文化的產品設計模型的文章，於是就這個話題簡單展開自己的一些看法，放出來跟大家探討分享下。“這個設計線條很流暢，質感很新穎”“你的設計很有感覺，贊~”“這個介面風格很獨特，有很設計韻味”……設計師經常在設計完一個介面總會收到很多使用者的反饋意

在網頁中經常見到兩類不同的按鈕。一類表示當前所示的狀態，一類表示將要進行的動作。(如下圖) 那麼，同樣是icon類的按鈕，為什麼有的表狀態，有的表動作？分析兩類按鈕的使用情境：情境一：聲音開關的按鈕 情境：這組按鈕首先表示當前的狀態（聲音是開著的，還是關著的），點擊以後切換到另一個狀態。分析：聲音在視覺的表現上不能直接感知，因此需要一個圖形化的icon表示當前的狀態；左側的表徵圖表示當前音樂是開啟的，點擊後關閉聲音。如果說只表示目前狀態，那麼點擊後會產生什麼操作就比較難猜，沒

“模板化”——這也許是視覺設計師通常最不願意聽到的概念，先入為主的會產生“批量生產”、“體力活兒”、“限制思維”等概念，總之都比較負面。但為什麼在這裡要講這個問題，不僅僅是站在視覺設計的角度，更多的是從產品整體封裝營運進行考慮的。產品通過“模板化”的運用，讓整體形象和使用者體驗都能較好的保持一致。那麼，留給設計師的只有機械的執行嗎？不，即使模板化，也要有

在設計中保持一致性（uniformity）是網頁設計中一個重要的組成部分，它能使你的設計有效地傳達資訊而不會導致使用者迷惑或焦慮。保證一致性的一個有效方法是撰寫正式的“設計風格標準”文檔，也就是俗稱的視覺規範。這一文檔規定了一個產品或系列產品的圖形化使用者介面設計中都必須遵守的設計準則。遵守這些準則將視覺元素保持大小一致的尺寸，有助於你的需要的時候更容易地將這些元素組合成一個新的設計。由於網站有時候是被臨時或各自獨立建立起來的，它們的視覺設計的一致性已經被折騰得千瘡百孔了

譯自： dzineblog 在我們設計一個登入框或登入頁面的時候，會產生很多疑惑，比如，它應該寫成“login”？“log in”？還是“sign in”？忘記密碼應該怎麼寫？加入一個“取消”按鈕怎麼樣？應該保持登入或者在本機上記住我？布局應該是水平的還是垂直的？登入應該是一個獨立的頁面還是類似於快顯視窗？——為了協助你設計登入介面，這裡網頁教學網收集了一些漂亮的登入介面設計，

本文收集了國外權威網站投票選出的5個出色的網頁設計工具，大家可以點文字連結或者圖片直接去他們的網站瞭解幾種工具的使用方法吧！Just like in most other professions, a web designer’s set of tools is what brings a concept into fruition. There are many applications available to our disposal, but there are some

大家好，我們這一組的主題是快顯視窗和浮出層的使用體驗。在談這個話題之前，首先我們必須對快顯視窗和浮動層有個定義。來自五湖四海的革命兄弟姐妹們經過友好而熱烈的討論，就定義問題交換了意見：1. 快顯視窗：快顯視窗變種很多，形式各異，姿態萬千，我們就不一一列舉了，我們的討論範圍也僅限於以下兩種。•    訊息警示窗，俗稱alert視窗，又稱系統對話方塊，舉例可以看這裡 。 •   

在網站中使用插畫是為網站添加主題和將網站帶入一個全新的水平的很棒的方式。有些網站更進一步，使用向量插畫來設計整體布局和背景。現在很多網站推薦複雜而且視覺效果的風景插畫，這就是我們今天要展示的。網頁教學網收集了50 個漂亮的使用了風景插畫網站的網站設計，包括各種風格。這些網站大都比較柔和，漂亮而且親切。Green Globe IdeasDivVotedStrawPollten24 MediaBanjax

首先，請不要一廂情願地把微格式（Microformat）理解為某種語言的簡化，這是完全錯誤的字面理解，事實完全相反，從經典個例“hCard微格式”看出，它是把XHTML語言在Web中的應用“冗餘”話了。當然初識它的人都難免會犯類似錯誤。什麼是微格式呢？它存在的意義又是什嗎？本文或許會讓你對Microformat有所瞭解，並對其蘊含的巨大潛力及廣泛用途折服。什麼是微格式微格式：建立在已有的、被廣泛採用的標準基礎之上的一組簡單的、開放的資料格式（mic

今早開啟 騰訊ISD的部落格 ，看到一篇新的文章，《迷你屋視覺規範簡介》，趕緊看了來學習。不過給我抓到問題咯，臭魚不介意我在這說下吧：這套規範中的，按鈕的第一級、第二級和文字中用於突出的第三種，紅底白字和白底紅字都不符合W3C的對比規範。原本需要突出和強調的文字反而可能識別不易。截圖中使用對比檢查器，基於W3C的WCAG Guideline 1.4.4和1.4.2中有相應的規定，工具的下載和具體說明可見

來由：最近的工作一直是學校設計教程的開發，都是自己根據理論知識加一些實際工作經驗相結合寫的教程，所以不會咬文嚼字，文筆也不一定非常專業和流暢，甚至寫的有些過於通俗；雖然積累了大量的這類教程，但是覺得有些拿不出手，喜歡的朋友支援一下，不喜歡的略過。裡面大部分設計案例均由本人設計，只是為了實現效果，不一定有實際企業，只為教學使用，均不作為商業用途。一、前言：簡約是什嗎？通過最精簡的表現手段（最少的元素）達到最好的效果，這就是簡約的設計！通過最簡約的表達手段達到最好的表達效果一直是各個不同領域的創造者

從一月1號到31號，國外知名設計網站ThemeForest舉辦了一次激烈的網站模板設計大賽。很多設計師參與了這次比賽，並提交了很多優秀的作品。獲勝者的名單在二月初被選出並公布，總共有十位設計師贏得了這次比賽。這個列表展示了這次比賽的獲獎作品。這些設計從某些方面來講都是很棒的，希望能給大家帶來某些參考。請注意，雖然你可以通過某種方法得到這些作品的原始碼，但是我們提倡借鑒，鄙視剽竊。Live Performance Premium Template我們基於960網格系統建立了Live

Dmitry這篇設計評論表單很有啟發意義，尤其提到關鍵的評論內容、評論者資訊錄入順序問題。好比我們在日常溝通時，對資訊的反饋都是第一訴求，寫信、寫郵件、甚至寫文章署名都是這步驟。於是，看完文章我便毫不猶豫的把blog評論改了過來。但我不認為他文中提到的後兩個例子是最好方案，都還有可最佳化空間。沿視線對齊調整完順序之後，還處理了padding, font, label,

使用者體驗中的流程是十分重要的，因為好的產品要盡量減少使用者在使用中的多餘操作，以使得使用者得到最好的體驗效果，一下我們將討論流程中最簡單的一種“單線流程”什麼是單線流程我所理解的單線流程是指，當使用者進入某個流程時，只能“前進” “後退” 或者“退出”，而沒有多餘的幹擾流程。當然純粹的遵守單線流程在實際的產品設計中沒有任何意義，我們在做得更多的是讓產品流程更接近單線流程。接下來我會舉一些實際的例子。

今天網頁教學網將和大家一同分享Web設計新趨勢中的又一新穎元素，那就是星空和極光效果，首先引領這個網頁設計趨勢的時蘋果Leopard OSX，它的極光/星空效果讓人眼前一亮且深入人心，深深的吸引了大量從事Web設計工作的設計師們的眼球。如果將這種簡單的星空或極光設計效果添加到你的網站、部落格的背景圖或頁頭中，馬上會令富有新的生命力！下面我們來一起欣賞一下網頁教學網為大家收集的20個使用了星空/極光效果的網站吧，最後還會為大家加提供一些該效果相關的網頁設計教程。網頁設計趨勢欣賞：星空/極光1.45

　　雲隙陽光效果是當今網頁設計和平面設計中非常流行和時髦的設計趨勢。雲隙陽光效果就是指從某一點向四周發出的太陽光線效果。它們是Web2.0的設計趨勢，在配合其它圖形元素的時候會使設計工作更加事半功倍。相關網頁製作教程：星空或極光設計效果在Web設計中的網站　　今天網頁教學網將和大家一同分享一些如何使用現有的Photoshop形狀和筆刷創作你自己的雲隙陽光效果，然後會為大家展示15個使用了雲隙陽光效果的漂亮的網站執行個體。雲隙陽光效果Photoshop教程及相關資源雲隙陽光Photoshop教程:

很多人說設計是力求細節的，在網頁設計裡表達出的細節就是表徵圖。表徵圖在一個設計裡帶來了額外的註解並且使設計裡的對象和元素引起使用者的注意。請觀看網頁教學網發布的Photoshop教程：建立有創新力的網站導航以下介紹的是一個用表徵圖描述的最優方法。當使用表徵圖時，表徵圖的描述包含了一系列的隱喻。這也是在網站導航廣泛使用表徵圖和一系列表徵圖組的原因。隱喻：表徵圖是文字的隱喻，也讓人很好地知道隱喻，對於可用性來說，在網站之間有效地進行交流是至關重要的，表徵圖應該是代替文字，最能充分傳送資訊。使用者需要

朋友發了一個比較幽默的圖片文章，說的是“鄰居的重要性”呵呵，相當的搞笑。看這個圖片文章標題的時候，讓我想起了我在最近兩天畫產品結構圖的時候遇見的一個問題，正好記錄下來和大家分享一下。　　問題：　　1、網頁排版過程中，過多的圖片之間的影響。　　2、過多的圖片（或者廣告）對整體頁面的效果的影響。　　這2個問題是圖片多的網站和廣告多的網站必須要注意的。而作為PM，對版面的控制，我們在前期能做的就是對位置的控制，和對排版結構的控制，在做這些結構和排版的時候，一定要在腦子裡有個整體