目次
回复内容:
ホームページ ウェブフロントエンド H5 チュートリアル 請用過的朋友講一講,Adobe Edge Animate,Reflow,Code,Inspect和Fonts有什麼區別和聯繫?相比FW有哪些進步?

請用過的朋友講一講,Adobe Edge Animate,Reflow,Code,Inspect和Fonts有什麼區別和聯繫?相比FW有哪些進步?

Jun 07, 2016 am 08:44 AM

回复内容:

FW是MacroMedia的远古遗产,自从MM被Adobe收购后就逐渐被干死了
老用户或许知道FW身上的诸多特性,在几乎10年前就很有远瞻性:
例如:元件(Symbol) 对象模式(object) CSS面板读取(CSS Pannel) 页面(artboard)等
这些东西在日渐更新的Sketch身上逐渐凸显出来

反倒是Adobe不断从他这里移植功能到自己的儿子上却偷鸡不成蚀把米
看看那个臃肿的PS吧 虽然声称慢慢在做着符合webdesign的更新方式
却因为庞大的架构而留下诸多诟病之处,许多类似FW的天生功能却不得不靠第三方Plugin完成

Adobe Edge Animate,Reflow,Code,Inspect和Fonts这些是做页面的
FW是出UI和原型用的,没有可比性,何谈进步

进步的东西在多年前已经出现了,只是某呆比顾着赚钱只给亲儿子捧份子罢了
当续子的风光比亲儿子还要高的时候,当爹的怎么可能脸上有光呢

利益相关:FW 12年使用者 前几者侧重画出一个网页,FW是画出一个设计稿 个人废话比较多,望题主见谅……

题主想问的是Adobe的Edge系列吧……

首先要说的是,这一套工具在国外是面向web designer的,众所周知,鬼佬做事总是更那么专业一点(并没有黑的意思……),国外的很多设计师除了有专业的设计水准以外,也要负责页面的实现,包括动效啥米的,甚至到使用模板框架来做数据填充之类,而目前国内碍于文理科观念,很多前端实际上都是从后端转职,他们更加偏向于做技术而对视觉方面的敏感度比较低,负责设计的通常都是专门的美工/UI之类(不过以后肯定会有更多设计代码一把抓的前端~),所以可以说这套工具目前在国内应用场景比较窄……

然后关于题主的问题:

Edge Animate——如楼上所说这是一个生成动画的工具,众所周知Flash由于性能和兼容性问题基本上很难应用在所有设备上,An就是使用html+css+js,并且结合新标准的一些特性来生成动画,以适应更多的场景

Edge Reflow——响应式设计工具。其实感觉国内响应式的网站还是不多的,除了一些一流的设计外包和科技感爆棚的互联网公司,响应式的网站还是比较稀奇的……另外也不是挂个bootstrap上去就是响应式了……那也太简单了…………

Edge Code——代码编辑器,嘛这也是我目前用得最多的,它的核心其实就是Adobe的一个开源项目Brackets,我目前基本只用它和webstorm。这个编辑器非常轻量,UI顶赞,而且插件齐全(emmet,前端常用的语法高亮,噶普/管特,命令行等等),最强悍的是它的即时预览功能,和Dw那种蹩脚的预览完全不同,而是直接在浏览器中预览,你再也不用为了对其几个像素疯狂地切换刷新了……总之推荐度5星

Edge Inspect——插件形式,和web inspector,firebug差不多,不过……它有移动版!是的,就是这么无情。

Edge Web Fonts —— 如上所说,这玩意就是powered by typekit……老外做网站的时候总会喜欢用自定义字体,我也会想用futura,avenir,lato之类酷炫的字体呀!不过比较可惜的是限于中文的字形原因,并且国内网站大多数都采用12,13px左右的正文字体,这样大小的字体在win下简直没得选择……所以自定义字体在国内基本很少见。除非你网站的字体设计比较大(如简书这种)或者只面向移动端或者苹果用户(有这么奇葩的需求吗?),那么考虑下自定义字体也不错的!此外Typekit目前只有一款中文字体(思源黑体),并且它的国内访问速度你也不会想用的。

最后其实还有个Phonegap Build——如果你知道Phonegap,现在应该叫Cordova?那应该知道这是干啥的了。它其实是个云应用,帮你把你的代码快速打包部署分发,额,没试过有空试试看吧。

——相比FW有哪些進步?

FW就是个画图软件喂!貌似是个叫media啥啥公司开发的,然后被逗比收购后就改姓逗比了,我对这东东不太了解,不过它确实就只是用来画图的,而Edge更加偏向于将你的设计实现为代码。所以虽然题主说进步,我觉得这俩没啥可比性。

最后,如果题主是个偏设计型的前端或者立志当个设计型前端的话,那么高高兴兴地用吧! 提问之前可以先去官网看一下宣传页。
Edge Animate——不用编写代码输出HTML5动画。
Reflow——不用编写代码制作响应式页面
Code——页面源码编辑工具
Inspect——页面元素检查工具
Fonts——这是什么鬼?你想说TypeKit吗?在线字体解决方案。

Fireworks——上世纪网页三剑客之一,当时主要用来绘制网页中的小图标,边框等装饰性元素。随着CSS的发展用户已经少很多了。 Adobe Edge Animate,Reflow,Code,Inspect和Fonts的区别和联系还在研究中,以后补充,但是作为一个长期使用FW的UI设计师来说,以上这些和FW根本就不是一类软件,上面这些虽然可以直接用来生成网页,但是Adobe开发这些软件的主要目的似乎不是用来设计UI高保真效果图的。所以更谈不上相比FW的进步了……
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

H5コード:アクセシビリティとセマンティックHTML H5コード:アクセシビリティとセマンティックHTML Apr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5は何を参照していますか?コンテキストの探索 H5は何を参照していますか?コンテキストの探索 Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

H5:Web標準とテクノロジーの進化 H5:Web標準とテクノロジーの進化 Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5コード:Web開発者向けのベストプラクティス H5コード:Web開発者向けのベストプラクティス Apr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5:ツール、フレームワーク、およびベストプラクティス H5:ツール、フレームワーク、およびベストプラクティス Apr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

H5はHTML5の速記ですか?詳細の調査 H5はHTML5の速記ですか?詳細の調査 Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語 H5およびHTML5:Web開発で一般的に使用される用語 Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

HTML5の遺産:現在のH5の理解 HTML5の遺産:現在のH5の理解 Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

See all articles