Ming Apps

Posts Tagged ‘design

layout design tools - balsamiq

網址:http://goo.gl/6pDkM

最近無暇更新Blog~!

因為筆者在忙Mobile Comp的Project: M-cinema Apps哈哈~

話說要將Layout Design畫在Report中,

但用小畫家畫上iPhone Apps的設計很煩惱吧~

上年實習的時候正好找來了一個很有趣的Tools用來畫Layout Design!

找來的正是balsamiq.com所設計用來設計的設計工具:P

入面可以Drag and Drop一個iPhone的介面,

再拖拉一些元件到Canvas中便成~

其實不只是iPhone的,

裏面亦有不少Browser常用的Design Pattern噢,

隨意的拖拉便可以畫上你的網頁設計或是Apps設計,

Menu中選擇Export as PNG,

快捷輕鬆~!

上面的Screenshot是筆者的同學設計的介面,

看來能有好成績吧?

mingapps-anti-force-like-icon大家快些下載吧!

多謝朋友的瘋狂Share哈~
在這打一下設計經過哈哈~

其實沒有甚麼特別,
一個別人Provide的Javascript Solution,
簡單的一個按鈕就破解了別人的網站,
就是這樣~

你可能會奇怪,
為何我的介面設計選擇了一個按鈕,
以不作自動載入,自動破解,
偏偏要別人多做一步 – click the button?

本來我是以自動破解的方式設計Plugin的,
但我發現效果不好。(是我的User Experience方面有些執著哈~)
就是網頁自動破解了,
比起自己動手click一下起來,
click一下破解的感覺很有成功感哈~

真的,自己找到方法破解,自己動手破解所得到的反饋(Feedback),
感覺真的很正~!
如果網頁自動破解了,
你去那一個網頁就只是一個普通網頁,
沒有「嘿! ?破解到你的網頁了! ?hehe haha」的「成功感」或者「優越感」吧哈~

其實,在公開0.1版本前,我嘗試了自動載入的效果,
但發現有些網頁會重新載入頁面,
結果我的破解Code又重覆Run, 網頁又refresh,
結果就是停不了的Refresh.

畢竟我技術有限,
才會作一篇Blog為自己解畫哈~

隱藏技術也是一種學問。

正如iPad2一樣,
沒有Retina 顯示器,
多了不清楚的Camera,
隱藏技術慢慢一步步推出舊有技術,
但有七成iPad2擁有者有iPad1!
其實回頭一看Apple Inc.擁有的商業觸覺很厲害哈~

BTW, Chrome的Extension設計比Firefox來得容易!
遲些有機會的話,教大家設計自己的Plugin哈~

Link: Design Pattern珍藏集!

上回說到YUI Design Pattern,

今日又同大家講一講另一種Web Design Pattern!

其實網頁唔單只係排位,Navigation,

重有好多野可以玩!

Calendar, 404 error page, tag clouds, 好多好多!

既然世界上有咁多Design pattern,

我無理由一個個網頁走去睇,分析佢既好處同何時何地使用吧?

所以介紹以上網頁,

大家click入去就會見到Design Pattern珍藏集!

林林總總各色各樣的Design pattern已經有人收集了。

真的多謝呢個Album既始創人哈~

標籤: , ,

網頁介紹: YUI Design Pattern!

YUI Design Pattern Website Logo

網頁介面這樣多,

設計容易,

但要配合各位User使用,

就要兼顧設計的實際作用 – user friendly!

設計想華麗美觀當然重要,

但設計好後,

很多人都只懂一兩句:

好用、不好用、唔user friendly,

這類型的意見對一個網頁設計幫助不大吧?

要知道如何design website UI,

我在實習時找到了這一個網頁,

讓我對網頁介面設計改觀和更有興趣的,

就是YUI Design Pattern!

內容範圍極廣,

由網頁的Navigation(Menu Design),

內容排版(Page Grids),

分頁Pagination,

極多的Pattern 讓大家明瞭「前人」對網頁介面的設計上,

到User Experience的考慮,

很多很多都有詳細解釋何時何地使用這些Pattern Design.

看了這個網頁之後,

我立即Bookmark了。

從些以後多了個網頁教我UI Design!~

標籤: , ,

我想大家都可能聽了不少html5的資訊,

以下的有幾個:

大家已經可以見到了一個好大的趨勢,

就是HTML5經已是大勢所趨,

並具相當的普及性!

 

香港的網頁暫時看來並未有html5功能,

大部分公司看來頗擔心HTML5的兼容問題?

 

我亦相信大家的瀏覽器,

早就是Firefox, Chrome, Opera,

甚至已經轉向為IE9了。

 

手機瀏覽器亦不用擔心,

Android及iOS兩大智能手機的瀏覽器,

兩者對HTML5的新功能具相當的兼容性。

 

在W3C一文中: HTML5 design principles

提及了HTML5 developer需要考慮的方向,

包括:

  • 兼容性
  • Graceful degradation
    指即使瀏覽器並未支援下,亦能在不改變主體格式的情況下,利用css設定一個漂亮華麗的介面。
  • Do not Reinvent the Wheel
    一些技術早已施行,不用再新增其他多餘的資料。
    (contenteditable="" was already used and implemented by user agents. No need to invent a new feature.)
  • Paving the cowpaths
    意指當其他designer或developer已經在利用某一技術,請你跟從。
    (<br/> instead of <br>)
  • Priority of Constituencies
    意指以user考慮為設計重心,自己(author)的考慮為次,當然最好兩樣兼顧。
  • Separation of concerns
    意指利用html5將網頁的source code分開為Content和 Presentation.
    例如 <article> tag並不是內容,但需要以article tag分開每篇文章,方便css / crawler.
  • 避免不必要的複雜性
  • 錯誤處理
  • (Accessibility)輔助功能
    為傷殘人士提供支援,例如在圖片加入alt text, 超連結加入title等.

這些原則不僅適用於開發 以HTML5為基礎的應用程序,

在很多領域、應用軟件開發都是非常值得參考。

 

我相信所有的Apps designers / Web designers / Programmers 可以從中受益,

考慮這些原則,對Software Development非常有利。

單是Don’t Reinvent the wheel,

筆者經常Google 一番別人寫的program,

別人已經做得非常好的話,

何苦要由頭做起?

 

所以,好好研究這份文件吧。

了解並使用普遍接受的最佳做法,

我相信對整個Apps / Web開發有極大幫助。


%d 位部落客按了讚: