|
界面篇-desing設(shè)計(jì)界面
首先先說(shuō)明下，我是一個(gè)程序員所以請(qǐng)不要在設(shè)計(jì)方面做評(píng)價(jià)。我在這里要講的是如何使用Design這個(gè)工具來(lái)做設(shè)計(jì)。
簡(jiǎn)單的說(shuō)明一下，這是一個(gè)作為案例展示的程序。功能方面設(shè)計(jì)的也比較簡(jiǎn)單。就是類別、項(xiàng)目和項(xiàng)目的簡(jiǎn)介。
ok先看看最終要實(shí)現(xiàn)的效果：
把頁(yè)面中要用到的元件拆解來(lái)一個(gè)一個(gè)制作。
最左邊區(qū)域是要能夠自適應(yīng)高度的。所以用矩形來(lái)做比較方便。
畫一個(gè)矩形，去除邊線。
做一個(gè)線性填充。就能夠出現(xiàn)有一個(gè)亮色邊線的效果。
放大3倍后的效果
下來(lái)制作陰影。同樣還是用矩形。這樣在放到blend中后方便拉伸。
黑色100～0的漸變填充。
把陰影層放到剛才制作的矩形下邊，然后分組到一起。
制作上3個(gè)一個(gè)顏色逐漸加深。放到一起的效果：
loading條就是在剛才制作的上邊放一個(gè)黃色的巨型。然后組合。
下來(lái)制作滾動(dòng)條上下的三角形。
Design這個(gè)工具沒(méi)有直接提供做三角形的工具。如何制作一直角三級(jí)型呢？ 請(qǐng)看下邊的步驟。
先畫一個(gè)正方形。旋轉(zhuǎn)45度。
再制作一個(gè)長(zhǎng)方形放到矩形的正上方。居中對(duì)齊。
然后選擇下減上。
得到
也可以這樣：
這樣就得到了需要的三角形。
下來(lái)看看如何制作 這個(gè)圖形。
這個(gè)其實(shí)用兩個(gè)漸變的直線就可以完成。只是漸變的顏色不同而已。
好了showcase這個(gè)項(xiàng)目中用到的界面都制作出來(lái)了。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 介紹 下一頁(yè) 導(dǎo)出xaml以及放入Blend的技巧
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) desing設(shè)計(jì)界面
