其他

 　　現在市面上有一大批HTML5頁面模板製作工具，雖然方便了很多非專業設計師製作HTML5頁面。但是不得不吐槽的是，很多模板工具平台上的作品大部分還停留在左飛入右飛出的初級境界，想感受真正精妙的進階特效，這10個專業人士的作品不得不看咯。　　本文來自優設合作媒體 數英網。　　1. 粒子特效　　星際傳奇：這是探索宇宙的門票

      剛剛開始接觸 HTML5 時，對它的標籤很不適應，甚至一度有點反感。尤其是對 div、section、article 這幾個標籤，實在弄不清楚應該使用在什麼場合下。divHTML Spec:The div element has no special meaning at all.         這個標籤是我們見得最多、用得最多的一個標籤。本身沒有任何語義，用作布局以及樣式化或指令碼的鉤子(hook)

 　　H5正在風口浪尖，很多同學都想通過這個一槍打響，具體的玩法不簡單，來看騰訊肥牛同學總結的整個過程，從前期策划到執行，色彩字型動畫載入通通不能落下，有執行個體有反思有總結分析，非常到位的一篇H5實戰文。　　一、項目簡介　　圍繞DNF5月21日浴火新生版本的發布，我們提出了一系列營銷設計方案，而這次的H5移動專題屬於其中一環。此次專題旨在DNF7周年之計，以玩家遊戲資料為內容表現DNF7年陪伴玩家成長的概念，並配合黑鑽獎勵與版本資訊，拉迴流穩活躍。　　資料表現　　這次活動對遊戲精細化

 　　html5的viewport使我們開發出來的應用或頁面大小能適合各種手機不同的解析度，不同螢幕大小。viewport 文法介紹：　　content="　　height = [pixel_value | device-height],　　width = [pixel_value | device-width ],　　initial-scale = float_value,　　minimum-scale = float_value,　　maximum-scale =

 　　行動裝置的份額在網路流量中在大量增長，其所貢獻的網路流量非常龐大，以至於為了行動裝置，我們單獨建立了一些API和設計理念。一個非常典型的例子是

DIVCSS執行個體教程：去除連結元素的虛線框（相容IE7、IE6、FF）-瀏覽器安全色教程Web的發展非常迅速，UI設計也越來越美觀，漂亮。同時也給WEB前端編碼提出了新的要求。連結元素在點擊時會出現虛線框，由於種種原因，您的主管可能要求你想辦法將連結虛線邊框出除。我們採用htc檔案的辦法來解決這個問題。首頁將以下代碼儲存為link.htc檔案。  <public:attach

 　　今年全棧設計師越來越流行，無論視覺、UI還是互動都難逃浪潮。所以特意給無編程基礎的設計師來點簡單易懂的入門教程，比如@googdev 這個系列文章，就是幫你學會Github 的，即使不是工程師，你也可以用它來搭建個人網站/Markdown寫作/展示簡曆/表白等等，學起來!　　1. 寫在前面　　我一直認為 GitHub 是程式員必備技能，程式員應該沒有不知道 GitHub 的才對，沒想到這兩天留言裡給我留言最多的就是想讓我寫關於 GitHub

 　　最近一直關注VR設計，今天就發現一款Google聯合《紀念碑穀》的USTWO團隊出品的神器!他們做了個App來教你設計VR ：Cardboard Design Lab，10個技巧，邊玩邊學，一起來收!　　Cardboard Design Lab　　安卓的手機都可以下載下來安裝~

 　　這是阿里互動實習生半木對他兩個月份實習做的一個總結，以指導後續的項目工作，主要內容為協作方式與職業素養方面的沉澱。都是書本上沒有的實戰經驗，非常適合沒有經驗的互動新人進階學習。　　作為職場新人，第一次接觸到這樣專業的設計大團隊還是蠻興奮和緊張的，團隊的設計氛圍很好，師兄師姐們也都很熱情。團隊裡有很多大牛，我們UED有一個平台可以看到大家上傳的項目作品，同時也經常會有分享活動，可以學習他們的經驗。總之接觸這樣的團隊讓我學到了很多書本上沒有的理論知識和實踐經驗，接下來整理一下我在公司

 　　大多數的網站會隨著內容的增加、需求的改變和產品的演化而進行重新設計。但是，不可避免的，網站重設計會遭遇各種各樣的問題，碰到誤區，陷入困境。絕大多數的網站重設計所遭遇的誤區都很相似，想要破解也並非難事。　　1、保留全部內容　　我明白，做取捨總是一件艱難的事情。現有的內容已經和你的網站一同存在了多年，要捨棄其中的某一部分對你而言，是一件艱難的事情。　　但是，當你決定要重新設計網站的時候，不妨問一下你自己：現在的這數百個頁面是否真的能解決你的訪客所有的問題麼?　　在取捨的問題上，單純審

 　　作為一名UI/UX設計師，你一定想擁有一個足夠優秀的作品展示 頁來呈現你所有的作品。你的潛在客戶需要看到的不止是你能做到什麼，還需要看到你是如何做設計，並且怎樣讓這些設計脫穎而出的。　　雖然設計師宣傳自己的方式許許多多，但是一個能隨時訪問的設計作品展示 頁面始終是最直觀、效果最好的呈現方式。感覺上設計一個頁面似乎並不複雜，但是事實上並非如此。　　隨著越來越多的設計師開始將自己的作品集 放到網站上，這類網站就開始將不同的設計技巧、技術融入其中。今天我們再來審視作品展示

 　　少有使用者在沒看到商品的情況下就直接購買。通常情況下，使用者至少要在看到產品圖片之後才能作出最終的決定。這也是為什麼在互連網上銷售產品的時候，賣家要耗費巨量的精力來展示產品，用清晰的照片和走心的文案等“套路”來完成銷售過程。在互連網產品營銷當中，圖片起到了至關重要的作用。圖片能夠從不同的方面協助行銷人員獲得相當不錯的轉化率。　　現如今的消費者非常期待能看到足夠豐富的產品圖片，這樣他們能夠從中看到這些產品提升他們生活品質的“證據”。當

 　　首先，我想大家會有這樣的問題：什麼是微互動 (micro-interaction)?　　來自 UXPin(一款線上可互動原型製作工具)的 Carrie Cousins 給出了如下定義：“微互動是在互動裝置上的單一互動流程的細節最佳化。”　　可能不是太容易理解，那就多看幾遍吧。　　在進入正題之前，有一點我要先聲明一下，接下來我要分析的 UI

 　　最近正在和團隊的小夥伴一起處理一個複雜的表單設計，正好看到這篇文章，小有啟發，就決定譯出來和大家分享一下，是篇可以快速閱讀的案例文。　　在設計大型電商網站或是複雜線上服務系統的時候，遇到最核心的問題就是設計一個線上下單或是配置的流程。如果能把使用者流程設計得簡單並且符合使用者直覺，這絕對是提高轉化率的關鍵。過程中任何一個對使用者造成的挫折感都有可能讓他們離開去嘗試其他選擇。　　易用的分步流程可以有效避免使用者受挫，並且協助他們成功的完成主要任務。本文我將帶大家來看一下各式流程進度

