iT邦幫忙

0

Day 18 (Xd)

1.開啟自己手機的解析度面板

安卓計算:
495ppi-->對應的dpi範圍為480以上-->4x
手機解析度:3040/4 1440/4

蘋果:直接選擇即可


2.下載XD APP,可以直接觀看作品

a.將資料上傳雲端,可以直接看到作品
b.或是按視窗右上角的Play
c.手機插電腦,開APP觀看


3.XD為提案的設計依據(修改、溝通)

http://designmodo.github.io/Flat-UI/


4.目前的設計準則

IOS: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
Android: https://material.io/design
https://material.io/resources

Android較謹慎,故使用


5.漸層色是現在的流行趨勢

https://www.pinterest.com/search/pins/?q=gradient%20ui%20color&rs=typed&term_meta[]=gradient%7Ctyped&term_meta[]=ui%7Ctyped&term_meta[]=color%7Ctyped


6.Pantone 2021 年度代表色「極致灰+亮麗黃」

Pantone在定義顏色
https://www.shoppingdesign.com.tw/post/view/6151
https://www.adaymag.com/2015/12/14/whats-the-representative-colors-of-2016.html


7.與業主溝通顏色

可以用Pantone的選色方法跟業主溝通


8.flat color vs material color

material color 彩度高 --> 採用
flat color 扁平,粉


9.色板製作 (Xd01)

https://material.io/resources/color/#!/?view.left=0&view.right=0

Primary主色調 選700~900(流行趨勢)
Secondary 選A

ACCESSIBILITY可以檢查該顏色使用文字有沒有問題
White Text 大小字 可不可用 or 多少以下不可用
Black Text 大小字 可不可用 or 多少以下不可用


10.把顏色+到資料庫,以後方便使用 (影片Xd01 檔案Dd01)

https://ithelp.ithome.com.tw/upload/images/20210621/20137684YCH9GzBKf9.png


11.Loading製作(網頁直接跑:Time) (影片Xd01 檔案Dd01)

200*200 border:30 Shift

a.點選物件:Object>Path>Outline Stroke
Angular Gradient 讓外圈漸層
https://ithelp.ithome.com.tw/upload/images/20210621/20137684InRi0XO1mz.png

b.圈起來>右鍵>group
把物件組成群組

c.複製一個面板>把物件轉-360度
使其物件統一,不要用新增的

d.選第一個頁面>Prototype>拉頁面(連結到第二頁)>Auto-Animate
https://ithelp.ithome.com.tw/upload/images/20210621/20137684egSh20aImJ.png


12.物件動畫(點一下物件動畫:Tap) (影片Xd01 檔案Dd01)

同上,只是把頁面換選物件
https://ithelp.ithome.com.tw/upload/images/20210621/20137684PWREyFajDX.png


13.圖表 (拉把控制:Drag) (影片Xd01 檔案Dd01)

Repeat Grid>拉相同物件重複,文字亦可使用
右鍵>UnGroup
右鍵>Group
Opacity 透明度
Shift 拉直線、不偏離軌道移動位置

a.鎖圖層,貼上原始的,解散Group,就可以個別調整
https://ithelp.ithome.com.tw/upload/images/20210621/201376848DxWcUalAd.png

b.Prototype>拉把按鈕>Drap>Auto-Animate
https://ithelp.ithome.com.tw/upload/images/20210621/201376849sbW3j4Z5g.png


14.錄影 (Windows) (影片Xd01 檔案Dd01)

Win+G
可以只錄影play頁面
https://ithelp.ithome.com.tw/upload/images/20210621/20137684qJVDFp5uT2.png


15.使用者輸入介面(點一下物件動畫:Tap) (影片Xd02 檔案Dd01)

圖案製作
a.一直點圖型,使其變成路徑
b.有路徑後,點兩下會出現錨點,在點兩下可以拉圓弧
c.錨點可以 Delete

