15個Google為網站開發者打造的工具
Google 的使命是Web，在Google 眼中，未來的一切應用都將Web 化，一直以來，Google 為Web 開發與設計者推出了大量免費工具，讓他們更好地創建，維護，改善他們的Web 站點，這些工具包含了開發，分析，維護，修補等等用途，本文將介紹15款這樣的工具。
Archive for the 'Design' Category
iPhone網頁設計欣賞與最佳實踐Showcase of Designs Optimized for iPhone
近些年來，手機已經成為越來越流行的上網設備。 iPhone的出現，使移動Web程序越來越多姿多彩，針對移動設備的網頁設計，也漸漸開始成為一個重要的網頁設計分支。 這篇文章裡，我們一起欣賞優秀的手機網頁設計，其中絕大部分是針對iPhone的。
雖然iPhone的Safari瀏覽器已經和桌面瀏覽器一樣強大，可以解析任何網頁，但它的可視面積小的多，操作方式也有其特殊性。 面對來自iPhone 可能達數百萬計的流量，設計師和程序員們開始重視這一挑戰—— 他們必須在iPhone屏幕的最大範圍內，使用最少的帶寬，顯示最漂亮的網頁。
iPhone的瀏覽體驗與普通桌面瀏覽器的完全不同。 按鈕和鏈接必須足夠大，因為我們的手指不可能像鼠標指針一般精確。 當然，製作適於iPhone的界面並不是像造火箭那麼複雜的任務，我們使用相同的HTML、CSS和Javascript，而改變的僅僅是屏幕的尺寸。
在下面的展示裡，我們挑選了一些有趣的、高互動性並且精緻漂亮的iPhone網頁設計，我們還介紹了一些方便的開發工具，來幫助你更高效的設計iPhone網頁界面。
1. 新聞/娛樂類
獨特的導航菜單為這個網站增添了非凡的吸引力，絕佳的理念和設計。
清新簡介的版式和配色，非常契合網站的定位。
[轉] UED,UXD在中國
UED全稱User Experience Design，中文叫“ 用戶體驗設計 ”。
UXD全稱User eXperience Design，中文叫“ 用戶體驗設計 ”。
顯然這兩個詞還是一回事情，但要比UE遲的多。 最早我在2005年底從Yahoo那邊了解的，大概2006年聽到同行普遍提起，同年9月份“淘寶UED”團隊博客建立之後，才被大家熟知。 但中國互聯網公司最早成立部門研究“用戶體驗”的不是淘寶，而是百度，當時就叫“用戶體驗部”，後來才被同化的UED。 大概在2005年已經有30人左右成型的團隊（用戶體驗部總監郭宇，於2004年11月加入百度）。
首先UED這個詞來自海外，但在海外除Yahoo很少有公司提起。 如前文所述，老外並不習慣叫UE，所以理論上描述“用戶體驗設計”的縮寫不應該是UED，而是UXD。 確實也有UXD的說法，但只偶爾在某些海外網站上見到，同行心目中的認知程度不高。
再仔細推敲，其實不難發現，UED這個詞有誤。 因為“用戶體驗設計”的說法本身有問題，UE並不能通過Design完全解決，通常Design涉及的只是UE比較表層的Experience需求。 事實上，海外公司普遍都叫“UX團隊”，也沒有“UED團隊”的說法。
而UED來到中國後，反而成為主流論調，得到廣大公司的認可。 可見與UE類似，UED也具有很濃的本地化色彩。 在進入用戶體驗執行層面之後，很多同行/公司的第一反應，是要有這樣的一個人，或者有這樣的一個團隊。 因此才有了“UE工程師、UE設計師”和“UED部門”類似的稱謂。
早期UED部門設立的職能職位主要有用戶研究、交互設計、視覺設計，慢慢後來加入前端開發、界面設計等，某些甚至把產品經理也劃入其內。 具體叫法五花八門、千奇百怪。 有個重要差異值得探討，關於“工程師、設計師”的區別，根據理論推敲，既然UE是個非理性話題，不似Usability那樣有邏輯可以遵循，有標準可以執行，所以我認為偏重“感性”的用戶體驗應該更靠近“設計”。
More »
[原創]多選/全選checkbox，AJAX提交。 另附IE的onchange BUG
最近在為MeePlace 2.7的後台編寫多選功能。 在一個接一個的版本中，MeePlace的後台是越來越強大了（不夠謙虛，hoho），後台採用純ajax異步（有的時候覺得編程會有點麻煩，但是從1.0開始就是這樣的後台，現在要改的話也麻煩，況且AJAX能給用戶帶來更好的體驗，就繼續開發吧：D）
這次後台增加的功能中，有一個是能夠多選/全選項目，這個已經是歷史遺留問題了，在我所有開發的項目中都是用這套自己開發的後台系統，改一改就成。 這次佈萊恩吧multi-selectable列在了Milestone裡，所以就寫了。 以前有做過多選，不過由於是原始form的post，所以比較簡單。 這次用AJAX的後台多選操作，我還是想了一下才開始動手的。
我的想法是，通過遍歷checkbox，來得到有被選定了的checkbox的value，然後再傳給後端進行多選處理。
下面公開MeePlace的這部分代碼。
全選按鈕。 用戶點擊全選的那個checkbox後，checkbox的onclick=”select_item_all(this,”allitem”,”childitem”)”
其中”allitem”是全選的checkbox的classname，因為也許這個全選會出現兩個，或者更多，比如表頭和表尾各一。
“childitem”是所有的條目前的checkbox的classname。
JS代碼：
More »
Ajax Loading在線圖片生成
極簡主義網站設計:寓豐富於簡單
作為設計師，我們都知道，一個極簡的設計可以實現漂亮的效果。
然而，很多設計師在實現上有些麻煩：要么是沒有時間讓使用如此少的元素製作的頁面看起來漂亮，要么就是最終的結果只是看起來“不完美”。
網上有很多關於極簡主義設計的文章，而本文的目的是幫你實現一個漂亮而不空洞的極簡網站設計
最重要的是，我們將展示一個小的極簡網站設計畫廊 ，這樣你就可以分析為什麼一些設計可以而其它的則不可以。
More »
免費的Photoshop高分辨率筆刷
在尋找一個新系列的超級高分辨率Photoshop筆刷來豐富你的收藏嗎？ 好吧，你找對地方了！ 來看看這一系列的筆刷，他們全是2500px大小的大筆刷，包含全部的細節，供你在你的下一個設計中大顯身手
用Photoshop創建一個iPhone程序銷售頁面
最終圖像預覽
點擊下圖查看大圖
轉載自： http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-promotional-iphone-app-site-in-photoshop/
想看這個作品是如何被構思的嗎？ 請看關聯資源：http://vector.tutsplus.com/tutorials/web-design/build-a-promotional-iphone-app-website-wireframe-in-fireworks/
Recent Replies / 最新回复