在這個系列中，我們差不多瞭解了彩虹中的每一種顏色及其在設計中的應用。在這篇中，我們將討論一下七彩之外的色彩，讓我們看一下灰色。灰色是一個平穩的、中立的色彩，它在網頁設計中非常漂亮。它不會激發非常強烈的情感（或許除了一種不好的心情），而紅色、橙色或者紫色則會。它不像黑色那麼鮮明，但是一個非常暗的灰色可以做同樣的事情。同樣非常淺的灰色又不像白色那麼死板，而且有的時候它還可以填補白色佔據的空間。灰色有正面和負面的含義。“灰質（Gray

像素誤差看自己設計好上線的網站，偶爾會發覺像素行間出現了彈性空間，總在不經意間蹦出一定的差距。有些頁面很難發現，比如活動類頁面，這類頁面多呈不規則造型，在設計上也更加靈活多變。但在portal類的頁面設計上，像導航、登入框、行距等，幾個像素的誤差可能就會影響到使用者的感受。這時，像素誤差問題就很直觀了。面對不斷成長的使用者，Qzone的平台、活動等不斷的推陳出新，新的視覺觀感、新的操作方式、新的體驗等等都在追求盡善盡美。但由於時間進度和對介面的不同理解，以及上線前開發聯調等原因，導致線上的頁面和

一、最佳化圖片幾乎沒有哪個網頁上是沒有圖片的。如果你經曆過56K貓的年代，你一定不會很喜歡有大量圖片的網站。因為載入那樣一個網頁會花費大量的時間。即使在現在，網路頻寬有了很多的提高，56K貓逐漸淡出，最佳化圖片以加快網頁速度還是很有必要的。最佳化圖片包括減少圖片數、降低映像品質、使用恰當的格式。1、減少圖片數：去除不必要的圖片。2、降低映像品質：如果不是很必要，嘗試降低映像的品質，尤其是jpg格式，降低5%的品質看起來變化不是很大，但檔案大小的變化是比較大的。3、使用恰當的格式：請參閱下一點。因

　　QQ概念版經過一年的秘密研發，終於掀開了她的神秘面紗，向世人展現了她的真實面目，做為一個全新的產品，以及內部封閉秘密研發的眾多因素，可能很多人想瞭解這個QQ概念版的研發設計過程以及產品的設計理念，在這裡我們將帶你全面的瞭解QQ概念版這款產品的研發設計過程，也和大家一起分享我們項目團隊的研發設計經驗。　　1.項目背景　　QQ同時線上過“億”，騰訊開始正式步入“億”時代，正在大家沉浸在喜悅以及自豪的同時，我們一款全新的概念產品將破繭而出，因為我們知

1、ASCII碼我們知道，在電腦內部，所有的資訊最終都表示為一個二進位的字串。每一個二進位位(bit)有0和1兩種狀態，因此八個二進位位就可以組合出256種狀態，這被稱為一個位元組(byte)。也就是說，一個位元組一共可以用來表示256種不同的狀態，每一個狀態對應一個符號，就是256個符號，從0000000到11111111。上個世紀60年代，美國制定了一套字元編碼，對英語字元與二進位位之間的關係，做了統一規定。這被稱為ASCII碼，一直沿用至今。ASCII碼一共規定了128個字元的編碼，比如空

 　　Flexible Box是什麼?Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型——伸縮盒模型。由CSS3規範提出，這是在原有的大家非常熟悉的block, inline-block,