How to make a high-fidelity personal website with Axure? More and more people want to create their own personal websites, share their usual work summaries and collections, and organize them into their own personal websites, which can not only help peers learn from each other, but also reflect their own abilities. I made a personal website with axure. Take this website as an example, let's see how to make a high-fidelity personal website with Axure! If the post-maintenance is frequent, it is recommended to develop the website normally, and a background is needed for future maintenance. Axure's website is only suitable for small and simple websites. 1. Comparison between ordinary website development process and axure website. 1. Normal process. 2.axure production process. 2. What kind of personal website is not suitable for axure? 1. needs background maintenance. The so-called backstage maintenance refers to the need to develop a backstage in official website and upload new articles, new content and other information through the backstage every day. Axure can only show the effect, so Axure is not suitable for making a website in this scenario. 2. There are many pages and contents. First of all, the html file exported by axure's website is relatively large, which is much larger than the website developed by the normal front end. If the whole website has many pages, or a single page contains more content/pictures. The website is slow to load, so axure is not suitable for making websites in this scenario. 3. There are complex dynamic effects and interactions. At present, most complex actions and interactions are done with h5 and css3. In the past, we may also see the actions done by flash or AE on the website. At present, most of them are implemented by converting the front-end into code with flash and AE. Let the website browse more smoothly. If you add complex dynamic effects and interactions to axure, it will definitely affect the loading speed of the website, thus greatly reducing the browsing efficiency of the website. 3. Explain the difficulties in making axure websites. 1. Overall size control. The effect of this website is that the width of the content area is fixed and the background width is adaptive. (1) Width of the content area. Considering the mainstream display resolution, I set the width of the content area to 1200px. All contents and pictures should be within 1200px. You can pull a reference line on the page to the position of abscissa 1200. When designing, you can start from the far left, leaving no room for the left. Next, we will discuss the method of page centering. (2) The whole page is centered. The reason why the previous article said that you can't leave spaces is because we want to set the page to be centered. Select Project-Page Style Editing, and then select the second option in the page layout. When this option is selected, the page will remain on the far left when important official drawings are made, and the whole page will be displayed in the center when previewed by the browser. (3) Adaptive background width. If the background color of a page on the website is the same, click directly on the blank space of the current page, and then select Style-Background Color to select the color you need. If different modules of a page have different background colors, then we need to use dynamic panels to realize it. First, pull a dynamic panel, set the height to the height you need, and the width is optional. However, in order to add content to this module, it is suggested that the width should be the same as the width of the web page content, such as 1200px. Then design the background color you need in the style, and then check the width 100%. After previewing in the browser, the background color of the module will be adjusted according to each resolution. 2. navigation. My navigation effect is fixed at the top of the browser. The reason why it should be fixed at the top of the browser is because when there are many pages, users can directly see and operate navigation by scrolling to the bottom. Manufacturing process: (1) pull a dynamic panel, the navigation height is the height of the dynamic panel, and the width is pulled to 1200px. (Width must drop the width of the content area, because the navigation content should be placed in the dynamic panel) (2) Set the background color of the dynamic panel (that is, the navigation background color), and check the width 100%. (3) In the properties, select Fixed to Browser, and select Fixed to Browser window, horizontal and vertical. Always keep the bottom at the top. If there is nothing else to cover the navigation, please check. There is a QR code to be covered on the right side of my navigation, so mine is not checked. (If it is not checked, pay attention to putting the navigation dynamic panel at the top when designing all pages. Navigation text: Navigation text needs to be placed in a dynamic panel, and the text needs to have three states: current page state, mouse hovering state and normal state. 3. Banner processing. The picture of the banner is the biggest picture of the whole website. It is not recommended to put banner pictures directly into axure file, which will not be adaptive and affect the loading speed. Production technology of banner with solid color background: Similar to the above teaching, dynamic panel is used to realize the self-adaptation of banner background color. Try to type with an axe and use fewer pictures. The picture of the banner needs photoshop processing, and finally it is saved in png format with transparent background. Then pull the picture into the axure file. Production process of non-physical background banner: the banner background needs to be decorated into a very wide picture, and set to 5000px if possible. Select background picture-import picture in dynamic panel style. Check the width of 100% in the attribute. Try to type with an axe and use fewer pictures. (If necessary, the text can be processed into a background image and imported) 4. The effect of the button. All clickable graphic buttons and text buttons need to have three states: normal state, mouse hovering state and mouse pressed state. Set the effects of mouse hovering and mouse pressing in the property interaction style settings. 5. The function of QR code. The effect of my QR code is that the mouse hovers over the QR code icon on the right side of the navigation, and the QR code is pushed out from top to bottom, and the mouse leaves and takes back the QR code from bottom to top. Production process: (1) Pull a QR code picture in the dynamic panel and put it under the icon. (2) Select Fixed in the browser, horizontally centered (adjust margins according to the size of the website), and vertically fixed. Check to always keep the top. (3) Add two events to the QR code icon in the navigation dynamic panel, as shown in Figure 6. Jump to a link outside this website. There are some articles, recommendations and other modules on the website. After clicking, we jump to a link that is not on this website. We need to add click events to clickable areas, link to external links and open them in a new browser window. The specific operation is as follows: Fourth, matters needing attention. 1. Insert pictures and text as little as possible. For example, the text on the banner, the various text recommendations inside, try not to put it out in the form of pictures. Try typesetting with axure. 2. Pay attention to details. Since it is high fidelity, it can't be as rough as low fidelity, and the font, size, spacing, color and other details of the whole website. Pay attention to details such as ui design. 3. Unified interactive effect. Clickable areas, such as articles, should change when the mouse hovers, such as external lighting, strokes and other effects. According to the design prototype, give users timely feedback every operation. 4. Image compression. Try to compress every picture you use without degrading the image quality. 5. Buy a domain name. You can choose which is cheaper from Tencent Cloud and Alibaba Cloud. Try to choose common domain name suffixes, such as cn and com. The first letter can be selected by Pinyin, or spelled by your own name. 5. Publish online. This is how to make a high-fidelity personal website with Axure. If you want to learn more Axure tutorials, you can come. Perfect curriculum system: from software introduction to classified tutorials, from theoretical knowledge to actual combat in the workplace, an integrated learning and content service system has been built.