2022-06-18 分類: 網(wǎng)站建設
無論你是在為熱門產(chǎn)品工作的自由設計師,還是在一個大廠的設計團隊干活兒的螺絲釘(開始新項目都是頭疼的)
我是個堅定的信仰者,所以在我們開始之前,我告訴你這個:這篇文章有一部分引用了我自己構建的設計框架,這份指南很有用。
開始設計項目是困難的。
無論你是在為熱門產(chǎn)品工作的自由設計師,還是在一個大廠的設計團隊干活兒的螺絲釘(開始新項目都是頭疼的)。/嚇哭了/
我在一家設計公司工作,每個月都簽新客戶。我的非官方頭銜就像是【產(chǎn)品概念設計師 】這基本就意味著每次我們要開始一個新客戶,我都得到了令人興奮的創(chuàng)造未來概念圖的工作,可能在下一年(或者兩年、三年)幫助啟發(fā)他們的產(chǎn)品路線。
這些概念時間卡得都很緊,并且需要快速運轉,所以我整個身心都圍繞著效率和準確率; 我的展示圖必須解決問題,提供全新的視角,并能優(yōu)雅的平穩(wěn)過渡到產(chǎn)品設計階段。
至少我可以說,我已經(jīng)變得非常高效,我想其他的設計師看到我如何開始一個新項目也許能發(fā)現(xiàn)些益處。
注意:我不會教你做/整道菜/…只是告訴你怎么切碎食材和如何點著爐子
目錄 / 刪減版
1.創(chuàng)建文件夾(嗯,真的?)
2.選擇顏色
3.選擇字體
4.配置網(wǎng)格
5.構建“塊面框架”
6.做成高保真
為什么: 確保我的設計文件和導出資源有條理!
用到的工具: Finder + Automation
如果你開場沒有走對,你就會在整條路上跑偏。我的文件夾結構幫我保持條理,并給了我與多方(市場,開發(fā)等等)共享設計資源的方法。
我添加了一個 _ 下劃線,來確保這些文件夾都在列表的頂部。
· _assets: 這個文件夾通常與內(nèi)部/外部的開發(fā)團隊共享。它包含了他們做APP會用到的所有東西.(占位圖像/內(nèi)容,字體,icons,圖片和Logo)
·_exports: 任何時候,我把界面導出的PNG都放在這個文件夾里。 這個文件夾是與市場營銷團隊共享的,所以他們總是能獲得最新的界面截圖,放入各種營銷材料(物料,網(wǎng)頁,社交媒體)
·_ui-design: 這些是我的源文件。通常只有一個文件,但是如果我創(chuàng)建的個新的,它們也會存在這里。
為什么: 為我們的設計項目創(chuàng)建一個基本的設計色板。
用到的工具: coolors.co
選擇顏色是我們最簡單的開始方式。如果你是在一個現(xiàn)有的設計系統(tǒng)中工作,它們可能已經(jīng)有了。如果是這種情況,去問市場營銷或者做視覺設計師吧。
我的設計系統(tǒng)一般都建立5個主色:
· 主品牌色
· 黑色
· 色調1(成功)
· 色調2 (警告)
· 色調3 (危險)
為什么是這些顏色呢?(可以下面評論留言噢。)
我用了一個Fabrizio Bianchi 出的叫 COOLORS 的APP來幫我建立色板。敲一下空格鍵,它就會幫你隨機選些顏色。當你發(fā)現(xiàn)你喜歡的顏色,就把它鎖住,然后繼續(xù)創(chuàng)建顏色,直到你發(fā)現(xiàn)你的其他顏色。如果你已經(jīng)確定了主品牌色,你可以把顏色的HEX色值輸進去,把那個顏色鎖住,然后敲空格來獲得其他的顏色。
看見那個好看的”成功”色了嗎?繼續(xù),知道你找全了5個主色。(看色板)
一旦我確定了我的主要顏色,我就把它們插入我的sketch設計模板文件中,這個模板文件的圖層樣式我已經(jīng)做好了,所以我只需要更新一下我剛剛生成的顏色:
我的模板也有一套“輔助色”,但是我不經(jīng)常需要它。
為什么: 讓我的APP有些性格!
用到的工具: Google Fonts 和 Font Pair
對于設計字體與顏色一樣重要,因此請花一些時間挑選一個正確的。 因為你正在設計一個供人們使用的應用程序,所以選擇一個好的字體是非常重要的。
嘿 囧(john),在app設計中,一個好的字體是什么標準?
嘿,你能問我很高興。我在選字體的時候經(jīng)常自己問自己這些問題。
去年Google Fonts更新他們的界面,Google有四種顏色組合可以選擇,交互操作更加舒服,因為我總喜歡白黑環(huán)境進行切換測試我選擇的字體的易用性與可用性。
右側面板中的設置是我喜歡的UI
如果你喜歡多字體樣式,一個給標題,一個給內(nèi)容——那你就得去挖一挖 Font Pair。他們?yōu)槟阕隽诵量嗟墓ぷ鳎⑶艺故窘o你看。在一行內(nèi),哪兩個字體看起來就像彼此相鄰一樣(哪兩個字體看起來就像青梅竹馬一樣)。它讓選一對看起來很好的字體變得很簡單。并且,它的所以字體都源于谷歌字體庫,所以你不用擔心需要支付任何東西。
始終記得測試字體的字母,數(shù)字和標點符號。有時你會發(fā)現(xiàn)一套漂亮的字體有一個詭異的“9”或一個詭異的感嘆號。 當你已經(jīng)在24個界面深入運用到你的設計中時,你不想遇到這種詭異的。
一旦你選擇了字體,就可以在Sketch中創(chuàng)建文本樣式,例如標題,正文內(nèi)容和鏈接。 除非將文本綁定到文本樣式,否則不要向設計中添加文本。 之后如果你決定更改字體并擁有“未分配”文本,那么在同步更改字體時,它們將不會更新。
為什么: 在整個APP中建立對齊一致性。
用到的工具:sketch 和一個計算器
把網(wǎng)格建立成8的倍數(shù)是相當普遍的。
為什么是8?
事實證明,最流行的屏幕分辨率都可以被8整除。在下表中,測試了寬度和高度是否可以被8px均分:
·全寬布局(通欄設計): 全寬布局通欄設計APP是頂邊的。 如果它是一個網(wǎng)頁APP,你的設計將拉伸到瀏覽器的邊緣。
我喜歡設置我的gutter至少24像素。 在這種情況下,gutter可以被8整除,但是column不能。但是沒什么大不了的。
·浮動布局: 浮動布局APP會貼在固定寬度的網(wǎng)格上,通常位于窗口中央。
對于浮動APP,我喜歡我的gutter和column都可以被8整除。這里有一個簡單的公式:
(12 columns * 寬)+ (11 gutters * 寬)= 布局總寬
·混合布局: 混合布局APP是全寬布局和浮動布局的混合。 Medium 的網(wǎng)站就是混合布局,因為頂部標題是通欄,但內(nèi)容區(qū)域固定為740px。
這個布局是具有一些通欄元素的浮動布局。
最后一點。 Sketch中的默認Shift +→距離為10px。當你在一個8px網(wǎng)格中工作的時候,這真是超級煩人。 幸運的是,Anthony Collurafici做了一個名為Nudg.it的app,讓你來改變它,目前在sketch里的plugin中直接可以下載噢。
為什么: 在應用布局和UX交互流上可以快速迭代。
用到的工具:好吧...矩形工具。
在我進入線框模式之前,我喜歡構建我所謂的“塊面框架”來建立我的頁面布局的各個區(qū)域。 這里的思路是開始感受熟悉你剛剛定義的網(wǎng)格,并快速的把頁面的最重要的部分分隔出來。
這是我設計聊天APP建立的塊面框架:
這一步大概只花我了90秒,但這將是我開始設計頁面的所有引導。我更喜歡做這個全面的線框圖,因為當我嘗試在線框里設計界面上的元素時,我總是不知不覺的摳進了高保真細節(jié)。或許我是個壞設計師?我只是見到了很多詳細的線框圖,也許你會想一次就把它們做到高保真的程度吧。
這只是我的意見!
基本就是在這個階段,我用塊面框架來確保所有的交互都能帶來積極的用戶體驗。
我不想讓你看到這樣的東西…
但是接下來就是你見證奇跡的時刻!
在高保真的設計階段,最重要的一件事就是堅持我們在1~5步中設置的一切:
文章標題:如何搭建設計app項目
瀏覽路徑:http://m.rwnh.cn/news36/168886.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供域名注冊、微信公眾號、標簽優(yōu)化、手機網(wǎng)站建設、App設計、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容