developer tip

일반적인 웹 UI 스타일

optionbox 2020. 9. 4. 07:11
반응형

일반적인 웹 UI 스타일


다음날 웹 앱의 프로토 타입을 클라이언트 중 한 명에게 보여줘야합니다. 문제는 제가 CSS를 잘하지 못하고 무엇보다도 제가 얻은 결과에 거의 만족하지 않는다는 것입니다.

비즈니스 로직을 코딩하는 것은 어렵지 않지만 UI 디자인은 내 시간의 80 % 이상이 걸립니다. 나는 숨 막힐듯한 것이 필요하지 않고 깨끗하고 멋지고 표현 가능한 환경이 필요합니다.

대체 텍스트

이것은 내가 겪어 온 반복적 인 문제입니다. 웹 UI 개발이 덜 기본 스타일을 가질 수 있기를 바랍니다. Visual Studio 또는 iPhone SDK 와 유사한 접근 방식 이 나에게 매우 유용 할 것입니다.

Balsamiq Mockups만든 위의 모형 은 좋은 예입니다. 가장 일반적인 모든 "구성 요소"를 사용할 수 있으며 무엇보다도 좋은 스타일을 선택할 수 있습니다.

웹에 이와 같은 것이 있습니까? 중립적이면서도 멋진 CSS 또는 자바 스크립트 UI 프레임 워크?


지금까지의 옵션 :

CSS 전용 UI 프레임 워크가 있는지 알고 싶습니다.

내가 찾은 웹 UI 라이브러리의 아주 좋은 목록이 페이지를 하지만, 대부분은 (적어도 좋은 것들)은 순수 CSS 나 JS의 모든 동등하게 좋은 대안이있다, 자바 특정 것 같다?

추신 : 저는 AJAX, 효과, 행동 등에 관심이 없습니다. 제 주된 관심사는 스타일입니다.


모든 제안에 감사드립니다!

제안 된 모든 UI 라이브러리를 매우 신중하게 고려한 후 ExtJS와 Qooxdoo가 내 요구에 가장 잘 맞는다는 결론에 도달했습니다. jQuery UI는 유망 해 보이지만 적은 양의 요소 만 제공합니다.

CSS 전용 라이브러리에 관한 한 BlueTrip / BluePrint 및 tambler가 제안한 테마가 최고라고 생각했습니다. 그 외에도 Flex와 Napkee도 탐험 할 가치가있는 것 같습니다.

지금 ExtJS를 배울 시간입니다! =)


아무도 언급하지 않았다는 것을 믿을 수 없습니다.

http://www.extjs.com/

상업용 js 프레임 워크이지만 꽤 저렴하며 멋진 UI를 쉽게 만들 수 있습니다. jqueryui보다 훨씬 더 완전한 요소 집합이 있으며 전체 앱을 만들도록 설계되었습니다. 조금만 가지고 놀았지만 지금까지 정말 좋아합니다. 개인적인 용도로는 무료입니다.

EXT로 개발 된 완전한 UI에 대해 정말로 느끼고 싶다면 다음 URL을 시도해보세요.

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html


레이아웃을위한 960gs스타일링을위한 jQuery-UI 의 조합 은 아마도 당신이 추구 하는 것일 것입니다.

960gs 대신 청사진 CSS 프레임 워크를 고려할 수도 있습니다 .


dojodijit 를 사용하는 것은 어떻습니까?

Dijit는 위젯과 요소를 만드는 빠른 방법입니다. 또한 수정하기 쉬운 3 개의 기본 테마가 제공됩니다.

여기 에 다른 위젯의 좋은 목록


UI 디자인 전문 으로 하는 사람과 짝을 이루세요 .

비즈니스 로직을 더 잘 다룰 수 있다면 비즈니스 로직을 마스터하는 데 시간을 투자하는 것이 좋습니다. 이를 위해서는 프레젠테이션에 탁월한 다른 사람과 소통하는 방법을 배워야합니다. ( xmljson 은 일반적인 수단입니다)

비즈니스 로직과 프레젠테이션은 매우 다릅니다. 보기 좋을뿐만 아니라 직관적이고 사용하기 쉬운 시스템을 설계하는 것은 매우 어렵습니다. 복잡한 응용 프로그램의 내부 작업을 설정하는 것만 큼 어렵고 시간이 많이 걸립니다.