遮罩
a.做一個透明的物件,作為遮罩範圍
透明是為了可以看後面圖案才知道怎麼切
b.把要遮罩的群組起來
c.右鍵>Mask With Shape
https://ithelp.ithome.com.tw/upload/images/20210621/20137684ZvRhqORJqa.png
https://ithelp.ithome.com.tw/upload/images/20210621/20137684BVTlapymA1.png
輸入框的「點」製做
a.拉線
b.畫線
c.縮小剩一個點
d.Prototype>Tap
https://ithelp.ithome.com.tw/upload/images/20210621/201376841aX5DQV8Z6.png


16.斷連結 (影片Xd02 檔案Dd01)

右鍵>Unlike Component
才可變更物件大小,否則她會跟原本的檔案連結而難以控制
https://ithelp.ithome.com.tw/upload/images/20210621/20137684UxPulUjDx6.png
相疊的物件可以從圖層去找


17.flat icon avatar (影片Xd02 檔案Dd01)

https://ithelp.ithome.com.tw/upload/images/20210621/20137684CKmpRs7qeY.png
a.下載外掛:Plugins>Browse Plugins>Search:avatar>下載 UI Faces , User Profile
b.User Profile>選物件>Insert Random Photo使用
https://ithelp.ithome.com.tw/upload/images/20210621/20137684646F1eJB4K.png


18.卷軸轉動 (影片Xd02 檔案Dd01)

a.內容拉長
https://ithelp.ithome.com.tw/upload/images/20210621/20137684U4OZz8fv0R.png
b.不要轉動的物件定住(鎖住):Fix Position Scrolling
https://ithelp.ithome.com.tw/upload/images/20210621/20137684lclSGtQahK.png
c.更改圖層順序


19.搜尋按鈕 (影片Xd02 檔案Dd01)

(1)物件畫好>右鍵>Group>Fix Position Scrolling
群組起來不要定住不要動
(2)Prototype>物件>Tap>Auto-Animate
(3)坐落的位置想更改:點Prototype的線>拉視窗
https://ithelp.ithome.com.tw/upload/images/20210621/20137684XWpUOKQk93.png


20.存檔

a.通常都是傳到雲端
b.要存到本機電腦>File>Save As Local Document..


21.Isometric design

3D但缺少透視
自己畫XD!!
https://icograms.com/designer


22.找框架靈感(下載框架)

File>Get UI Kits FireFrames...
https://www.behance.net/gallery/55462459/Wires-wireframe-kits-for-Adobe-XD
下載:Download kits

Onborarding
介紹、解釋APP的畫面,只會出現一次


23.介紹APP的點點介面 (影片Xd02 檔案Dd01)

(1)放入SVG>調整大小>Responsive Resize
Responsive Resize讓群組物件同時等比例調整
可預覽SVG方法:
https://blog.poychang.net/preview-svg-thumbnails-in-in-windows-explorer/
https://ithelp.ithome.com.tw/upload/images/20210621/20137684fXfe3bG0Cz.png
(2)Prototype>物件>Tap>Transition>Dissolve(淡出)
Slide(推)、Push(覆蓋)
https://ithelp.ithome.com.tw/upload/images/20210621/20137684lonkBw92Kp.png
https://ithelp.ithome.com.tw/upload/images/20210621/20137684wFRgzhRwQC.png


24.Neumorphism.io

https://neumorphism.io/#e0e0e0
UI輸出給網頁用


25.動畫不會動

a.是因為電腦認為他們不是同一個物件
除錯:Ctrl+C Ctrl+V 不要用新增的!
以下可以看是不是同一個物件
https://ithelp.ithome.com.tw/upload/images/20210621/20137684vcULrDIGXC.png

b.或是矩形變成路徑(對著物件點太多下)

c.或是把兩邊的物件或compoent檔名改成一樣的,就可以連結起來


26.快捷鍵

Ctrl+滾輪 縮放
Shift拉直線、不偏離軌道移動位置
空白建 拉畫面


XD每周都在更新。


尚未有邦友留言

立即登入留言