<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 首頁

    字體用的好,感覺不會少!

    濤濤

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


    在設計中,字體的樣式往往起到輔助文案傳遞的作用,所以如何在不同的設計風格中用好字體尤為重要。字體如果用得好,在設計中常常會給讀者所需要的感覺,這里我們例舉幾種常見的感覺:


    目錄

    1.「注」入重量感

    2.「空」出高級感

    3.「圓」有親近感

    4.「裝」出華麗感

    5.「質」換畫面感

    6.「寫」出文藝感

    Image title

    一.「注」入重量感

    突出重量感是大多數設計師常用的技巧,在設計中,為了提高文案或者標題的視覺層級,很多設計師往往會從字體的重量感進行思考,給字體注入內容往往能加大字體視覺重量,字體的重量感也就是版面中的“存在感”,“存在感”一旦提高,視覺層級也伴隨著提高。


    一般我們在突出字體重量感的方法上常常會選擇線條較粗的字體、加大描邊或者設計成立體字來突出“重量”,甚至可以縮小字體間距,營造緊張的感覺,使文字更具“重量"。另外在顏色上,黑色物品相對于淺色物品在視覺上顯得更重,這一點在字體上也同樣適用的。

    Image title

    二.「空」出高級感

    字體的高級感一般體現在品等產品的設計上,利用大量的留白,在字體的顏色上盡量選擇近乎無彩色如灰色,做到簡潔大方、少即是多。而在字體類型的選擇上,襯線體往往比非襯線體更具有格調,宋體往往比黑體更加高雅,利用傳統字體也能給讀者一種信賴感。


    看到這里也許有人會說:“從用戶體驗角度思考應該使用非襯線體,因為其更易讀、字形更簡潔。”而在《設計師要懂心理學》一書中表明研究發現:常規的襯線體和非襯線體兩者在理解難易度、閱讀速度和使用傾向并無差異。

    Image title

    三.「圓」有親近感

    字體所展示出的親近感主要體現在于字體端角的圓滑上,先從生活常見的例子講起,在人類的常識里尖銳的物品往往會給人冰冷、危險和難以靠近的感覺,而圓滑的東西往往讓人有親近感,更利于吸引讀者接近。這里最形象的例子要數按鈕和圖標的演變,按鈕和圖標的設計從直角到圓角的演變,其中不乏也有以上原因。


    在突出親近感時,圓角類型的字體所表達的感覺如果還不夠強烈,這里不妨可以選用較粗的線條字體再加上暖色系的顏色,這樣親近感就更加強烈了。

    Image title

    四.「裝」出華麗感

    一般文字是用于閱讀,而為了博人眼球,設計師也慢慢讓文字字體有了裝飾,利用線條的不規則粗細來突出文字的“美”,從而體現出華麗感,華麗感較強的字體大多數用于女性品牌的產品,裝飾性高的文字,不僅引人注目的效果,還能強調了產品的“貴”。要注意的是修飾性的文字不利于閱讀,不適合大量文字,容易視覺疲勞。

    Image title

    五.「質」換畫面感

    材質感的字體往往用在游戲的設計上比較多,將武器或游戲場景等有質感的東西貼在字體上,間接展示游戲場景、風格等。因此,運用材質的字體往往更具有畫面感,從而影響讀者視覺對大腦的影響,產生了身臨其境的感覺,于是在腦海中留下對產品認知。


    質感的字體往往容易讓人感覺到“力量”,這也和第一點注入內容說法一樣。

    Image title

    六.「寫」出文藝感

    手寫的字體,會讓讀者感覺到手的溫暖與膚觸的溫柔,這里被利用到的應該算淘寶商家的感謝信了,利用牛皮紙加上手寫字體,可謂是為了好評誠意滿滿。


    手寫的字體還常常與手繪貼圖一起出現在手帳本,或可愛優雅、或呆萌粗線條;另外,你或許還能在文藝菜單上看到它,樸實無華卻清晰溫暖,文藝感十足。

    Image title

    后言 

    沒有最好的字體,只有合適的字體,字體的難度并不在于設計和選擇上,而是在于你選擇或設計的字體給讀者的感覺是否符合產品所想表達的亦或是讀者所需要的。


    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計  ipad界面設計  包裝設計  圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務

     

    頁面跳轉方式,如何設計更合理?

    濤濤

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    常見的頁面跳轉方式有直接跳轉、左右跳轉、上下跳轉等,再設計時需要考慮好其中的關聯性,給出最符合用戶心理預期的過渡方式,從而做出最合適的設計。

    頁面跳轉在APP中屬于最常見,也是最基礎的一個交互細節點。

    我們常見的跳轉方式:直接跳轉、左右跳轉、上下跳轉、翻轉、聯動;其它酷炫的效果我們看過很多,但是現實中能做到的又有幾個呢?

    先講一下:視覺順序

    首先我們看一下,我們的視覺順序「閱讀順序」是:左→右,上→下。因此延伸出目前APP最常見的兩種頁面跳轉方式:左右跳轉,上下跳轉。

    直接跳轉

    最原始、最簡單的跳轉方式,web端常見,在APP中出現較少,標簽切換常見,這個比較簡單,沒什么講的。

    常用于快速開發,Android中常用。

    實現難度:無;

    維護成本:無。

    左右跳轉

    最常見的跳轉方式。(ios原生效果)

    實現難度:簡單 ;

    維護成本:低;

    運用場景:夫級→子級→子子級,依次類推。

    常用場景:

    1. 對應功能的展開:常以導航形式的存在,如美團首頁的美食、電影、住店等分流入口。
    2. 對于內容的展開:如聊天列表>聊天窗;文章列表>到文章詳情。
    3. 對于活動廣告的展開:banner圖廣告、彈窗廣告等,比較常見。

    這里有個細節要注意,就是我們的返回鍵在左上角,也就養成了用戶一種習慣,左上角的鍵,與點擊之后的效果,往往就應該是頁面從右側退出的樣子,與進入時反向的效果。

    這也是為什么大部分APP不會把入口按鈕放在左上角的原因。

    那么左上角這個位置,除了給返回鍵當做固有的位置外。還常常用于抽屜式導航,因為抽屜式導航的方向,與返回時的移動方向是一致的。常見抽屜式導航APP如:滴滴打車、摩拜單車等。

    上下跳轉

    相對于左右跳轉,上下跳轉就比較難理解了。

    實現難度:簡單 ;

    維護成本:低。

    這種跳轉方式也很常見,但是大部分人不清楚什么時候用,這里我們簡單分析下。

    運用場景:

    1. 對當前頁面創建新的條目時;

    2. 獨立啟動的一個子內容。(如小程序:微信/支付寶等)

    比如我們在微信聊天頁,發起一個聊天的時候:

    還有我們新添加群人員時,新建筆記本時,新建地址時等。

    我們用微信聊天頁面在舉例:點擊+號離的內容時:圖片、拍照、位置、紅包、收藏等,都是采用下到上的方式呈現,因為這些創建都是對當前聊天窗口一次性產生內容。(大家可以去感受一下這些細節)

    下面我們看下百度的設置>地址管理>添加地址左右>左右>上下

    翻轉

    實現難度:中等;

    維護成本:低;

    運用場景:完全切換內容,換到一個全新的內容集合里。

    常見的有平安好醫生中間的按鈕,一級大姨媽APP中間的商城。

    聯動性

    實現難度:高 ;

    維護成本:高;

    運用場景:元素之間從上級到下級關聯性強。

    如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內APP很少有這種聯動效果,因為一旦頁面結構改變,整個效果基本無法復用。

    類似于這種強聯動,我們會在很多概念設計稿中看到,但是在實際的APP是很少見到的。因為開發成本/維護成本都很高。

    搜索頁面打開

    這里強調一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口,另一種是搜索框做入口。

    icon做入口:更像是上下級關系,常用左右跳轉來實現。比如:抖音。

    搜索框做入口:點擊就給與獲取光標的感知,所已做好做簡單的聯動過渡效果。比如:微信、云音樂。

    其它方式

    關于其它方式,基本上只有極個別的APP中可以看到。

    其它的方式,要結合實際的情況來考究。一定要注意關聯性。比如微信新出的浮動展開效果,因為元素要浮動,為了更加貼合所以有了收縮的效果。

    結語

    形式上其實就是上下左右內外。考慮好之間的關聯性,給出最符合用戶心理預期的過渡方式,就可以幫助我們找到最合適的設計。

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計  ipad界面設計  包裝設計  圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務

    為人設計,請說人話

    濤濤

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    UXRen

    打造有價值產品的首要規則是,它應該對某些人有真正的使用價值。也就是說,一個真實的人(或許多個人)會因為你的工作而解決了某些問題或實現了某些需求。

    這個道理是顯而易見的,但是,如果你去聽一聽這些產品設計們的日常用語,就會發現,在日常生活中,我們不常這樣說。

    反而,在語言交流中,設計師經常會“走捷徑”。有時會直接使用行業語言或專家術語來提高表達度,但大多數情況都是為了避免廢話。

    舉例來講:

    • 我們要如何增加用戶對這種功能的使用?
    • 為什么這兩方面看起來不夠統一?
    • 這里的點擊率這么低,可能我們太過強調了。
    • 我感覺這里干擾信息太多了,要怎么解決這個問題?
    • 這個設計需要更多“呼吸空間(留白)”。
    • 我們應該將這點設計地更簡潔一些。
    • 這一指標需要提升,現在的曲線走向并不理想。

    想象一下,當用戶聽這些話時,他們能相信我們的最終目的是為他們創造價值嗎?

    當然,我們在使用語言捷徑時,其實是在把我們腦海中的各個點連接起來,這種基于對內容的理解,在腦海中將一個概念與另一個概念聯系起來的思考方式——就像是火車在有序的系統中飛馳而過,直到停留在人們期待的站臺上一樣。

    但在實際交流中,有可能出現兩種完全預料不到的結果:

    第一種情況是,當與一個認知和你不太一致的人交流時,你認為重要的事情,對方有可能完不理解為什么這樣。

    比如說,作為一個設計師,當我說“為什么這些東西不一致”的時候,我自己的邏輯是這樣的:

    不夠一致=> 這些東西雖然看起來很像,但當點擊的時候,可能有人會選A,也有人會選B=>這就會使用戶困惑,并且影響他們從我們構建的內容中獲得最大的價值。

    其他精通設計語言的人,一般而言都會跟我一樣的思考問題。比如,讓東西“簡潔”其實是指讓它專注于最重要的點,以便人們能一眼就知道如何使用它。讓界面“可以呼吸”則是指讓人們在閱讀或者瀏覽時能更輕松愉悅。

    但如果你并沒有建立這些認知連接,你可能會不解:一致性、簡潔性和可呼吸空間為什么這么重要呢,這些價值觀看起來是不是有點隨意?而且這些疑惑有可能是對的,為了一致性而保持一致也許并沒有必要。如果這世上沒有人會對兩個看起來相似但反應不同的事物感到困惑的話(假設開發成本投入不算很大的話),那么這不會是一個問題。

    許多工程師和產品經理跟我講過,關于“一致性”的討論經常意見很難統一,但當我說“目標是讓用戶感覺沒有困惑”時,爭議就不存在了。

    使用“語言捷徑”的第二個意想不到的后果是,我們有可能會忽視真正的最終目標。你看待問題的方式和角度會更多地從公司出發而不是用戶真正面臨的問題。

    舉個例子,我們要如何提高這一功能的使用率?這可能并不是任何一個你的用戶會關心的問題,在討論這一問題的時候,你有可能會開始從公司角度思考解決方案,比如讓功能更顯眼,不斷提醒用戶這一功能的存在等。

    但其實這些做法只有在強調的功能的確很重要的時候,才會起作用。但如果這一功能的使用率本來就低,那么更有可能說明這一功能對用戶而言沒那么重要。如果你沒有真正以人為中心來思考問題,很難發現這一點。

    歸根結底,雖然語言只是一個小的方面,但我相信它是非常重要的。多關注一點在工作時使用的談話方式,如果你是為人設計的,那么請用人們更熟悉的語言。

    舉例來講:

    • 我們要如何增加用戶對這個功能的使用?=> 是什么讓這個功能對人們更有價值?
    • 為什么這兩方面不夠統一?=> 讓我們確保,用戶不會因為這兩個看起來相似但有不一樣功能的東西而感到困惑。
    • 點擊率真的很低,可能是因為強調得不夠。=> 人們可能會意識不到這個功能的存在,因為這實在太容易被忽略了。
    • 我們發現很多用戶流失,我們該怎么辦?=> 那些試用過我們產品的用戶不會再回購,為什么會這樣呢?
    • 這個設計需要更多的呼吸空間。=> 用戶閱讀瀏覽信息的體驗應該更輕松、愉悅。
    • 我們應該將這點設計地更簡潔一些。=> 用戶應該能在第一眼就注意到最重要的信息,并知道他們應該做什么。不該用過多的選擇給用戶壓力。
    • 這一指標需要提升,現在的曲線看起來并不理想。=> 我們的產品還沒能讓用戶覺得足夠有用,從而進一步回購,所以我們應該提升我們所提供的價值。
    • 藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計  ipad界面設計  包裝設計  圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務


    百度行業首發《2019.AI人機交互趨勢研究報告》

    濤濤

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    人工智能已經成為新一輪科技革命和產業變革的核心驅動力,正在對世界經濟、社會進步和人類生活產生極其深刻的影響。其中,普羅大眾對人工智能感知最為深切的當屬人機交互。語音交互、人臉識別等人工智能技術已經化為應用產品走進了我們的生活。近日,百度人工智能交互設計院發布了一份聚焦于未來3年內的AI人機交互趨勢研究報告(以下簡稱“《報告》”)。


    該報告是百度人工智能交互設計院基于過去一年多對AI領域前沿技術、產品和設計的深入研究和洞察,結合產業界和學術界的經驗探析而來。AI賦能的人機交互革新了大眾的生活形態,未來,AI加持的人機交互模式又會呈現出什么樣的態勢呢?


    《報告》從“人機交互介質”、“交互對象”、“AI應用場景”、“人機關系”等方面總結了AI人機交互的八大趨勢。


    趨勢一:語音交互技術進步,更趨向人類自然對話體驗


    研究公司Ovum預測稱,到2021年,地球上的語音助手的數量會和人類一樣多,人們會越來越傾向于向語音助手尋求情感上的幫助。在AI人機交互中,語音交互技術在用戶終端上的覆蓋最為廣泛。


    以智能音箱為例,有數據顯示,2018年全球智能音箱市場同比增長200%。其中,中國智能音箱市場增速達到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業均加速了用語音交互技術開啟大眾智能生活的步伐。截止2018年12月31日,搭載百度對話式人工智能操作系統DuerOS的智能設備激活量也已超2億。


    目前,語音交互技術已經加速在智能家居、手機、車載、智能穿戴、機器人等行業的滲透和落地。《報告》指出,未來隨著語音技術的不斷完善,語音交互的自然度將進一步提升,并愈加趨向人類自然對話的體驗。具體表現為:語音交互將從機械的單輪對話進階到更流暢的多輪對話;合成語音更自然、真實,接近真人水平;語音交互具備聽覺選擇能力,提升多人對話體驗;語音交互將支持多種方言,并針對細分群體進行差異化設計。



    趨勢二:人臉、手勢等通道更多出現在產品中,多通道融合交互成為主流交互形式


    媒介學家雷吉斯·德布雷(Régis Debray)曾提出:“技術能實現不同區域里不同文化的人之間的連接”。隨著技術的發展,人與人之間的連接早已不成問題。當前,AI技術更是拓展了人與智能體交互的通道。除語音交互外,計算機視覺技術的發展已使得智能體實現了通過識別人臉、指紋、面部表情、肢體動作等人體信息,而更加快捷多元地與人類進行交互。但是不同的交互通道在有其獨特優勢和場景適用性外,也有一定的局限性。


    《報告》認為,未來,人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式,為人類打開更多的交互空間和應用場景。具體表現為:人臉檢測及識別聚集更細維度的面部特征,拓展更多的交互空間和場景;空中手勢交互將成為新熱點;觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道;生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。



    趨勢三:智能體開始擁有明確的人設


    近期,明星“人設”崩塌已成大家茶余飯后的熱門話題。但是你想過,智能體也將擁有明確的“人設”么?《報告》認為,未來,用戶可以更加明顯地感知到智能體鮮活的“人設”。


    所謂智能體的“人設”是指,用戶在與智能體的互動過程中,根據感知到的綜合特征推斷出一種具有一致性的角色形象,一般由性格(如外向、善良等)、關系(如助手、朋友等)和基本屬性(如性別、年齡等)構成。《報告》指出,目前,智能體人設的設計和表達主要聚焦在語音(如音色、語調等)和語言層面(如表達方式),并且通常局限在部分場景、部分話術上,缺少一致性和全局感。


    《報告》提出,未來,智能體人設將從語音、產品外觀、虛擬形象等多維度進行設計,甚至聘用編劇設計具有統一形象特點的話術,利用混合現實(MR)、全息投影等技術將人設具象化,讓用戶在不同場景下均感受到智能體一致、明顯的人設特征。換句話說,未來,智能體的人設會具有很明顯的特征,但不會輕易崩塌。


    此外,《報告》還認為,打造用戶喜愛的人設也將成為企業在市場競爭中形成差異化、吸引更多用戶的重要方式。



    趨勢四:智能體在被動交互外,開始出現主動交互行為


    技術的發展雖然革新了我們的生活方式,但是長久以來,人機交互一直延續著人類“輸入”,機器“反饋”的循環模式,人類始終是主動的,機器始終是被動的。


    《報告》認為,人工智能賦予了機器情境感知和自主認知能力,使我們有機會構建機器主動服務于人的交互模型。智能體出現主動交互行為的具體表現為:主動交互越來越“貼心”;主動交互在“家”和“車”的場景下率先商用落地;主動交互將提升公共場景下人機協同的效率。



    趨勢五:智能體開始擁有情感判斷及反饋智能


    2014年在北美上映的動畫片《超能陸戰隊》中的機器人大白,以對主人公關懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機器人。令人欣喜的是,具有情感判斷和應對能力的智能體正逐漸成為現實。


    過去20年,在人機交互中,機器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現的如情感陪護機器人、智能音箱、智能汽車等已經初步具備一些情感識別能力,可以根據不同的場景、對象,進行適當的情感交互。


    《報告》指出,未來,情感計算技術的提升及硬件升級將賦予智能體在“視”“聽”等方面更強的情感識別能力;同時智能體對于人類思維理解、情景理解能力也將更加完善,情感交互能力將更智能、更體貼。



    趨勢六:AI對特定人群的關懷得到快速發展和應用


    人機交互的發展為兒童、老人、殘障人士等群體更便捷地利用機器獲得服務,提供了充分可能。當前市面上已經出現大量針對兒童教育的AI產品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動需求,特別開發了兒童語音識別引擎,并定制兒童語音播報音色及對話邏輯,陪伴兒童一起成長。在養老領域,為老人提供陪聊、提醒等陪護服務的智能產品也被AI企業提上了日程。此外,少數AI產品也開始專注殘障、病患等更加細分的人群,如2018年11月,百度推出了AI眼底篩查一體機,幫助患者快速篩查眼底疾病,為基層醫療帶去了極大的便利。


    《報告》提出,未來,AI對人類的關懷將得到快速發展和應用,覆蓋更加細分的人群和更深入的場景。為兒童,AI將從易于交互到提供心智陪伴的服務;為老人,AI將縮小他們與科技的鴻溝,助推他們開啟品質生活;為感官殘障人士,AI將幫助他們重獲對世界的立體感知;為特殊疾病人群,AI將提供預測、診斷和康復服務。



    趨勢七:智能設備互聯互通,多場景銜接


    以BAT為首的互聯網企業,在2018年紛紛調整組織架構,轉向To B。巨頭重提產業互聯網戰略成為當前市場新現象。此現象背后,正是AI、5G、云計算等新興技術的發展與升級。2018年的政府工作報告,進一步強調了“產業升級的人工智能應用”。“產業化”和“應用化”成為未來幾年人工智能的兩大發展方向。


    《報告》指出,隨著AI技術的進一步成熟和落地,及其與大數據、IoT的結合,AI將從單品智能、獨立場景到互聯智能,場景融合進階。智能設備將互聯互通,場景將進一步融合,實現多場景銜接;VR/AR將促進線上和線下、虛擬和現實的聯結,未來,VR會加速拓展到更多的產業和實體,AR中的現實與虛擬將從簡單疊加到有機融合,實現用戶可以源自自然意識進行人機互動。



    趨勢八:人機開始走向深度協同,信任構建成為首要突破點


    2018年6月,百度研究院發布并開源“神經條件隨機場”的AI算法。該算法擁有強大的腫瘤病理切片檢測能力,可以大幅提升醫生閱讀病理切皮的效率和準確率。人機協同即,通過人工智能增強人類智能,讓人工智能成為人類智能的自然延伸和擴展。


    目前,人機協同已在工業領域初步實現,而隨著智能體從工業生產領域向商業服務、社會服務和家居服務領域拓展,人機將走向深度協同。《報告》認為,人機深度協同可以最大化發揮雙方優勢,實現合作共贏。


    而人們對AI的信任,是智能體全面進入人類工作和生活,實現真正人機協同的前提。即,信任構建成為了實現人機深度協同的首要突破點。與此同時,AI倫理道德將更加細化,成為所有從業者需遵守的行業準繩。AI行業的發展在帶給大眾便利生活之時,避免算法歧視、保護人類隱私、尊重人類價值等也變成了從業者們亟需重視的問題。


    最后,《報告》指出,AI時代的人因工程是一個真正的系統工程。而每個人機交互行業的從業者都需要擁有AI思維。最重要的是,中國的人機交互設計和研究者們將首次和發達國家站在同一起跑線上,我們有機會去定義這些體驗標準,而不再是追隨或遵守。


    AI時代大門緩緩開啟,屬于中國和中國企業引領世界前沿的新時機已到來。

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計  ipad界面設計  包裝設計  圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務

    構建設計師和程序員的共同語言

    鶴鶴

    從控件封裝、布局說明、標注語言三個方面,指導設計協同開發,共同建立項目框架和控件庫,規范設計方式和開發方式。

    undefined


    設計師拿到開發剛寫好的頁面時,往往會眉頭一皺,這跟自己的設計稿差別有點大啊。在設計走查的時候才發現,幾乎每個頁面都有大大小小的問題。從顏色樣式到按鈕組件、從元素尺寸到界面布局,都多多少少存在偏差。開發一般情況都是在完成功能開發后,才對頁面視覺進行統一優化,但是無奈需要優化的地方太多太分散,成倍地增加了工作量。


    那么能否制定一套協作方案,把固定的、通用的和可復用的元素或組件封裝起來,運用在項目初期設計和開發的工作流程中。從而統一地把控設計項目中的所有可變元素,方便設計師和開發在項目中后期做各種改動,同時也利于項目的迭代升級呢?


    這里我做了以下思考,歡迎大家一起來交流探討。



    /目錄

    一、寫在前面

    二、控件封裝

    三、布局規范

    四、標注語言

    五、總結



    一、寫在前面

    UI設計要有組件化、模塊化、結構化的思維。以各平臺設計規范為基礎,從控件封裝、布局規范和標注語言三個方面,構建一套設計師和開發之間的共同語言。



    /文字&文本


    在封裝前我們先定義一下設計中最常用到的元素——文字。文字在UI界面中幾乎撐起了絕大部分內容,它的功能包括但不限于標題導航、內容構建、說明解釋、標簽示意等等。把文字跟圖標、背景等元素組合起來的時候,在界面中形成了更明確的意符


    (一)換行規則

    文字在界面中的顯示方式可分為標簽、短文本、長文本三種。標簽和短文本一般情況下不換行顯示、如在特殊情況下會超過一行,則使用省略號顯示。長文本特指會換行顯示的文本。




    (二)行高設定

    各系統平臺都有自己默認的字體行高規則,但是這些行高規則并不統一,比如iOS的字體行高對照表如下:

    來源見水印


    而且默認的行高在展示長文本(多行顯示)時,效果并不一定理想,甚至可能會很丑陋。所以我們需要制定統一的標準來規范各平臺的字體設計和開發規則。


    解決方案:對于標簽和短文本默認設定1倍行高,長文本根據文本內容和字號大小來設定行高,以達到最佳閱讀效果。

    undefined

    行高設定



    (三)視覺間距

    規范短文本行高,確保視覺間距等于實際標注間距,才能保證開發準確還原界面布局。

    undefined

    視覺間距示意圖




    /特殊情況

    有些控件的文本長度在少數特殊情況下會換行顯示,為了簡化適配過程,我們可以直接使用長文本來設計。

    (一)Toast



    (二)橫幅





    /圖標&切圖


    圖標在某些場景下可以無需文字說明,更直觀簡潔地表達含義。設計同一類圖標時應該保持視覺效果統一,視覺尺寸可以通過使用模板來進行規范。

    undefined

    圖標設計模版



    為了保證同一組圖標的影響范圍相同,我們在設計圖標時首先設定視覺安全區域,然后加入透明度為1%的背景作為影響范圍圖層。切圖時需把影響范圍圖層包含進去,不僅便于設計師規范所有圖標的尺寸大小,也方便開發直觀獲取到圖標的實際切圖大小。


    圖標設計示例




    二、控件封裝

    利用組件化的思維,將可重復利用的元素或者控件打包成固定的模版,稱之為封裝。

    這里設計師可以使用Sketch的文字、圖層、組件封裝功能,構建可協作、方便維護、完整的控件庫。程序員在構建項目框架時,也應對每一個元素進行可復用性封裝。


    (一)封裝基礎顏色

    基礎顏色有主色、輔色、強調色、中性色(灰色)、功能色(成功、失敗、警告、不可點)等。


    在sketch中,新建一個圖層,設定好圖層樣式,點擊新建圖層樣式完成封裝。封裝樣式按固定格式“類別/編號+顏色”來命名,其中“/”可以自動識別為列表層級。

    顏色封裝




    (二)封裝常用字體

    每個項目都應該設定常用字體庫,例:導航標題、文章標題、正文、說明、鏈接等等。


    在sketch中,新建一個文本,設定好文本樣式,點擊新建文本樣式完成封裝。封裝樣式按固定格式“主類別/二級類別/顏色”來命名,其中“/”可以自動識別為列表層級。


    字體封裝



    (三)封裝圖標

    APP項目中的圖標大小一般設定為20px、24px、28px、32px、44px等。


    在sketch中,新建圖標影響范圍圖層,設定安全區域,畫好圖標后點擊新建symbol按鈕。封裝的圖標按固定格式“范圍/具體位置/名稱”來命名,其中“/”可以自動識別為列表層級。


    圖標封裝



    (四)封裝按鈕

    按鈕一般情況下有兩種適配方案,第一種固定邊距,第二種固定尺寸。封裝時結合Dynamic Button 3.5插件,可以動態制作同類型按鈕。


    在sketch中,利用已封裝好的字體和顏色來組合成按鈕的文本和背景,文本命名格式為“上邊距:右邊距:下邊距:左邊距”,如果上下和左右邊距并分別相同,則只需要給出上邊距和右邊距的數值。如“10:20”。按鈕背景命名為BG,設定為已封裝的顏色。執行一次“?+J”的操作,關聯文字和背景,然后將兩者用symbol封裝。


    封裝后取消Dynamic group編組




    由于按鈕大小會根據內容文字長度而改變,因此需設定合理的適配規則。


    固定文本左上邊距和高度



    固定背景的高度



    (五)統一維護

    基礎元素樣式可以放在一個畫布上進行統一管理。

    undefined

    顏色和字體可以統一管理





    三、布局規范

    利用模塊化思維進行布局,將由已封裝的組件構成的功能區編組成一個模塊,模塊可以自由排列組合,增加或刪除。


    (一)基本框架

    界面布局應遵循各平臺基礎設計規范,iOS和安卓的基本框架不能混用。

    undefined

    安卓&iOS對比圖



    /開發規范

    制作高保真設計稿時我們統一使用iOS設備的750*1334分辨率,對應Android的720*1280分辨率。無需新出一套設計稿。


    iOS和Android設備在設計和開發時應該注意的差異,基于1倍標注

    /視覺上

    a. iOS狀態欄20pt,Android狀態欄25pd

    b. iOS導航欄44pt,Android導航欄48pd

    c. iOS菜單欄49pt,Android菜單欄48pd


    /交互上

    a.  Andriod有物理返回按鈕,點擊控制返回上一步操作,而不僅僅返回上一個頁面;iOS沒有實體返回按鈕,導航欄的back按鈕控制返回應用內的上一層頁面。因此在設計時每個頁面都應該有明確的返回或關閉按鈕

    b. 導航標題的位置iOS居中顯示,Android靠左

    c. 安卓對列表操作欄的處理為長按,iOS為左滑。實際處理的時候可以分開設計,也可以設計成統一的操作方式



    (三)模塊化布局

    模塊化布局對于設計師來說可以使頁面功能和信息分布清晰明了,對于開發來說也更利于進行頁面布局。


    undefined

    例一:主界面


    undefined

    例二:內容頁





    四、標注語言

    利用sketch插件導出可自助查看標注的html文件,標注文件無需手動生成,也不會對設計稿造成遮擋。但是開發要花更多精力去對每一個元素的樣式、間距進行點擊查看,相比之前直觀的標注,增加了閱讀成本。


    為此我們設計一套標注方案,可以通過少量標注,提供準確的多界面適配信息。標注規則是對由適配不同屏幕造成歧義的地方做針對性地標注說明。


    (一)固定框架

    在設計界面時,首先設定界面的固定框架結構,如頁面內容區的安全邊距。


    undefined

    全局界面安全邊距設定


    /模塊外間距設定

    多個模塊之間的間距設定

    undefined

    模塊間距設定,一般情況下可以不做標注



    /模塊內安全區域

    模塊內部組件和元素的影響范圍

    undefined

    模塊內安全區域標注




    (二)基本標注類型

    規范好界面的布局和模塊的構建方式后,針對模塊或者組件在適配過程中會變動的部分,或者固定不變的部分,特別標注說明。其余沒特別標注的部分按照默認標注尺寸來布局。


    /固定高

    undefined

    固定區域高度



    /固定寬

    固定彈出框寬度



    /固定百分比

    固定圖形所占頁面的百分比



    /固定邊距

    固定邊距


    /固定比例(Fixed Ratio)

    undefined

    固定模塊寬高比



    /等分分布

    undefined

    等分分布


    /范圍內居中

    undefined

    在標識的范圍內居中分布





    (三)標注實例

    因此方案尚未落實到實際項目中,因此在這里以網易云音樂為例,按新的標注方案進行剖析說明。


    例一




    例二



    undefined

    例三



    例四




    五、總結

    文章內容更多偏向指導設計師如何規范設計方法,同時創造了幾種標注語言(FR、ED、AC等)。后期組織設計和開發同學一起就此方案進行交流討論,給大家普及這種設計和標注方法,讓設計師和開發能夠就組件封裝和標注語言的方案達成共識,方便后期協作,提高工作效率。同時聽取多方觀點,對此文檔進行不斷優化完善。

    像看電影般的酷站:Oat the Goat

    用心設計

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


    這是一個以故事形式來展現網站:Oat the Goat,動畫很有感覺,雖然小編目前的水平還做不出這類網站,但看看也可以增加點靈感、閱歷,原來網站還能這樣做的,一個網站,一個溫暖的故事,來一起欣賞電影般的酷站,Enjoy!

    網站名稱:Oat the Goat
    網站地址:http://oatthegoat.co.nz/

    (請在PC端欣賞,瀏覽該網站時記得打開聲音哦~)

    故事是從一只羊咩咩的歷險開始,他翻山越嶺,途中遇到一些困難和遇到困難的小伙伴們,接著一起去克服,然后越來越多的小伙伴們一起去冒險,經過重重險阻,最終…… (還在讓大家自己欣賞才有 Feel 的)

    所有的畫面非常的漂亮,就像在看電影一樣,同時網站還帶有一至交互體驗,讓用戶去選擇。

    截圖:羊咩咩遇到第一個有困難的小伙難了哦,我們繼續看看……

    截圖:要選擇你要怎么做了

    故事結局如何?請自行觀賞,同時您可以在下方評論處說出你的想法:)


     


    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

    運營與美工都要知道的落地頁轉化技巧

    鶴鶴

    提高落地頁轉化的技巧,運營與美工各自要做些什么

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 日韩精品欧美亚洲| 无码国产精品一区二区免费vr| 无码精品蜜桃一区二区三区WW| 国产精品666| 亚洲av永久无码精品秋霞电影影院 | 成人午夜精品亚洲日韩| 国产精品视频一区二区三区四| 亚洲人成国产精品无码| 久久久久99精品成人片| 国内精品久久久久国产盗摄| 久久777国产线看观看精品| 97久久精品无码一区二区天美| 亚洲AV无码国产精品色午友在线| 亚洲国产精品激情在线观看| 久久精品中文字幕有码| 精品国产一区二区三区AV性色| 国产精品高清免费网站| 99精品欧美一区二区三区| 国产在线不卡午夜精品2021| 51午夜精品免费视频| 国产精品福利自产拍在线观看 | 麻豆国产在线精品国偷产拍| 亚洲国产精品无码久久| 日韩精品无码一区二区三区 | 人妻VA精品VA欧美VA| 久久精品国产亚洲Aⅴ蜜臀色欲| 精品一久久香蕉国产线看播放| 国产精品H片在线播放| 国产成人久久精品二区三区| 91久久精品国产91性色也| www亚洲欲色成人久久精品| 国产精品视频免费一区二区| 国产精品女同一区二区久久| 精品久久久久一区二区三区| 久久久99精品成人片中文字幕 | 日韩精品专区AV无码| 人妻少妇精品无码专区二区| 精品无码人妻夜人多侵犯18| 99re6这里有精品热视频| 国产精品一在线观看| 成人精品一区二区三区电影黑人|