A good interface is not as simple as including a css framework.

I consider myself to be a more 'creative' programmer who does excel in presentation. I happened to be lucky enough to cross path's with someone who was, first of all... very motivated, and second of all very good at 'business logic'. He had a lot more experience planning and implementing complex systems, while I mainly have been focusing on interface design.

If you are more productive doing system architecture, planning, developing, whatever... you should push yourself in that direction. While solo development projects can be rather fulfilling, I view it as inefficient. It is very rare that someone possess skills to develop top-level applications solo.

The challenge is finding someone who you work well with.


Check out Google Web Toolkit. It has a pretty clean default look. They have examples . In particular, their Showcase example demonstrates all of the available widgets and the css styling used to achieve the look.


There are a few frameworks aimed at (G)UI Design; Qooxdoo, JQuery UI and MochaUI being a few of them (although the last is more a proof-of-concept than a usable framework). These frameworks usually offer a variety of JS-powered elements (form elements, such as input fields and submit buttons, but other elements like tabs as well). However, it will still be up to you to position these elements, and perhaps style them, to your liking.

Perhaps familiarizing yourself with a CSS framework (such as 960GS) might complement the above JS UI Frameworks.

(As a personal disclaimer; I have very little experience with any of the frameworks mentioned above. But I'm sure either Google or SO can provide answers I can't.)


This won't help you out for your current project, but it's worth considering for future projects. After spending many years creating GUI applications in HTML 4 and constantly wrestling against the limitations of CSS and HTML, I thought I'd try out Adobe Flex. What an improvement!

Rather than faking a tabbed page control or data grid, with Flex or Silverlight, your markup can simply specify a tabbed page control or data grid. And the frameworks come with default styles that are boring but not at all bad. I'm not saying these completely replace HTML, but if you need widgets and GUI layout, I believe they're a much better alternative.


You might consider browsing the following site:

http://themeforest.net/category/site-templates/admin-skins

There are several "Administrative" themes available for purchase here that may suit your needs.


wireframe mockups like that are a brilliant way to start.

Having used most of the UI framewroks discussed here, I'd liek to steer you towards jQueryUi for the following reasons:

  1. jQueryUI CSS framework takes care of the consistent and cool looking CSS for you (it's really easy - just make some markup and apply the classes)

  2. jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.


If you are targeting modern, non IE, browsers, then you should check out Sproutcore. For mockups I use mockingbird.


A relatively new PHP framework specifically designed for development of UI-focused software. Elements you have here including Tabs, Filters and Grids are included and will take you about 20 lines of code to implement.

http://agiletoolkit.org/


Have you tried Axure? It's a tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.

It works in a similar way to Balsamiq, but it allows you to export your wireframes/prototype as HTML, CSS and Javascript.

You can then upload this to a server or run it on your computer as a working example.

You can create forms, links, tabs, rollovers, Javascript effects.


If you are already using Balsamic Mockups for your prototypes then you should consider Napkee. To quote the website "Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button."


I ran into this awhile ago, and couldn't find anything, so I took it as an opportunity to learn css. But since then it seems great strides have been made towards this subject.

  • Summarizing your problem, there is a wikipedia page.
  • There is yaml-css, which takes yaml and turns it into css
  • There is baseline, but it assumes some css knowledge.
  • I'd also suggest looking at Adobe's Dreamweaver. They have a lot of css and style generation tools which produce very readable and w3c compatible code.

I hope that helps.


A combination of 960gs for layout and jQuery-UI or Jquery tools is great i use them almost in every project but i'd like to add to http://easyframework.com/ although its not a business friendly so make sure to check out its license but i like it


I recently discovered a nice website called iplotz.com where you can create a mockup of your application/website/project online without installing anything. It also has most of the common controls, along with much more features for managing thw whole project and sharing it with others online.

I must admit, i didn't try it yet myself, but i looked at it a bit and it seems pretty cool. I'll probably be using it soon enough.


Sass looks like it has potential as a way to mitigate some css headaches.


I like to add Bootstrap it's intuitive, and powerful front-end framework for faster and easier web development.


I like RocketCSS. Nice clean design, give it a go.

참고URL : https://stackoverflow.com/questions/2131384/common-web-ui-styles

반응형